frontend-design

技能简介

frontend-design 是一项视觉设计指导技能，用于在构建新 UI 或重塑现有 UI 时做出独特、有意图的设计决策。它帮助你确定美学方向、排版方案，并避免产出让人一眼看出是模板默认或 AI 生成的设计。

使用场景

• 从零设计新页面或新应用的 UI，需要一个有辨识度的视觉方向
• 重塑现有界面，摆脱模板化的观感
• 为设计简报确定调色板、字体配对、布局结构与「签名元素」
• 在设计过程中对照简报进行自我批判，检查设计是否流于套路

使用方法

本技能通过 Agent 的 Skill 机制加载。在支持 skill 的 Agent 环境（如 Claude Code）中，将本技能放入 skills 目录即可启用。启用后，你只需提供设计简报，Agent 会按以下流程工作：

1. 制定设计计划：产出紧凑的设计 token 系统，包括 4～6 个具名 hex 色值、2 种以上字体角色（展示字体、正文字体、工具字体）、布局概念（用一句话描述 + ASCII 线框图对比），以及一个「签名元素」——页面最独特、最令人记住的部分。
2. 对照简报审查计划：逐项检查是否落入 AI 设计常见套路（米色底 + 衬线大标题 + 赤陶色点缀；近黑底 + 荧光单色点缀；报刊式窄边框布局）。若发现是通用默认方案而非为本简报定制，需修改并说明理由。
3. 确认后写代码：严格按修订后的计划执行，所有颜色、字体从 token 中导出。注意 CSS 选择器优先级，避免 .section 与 .cta 这类类名互相抵消 padding/margin。
4. 交付前再批判：设计完成后再次对照简报审查，确保无偏离。

注意事项

• 若简报未明确产品或主题，先自行确定具体主题、受众与页面核心任务，让设计扎根于主题自身的语汇。
• 编号标记（01/02/03）仅在内容确实是序列时使用；仅作装饰的编号是模板化设计的常见特征。
• 动效要克制、有意图：过度动画会增强「AI 生成感」。将最大胆的设计投入放在签名元素上，其余部分保持克制。