这是一个面向前端界面的设计技能，目标是产出有辨识度、可上线的高品质界面，避免常见的通用 AI 视觉风格。它覆盖完整生命周期：检测现状、规划设计、有意图地构建、再做视觉验证。
用途与适用场景：可用于落地页、Web 应用、仪表盘、管理后台以及组件等各类前端工作。
规则优先级：现有设计系统或代码库风格优先级最高，始终遵从；用户明确指令高于技能默认值；技能默认仅用于全新项目或用户要求设计指导时。
工作流程：检测上下文→规划设计→构建→视觉验证。
上下文检测：先扫描设计令牌/CSS 变量、组件库、CSS 框架、字体、色板、动效库、间距布局等信号，并用平台原生搜索工具（如 Claude Code 的 Glob/Grep）查找，而非 shell 命令。据信号量分类：现有系统（多类 4 个以上信号）让位既有风格；部分系统（1–3 个）仅对未覆盖处用默认；全新项目（无信号）应用完整指导；信号矛盾时先询问用户。
构建前规划：写下三项陈述——视觉主张（一句描述氛围、材质、能量）、内容计划（页面元素及顺序）、交互计划（2–3 个具体动效构想）。
核心指导：字体最多两种并避免泛滥字体；用 CSS 变量建立一致色板，默认一个强调色；先构图后组件，默认无卡片布局；交付 2–3 个有意图的动效，优先复用项目现有动画库；无障碍方面默认语义化 HTML、满足 WCAG AA 对比度、交互元素有焦点态；图像优先真实摄影，有工具时生成贴合场景的视觉。
上下文模块：模块 A 落地页（默认段落：Hero、支撑、细节、最终 CTA）；模块 B 应用与仪表盘；模块 C 组件与功能（在现有应用中默认使用）。
限制与约束：避免通用 SaaS 卡片网格首屏、紫配白、过用字体、堆砌统计的 Hero、无叙事目的的轮播、装饰性渐变、设计评论式文案等；始终避免提示词语言泄露进 UI、对比度失效、缺少焦点态、div 堆砌等。视觉验证优先用项目现有浏览器工具，其次浏览器 MCP，再次 agent-browser CLI，最后无浏览器时以清单自检并注明跳过了视觉验证。一次迭代即可，截图自检，修复明显问题后继续。