Frontend Design 是一个用于指导创建独特、生产级前端界面的技能，旨在避免通用的 AI 审美。该技能覆盖完整生命周期：识别现状、规划设计、有意图地构建、视觉验证。
权威层级 技能中的每条规则都是默认值，而非强制要求。优先级如下：现有设计系统 / 代码库模式优先级最高，始终遵守；用户的明确指令可覆盖技能默认值；技能默认值仅在全新项目或用户主动寻求设计指导时适用。在已有既定模式的代码库中工作时，应遵循那些模式；当用户指定的方向与默认值冲突时，遵循用户。
工作流 识别上下文 -> 规划设计 -> 构建 -> 视觉验证。
第 0 层：上下文识别 在任何设计工作之前，检查代码库中已有的设计信号，这决定了技能中带有主观倾向的指导有多少适用。需要查找的内容包括：设计令牌 / CSS 变量（--color-、--spacing-、--font-* 自定义属性、主题文件）；组件库（shadcn/ui、Material UI、Chakra、Ant Design、Radix 或项目特定组件目录）；CSS 框架（tailwind.config.*、styled-components 主题、Bootstrap 导入、命名一致的 CSS 模块）；排版（HTML/CSS 中的字体导入、@font-face 声明、Google Fonts 链接）；配色（已定义的色阶、品牌色文件、设计令牌导出）；动画库（Framer Motion、GSAP、anime.js、Motion One、Vue Transition 导入）；间距 / 布局模式（一致的间距尺度使用、网格系统、布局组件）。应使用平台原生的文件搜索和内容搜索工具（如 Claude Code 中的 Glob/Grep）扫描这些信号，不要使用 shell 命令进行常规文件探索。
模式分类 根据检测到的信号选择模式：现有系统（跨多个类别有 4 个以上信号）——遵从它，技能的美学观点（排版、配色、动效）让位于既定系统，但结构性指导（构图、文案、无障碍、验证）仍然适用；部分系统（1-3 个信号）——遵循已有部分，仅在未检测到约定的领域应用技能默认值；全新项目（未检测到信号）——应用完整的技能指导；模糊（信号矛盾或不明确）——在继续前询问用户。
向用户提问 当上下文模糊时，使用平台的阻塞式提问工具（Claude Code 中的 AskUserQuestion、Codex 中的 request_user_input、Gemini 中的 ask_user）。如果没有提问工具，则假定为“部分”模式并保守进行。示例问题：“我发现[检测到的信号]。我应遵循你现有的设计模式，还是创建一些独特的东西？”
第 1 层：构建前规划 在编写代码之前，写下三段简短陈述，以建立一致性并让用户在编码前有机会调整方向。视觉论点——用一句话描述氛围、材质和能量；内容计划——页面上放什么内容、以什么顺序；交互计划——2-3 个具体的动效想法来改变感受。
第 2 层：设计指导核心 这些原则适用于所有上下文类型，但根据权威层级让位于现有设计系统和用户指令。
排版：选择独特、有性格的字体，除非现有代码库使用，否则避免常见字体（Inter、Roboto、Arial、系统默认）。无明确理由时最多使用两种字体。
配色与主题：使用 CSS 变量建立一致的调色板。主导色配锐利点缀优于怯懦、均匀分布的调色板。避免紫白偏向和暗色模式偏向。
构图：从构图开始，而非组件。将首屏视为海报，而非文档。优先使用留白、对齐、尺度、裁剪和对比，而非添加边框、阴影、卡片等装饰。默认使用无卡片布局。
动效：为视觉主导型工作交付 2-3 个有意图的动效，使用项目现有动画库；无现成库时使用框架条件默认值。
无障碍：默认使用语义化 HTML；颜色对比度满足 WCAG AA 最低要求；所有交互元素有焦点状态。
图像：需要图像时，优先使用真实或写实的摄影，而非抽象渐变或虚假 3D 物体。
上下文模块 选择适合正在构建内容的模块。在现有应用中工作时，无论功能是什么，默认使用模块 C。
模块 A：落地页与营销（全新项目）——默认区块顺序：Hero、支撑、细节、最终 CTA。Hero 规则：一个构图而非仪表盘；品牌第一、标题第二、正文第三、CTA 第四；总共不超过 6 个区块；一个 H1；首屏一个主 CTA。文案：让标题承载含义，用产品语言而非设计评论。
模块 B：应用与仪表盘（全新项目）——默认模式：平静的表面层级、强排版与间距、少颜色、密集但可读的信息、极简装饰。围绕主要工作区、导航、次要上下文 / 检查器、一个清晰强调色来组织。文案优先考虑定位、状态和操作。
模块 C：组件与功能（现有应用中的默认）——匹配现有视觉语言，继承间距尺度、边框圆角、颜色令牌和排版，关注交互质量（清晰的状态、平滑过渡、明显的可供性）。一个新组件不应引入新的设计系统。
硬性规则与反模式 默认可反对（可覆盖）：通用 SaaS 卡片网格作为第一印象；紫白配色、暗色模式偏向；全新项目中过度使用的字体；Hero 区块堆满统计数据、时间表、药丸集群、logo 云；以不同措辞重复相同氛围陈述的区块；无叙事目的轮播；多个相互竞争的强调色；装饰性渐变或抽象背景替代真实视觉内容；听起来像设计评论的文案。
始终避免（质量底线）：提示词语言或 AI 评论泄漏到 UI 中；对比度破坏；交互元素无可见焦点状态；存在正确 HTML 元素时仍使用语义化 div 堆砌。
试金石检查 在进入视觉验证前快速自审：品牌或产品在首屏是否明确无歧义？是否有强视觉锚点？仅扫描标题能否理解页面？每个区块是否有一项职责？所用卡片是否确有必要？动效是否改善层级或氛围？若移除所有装饰阴影，设计是否仍显得高级？文案听起来像产品而非提示词？新工作是否匹配现有设计系统？
视觉验证 实现后进行视觉验证。这是一次性检查，而非像素级完美审查。工具优先级：已有项目浏览器工具（Playwright、Puppeteer、Cypress 等）——不要仅为验证引入新依赖；浏览器 MCP 工具；agent-browser CLI（若未安装，告知用户运行 /ce-setup）；心理审查（无法使用浏览器时应用试金石检查作为自审，并注明跳过了视觉验证）。评估内容包括：输出是否匹配构建前规划中的视觉论点？是否存在明显视觉问题？是否看起来如上下文模块所预期？
范围控制 一次迭代。截取屏幕截图，对照试金石检查评估，修复任何明显问题，然后继续。将截图包含在交付物中。若需单次之外的迭代细化，参见 compound-engineering:design:design-iterator 代理。
创意能量 该技能提供结构，但目标是产出独特、避免 AI 套路的工作，而非公式化输出。对于全新项目，承诺一个大胆的美学方向：极简、极繁、复古未来、有机自然、奢华精致、俏皮、编辑风、粗野主义、装饰艺术、柔和粉彩、工业风等，或创造适合上下文的风格。问自己：什么让它令人难忘？