用途：指导创建有辨识度、达到生产级品质的前端界面，避免千篇一律的 AI 风格。适用于落地页、Web 应用、仪表盘、后台面板、组件等各类前端工作。
权威层级：现有设计系统与代码库模式优先级最高；用户明确指令可覆盖技能默认值；技能默认值仅在全新项目或用户主动寻求设计指导时适用。
工作流：检测上下文 → 规划设计 → 构建 → 视觉验证。
上下文检测：先用平台的 Glob/Grep 等文件与内容搜索工具扫描设计令牌/CSS 变量、组件库（shadcn/ui、MUI、Chakra、Ant Design、Radix 等）、CSS 框架、字体、配色、动画库与间距布局模式，再判定模式：现有系统（4 个以上信号）遵从既有系统；部分系统（1–3 个）沿用已有约定，其余用技能默认；全新项目（无信号）全面应用技能指导；信号矛盾时先询问用户。
构建前规划：写三句简短陈述——视觉主张（情绪、材质、能量）、内容计划（页面内容与顺序）、交互计划（2–3 个具体动效想法）。
设计核心：字体最多两种、避免常见默认字体；配色用 CSS 变量、一个主色加锐利点缀；先构图后组件，默认无卡片布局；动效交付 2–3 个有意图的动作，优先用项目已有动画库；语义化 HTML、满足 WCAG AA 对比度、所有交互元素有焦点态；图像优先真实摄影。
上下文模块：模块 A 落地页与营销（英雄区、支撑、细节、最终 CTA）；模块 B 应用与仪表盘（平静的层级、强排版与间距、少色彩、密集可读）；模块 C 组件与功能（在现有应用中默认使用，匹配既有视觉语言）。
硬性规则：默认反对通用 SaaS 卡片网格首屏、紫白配色、深色模式偏好、过度使用字体、堆砌统计与徽标的英雄区、无叙事目的的轮播、多个竞争主色、装饰性渐变、设计评论式文案、文字压在图像杂乱一侧的分屏英雄区。始终避免：提示词语言或 AI 评论泄漏到 UI、对比度损坏、无焦点态、语义 div 堆砌。
视觉验证：优先用项目已有浏览器工具（Playwright、Puppeteer、Cypress 等），其次浏览器 MCP 工具，再次 agent-browser CLI，最后无浏览器时做心智自检并注明跳过视觉验证。只做一轮迭代，截图对照检查清单，修复明显问题后继续。
限制：所有规则均为默认值而非强制；在现有代码库中应遵从既有模式；更深入的迭代优化需参考 compound-engineering:design:design-iterator 智能体。资料未提供具体安装命令、收费与平台支持信息。