frontend-design-deslop

问题： 通过环境的提问工具向用户提问——绝不能用纯文本提问。一次只问一个问题，提供 2–4 个可点击选项，并等待回答。如果环境没有提问工具，就用文字提问，并一次提供相同数量的选项。

前端设计去俗套

AI 生成的 UI 看起来千篇一律，原因有两个：

1. 没有约束。 模型会采样 2019–2024 年 Web 代码的统计中位数——Tailwind UI 的 bg-indigo-500、Inter、圆角卡片、柔和阴影。面对一片空白，你无法靠提示词扭转局面。
2. 还没弄清要设计什么，就开始设计。 企业落地页、创意作品集、开发者工具落地页、分析仪表板和电商产品页，几乎没有共同的设计基因——再美的风格，如果与产品的实际用途相悖，也只是另一种俗套。

解决方法是借鉴品牌设计的原则：策略驱动设计，绝不先追求美感。

1. 先确定文字方向——这是做什么的、服务谁、必须给人什么样的感觉。
2. 将这些描述转化为字体和色彩系统。
3. 基于设计令牌构建。
4. 应用精细化设计层（布局、组件、动效、图标、图像、深色模式、无障碍）。
5. 审核。

针对趋同机制，而不是一份一成不变的禁用清单；俗套特征会随时间变化（2022 年的紫色渐变，2026 年的奶油色背景和斜体衬线体主视觉）。

这项技能同时解决两件事：摆脱 AI 默认的俗套外观，并打造优秀的应用。若组件粗心、布局薄弱或动效欠考虑，再独特的主题看起来仍然业余。每个设计选择背后的原理都写在 references/design-theory.md 中（层级、格式塔、CRAP、信号与噪声、可供性、交互法则）；读一遍，之后就能依靠推理，而不是照章行事。

提问（重要）

每个问题都必须通过提问工具提出（参见上方的 问题： 指令）——绝不能用纯文本提问。可提问的内容很丰富，但提问应有所选择。不要盘问用户。

• 将相关问题合并提问；每个问题提供 2 到 4 个具体选项。
• 只问那些足以影响设计系统的关键信息。
• 先根据上下文推断，再请用户确认推断，不要重复提问。

阶段 0：明确并敲定设计词汇（首先执行，先于任何代码）

编写任何代码之前，先检查项目根目录（以及 docs/ 等常见位置）是否已有 DESIGN.md。

• 已存在 — 阅读并遵循其中的词汇，跳过它已回答的问题，并在其基础上扩展，而不是从头开始。
• 不存在 — 在动手设计任何像素之前，先明确以下三件事。阅读 references/discovery.md，了解完整流程、问题库以及从个性到设计词汇的转换表；并阅读 references/artifact-types.md，了解各类型的优先事项。

1. 产物是什么？ 对其进行分类：营销／落地页、定价页、SaaS 应用、仪表板／数据工具、电商、市场、移动应用、AI／对话界面、电子邮件／简报、博客／编辑出版物、引导／身份验证流程、设置／管理／CMS、演示文稿／幻灯片、文档／API 参考、作品集／品牌网站，或 references/artifact-types.md 中的长尾类型。每种类型的优化目标都不同，并有各自的布局规则和信息密度。复合型产物（例如嵌入应用的营销网站、SaaS 应用中的 AI 聊天）应按区域分别设计。
2. 面向谁，目的为何？ 明确受众、定位（企业级、创意、技术、奢华或活泼）以及唯一的主要操作或目标。
3. 敲定设计词汇。 在进行任何视觉探索之前，确定 3 到 5 个品牌形容词，以及 3 个词的美学精髓。这是影响力最大的输入，会决定字体、颜色、信息密度、圆角和动效。策略驱动设计，绝不反过来。

灵活地执行探索流程：推断并说明推断，通过问题工具提出少量高价值问题，并以 1 到 3 个参考案例为方向依据（如果没有给出参考案例，则通过网络搜索查找当前优秀的、产物类型与定位完全相符的案例，然后进行转化，而非从零创作）。在产物类型、定位和形容词敲定之前，不要继续推进。如果需求过于笼统（例如又一个仪表板、又一个 SaaS 落地页），而类别本身缺乏特色，就应扩大参考案例搜索范围，不要只在该产品所属类别内要求更多创意——参见 references/divergence.md。

阶段 1：将策略转化为设计系统（关卡）

简要用文字说明这些承诺。每一项都必须源自阶段 0，而非凭直觉。

1. 美学承诺。 选择一个符合成品和形容词的鲜明方向；泛泛而谈就是失败。参见 references/aesthetics-library.md。如果用户提供了品牌或参考案例，就将其转化为设计方向。先推导出 2-3 个真正可行的候选方案，再选出一个；在为提升易读性而弱化之前，先彻底落实胜出方案，并对照类别的默认设计检查未经修饰的结构（而不只是经过样式处理的表层）。参见 references/divergence.md，了解这些步骤的重要性，以及如何在同一轮中避免反复斟酌。

2. 字体排印（品牌优先）。 根据品牌个性而非审美偏好选择字体。根据形容词匹配字体分类，选择适合内容的模块化比例，并搭配出对比（展示字体 + 正文字体），避免字体排印混乱。绝不使用 Inter/Roboto/Arial/system 作为主字体。参见 references/typography.md。

3. 颜色（契合度 + 差异化）。 先选择符合品牌和受众的颜色，再寻找尚未被占据的领域（靛蓝/紫罗兰色系是 AI UI 的红海；除非设计说明要求，否则应避免）。构建一套以主色为主，搭配鲜明强调色、中性色和语义状态色的配色，并大致按 60-30-10 分配。使用 OKLCH 编写。参见 references/color-oklch.md。

4. 令牌表（在组件之前输出）。 展示字体 + 正文字体；字号阶梯（注明比例和基准，共 6 级）；间距基准单位；最多两个圆角值；一种阴影方案（明确边缘或柔和悬浮，单个元素上绝不同时使用两者）；带有角色定义的调色板（bg、surface、fg、muted、border、accent、accent-fg、success、warning、error）——surface 是必需项，不可省略：它是基于亮度阶梯进行层级区分的起点（参见 references/dark-mode.md）。所有内容都引用令牌；不得散布十六进制颜色值或像素值。从 references/token-sets.md 中选取一套初始方案。

5. 标志性设计。 点明让这个 UI 难忘、并且一眼看出不同于默认设计的唯一特征。每个项目只设一个。

6. 适配器。 选择技术栈语法：原生 CSS 自定义属性、Tailwind v4 @theme，或 shadcn 语义令牌。参见 references/adapters.md。references/token-core.css 是可移植的事实来源。

阶段 2：将系统应用到界面（工艺层）

设计令牌让 UI 保持一致；工艺层则让 UI 更出色——这是技能中“设计应用”的部分，也是 AI 产出最常忽略的部分。

将以下各项应用到成品中，并按需调取相应参考资料。不同成品类型在密度和重点上有所不同（参见 references/artifact-types.md）；仪表盘和落地页的应用方式截然不同。

1. 布局与构图。 有意识地组织空间：设定基础间距单位，组内间距紧凑、区块间距宽裕，采用有意规划的网格（12 列、模块化网格，或适用于内容确实多变场景的 Bento 网格），至少加入一个符合简报要求的布局巧思，并将留白用作自信的表达。打破将内容一律放进居中最大宽度栏的惯性。参见 references/layout.md。

2. 组件与状态。 明确每个交互组件的完整状态矩阵（默认、悬停、激活、焦点、禁用、加载、错误、选中），而不只是静止状态。正确处理按钮（按重要性排序，而非按颜色含义排序）、表单（真实标签、正确类型、保留输入内容的内联验证）、表格（文本左对齐、表格数字使用 tabular-nums 并右对齐、使用轻量分隔线）、导航、叠加层，以及空、加载和错误状态。参见 references/components.md。

3. 动效。 将动效视为一种沟通方式，并采用时长与缓动令牌等级。默认使用 300 毫秒以内的 ease-out，仅为 transform 和 opacity 添加动画；弹出层应从触发控件处缩放出现；高频操作绝不添加动画。参见 references/motion.md。

4. 图标设计。 整套图标保持统一的网格、描边和圆角；不要让未经修改的默认入门套件图标决定整体风格。参见 references/iconography.md。

5. 图像与插画。 将图像作为一个系统来进行艺术指导。优先使用真实产品视觉素材，而非图库素材和抽象图形；避免带有 AI/图库痕迹的元素（指着笔记本电脑的人、渐变色块、企业孟菲斯风格、默认 Midjourney 风格）。使用纹理和图形元素摆脱扁平平庸的观感。参见 references/imagery.md。

6. 深色模式与主题。 如果项目涉及深色模式，就应专门设计（而非直接反转颜色）：采用近黑色而非纯黑色、米白色而非纯白色，通过亮度体现层级，使用低饱和度强调色，并由语义令牌统一驱动。参见 references/dark-mode.md。

7. 在构建过程中落实无障碍设计。 遵循 WCAG 2.2 AA：提供清晰可见且受管理的焦点、支持键盘操作、设置标签、确保目标尺寸至少为 24px、避免依赖颜色传达信息，并支持减少动态效果。应从一开始就构建这些设计，而不是事后补救。参见 references/accessibility.md。

设计构思完成后，方向和工艺决策确定后，向用户推荐一组相关的设计与组件目录，供其寻找具体创意和可直接使用的实现方案；应将其定位为可通过既定系统转化的灵感（绝不可照搬），并提醒用户核实组件许可证。根据成品类型和阶段选择目录，不要一次性罗列全部内容。参见 references/catalogs.md。

阶段 3：编写 DESIGN.md（持久化产出）

此技能生成的所有内容都应保存在项目根目录下的单个 DESIGN.md 文件中：

• 探索过程的背景
• 确定的美学方向与标志性设计巧思
• 字体与色彩系统
• 设计令牌
• 间距、圆角与阴影规则
• 工艺层决策（布局、组件、动效、图标设计、图像、深色模式、无障碍设计）
• 平庸设计审查结果

应在构建组件之前或同时编写或更新该文件，并使用 references/design-md.md 中的结构。DESIGN.md 是唯一事实来源——如果 CSS、适配器或组件与其不一致，应以 DESIGN.md 为准。在后续会话中，阶段 0 会读取此文件，而不是重新进行探索。

以令牌优先的生成规则

• 使用 OKLCH 定义颜色，以主色搭配醒目的强调色，避免色彩分布平淡均匀。先以灰度建立视觉层级，最后再少量添加强调色，大致遵循 60-30-10（中性色 / 品牌色 / 强调色）。在彩色背景上，使用同一色相的更深、更低饱和度版本，而不是转为灰色。定义语义状态颜色（成功、警告、错误），且绝不只用颜色传递信息。
• 排版：搭配独特的展示字体和精致的正文字体，采用注明比例的模块化比例尺。从 Fontshare/Google 获取字体。字体系列限制为 2 到 3 种。
• 间距节奏：根据元素之间的关系调整间距（组内紧凑，区块之间宽松）。处处使用同一个间距值会显得呆板。
• **密度应符合产物类型。**仪表板和专业工具可以采用较高密度；营销页面和作品集页面则应留白充足。
• 实现复杂度应与美学风格匹配：极繁主义应有精细繁复的细节；极简主义应克制而精准，而不是敷衍了事。

绝对不要（负面提示词）

绝不要使用千篇一律的 AI 生成风格：过度使用的字体（Inter、Roboto、Arial、system-ui 作为主字体）；陈词滥调的配色方案（尤其是在白色或深色背景上使用紫色 / 靛蓝 / 紫罗兰渐变）；只采用“主视觉 + 3 个功能卡片 + 用户评价 + CTA”这一套模板结构；在功能卡片中使用图标平铺于标题上方的模板；在卡片侧边添加强调色边框；在同一元素上叠加极细边框和扩散阴影；在标题或指标上使用渐变文字；装饰性的玻璃拟态；过度圆润的圆角（小卡片的圆角半径 > 16px）；下意识使用奶油色 / 米色背景；使用弹跳 / 弹性缓动和无处不在的微交互动画；没有结构用途的装饰性网格线背景或径向聚光效果；对实际上并非实时的内容使用脉冲状态圆点或自动滚动的跑马灯；用手工编码的 SVG 吉祥物代替真实插画。使用有辨识度的字体、协调且坚定的配色，并且只在有助于交互时使用动效。

工艺层面的绝对禁忌：不要交付只有静止状态的组件；不要用占位文本作为标签；不要按含义而非重要性排列按钮颜色；不要让表格中的数字列居中，也不要对数字使用非等宽数字；不要让未经修改的 shadcn/Tailwind 默认图标集决定整体风格；需要真实产品视觉时，不要使用图库中的“人物指着笔记本电脑”照片、渐变色块、悬浮球体、光泽感等距科技插画、企业孟菲斯风人物，或未经处理的默认 Midjourney 图像；不要简单反转浅色配色来制作深色模式，不要下意识使用纯黑背景、纯白文字或发光的彩色盒状阴影；不要对布局属性（width/height/top/left）做动画，也不要忽略 prefers-reduced-motion；不要移除焦点轮廓而不提供替代方案，不要只靠颜色传递含义，也不要交付尺寸小于 24px 的点击目标。

完成前自审

使用 references/slop-checklist.md 检查生成的 UI 并评分。

1. 确认它满足 references/artifact-types.md 中对应类型的优先事项——读起来像作品集的仪表板，或没有明确主要操作的落地页，即使很精美也算失败——并确认类型和配色与已承诺的形容词相符。
2. 检查工艺层：组件具备完整的状态矩阵，布局节奏得当且有刻意设计的亮点，动效传达清晰并尊重减少动态效果的设置，图标属于统一的系统，图像不是素材库或 AI 垃圾内容，深色模式（若有）经过设计而非简单反转。
3. 按照 references/accessibility.md 执行无障碍检查（焦点、键盘、对比度、目标尺寸、色彩独立性）；无障碍是通过或不通过的硬性门槛，不是锦上添花。
4. 对照实际渲染效果，像第一次看到一样重新审视 DESIGN.md 中的美学承诺，并按照 references/divergence.md §6-7 检查是否只有空洞结构——仅逐条通过特征清单，仍可能让输出看起来毫无特色。
5. 如果触发任何一项特征，或契合度不对，就在呈现前重新生成相应部分。
6. 在 DESIGN.md 的 slop-audit 部分记录结果并更新其变更日志，说明所用的产物类型、定位、形容词、美学、字体系统、配色和标志性设计亮点。

所有清单项都能在单次构建中检测；不要编造模型无法验证的跨代规则。部分项目需要查看渲染页面，而非仅查看源代码（参见 references/slop-checklist.md 中的“布局缺陷”和“构建正确性”部分）——只要有截图或可用的实时浏览器，就应执行这些检查。

参考文件

按需加载。

基础与需求收集：

• references/design-theory.md - 每项设计选择背后的机制：层级、格式塔、CRAP、信号与噪声、可供性、交互法则。尽早阅读一次。
• references/discovery.md - 设计需求收集：问题-工具协议、用文字明确承诺、问题库、个性到令牌的转换表。在 Phase 0 开始时阅读。
• references/design-md.md - DESIGN.md 架构和持久化约定。整个技能流程的持久化输出。在 Phase 0（读取现有文件）和 Phase 3（编写文件）阅读。
• references/artifact-types.md - 产物分类，包含各类型的优先级、布局语法、密度、定位变体和反模式。在 Phase 0 开始时阅读。
• references/divergence.md - 模型为何会收敛到相同概念，以及如何实现真正的差异：先推导再由外部选择，而不是自行挑选；将借鉴的形式落实到具体产出的系统中；在弱化之前充分落实；分别检查裸结构与样式表面。与 design-theory.md 一起阅读一次；在 Phase 0/1 和自审中应用。

系统（Phase 1）：

• references/typography.md - 完整的字体策略：品牌优先的选择方式、分类矩阵、模块化比例、字体搭配、可变字体、无障碍设计、反劣质设计的字体来源及禁用清单。
• references/color-oklch.md - 完整的色彩策略：适用性、蓝海差异化、和谐系统、60-30-10、原型映射、OKLCH 入门、Radix 角色、无障碍设计。
• references/aesthetics-library.md - 带有定义性特征的风格系列，以及根据需求发现结果创建定制主题的方法。
• references/token-sets.md - 可直接使用的特色调色板，每套都带有标志性设计手法，并包含共享的动效令牌。
• references/token-core.css - 与框架无关的 OKLCH 令牌核心，包含动效令牌。
• references/adapters.md - Tailwind v4 / shadcn / 纯 CSS 令牌语法。

工艺（Phase 2）：

• references/layout.md - 间距节奏、网格（12 列、便当盒布局）、非对称、留白、浏览方式、密度、响应式、布局灵感。
• references/components.md - 按钮、表单、表格、导航、覆盖层、反馈、空白/加载/错误状态的状态矩阵和模式，以及组件灵感。
• references/motion.md - 时长与缓动比例、弹簧、变换原点、性能、减少动态效果、动效令牌和灵感。
• references/iconography.md - 网格、描边、圆角、视觉平衡、默认设计何时沦为劣质设计、如何实现差异化、图标灵感。
• references/imagery.md - 艺术指导、摄影方向、AI/图库风格特征、插画系统、图形元素与纹理、图像灵感。
• references/dark-mode.md - 将深色模式作为专门设计的模式（而非反转颜色），通过亮度体现层级、降低饱和度、语义令牌主题化、深色/主题令牌。
• references/accessibility.md - 统一的 WCAG 2.2 AA：对比度、焦点、键盘、目标尺寸、表单、ARIA 基础、动效、测试。
• references/catalogs.md - 组件目录（shadcn/ui、21st.dev、Magic UI、Aceternity、Origin、Cult、Kibo、shadcnblocks）和灵感图库（Awwwards、Behance、Dribbble、Mobbin、Land-book、Page Collective、Godly、SaaS Landing Page、Lapa Ninja、Refero、Screenlane），并附有转化应用与许可注意事项。在构思阶段结束时建议相关子集。

审查：

• references/slop-checklist.md - 自审（告知目录和质量关卡）。完成任何 UI 前阅读。