project-design

项目设计技能

生成可用于生产环境、视觉风格鲜明的 Web 界面。每个页面都必须看起来像是由专业人士设计的，而不是由 AI 生成的。

使用时机

每当你为任何视觉类 Web 输出生成 HTML/CSS/JS 时，都适用此技能，包括仪表盘、着陆页、Web 应用、工具、作品集或任何其他页面类型。

参考文件

文件	阅读时机
references/aesthetics.md	构建配色方案、选择字体、设计布局时——了解做出设计决策的方法
references/components.md	构建 UI 组件时——导航、卡片、表格、按钮、表单、主视觉区域、行动号召
references/animations.md	添加动态效果时——滚动显现、悬停效果、模态框、抽屉、页面加载序列
references/charts.md	创建图表时——Chart.js/ECharts 设置、图表类型选择、模拟数据生成、仪表盘布局

---

优先级覆盖：用户设置优先

如果用户（或设计简报）明确指定了任何设计偏好，该偏好优先于相应的 Design Dial 结果。优先级顺序如下：

1. 用户指定的设置（最高优先级）——明确提出的要求，例如“使用深色模式”“用蓝色”“使用 Playfair Display 字体”“我想要极简风格”
2. Design Read 推断——根据简报内容和上下文推断出的信号
3. Design Dials（最低优先级）——基于时间的随机选择，仅用于用户未指定的维度

实际运作方式：

• 用户说“给我做一个深色作品集” → Surface 锁定为深色，跳过 Surface 拨盘。其他拨盘（Accent、Typography、Family）仍随机选择。
• 用户说“用绿色和衬线字体” → Accent 锁定为 Green，Typography 锁定为 Serif。Surface 和 Family 仍随机选择。
• 用户没有提及设计要求 → 4 个拨盘全部随机选择（默认行为）。
• 用户说“做得像 Apple 的网站” → 这是完整的设计方向。跳过所有拨盘，根据参考推断美学风格。

**绝不质疑用户的审美。**如果用户想要奶油色背景上的紫色渐变，就把它做好。在 Design Dials 输出行中记录用户覆盖：

Design Dials：Surface=USER(Dark) · Accent=3(Orange, #e87040) · Type=USER(Serif) · Family=2(Editorial) → Playfair Display

---

步骤 0：Design Read（必须执行）

编写任何代码之前，先默默分析设计简报，并输出一行 Design Read：

Design Read：[页面类型] · [受众] · [氛围词] · [美学流派] · [浅色/深色/染色]

如何推断每项信号：

信号	来源	示例
页面类型	简报中明确说明或根据内容推断	SaaS 仪表盘、编辑类博客、开发者工具、作品集
受众	谁会使用它？	企业买家、独立开发者、Z 世代消费者
氛围	一个概括情绪基调的词	冷峻、活泼、严肃、温暖、粗粝、奢华
美学流派	页面所属的设计传统	瑞士/国际主义、新粗野主义、编辑风、柔和科技风、工业风
表面	浅色、深色或染色背景	带蓝色调的深色、暖调灰白、纯白

Design Read 为之后的所有决策奠定基调。如果两个选择发生冲突，以 Design Read 为准。

第 0.5 步：场景句子（深色／有色表面时必须填写）

如果你的表面拨盘（第 1 步）选中深色或有色方向（索引 5 或 6），在选择任何颜色之前，必须先写出一个场景句子。这能让深色调色板扎根于真实环境，而不是默认采用千篇一律的蓝黑色。

场景：[谁]在[何处]使用这个[什么]，处于[什么光线]下，氛围[如何]

示例：

• “一位投资组合经理在哑光黑色的升降桌前查看持仓，只有一盏台灯，专注而警觉”
• “一位音乐制作人在灯光昏暗、装有紫色 LED 灯带的录音室里创作，沉浸其中”
• “一位研究人员在黄昏时分的大学图书馆里，头顶是暖色灯光，神情沉思”
• “一位调酒师在胡桃木吧台后用平板查看库存，琥珀色吊灯照明，不慌不忙”
• “一位建筑师在混凝土阁楼里查看蓝图，阴天的光线透过落地窗照进来，严谨细致”

场景句子决定深色表面的色调：

• 紫色 LED 灯的录音室 → 深紫色调，而不是蓝黑色
• 黄昏时分的图书馆 → 暖炭灰色，而不是蓝黑色
• 配有台灯的升降桌 → 中性近黑色，搭配暖色点缀
• 亮着琥珀色灯光的胡桃木吧台 → 暖棕黑色
• 有日光照入的混凝土阁楼 → 冷灰色，而不是蓝黑色

禁止使用的默认场景：“开发者在黑暗房间里看显示器”——这是 AI 的默认场景，每次都会生成相同的蓝黑色。请具体描述，避免千篇一律。

完整的场景与色调对应表见 references/aesthetics.md § 深色表面色调指南。

---

第 1 步：旋转设计拨盘（必须完成）

你没有之前生成内容的记忆；如果不加以约束，每次都会趋同于相同的深蓝卡片布局。为避免这种情况，在编写任何代码之前，必须旋转四个独立拨盘。这些拨盘会限定设计方向，但在该方向内仍保留充分的创意自由。

如何旋转

获取当前 UTC 时间，并计算四个索引：

dial_A = UTC_minute mod 8                → Surface
dial_B = (UTC_minute + 3) mod 7          → Accent Hue
dial_C = (UTC_hour) mod 6               → Typography
dial_D = (UTC_hour + UTC_minute) mod 12  → Aesthetic Family

拨盘 A：表面（mod 8）

索引	方向	描述
0	暖色浅色	带暖色底调的灰白色（接近奶油色，但不是普通的奶油色——要增添个性）。浅色卡片，深色文字。
1	冷色浅色	白色或带蓝色调的白色。清爽、纯净、通透。想象北极，而不是普通的白色。
2	纯白	干净的 #ffffff 或 #fafafa。对比度最高，不带色调。交由排版和点缀色发挥作用。
3	有色浅色	带有微妙色调的浅色背景——淡鼠尾草绿、浅薰衣草紫、柔和桃色、冰蓝色。既不是白色，也不是奶油色。
4	浅色搭配跳色	白色／浅色基底，搭配一处鲜艳色彩区块或元素（彩色主视觉、彩色侧栏、彩色页脚）。整体以浅色为主。
5	有色深色	带有非蓝色色调的深色背景——尝试深绿色、酒红色、炭棕色、深紫色或板岩橄榄色。不要使用 AI 总会选的 #0a-#0f 蓝黑色。用场景句子确定色调。
6	中性深色	真正的深色——近黑色，不带任何色调。纯 #111 或 #0f0f0f。单色表面，让点缀色成为焦点。使用场景句子。
7	混合	浅色页眉／主视觉 + 深色内容区，或浅色／深色区块交替。双色调页面。

拨盘 B：点缀色相（mod 7）

索引	色相系列	建议范围（自行挑选具体色调）
0	暖红色	朱红色、陶土色、铁锈色、砖红色——不要使用普通的 #ef4444
1	金色／琥珀色	金盏花色、蜂蜜色、藏红花色、黄铜色——温暖而浓郁
2	绿色	鼠尾草绿、橄榄绿、翡翠绿、青柠绿、薄荷绿——选一种，不要选青绿色
3	橙色／珊瑚色	橘子色、桃色、鲑鱼色、焦橙色
4	粉色／品红色	玫瑰色、紫红色、亮粉色、灰粉色——鲜艳或柔和皆可
5	紫罗兰色／紫色	薰衣草紫、葡萄紫、李子紫、电光紫——大胆使用
6	冷蓝色	钴蓝色、天青色、天空蓝、钢蓝色——但不要使用普通的 #3b82f6 或 #6366f1

Dial C：字体排印（mod 6）

Index	风格	字体示例（任选一种——这些仅供参考，并非唯一选择）
0	衬线	Libre Baskerville、Newsreader、Lora、Playfair Display、Cormorant Garamond、Source Serif 4
1	几何无衬线	Instrument Sans、Geist、Sora、Urbanist、Figtree、Albert Sans
2	人文无衬线	IBM Plex Sans、Nunito Sans、Atkinson Hyperlegible、Lexend
3	等宽	JetBrains Mono、Space Mono、IBM Plex Mono、Fira Code
4	展示／装饰	Fraunces、Bricolage Grotesque、Clash Display、Cabinet Grotesk
5	板衬线／机械风格	Roboto Slab、Zilla Slab、Bitter、Arvo

Dial D：美学风格（mod 12）

Index	风格	表面倾向	字体排印	点缀风格	布局
0	瑞士／国际主义	纯白或浅灰	几何无衬线	单一高饱和色，稀疏点缀	12 列网格，严格对齐
1	新粗野主义	白色或亮色	系统等宽字体或粗体无衬线	黑色 + 一种醒目颜色	错落网格，粗边框
2	编辑／杂志风格	米白色（非奶油色）	展示衬线字体 + 正文无衬线字体	柔和、富有编辑感	不对称，留白充足
3	柔和科技风	浅色调	圆润无衬线	柔和渐变	圆角卡片，柔和阴影
4	工业／实用主义	近黑色或混凝土灰	等宽字体	单一霓虹色或警示色	密集网格，不加装饰
5	装饰艺术／几何风格	深色（海军蓝、森林绿）	展示衬线字体或几何无衬线	金色、黄铜色	对称，几何图案
6	有机／自然风格	大地色系	人文无衬线	温暖、自然	流畅、不规则的形状
7	复古未来主义	带色调的深色	展示无衬线字体或像素字体	霓虹、全息效果	不对称，分层
8	极简／禅意	纯白，留白最大化	细体无衬线（字重 300-400）	单一柔和色调，若隐若现	极致留白，元素精简
9	数据密集／任务控制中心	深色或中性色	等宽字体 + 紧凑无衬线	状态色（绿／琥珀／红）	多面板、密集网格，不浪费空间
10	俏皮／玩具风格	明亮、高饱和背景	圆润活泼的无衬线字体	多种醒目颜色	不规则、重叠、旋转的元素
11	奢华／精致	深黑色或深色	细衬线字体或优雅的无衬线字体	金属色（金、银、铜）	间距宽松，元素精简，字号较大

注意：美学风格是一种倾向，而非硬性约束。它能引导整体设计语言，但对于具体维度，表面／点缀／字体排印转盘优先。根据该风格确定布局、间距节奏、边框处理和整体视觉语言。

输出你的转盘结果

编写任何代码之前，先输出：

设计转盘：表面=index · 点缀=index · 字体=index · 风格=index → [具体字体选择]

示例：

设计转盘：表面=2（有色调的深色，酒红） · 点缀=1（金色，#d4a030） · 字体=0（衬线） · 风格=5（装饰艺术／几何风格） → Libre Baskerville

规则

• 遵循你的拨盘设置。 不要因为另一种组合“感觉更安全”就擅自更改。
• 在方向范围内发挥创意。 拨盘设定方向（例如，“暖色浅色表面 + 金色点缀 + 衬线字体 + 装饰艺术风格家族”），但具体色调、间距、布局、动画和组件样式由你决定。
• 布局不由拨盘决定——根据内容类型选择最佳布局（仪表盘用侧边栏，落地页用全宽布局，多指标视图用便当盒布局，等等）。美学家族会影响布局的风格（例如，严格网格还是错落网格），但不决定布局类型。
• 拨盘可产生 8×7×6×12 = 4032 种组合。这是有意为之——组合足够丰富，能让连续生成的页面截然不同。
• 在暖色浅色表面上，用衬线字体和有机／自然风格家族设计加密货币仪表盘，确实不拘一格——这正是重点。尽情发挥。

---

第 2 步：精心构建

实现可正常运行的 HTML/CSS/JS，并满足以下要求：

• 达到生产级水准：HTML 简洁、语义清晰。CSS 组织有序，并使用自定义属性。JS 功能完善。
• 视觉醒目：设计观点鲜明，不要使用通用模板。
• 风格统一：每个元素——字体、颜色、间距、动效——都服务于同一设计方向。
• 响应式：在宽度为 375px 的移动设备上正常显示，并能优雅地堆叠布局。

必需元素（不是模板——每次都要重新设计）

每个生成的页面都必须包含：

1. 正确的 DOCTYPE、charset、viewport 元数据
2. 通过带有 preconnect 的 <link> 加载 Google Fonts
3. 在 :root 中将所有颜色定义为语义化 CSS 自定义属性
4. 一个可禁用动画的 prefers-reduced-motion 媒体查询
5. 盒模型重置和字体平滑处理
6. 入场动画方案（每个项目选择一种，并在不同项目间变换）：
   • 滚动显现——IntersectionObserver 在元素进入视口时触发淡入／滑入效果
   • 页面加载时依次显现——元素在初始加载时依次进入，不依赖滚动
   • 状态驱动的过渡——元素根据用户交互在不同状态间过渡（收起→展开、隐藏→显示），不由滚动位置驱动
7. 浅色／深色主题切换（必需）——每个页面都必须支持浅色和深色主题，并提供切换按钮：
   • 在 :root（浅色主题）和 [data-theme="dark"]（深色主题）中将所有颜色定义为 CSS 自定义属性
   • 在页面页眉或导航栏中添加切换按钮（太阳／月亮图标）
   • 通过 prefers-color-scheme: dark 检测系统偏好，并将其设为初始默认主题
   • 将用户偏好存储在 localStorage 中，使其在页面重新加载后仍然生效
   • 表面拨盘决定默认／主要主题方向，但另一主题也必须经过完整设计
   • 实现细节请参阅下文的“主题支持”部分

不要复制固定的 HTML 骨架。应根据内容构建文档结构。

---

设计规则

字体排版

• 通过 Google Fonts <link> 加载字体（Google Fonts 上没有的字体可通过 CDN 加载）。始终加载 2 种或更多字重。
• 绝不要将以下字体用作主字体——它们是 AI 默认字体或 AI 反默认字体：
  • AI 默认字体：Inter、Roboto、Arial、Open Sans、Helvetica
  • AI 反默认字体（当被要求避开默认字体时，AI 会选择的字体）：Space Grotesk、DM Sans、Outfit、Plus Jakarta Sans、Manrope
  • AI 最爱的衬线字体（禁止用作默认字体）：Fraunces、Instrument Serif——这两种是大模型最爱的展示用衬线字体
• 如果样式预设指定了字体，就使用该字体。预设字体经过挑选，具有鲜明且多样的特色。
• 衬线字体使用规范：不建议在任何项目中默认使用衬线字体。“感觉有创意／高端／有编辑感”并不是选择衬线字体的理由——这是最常见的 AI 痕迹。仅在以下情况下可以使用衬线字体：(a) 品牌简介明确指定了衬线字体，或 (b) 美学风格确实属于编辑／奢华／出版物风格，并且你能清楚说明为何这款特定衬线字体适合这个特定品牌。其他情况下，展示字体默认使用无衬线字体。
• 每个页面最多使用 2 种字体。经过精心调整的单一字体，配合字重对比，通常胜过两种相互竞争的字体。
• 正文：至少 16px，行高 1.4–1.6（实际常见范围：Apple 为 1.47，Stripe 为 1.4，Notion 为 1.55），最大宽度 65ch。有些品牌会为正文添加细微的正字距：IBM 为 +0.16px，ElevenLabs 为 +0.15–0.18px——这种精细处理能让设计更专业，避免显得普通。
• 标题：使用 clamp() 实现响应式字号。展示文本应使用负字间距——85% 的主要品牌会在展示字号中使用负字间距（Apple 为 -0.28px、Vercel 为 -2.4px、Linear 为 -3px、Stripe 为 -1.4px、Intercom 为 -2.0px、Miro 为 -2.0px、MiniMax 为 -2.0px、Revolut 在 136px 字号下为 -2.72px）。AI 往往会完全忽略字间距。例外：SpaceX 使用 +1.6px 正字间距，营造工程化／工业风格。
• 字重多样性：不要默认所有标题都使用 600–700 字重。在 73 个主要品牌中，展示字体最常见的字重范围是 400–500（约占 45%）。IBM 和 ElevenLabs 使用 300（超细），Shopify 使用 330，Ferrari 使用 500，Runway 使用 400。仅约 15% 的品牌在展示字体中使用 700 或更高字重。可考虑使用较轻的字重（300–500），营造更精致、更具编辑感的氛围。
• 单字体规范：约 40% 的主要品牌在整个网站中只使用一种字体（通过不同字重体现层级）。HashiCorp、MongoDB、Miro、NVIDIA、Vodafone、Renault、Lamborghini 都使用单一的专有无衬线字体。不要认为必须使用两种字体——经过精心调整的单一字体，配合字重对比，往往胜过两种相互竞争的字体。
• 精确数值请参阅 references/aesthetics.md §「真实世界中的字体排版参考」，其中收录了 15 个以上主要品牌的数据。

颜色

• 在 :root 中将所有颜色定义为语义化 CSS 自定义属性。命名应体现用途，而非外观（例如“surface”“emphasis”，而非“light-gray”）。
• 从头构建配色方案——方法请参阅 references/aesthetics.md。
• 正文文本对比度 ≥ 4.5:1。大号文本 ≥ 3:1。
• 每页只使用一种强调色，并在各处保持一致。黑色 CTA 趋势：约 25% 的主要品牌（Expo、Intercom、Lovable、MiniMax、Miro、Ollama、Shopify）将纯黑用作主要 CTA 颜色——这是一种自信、富有编辑感的选择，适用于浅色和深色表面。
• 默认禁止：紫色／紫罗兰渐变、通用蓝色（#3b82f6）、AI 紫色（#8b5cf6、#6366f1）、AI 紫色-500（#a855f7）。例外：如果设计说明明确要求使用其中一种（例如，紫色本身就是品牌标识的一部分），请在注释中记录理由并验证对比度。
• 禁止使用的深色表面：#0a-#0f 蓝黑色范围（#0a0e1a、#0d1117、#0f172a、#111827、#1e1b4b）。这些是 AI 深色模式的默认色。请使用场景描述句和深色表面色调指南，选择非蓝色的深色表面。
• 默认背景禁止使用暖色中性色：奶油色、米色、沙色、亚麻色、象牙色、香槟色——任何低饱和度的暖色中性色（HSL 色相 30-60，饱和度 < 15%）。具体禁止的十六进制值：#f5f1ea、#f7f5f1、#fbf8f1、#efeae0、#ece6db、#faf7f1、#e8dfcb。这些是 2025-2026 年 AI 的默认配色。例外：仅当设计说明明确要求营造温暖感（例如，面包店、健康养生、手工艺）且你能说明为何其他表面都不合适时，才可使用。
• 禁止使用的高端感强调色：黄铜／陶土／牛血红色系（#b08947、#b6553a、#9a2436、#9c6e2a、#bc7c3a、#7d5621）和浓缩咖啡色文本（#1a1714、#1a1814、#1b1814）。这些是 AI “高端消费品”设计的默认配色。高端消费品设计需求的替代方案（轮换使用，不要重复）：
  • 冷调奢华：银灰色 + 铬色 + 烟灰色（可参考 Tesla、Apple Watch）
  • 森林：深绿 + 骨白色 + 琥珀色强调色（可参考 Filson、Patagonia）
  • 黑与棕褐色：纯正的近黑色 + 暖棕褐色，强烈对比，不用米色
  • 钴蓝 + 奶油色：饱和蓝色搭配单一中性色，不用黄铜色
  • 陶土色 + 石板灰：暖锈色搭配冷灰色，不用黄铜色
  • 橄榄绿 + 砖红 + 纸色：柔和的橄榄绿搭配砖红色强调色
  • 纯单色 + 点缀色：灰白色 + 近黑色 + 一种亮色强调色（电光蓝、翠绿、亮粉）
• 留意反默认的默认选择：蓝绿色／翠绿色已成为新的 AI 紫色（被要求避开蓝色／紫色时的首选）。暖琥珀色／金色正逐渐成为“有品位的替代色”。请注意进一步变化。

布局

• 2D 布局使用 CSS Grid，1D 布局使用 Flexbox。
• 间距系统：使用 4px 的倍数（8、12、16、24、32、48、64）。区块间距：真实品牌的主要区块之间通常留出 80-120px（在 73 个品牌中，96px 最常见）。Hero 区块通常使用 120px 以上的间距。AI 往往会把区块间距设得过小，只有 48-64px。
• 容器：max-width 在 1100-1400px 之间（灵活调整），使用自动外边距居中，并设置水平内边距。
• 使用 min-height: 100dvh，不要使用 100vh。
• 移动端：在 768px 以下，所有内容都堆叠为单列。
• 禁止重复区块布局：不得连续两个区块使用相同的布局类型（例如，两个居中的文本块、两个之字形图文组合）。从上到下检查所有区块。包含 8 个区块的页面至少要使用 4 种不同的布局类型。
• 克制使用眉题：眉题标签（标题上方的小写大写文本）——每 3 个区块最多使用 1 个。如果每个区块都有眉题，就没有哪个眉题能脱颖而出。
• 之字形布局上限：交替排列的图文区块最多连续出现 2 个。连续出现 2 个后，必须改用完全不同的布局。
• 禁止左右分栏标题：默认禁止使用“左侧大标题 + 右侧小段说明文字”作为区块标题布局。如果需要同时呈现标题和说明，将它们垂直堆叠（标题在上，正文在下，最大宽度为 65ch）。
• Bento 背景多样性：Bento 和功能网格区块不能全部使用白底白卡片并在卡片内放置文本。任何多单元格网格中，至少有 2-3 个单元格需要呈现真实的视觉变化：真实图像、符合品牌风格的渐变、图案或染色背景。
• 内容密度：每个区块默认采用以下内容结构：简短标题（≤ 8 个词）+ 简短副段落（≤ 25 个词）+ 一个视觉素材或一个 CTA。超出此范围的内容必须符合该区块的用途。

Hero 区块规范

• 适配视口：Hero 区块在页面加载时应填满视口，但不能让用户必须滚动才能看到首个 CTA。请在高度为 768px 的视口下测试。
• 内容堆叠规范：Hero 区块中的文本元素最多 4 个（例如：眉题 + 标题 + 副标题 + CTA）。超过 4 个会造成视觉杂乱。
• 顶部内边距上限：Hero 区块的顶部内边距不应超过 20vh。过大的顶部内边距会把内容挤到首屏以下。
• 避免默认居中：并非每个 Hero 都需要居中。请根据 Design Read 考虑左对齐、分屏或非对称布局。

CTA 规范

• 避免重复意图：同一页面不能有两个意图相同的 CTA（例如，不同区块中出现两个“开始使用”按钮）。每个 CTA 都应有不同的用途。
• 按钮对比度检查：主要 CTA 的按钮文字与按钮背景之间的对比度必须 ≥ 4.5:1。
• 禁止按钮文字换行：CTA 文字绝不能换成两行。如果出现换行，请缩短文字或加宽按钮。
• 每个视口只设一个主要按钮：在任意滚动位置，只能显示一个主要样式的按钮。

组件

• 详细模式请参阅 references/components.md。
• 卡片：border-radius 最大为 16px（绝不能达到或超过 24px）。在 73 个主要品牌中，最常见的卡片圆角是 12px（约占 35%），其次是 16px（约占 20%）。Meta 的 32px 和 Mastercard 的 40px 属于 Hero 级展示卡片中的罕见例外，不适用于标准内容卡片。使用轻微边框或阴影，不要两者同时使用。
• 按钮：设置明确的悬停状态和按下状态（scale(0.97-0.98)）。
• 表格：数字列使用 font-variant-numeric: tabular-nums。
• 状态：始终同时使用颜色和图标或文字，不要只用颜色表示。
• 加载状态：使用骨架屏占位符，不要使用旋转加载图标。
• 空状态：提供有帮助的消息和操作按钮，不要留白。

动画

• 只为 transform 和 opacity 添加动画。绝不要为布局属性添加动画。
• 不要使用 transition: all。请明确指定属性。
• 不要使用 linear 或默认的 ease-in-out。请使用自定义 cubic-bezier 曲线，但不同项目应选择不同曲线。
• 从 Required Elements #6 中的三种选项里选择一种入场动画策略。不要每次都默认使用 IntersectionObserver。
• 遵循 prefers-reduced-motion: reduce。
• 关于时间设置指南，请参阅 references/animations.md。

图表

• 通过 CDN 使用 Chart.js 或 ECharts。
• 根据数据选择图表类型：趋势 → 折线图，对比 → 柱状图，占比 → 环形图。
• 图表颜色应与页面配色一致，绝不要使用库的默认颜色。
• 始终包含：坐标轴标签、工具提示、图例。
• 关于设置指南，请参阅 references/charts.md。

图标

• 使用内联 SVG 或 CDN 图标库。推荐的图标库（按优先级排序）：Phosphor、Lucide、Heroicons、Tabler、Radix Icons、Solar（通过 Iconify）。
• 每个项目只使用一个图标系列。统一描边宽度（全局标准化，例如 1.5 或 2.0）。
• 绝不要将表情符号用作结构性图标。
• 绝不要手工绘制 SVG 图标——如果所选库缺少某个图形，请安装第二个库或使用简单的几何形状。手绘 SVG 路径的质量始终很差。

图片与视觉素材策略

视觉素材优先顺序：

1. 优先使用图像生成工具——如果环境中有任何图像生成工具（generate_image、MCP 图像工具等），请使用它为特定版块创建素材：主视觉摄影图、产品图、纹理背景。生成的图片应采用适合版块的宽高比。
2. 其次使用真实网络图片——使用 https://picsum.photos/seed/{descriptive-seed}/{w}/{h} 获取占位摄影图（seed 应描述版块内容，例如 crypto-dashboard-hero）。也可以使用 Unsplash/Pexels 的直链。
3. 最后才告知用户——如果两种方式都不可行，请留下标注明确的占位区域（``），并说明需要哪些图片。

规则：

• 所有图片都必须包含 alt 文本。装饰性图片使用 alt=""。
• 绝不要伪造截图：不要使用基于 div 搭建的假应用截图、假浏览器框架或假终端窗口作为主视觉图片。这是最明显的 AI 设计痕迹。如果需要截图，请使用真实图片，或者完全跳过预览。
• 装饰性图片：使用 CSS 渐变、SVG 图案或抽象形状，不要使用人物指着屏幕的图库照片。
• 用于社会认同的 Logo 占位图：对于“Trusted by / Used by” Logo 墙，请使用 Simple Icons CDN 中的真实 SVG Logo（https://cdn.simpleicons.org/{slug}/{color}），或生成简单的字母组合 SVG。不要使用纯文本文字标识（如 <span>Acme Co</span>）并将其排列成行。Logo 墙只放 Logo，每个 Logo 下方不要添加行业或类别标签。
• 不要在图片上叠加胶囊标签：不要在照片上叠加带有“Brand · 02”或“Field notes”等标签的 <span>。让图片本身呈现内容，或在图片外的下方添加说明文字。
• 不要将摄影署名用作装饰性说明：在图库图片下方添加“Field study no. 12 · Ines Caetano”之类的文字显得矫饰。只有在署名真实摄影师时才添加摄影署名。
• 主视觉必须使用真实视觉素材：只有文字和渐变色块不能构成主视觉，那只是占位内容。即使是极简风格的网站，也至少需要 2-3 张真实图片。

模拟数据

• 使用合理且自然波动的数字，不要使用整数。
• 使用真实世界中的标签（实际姓名、合理的日期）。
• 时间序列应包含 7-30 个数据点，并呈现自然波动。

无障碍（至关重要）

• 对比度：正文文本 ≥ 4.5:1，大号文本 ≥ 3:1，UI 组件与相邻颜色之间 ≥ 3:1。
• 焦点状态：所有交互元素都必须显示可见的焦点环（2-4px 轮廓）。移除 outline 时，必须提供替代方案。
• 替代文本：所有有意义的图像都必须提供描述性 alt 文本。装饰性图像使用 alt=""。
• 标题层级：按顺序使用 h1 → h6，不得跳过级别。每个页面只能有一个 h1。
• 不可仅依赖颜色：绝不要仅通过颜色传达信息。务必搭配图标、文本或图案。
• 键盘导航：Tab 顺序必须与视觉顺序一致。所有交互元素都必须可通过键盘访问。
• Aria 标签：仅含图标的按钮必须有 aria-label。表单输入必须关联 <label>。
• 跳转链接：将“跳转到主要内容”链接设为第一个可聚焦元素。
• 减少动态效果：遵循 prefers-reduced-motion: reduce — 禁用或简化所有动画。

表单与反馈

• 可见标签：每个输入框都必须有可见的 <label>，不能仅使用占位符。
• 错误位置：将错误消息直接显示在相关字段下方，不能只显示在表单顶部。
• 必填标记：用星号或“（必填）”文本标记必填字段。
• 提交反馈：提交时显示加载状态，随后显示成功或错误状态。
• 空状态：无数据时，显示有帮助的消息和操作按钮，绝不要留白。
• 确认对话框：执行破坏性操作（删除、重置、全部清除）前，先进行确认。
• 输入类型：使用语义化 type 属性（email、tel、number、url），以触发正确的移动键盘。
• 错误说明：错误消息必须说明原因以及如何修复，不能只说“输入无效”。

交互状态

• 悬停反馈：所有可点击元素都必须有明显的悬停状态（颜色变化、下划线或轻微变换）。
• 激活/按压反馈：按钮按下时应略微缩小（scale(0.97-0.98)），带来触感反馈。
• 禁用状态：禁用元素使用降低的不透明度（0.4-0.5）+ cursor: not-allowed + pointer-events: none。
• 加载状态：内容加载时使用骨架屏占位符，加载旋转图标仅用于操作。任何超过 300ms 的操作都应显示加载反馈。
• 触控目标：移动设备上的所有交互元素至少为 44×44px。如果可视元素较小，可用内边距扩大可点击区域。

---

文案规则（文本内容）

AI 生成的文本是最明显的破绽之一。将以下规则应用于所有可见文本：

禁止使用的模式

• 任何地方都不得使用 em dash（—）。请改用逗号、句号或分号。Em dash 是 LLM 文本最显著的特征。此规则零容忍，不是“尽量少用”，而是完全不能用。
• 不得使用 en dash（–）作为分隔符。日期范围使用连字符（2018-2026）。数字范围使用连字符（€40-80k）。
• 不得使用营销炒作词：“Revolutionize”“Supercharge”“Unleash”“Seamlessly”“Cutting-edge”“Next-generation”“Game-changing”“Empower”“Elevate”“Transform your workflow”。像真人一样写作，不要像新闻稿。
• 避免格言式节奏：避免使用简短、有力、平行的句式，让文字读起来像励志海报。（“Simple. Fast. Powerful.” / “Built for speed. Designed for scale.”）
• 不得使用编号式章节标记：除非内容确实按顺序展开（例如流程步骤），否则不要用“01”“02”“03”标注章节。不要使用“00/INDEX”“001/Capabilities”这类眉题。
• 不得添加装饰性文字条：不要添加滚动字幕或重复文字条，例如“INNOVATION · DESIGN · EXCELLENCE”或“BRAND · MOTION · SPATIAL”。
• 主视觉区域不得出现版本标签：“V0.6”“BETA”“INVITE-ONLY PREVIEW”等都禁止，除非需求明确涉及产品发布。
• 不得添加滚动提示：“Scroll”“↓ scroll”“Scroll to explore”、动画鼠标滚轮图标等都禁止。用户知道如何滚动。
• 不得添加地区／天气信息条：页眉／页脚中不得出现“LIS 14:23 · 18°C”，除非需求确实涉及某个地点或跨时区工作室。
• 不得使用虚假的精确数字：92%、4.1×、48k 这类数字必须来自真实数据，或明确标注为模拟数据。不要伪造工程精度。
• 每个页面只使用一种文案风格：不要在同一版面中混用技术风格的简短表达（“47 tasks · 0.6 ctx-switches/day”）、编辑式散文和营销式短句。
• 引言不超过 3 行：用户评价引言应当一眼可读。署名格式：姓名 + 职务 + （可选）公司。不得只写姓名（“- Sarah”）。

文案自审

交付前，请阅读页面上的每一处可见文字，并自问：

1. 真人文案撰稿人会这样写吗？还是听起来像 ChatGPT？
2. 这段内容是否针对该产品，还是适用于该类别中的任何产品？
3. 标题是否确实表达了具体内容，还是含糊的陈词滥调？
4. 是否存在语法不通的短语或 AI 幻觉式双关？
5. 是否有文字听起来像“LLM 在努力显得深思熟虑”？（例如被动攻击式谦逊、虚假的工匠标签、仿诗意的微观元叙事）

---

主题支持（浅色／深色，强制要求）

每个生成的页面都必须包含浅色／深色主题切换功能。这不是可选项。用户希望在任何现代网站上都能切换主题。

默认行为（浅色／深色切换）

Surface 旋钮决定哪个主题为主主题（没有系统偏好时，首次加载显示该主题），但必须完整实现两种主题：

1. 所有颜色均使用 CSS 自定义属性：在 :root（浅色）和 [data-theme="dark"]（深色）中，将所有颜色定义为 --var。
2. 切换界面：在页眉／导航栏中添加简单的切换按钮（太阳／月亮图标）。使用 localStorage 保存偏好设置。
3. 检测系统偏好：如果没有已保存的偏好设置，则使用 prefers-color-scheme: dark 作为初始默认值。
4. 完整设计两种主题：不能只“反转颜色”。每种主题都需要各自的表面层次结构、经过验证的对比度和调整后的强调色。

深色模式设计规则

设计深色变体时（每个页面都需要为深色主题提供该变体）：

1. 场景句：撰写场景句（见步骤 0.5），为深色调色板定下基调。不要默认使用蓝黑色。
2. 表面层级：深色背景需要比浅色背景更多的层级（至少 4 个不同的表面层级）。
3. 对比度独立验证：在深色模式下单独验证对比度；不要假设通过浅色模式验证的颜色在深色表面上也适用。
4. 强调色调整：在深色背景上，强调色通常需要更亮或更饱和，才能保持相同的视觉分量。
5. 令牌策略：使用相同的 CSS 自定义属性名称，但设置不同的值：

:root {
  --surface-primary: #fafafa;
  --surface-elevated: #ffffff;
  --text-primary: #1a1a1a;
  --accent: #d4a030;
}

[data-theme="dark"] {
  --surface-primary: #1a1816;  /* from Scene Sentence */
  --surface-elevated: #242220;
  --text-primary: #e8e4e0;
  --accent: #e8b84a;  /* lighter for dark bg */
}

6. 切换实现：

// Detect system preference, respect stored preference
const stored = localStorage.getItem('theme');
const prefersDark = matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.dataset.theme = stored || (prefersDark ? 'dark' : 'light');

// Toggle handler
function toggleTheme() {
  const current = document.documentElement.dataset.theme;
  const next = current === 'dark' ? 'light' : 'dark';
  document.documentElement.dataset.theme = next;
  localStorage.setItem('theme', next);
}

---

反模式（绝对不要这样做）

• ❌ 将 Inter、Roboto、Arial 作为主要字体
• ❌ 默认使用紫色／紫罗兰色渐变背景（例外：品牌要求且有文档记录）
• ❌ 默认使用奶油色／米色／沙色背景（例外：Design Read 明确要求营造暖意，并给出清晰理由）
• ❌ 使用蓝黑色深色表面（#0a0e1a、#0d1117、#0f172a、#111827）：使用场景句来确定非蓝色调
• ❌ 使用居中主视觉区加三个大小相同的功能卡片（排名第一的 AI 布局）
• ❌ 无休止地重复相同尺寸的卡片网格
• ❌ 在卡片上使用 border-radius: 24px+
• ❌ 使用 transition: all 或 linear 缓动
• ❌ 将 Emoji 用作导航／操作图标
• ❌ 使用渐变文字（background-clip: text）：文字应使用纯色
• ❌ 灰色文字的对比度低于 4.5:1
• ❌ 将 100vh 用于全高区块（使用 100dvh）
• ❌ 在移动设备上出现横向滚动
• ❌ 在任何可见文字中使用长破折号
• ❌ 在标题中使用营销流行语
• ❌ 使用带编号的区块标记（“01”“02”“03”）
• ❌ 使用基于 div 的假截图或浏览器界面
• ❌ 在每个区块都添加眉题标签
• ❌ 连续使用超过 2 个之字形布局
• ❌ 在连续区块中使用相同的布局类型
• ❌ 在同一页面上使用两个意图相同的 CTA
• ❌ 复制上次生成的相同设计

Claude 特有的缺陷（已知失误模式）

以下是 Claude 特别容易生成的模式。请留意并避免：

1. 边框与 box-shadow 组合：Claude 喜欢在同一元素上同时添加 1px 边框和较大的 box-shadow，从而产生“幽灵卡片”效果。规则：二选一，绝不要在同一元素上同时使用两者。
2. border-radius 过大：Claude 倾向于在卡片上使用 24px-40px 的 border-radius。规则：卡片最大为 16px；胶囊形状仅用于标签／徽章／按钮。
3. 手绘 SVG 插图：Claude 会尝试手绘 SVG 插图作为装饰，效果一贯很差。规则：使用图标库（Lucide、Phosphor、Heroicons）或基于 CSS 的装饰元素，绝不要手绘 SVG。
4. 重复线性渐变条纹：Claude 喜欢通过在 body::before 或区块背景上使用 repeating-linear-gradient 添加斜向条纹图案。规则：禁止使用。请采用 references/aesthetics.md 中的其他表面处理方式。
5. 标题上的渐变文字：Claude 经常对大标题应用 background-clip: text 和渐变。规则：禁止使用。所有文字都应使用纯色。
6. 默认使用深蓝黑色：要求深色模式时，Claude 几乎总是选择 #0a-#0f 范围内的蓝黑色。规则：必须使用场景句来确定具体的非蓝色深色调。

---

AI 糟粕测试（两个层面）

交付前，请完成这两个层面的检查：

层级 0：生产级测试信号（73 个品牌基准）

以下是 AI 生成的 UI 与真实生产网站之间可衡量的具体差异，基于对 73 个主要品牌设计系统的分析得出：

信号	AI 默认值	真实品牌范围	修正方法
展示字体字重	600-700	300-500（45% 的品牌）	展示字体尝试使用 400-500；编辑风格尝试使用 300
展示字体字间距	0（无）	-0.28px 至 -3px（85% 为负值）	为展示字体添加 letter-spacing: -1px 至 -2px
正文字间距	0	0 至 +0.24px（IBM 为 +0.16px，Revolut 为 +0.24px）	考虑为正文略微增加字间距
卡片圆角	24px 以上	12px（35%）、16px（20%）	卡片圆角最多为 16px
按钮形状	8-12px 圆角	9999px 胶囊形（40%）或 0-8px（30%）	选择胶囊形或直角，避免折中
区块间距	48-64px	80-120px（最常见为 96px）	主要区块之间使用 96px 间距
阴影策略	卡片使用 box-shadow	极细边框或表面抬升效果（60%）	优先使用 1px 边框，而非投影
CTA 颜色	蓝色 #3b82f6	黑色（25%）、品牌专属色（30%）	尝试黑色胶囊形 CTA
画布暖色调	每次都用相同的米白色	每个品牌的暖白色都独一无二	根据项目调整暖白色的色相
字体系列	2 种字体系列	1 种字体系列（40% 的品牌）	考虑仅使用一种字体系列，并通过字重形成对比

层级 1：一阶检查

1. 有人能看出这是 AI 生成的吗？ 如果能 → 设计缺少鲜明的观点。重新设计。
2. 有人能仅凭配色猜出主题吗？ 如果能 → 配色过于老套（金融用蓝色，健康用绿色）。找一种不那么显而易见的选择。
3. 每个区块看起来都一样吗？ 如果是 → 调整布局节奏。混合不同尺寸的卡片，交替安排文字和图片的位置，打破网格。
4. 这和你上次做的设计一样吗？ 如果是 → 至少更换字体、配色方案和布局结构。

层级 2：二阶检查（反默认之反默认）

第一层会发现明显的 AI 默认选择。这一层会发现你为避开明显默认选择而采用的默认选择——也就是会随时间变化的“反默认默认选择”。

5. 你选的“替代方案”实际上是不是最常见的替代方案？ 避开一种老套选择时，你往往会转而采用下一个最受欢迎的选项。问问自己：“如果 100 个 AI Agent 都避开明显的默认选择，他们最可能改选什么？”——然后选别的。
6. 只看页面类型，有人能猜出你的审美风格类别吗？（例如，“开发者工具 = 深色模式 + 等宽字体 + 绿色点缀”，“金融科技 = 海军蓝 + 白色 + 简洁的无衬线字体”）如果能 → 打破这种预期。
7. 你是不是又用了上次用过的同一款“安全替代”字体、颜色或布局？ 反默认选择会因重复使用而变成新的默认选择。记录最近用过的选择，并有意识地避开它们。
8. 你的设计看起来像是属于某种一眼可辨的“AI 审美流派”吗？（例如，“Linear 仿制风格”、“Vercel 风格”、“Stripe 风格”）如果明显属于某个流派 → 融入其他传统中的元素。

---

精修环节（必做）

完成初步构建后，再进行一轮精修和打磨。不要添加更多元素，而要让现有内容更协调、更简洁。这一做法借鉴了 canvas-design 技能的原则：“用户已经说还不够完美。它必须无可挑剔。”

精修时，请检查：

1. 间距一致性：所有外边距和内边距是否遵循间距系统？有没有不自然的空隙？
2. 色彩协调性：页面上的每种颜色是否都服务于同一设计方向？有没有突兀的色调？
3. 排版节奏：各版块的标题字号、字重和字间距是否一致？
4. 组件打磨：所有按钮是否都有悬停和激活状态？所有卡片的圆角是否一致？
5. 文案质量：重新阅读所有可见文本。有没有听起来像 AI 写的表达？有没有漏掉的破折号？
6. 深色模式一致性：切换到另一主题。它是否同样精致，还是有一个主题明显像是事后补上的？
7. 移动端检查：在 375px 宽度下，所有内容是否都能整齐堆叠？有没有水平溢出？

---

想要添加更多内容的直觉是错误的。如果某处看起来不完整，通常应该通过改善间距、对比度或排版来解决，而不是再加一个渐变、一段动画或一个版块。

---

交付前检查清单

逐项检查。每项都必须通过机械验证，不得依赖主观判断。

设计旋钮与设计解读

• 存在 Design Dials 行（Surface、Accent、Typography、Aesthetic Family 的索引和选项）
• 存在 Design Read 行（页面类型 · 受众 · 氛围 · 美学风格 · 表面）
• 表面特征符合所选方向（按指定呈现为浅色／深色／着色）
• 强调色的色相符合所选色系
• 字体符合所选排版风格
• 布局风格和视觉语言体现了 Aesthetic Family 的影响

场景描述句（仅适用于深色／着色表面）

• 存在场景描述句（Surface 索引为 5 或 6 时）
• 场景不能是“黑暗房间里开发者的显示器”或类似的泛泛场景
• 深色表面的色调符合场景环境（不是默认的蓝黑色）

排版

• 通过 Google Fonts（或 CDN）加载字体，并使用至少 2 种字重
• 主字体符合所选排版风格
• 主字体不能是 Inter / Roboto / Arial / Open Sans / Helvetica / Space Grotesk / DM Sans / Plus Jakarta Sans / Manrope
• 正文文本字号 ≥ 16px，行高为 1.5-1.6
• 标题使用 clamp() 实现响应式字号
• 最多使用 2 种字体系列

色彩与表面

• 所有颜色都定义为 :root 中的 CSS 自定义属性
• 自定义属性名称具有语义（不能使用 --light-gray）
• 强调色不能是通用蓝色（#3b82f6）或 AI 紫色（#8b5cf6、#6366f1、#a855f7）
• 除非 Design Read 有此要求，否则背景不能是奶油色／米色／沙色（#f5f1ea、#f7f5f1、#fbf8f1 等）
• 背景不能是蓝黑色（#0a0e1a、#0d1117、#0f172a、#111827），请核对十六进制值
• 除非 Design Read 有此要求，否则强调色不能是黄铜色／陶土色／深红色（#b08947、#b6553a、#9a2436）
• 已验证正文文本对比度 ≥ 4.5:1
• 已验证大号文本对比度 ≥ 3:1
• CTA 按钮的文本与背景对比度 ≥ 4.5:1

布局

• 任意两个相邻版块的布局类型不能相同
• Eyebrow 数量 ≤ ceil(版块数量 / 3)
• Zigzag 交替布局不能连续超过 2 次
• Hero 在高度为 768px 的视口中，无需滚动即可看到 CTA
• Hero 中的文本元素不超过 4 个
• 已设置容器最大宽度，且内容居中

文案

• 所有可见文本中都不得出现长破折号（—）
• 标题中不得出现营销套话
• 不得使用警句式的平行句式
• 不得使用带编号的章节标记（确实按顺序排列的内容除外）
• 不得使用装饰性文字条或无意义的滚动标语（例如，“BRAND · MOTION · SPATIAL”）
• 首屏不得出现版本标签（例如，“v2.0”“Beta”），除非需求明确要求
• 不得出现滚动提示（例如，“向下滚动 ↓”或向下箭头指示）
• 每个标题都必须具体明确，不得含糊空泛

CTA 和按钮

• 不得有两个 CTA 使用相同意图的文案
• CTA 文案不得换成两行
• 每个视口中只能显示一个主要按钮
• 所有按钮都必须有悬停和激活状态

Claude 特有缺陷

• 同一元素上不得同时使用边框和盒阴影（二选一）
• 卡片的圆角不得大于 16px（标签、徽章和按钮仅可使用胶囊形状）
• 不得使用手绘 SVG 插图
• 不得使用重复的 linear-gradient 条纹背景
• 不得使用渐变文本（background-clip: text）
• 深色表面不得采用 #0a-#0f 范围内的蓝黑色（场景描述必须明确色调）

技术

• 必须包含 prefers-reduced-motion 媒体查询
• 必须采用一种入场动画策略（滚动显示、页面加载错开或状态驱动）
• 任何位置都不得使用 transition: all
• UI 元素不得使用 linear 缓动
• 不得使用 100vh（改用 100dvh）
• 在 375px 宽度下不得出现水平滚动
• 所有图片都必须有 alt 文本（装饰性图片使用 alt=""）
• 键盘导航的焦点状态必须清晰可见
• 不得使用基于 div 的伪截图或浏览器界面框架

主题切换

• 必须有浅色／深色主题切换按钮（位于页眉或导航栏中，使用太阳／月亮图标）
• 所有颜色都必须使用 CSS 自定义属性（组件样式中不得硬编码十六进制颜色值）
• [data-theme="dark"] 选择器必须定义深色主题值
• 如果没有已存储的偏好设置，必须检测 prefers-color-scheme: dark 以确定初始主题
• 主题偏好必须存储在 localStorage 中
• 浅色和深色主题的对比度都必须经过验证（正文文本 ≥ 4.5:1）
• 深色主题不得只是“反转颜色”，而必须拥有专门设计的表面层次

无障碍

• 标题层级必须连续（h1 → h2 → h3，不得跳级）
• 每个页面只能有一个 h1
• 仅含图标的按钮必须有 aria-label
• 表单输入框必须关联 <label> 元素
• 颜色不得作为唯一的指示方式（必须同时配合图标、文本或图案）
• 交互元素必须支持键盘访问（Tab 顺序与视觉顺序一致）
• 移动设备上的触控目标必须 ≥ 44×44px

表单与交互（如适用）

• 每个输入框都必须有可见标签（不得只使用占位符）
• 错误消息必须显示在相关字段下方
• 必填字段必须标明
• 禁用元素必须降低不透明度，并设置 cursor: not-allowed
• 所有可点击元素都必须有清晰可见的悬停状态
• 按钮必须有激活／按压状态（scale(0.97-0.98)）

反套路（第 2 层）

• 设计必须遵循已明确的设计方向，不得采用“安全的默认方案”
• 不得仅凭页面类型就能猜出审美风格归属（例如，不能认为加密货币网站就一定是深色）
• 设计不得明显属于某个广为人知的“AI 审美流派”（如 Linear 克隆版、Vercel 风格等）
• 除非设计方向明确选择，否则表面不得采用深蓝黑色（蓝色调的 #07-#0f 范围）
• 字体不得使用 Inter、Plus Jakarta Sans、Space Grotesk、DM Sans 或 Manrope