frontend-design：做出有立场、不像模板的界面

适合谁

当你在做新界面，或改一份已有界面，并且需要有意识、可辨认的视觉方向时，使用 frontend-design。它帮你定美学方向、字体和那些看起来不像模板默认值的选择。

更合适的前提是：把这次任务当成设计工作室的设计负责人，客户已经拒绝过套话或模板感方案，并愿意为明确观点付费。你要对这次简报里的配色、字体和布局做有立场的选择，在理由充分时可以承担审美风险。资料没有给出代理产品名单或安装器，不要把它理解成某一家软件的独占功能。官方说明页是

https://raw.githubusercontent.com/anthropics/skills/main/skills/frontend-design/SKILL.md

3 分钟完成第一次尝试

这条说明没有给出安装命令，第一次尝试不要编造仓库路径或包管理器指令。推荐路径就是资料里的过程：先 plan，再对照简报检查，然后 build，最后 critique。

前置：你已经有一份界面任务，哪怕简报很短。低风险第一次动作是只做定位，不改代码、不写文件。若简报没有写清产品或主题，先自己认定一个具体主题、受众和这项设计的主任务，写成提案，并与提出需求的人确认。未确认前不要进入配色或写界面。

成功信号：三句话能说清「这是给谁、解决什么、主题是什么」，并且对方点头或明确反对后你才改。不要先铺一层接近 #F4F1EA 的暖奶油底、再配高对比衬线标题和陶土色点缀——资料把这列为当前生成稿扎堆的特征。

使用案例

案例一：简报缺少产品信息时先对齐再设计。按资料，先自己提出一个具体主题、受众和主任务，作为提案并确认。完成标准是这三项被确认，而不是已经出了一版完整 UI。资料没有写确认要用哪种工具，口头或文字均可；未确认就画界面，超出这条路径。

案例二：为已对齐的简报做字体决定。资料写明：标题和正文不必各用一套完全不同的字体；用一个家族，或两套但必须明显区分。要有意选择，不要随手拿「任何项目都会用的默认字体」。摘要还提到行长保持 80 个字符以内，但摘录没有写出行长检测步骤，因此本案例完成标准是字体家族数量和差异已经定下来，而不是已经跑完排版检查。配色和布局仍要针对这次简报，不要复用奶油底加陶土强调的常见搭配。

使用边界

过程是 plan、对照简报、build、再 critique。先有主题、受众和主任务，再做视觉。字体用一套或两套，拒绝万能默认字体。避免资料点名的生成稿扎堆：暖奶油背景（接近 #F4F1EA）、高对比衬线标题、陶土或暖黏土强调。

不要编造安装器或仓库内路径。资料没有给出组件库名单、默认色板文件或客户端列表。写代码或覆盖现有样式前，先确认提案已被接受。超出这些已写明的定位、字体和避坑，这份说明覆盖不到。若只是套用现成模板而不针对这次简报做选择，就不该走这条路径。先把简报对齐，再承担有理由的审美风险。