用途
Frontend Design 是一套面向界面设计的指导技能，适用于构建全新 UI 或重塑现有界面的场景。它的核心目标不是套用模板，而是帮助设计者做出独特、有意图的视觉决策，让每个项目拥有无法被误认的视觉识别。
该技能将设计者定位为一家小型工作室的设计主管：客户已经拒绝了模板化的方案，付费购买的是独特的观点。因此需要在调色板、字体和布局上做出深思熟虑、有主见的选择，并承担一个能够被论证的审美风险。
主要能力
以主题为根基
如果设计简报没有明确产品或主题是什么，需要先自行确定：命名一个具体主题、它的受众，以及页面的单一任务，并说明这一选择。主题自身的世界——它的材料、工具、器物和语言——是独特选择的来源。整个设计应使用简报的真实内容和主题素材。
设计原则
- 首屏即论点：以主题世界中最具特征的事物开场，形式可以是标题、图像、动画、实时演示或交互时刻。需要审慎选择，避免“大数字加小标签、辅助统计、渐变强调”这类模板化答案。
- 字体承载个性：有意识地搭配展示字体与正文字体，避免使用在任何项目上都会选择的字体家族，建立清晰的字体层级，包含有意图的字重、字宽和间距。字体处理本身应成为设计中令人难忘的部分。
- 结构即信息：编号、眉题、分隔线、标签等结构装置应编码内容的真实信息，而非装饰。例如编号标记（01 / 02 / 03）只有在内容确实是序列时才适用。
- 有意图地运用动效：考虑动画在何处以及是否能为主题服务，包括页面加载序列、滚动触发揭示、悬停微交互、环境氛围。精心编排的时刻通常比零散效果更有力，但有时少即是多，过多动画会让人感觉设计是 AI 生成的。
- 复杂度匹配愿景：极繁方向需要精细执行，极简方向需要在间距、字体和细节上保持精确。优雅是把选定的愿景执行好。
- 审慎考虑文案内容：设计简报往往不含真实内容，需要自行创作文案。文案可能让设计显得和设计本身一样模板化。
流程：头脑风暴、探索、规划、批判、构建、再次批判
该技能指出，当前 AI 生成设计集中在三种外观上：(1) 暖奶油色背景（接近 #F4F1EA）配高对比衬线展示字体和陶土色强调；(2) 近黑背景配单一明亮的酸绿或朱红强调；(3) 大报风格布局，细线规则、零圆角、密集的报纸式分栏。这三种对某些简报是合理的，但它们是默认值而非选择，且无论主题如何都会出现。当简报明确了视觉方向时，应严格遵循简报自身的措辞。当某个轴留空时，不应把这份自由花在这些默认值上。
工作分两遍进行。第一遍：根据设计简报头脑风暴一个简短的设计计划，创建紧凑的令牌系统，包含颜色、字体、布局和签名元素。颜色：用 4–6 个命名的十六进制值描述调色板。字体：为 2 个以上角色选择字体（一个有个性的展示字体，克制使用；一个互补的正文字体；以及必要时用于说明或数据的工具字体）。布局：一个布局概念，用一句话散文描述和 ASCII 线框图来构思和比较。签名：这个页面将被记住的单一独特元素，以恰当方式体现简报。
第二遍：在构建前对照简报审查该计划。如果任何部分读起来像你会为任何类似页面生成的通用默认值，而非为这个具体简报做出的选择，就修改该部分，说明改了什么以及为什么。只有在确认设计计划相对独特之后，才开始编写代码，严格遵循修订后的计划，并从中推导每一个颜色和字体决策。
编写代码时，注意 CSS 选择器特异性的结构。很容易生成相互抵消的 CSS 类（尤其是像 .section 这样的基于类型的选择器和像 .cta 这样的基于元素的选择器），这在区块之间的内边距/外边距上经常发生。
尽量在思考中完成大量规划和迭代，只在有较高信心会让用户满意时才展示想法。
克制与自我批判
把大胆用在一个地方。让签名元素成为唯一令人难忘的事物，保持周围一切安静而有纪律，删掉任何不为简报服务的装饰。不冒险本身可能就是一种风险。在不声张的情况下达到质量底线：响应式下至移动端、可见的键盘焦点、尊重减少动效设置。构建时批判自己的作品，如果环境支持就截图——一图胜千 token。考虑香奈儿的建议：出门前照照镜子，摘掉一件配饰。人类创作者有记忆并总是尝试新事物，如果有空间快速记下尝试过的东西，对未来的迭代会有帮助。
设计中的写作
文字出现在设计中只有一个原因：让人更容易理解，从而更容易使用。它们是设计材料，不是装饰。对文案应投入与间距和颜色同等的意图。写任何东西之前，先问设计需要说什么，以及如何最好地表达以帮助人们导航体验。
从屏幕另一端用户的角度写作。用人们控制和识别的事物来命名，而不是系统如何构建。一个人管理的是通知，不是 webhook 配置。用平实的语言描述某物做什么，而不是推销它。具体总是比聪明更好。
默认使用主动语态。控件应准确说明使用时会发生什么：“保存更改”，而不是“提交”。一个动作在整个流程中保持同一名称，所以按钮说“发布”，产生的提示就说“已发布”。界面的词汇是导航产品的路标。凝聚力和一致性是人们学会认路的方式。
把失败和空白视为提供方向的机会，而非情绪。解释出了什么问题以及如何修复，用界面的声音而非个人的声音。错误不道歉，也从不含糊其辞。空屏幕是行动的邀请。
保持对话式且调校过的语域：平实的动词、句子大小写、无填充词，语气与品牌和受众匹配。让每个元素只做一件事。标签只做标签，示例只做演示，没有任何东西悄悄兼任两职。
当令牌已存在
如果项目已有设计系统，在发明调色板或字体搭配之前先阅读 references/product-ui.md。现有令牌和原语优先；独特性留在该系统内部。这仍然是唯一的视觉方向技能。
使用方式
该技能以指导文档形式提供，通过阅读并遵循其中的设计原则和流程来使用。它包含对相关参考文件的引用，需要时按路径查阅。
适用场景
- 构建新的用户界面
- 重塑现有界面
- 需要确定美学方向、字体和版式的设计任务
- 希望避免 AI 生成设计常见默认风格的项目
限制
- 该技能是设计指导，不提供具体的代码实现或组件库
- 当项目已有设计系统时，独特性需限制在该系统内部
- 具体支持的平台、收费方式、价格等信息暂未提供
交互
- 产品 UI / 令牌：references/product-ui.md
- UI 代码审查：web-design-guidelines
- 组件组合：composition-patterns
- 动效：emilkowal-animations、motion-v13