frontend-design 是一个配合 Claude Code 使用的设计指导 Skill。它不提供组件或框架，而是在编码前强制模型回答“这个界面给谁看、要什么语气、有哪些约束、记忆点是什么”，并对字体、配色、动效、构图与背景给出具体要求，适合整页搭建、组件重构和已有页面的视觉升级。
它是什么
frontend-design 是 Anthropic 官方 skills 仓库中的前端设计 Skill，面向 Claude Code 等 AI 编程 Agent。它的定位是“设计决策”而不是 UI 框架——不替换你的组件库，而是在动手写代码之前先把设计判断明确下来，减少 AI 生成界面常见的模板味。源码与说明位于 github.com/anthropics/skills。
它约束了什么
设计前的思考框架。 编码前先确定界面的目的、受众、视觉语气、技术约束与记忆点，把设计判断显式写进执行流程，而不是生成时临时决定。
字体排印。 明确避开 Inter、Roboto 这类默认字体，要求选择有性格的字体组合，用字体先立住气质。
色彩与主题。 避开白底紫渐变这类常见套路，建立主色加锐利点缀色的搭配，并用 CSS 变量保持全局一致。
动效编排。 优先做一次精心编排的入场动画，而不是到处撒微交互；纯 HTML 用 CSS 实现，React 可借助 Motion 库。
空间构图。 鼓励不对称、重叠、对角线等打破网格的布局，避免可预测的模板套路。
背景与细节。 可用渐变网格、噪点纹理等手段营造氛围，但每个细节都必须服务整体美学主题。
怎么用
自动触发。 在 Claude Code 或 Codex 中提出前端相关任务，Agent 会识别任务类型并读取该 Skill 的设计约束与流程。
显式触发。 在提示词中直接写明“请使用 frontend-design skill 设计并实现这个页面”。
补齐业务上下文。 给出产品类型、目标用户、品牌气质、信息优先级、技术栈、移动端需求与可访问性要求。只说“做得好看点”会让设计空间过大。
先读现有约定。 在已有项目中使用时，先让 Agent 读取现有组件、样式变量与设计规范，再动手改动，避免新页面与原系统割裂。
复用现有组件。 项目已有组件库时优先复用 Button、Table 等基础组件，把提升放在样式层与组合方式上。
完成后验证。 做桌面与移动端截图检查、文本溢出检查、交互状态检查、主题色对比度检查，并确认动效不会干扰使用。
适合什么场景
整页搭建： 产品官网、活动落地页等需要从零建立视觉方向的页面。
组件设计与重构： React、Vue、Svelte 或 HTML/CSS 组件，提升完成度与一致性。
已有页面视觉升级： 在现有系统中注入新的设计判断，同时不破坏原有架构。
没有设计稿时补原型： 快速输出高保真、可运行的界面。
企业后台与工具界面： 重心在信息扫描效率、操作密度和状态清晰度，而不是一味求炫。
限制
它是设计指导，不替代 UI 框架或组件库本身。
不提供图像生成能力，配图与插图仍需另找工具。
效果依赖上下文的完整度，产品信息给得越少，输出越容易回到通用模板。
生成结果需要人工验收，尤其是可访问性、对比度与真实设备上的表现。
常见问题
和普通提示词的区别在哪？ 普通提示词把审美判断留给模型随机发挥；这个 Skill 把目的、受众、语气、约束变成必须回答的问题，并给出具体的禁用项与替代方向。
需要付费吗？ 素材标注为配合 Claude Code 使用的免费 Skill；授权与使用条件以官方仓库为准。
支持 Vue、Tailwind 吗？ 支持。它不绑定框架，只作为上层设计指导。
会替代设计师吗？ 不会。它减少返工，但品牌决策与设计系统仍由人决定。
常见问题
它和普通说“帮我做个好看的页面”有什么区别？
普通提示词把审美判断留给模型随机发挥；这个 Skill 把目的、受众、语气、约束变成必须回答的问题，并列出具体的禁用项与替代方向。
需要付费吗？
素材标注为配合 Claude Code 使用的免费 Skill；具体授权与使用条件以 Anthropic 官方仓库为准。
支持 Vue 或 Tailwind 吗？
支持。它不绑定框架，只作为上层设计指导，原生 HTML/CSS、React、Vue、Tailwind、Ant Design 都可以配合使用。
会替代设计师吗？
不会。它把设计判断前移到编码阶段以减少返工，品牌决策和设计系统仍需要人来定。
