X (Twitter)

Frontend Design 技能如何引导 Claude 做出有辨识度的 UI 设计：美学方向、字体排印，以及摆脱模板感的决策方式——完整解读。

来源：内容改编自 anthropics/skills（MIT 协议）。最后同步于 2026 年 7 月 8 日，对应上游 2026 年 6 月 9 日的整篇重写。

概览

官方描述："Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one."

2026 年的重写把整个技能重塑为一种姿态：Claude 扮演一家小型设计工作室的主创，而客户已经拒绝过所有模板感的提案。每个决策——配色、字体、布局——都必须针对这个具体需求，还要包含"一个说得出理由的真正美学冒险"。

当前版 SKILL.md 分五个阶段推进：

扎根于主题 - 如果需求没写清产品是什么，Claude 必须先自己定义一个具体主题、目标受众和页面的唯一任务。
设计原则 - hero 区是一个论点；字体承载页面的个性；结构即信息（只有顺序真正重要时才用编号）；动效要有编排而非散落。
流程：头脑风暴 → 方案 → 自我批判 → 实现 → 再批判 - Claude 先写一套紧凑的 token 系统（4-6 个命名的十六进制色、2 种以上字体角色、用 ASCII 线框图表达的布局概念，以及一个让页面被记住的"签名"元素），并在写代码之前用需求反检方案。
反默认校准 - 技能明确点名了当前 AI 设计扎堆的三种样子（奶油底+衬线+赤陶色；近黑底+荧光绿；报纸式细线），并禁止把自由决策浪费在这些默认上。
CSS 纪律 - 注意选择器优先级，别让 section 和 CTA 的规则互相抵消间距。

Frontend Design 技能 - 让 Claude 写出更好的 UI

Frontend Design 技能如何引导 Claude 做出有辨识度的 UI 设计：美学方向、字体排印，以及摆脱模板感的决策方式——完整解读。

来源：内容改编自 anthropics/skills（MIT 协议）。最后同步于 2026 年 7 月 8 日，对应上游 2026 年 6 月 9 日的整篇重写。

官方描述："Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one."

当前版 SKILL.md 分五个阶段推进：

扎根于主题 - 如果需求没写清产品是什么，Claude 必须先自己定义一个具体主题、目标受众和页面的唯一任务。
设计原则 - hero 区是一个论点；字体承载页面的个性；结构即信息（只有顺序真正重要时才用编号）；动效要有编排而非散落。
流程：头脑风暴 → 方案 → 自我批判 → 实现 → 再批判 - Claude 先写一套紧凑的 token 系统（4-6 个命名的十六进制色、2 种以上字体角色、用 ASCII 线框图表达的布局概念，以及一个让页面被记住的"签名"元素），并在写代码之前用需求反检方案。
反默认校准 - 技能明确点名了当前 AI 设计扎堆的三种样子（奶油底+衬线+赤陶色；近黑底+荧光绿；报纸式细线），并禁止把自由决策浪费在这些默认上。
CSS 纪律 - 注意选择器优先级，别让 section 和 CTA 的规则互相抵消间距。