该技能用于前端设计工作，目标是产出有辨识度、达到生产级质量的界面，而非泛泛的 AI 风格。
用途与适用：适用于落地页、Web 应用、仪表盘、管理面板、组件等各类前端任务。
权限层级：现有设计系统与代码库模式优先级最高；用户明确指令可覆盖技能默认值；技能默认仅在全新项目或用户请求设计指导时适用。
工作流程：检测上下文 → 规划设计 → 构建 → 视觉验证。
上下文检测：先扫描代码库中的设计令牌/CSS 变量、组件库、CSS 框架、字体、配色、动画库、间距与布局模式等信号（建议用平台的 Glob/Grep 等搜索工具，而非 shell 命令）。据此判定模式：4 个以上信号为现有系统，应遵循；1 至 3 个为部分系统；无信号为全新项目，适用完整技能指导；信号矛盾则询问用户。
构建前规划：写三句简短声明——视觉主张（情绪、材质、能量）、内容计划（页面顺序，如落地页的英雄区、支撑、细节、CTA）、交互计划（2 至 3 个具体动效想法）。
设计核心：排版最多两种字体，避免常见默认字体（除非现有代码库已用）；配色用 CSS 变量，一个主色加锐利点缀；先构图后组件，首屏当作海报；默认无卡片布局，卡片仅用于交互容器；动效默认 2 至 3 个有意为之的动作，优先用项目已有动画库，无则按框架选择（CSS 动画、Framer Motion、Vue Transition、Svelte transitions）；语义化 HTML，对比度达 WCAG AA，所有交互元素有焦点态；图像优先真实摄影而非抽象渐变。
上下文模块：模块 A 落地页与营销；模块 B 应用与仪表盘；模块 C 组件与功能（在现有应用中默认使用，需匹配现有视觉语言）。
反模式：避免通用 SaaS 卡片网格首屏、紫白配色、深色模式偏见、过时字体、堆砌统计的英雄区、装饰性渐变、设计评论式文案等；绝不允许提示词语言泄漏进 UI、对比度断裂、无焦点态、div 汤。
视觉验证：实现后做一次截图检查，优先用项目已有浏览器工具，其次浏览器 MCP，再次 agent-browser（未安装则提示运行 /ce-setup），最后可做心智审查并注明跳过验证。一次迭代即可，如需多轮细化可参考 ce-design-iterator。
限制：所有规则均为默认值而非强制，可被现有系统或用户指令覆盖；具体收费、价格与平台支持暂未提供。