设计先行的工作流：强制模型在编码前提交“设计计划”，明确色板（4～6 个精确色值）、字体搭配（展示字体＋正文字体）、布局概念与签名元素（页面上最令人难忘的独特细节）。
多元美学风格库：内置 brutally minimal、maximalist chaos、retro-futuristic、editorial/magazine、luxury/refined 等十余种大胆美学方向，供用户选择或组合。
生产级代码生成：输出可运行的 HTML/CSS/JS、React、Vue、Svelte 代码，并兼顾语义化 HTML、ARIA 标签、键盘导航与色彩对比度等可访问性要求。
反“AI 俗套”约束：明确禁止 Inter、Roboto、Arial 等通用字体、白色背景上的紫色渐变、可预测布局等模板化套路。
高冲击力动效与视觉细节：支持编排式页面加载动画、滚动触发效果、悬停微交互，以及渐变网格、噪点纹理、几何图案、颗粒叠加等氛围化背景。
自我审查机制：生成后反问“换一个产品描述是否会得到相同方案”，若是则推倒重来，确保方案的独特与不可替代。

第一步，安装：在 Claude Code 中执行 /plugin install frontend-design@anthropics/claude-code，重启后生效；或将 anthropics/skills 仓库克隆到 Skills 目录使用。
第二步，描述需求：直接提出前端构建需求，例如“为音乐流媒体应用创建仪表盘”，可附上目标用户、用途与技术约束等上下文。
第三步，选择风格（可选）：从 brutalist、editorial、retro-futuristic、luxury 等方向中指定一个，或让模型自行决定美学方向。
第四步，审查与迭代：Claude 会先给出设计计划，确认方向后再生成代码；若结果不符合预期，可要求调整方向后重新生成。
除 Claude Code 外，该 Skill 还兼容 Cursor、Codex、Gemini CLI、OpenCode 等 15 个以上 AI 编程工具。

其一，解决 AI 前端的“同质化”痛点。传统 AI 常反复产出相似的渐变 Hero、三列卡片与 CTA 布局，该 Skill 通过强制设计先行的机制，让每次输出都拥有独立美学。
其二，轻量高效。其提示词仅约 400 token，按需加载，不占用过多上下文却能显著提升输出质量。
其三，流程专业。模仿人类设计师从情绪板（mood board）、风格指南（style guide）到落地的完整工作流，可解释、可审查。
其四，跨工具通用。基于标准 Skill 规范，可被 Claude Code、Cursor、Codex 等主流 AI 编程工具复用。
其五，审美与代码并重。不仅追求“好看”，更保证代码可运行、可维护，并兼顾可访问性与性能。

独立开发者与创业者：在没有专职设计师的情况下，快速生成具备专业审美的落地页、产品界面与营销页面。
产品经理与设计师：快速产出高保真设计稿与交互原型，辅助方案沟通与设计决策。
前端工程师：作为组件、页面开发的灵感与样板来源，同时学习排版、配色、动效等设计规范。
AI 工具深度用户：在 Claude Code、Cursor、Codex 等环境中希望突破“AI 味”输出瓶颈的开发者。
教育者与学习者：研究 AI 驱动设计流程、探索通过提示词约束实现高质量 UI 生成方法论的师生与研究者。

Q1: frontend-design 与 MCP 有什么区别？
A1: MCP 赋予 AI 调用外部工具与数据的能力，而 Skill 是教模型“按标准与流程做事”的专业指令包。frontend-design 属于后者，按需加载、更省 token、更聚焦流程规范。
Q2: 必须使用 Claude 才能运行吗？
A2: 不是。该 Skill 基于通用规范，除 Claude Code 外，也支持 Cursor、Codex、Gemini CLI、OpenCode 等 15 个以上 AI 编程工具。
Q3: 如何安装 frontend-design？
A3: 在 Claude Code 中执行 /plugin install frontend-design@anthropics/claude-code，重启后生效；也可克隆 github.com/anthropics/skills 仓库放入 Skills 目录。
Q4: 生成的代码风格会固定吗？
A4: 不会。Skill 内置十余种美学方向，并通过自我审查避免重复，刻意在轮次之间变化明暗主题、字体与风格。
Q5: 不指定风格时 Claude 会怎么做？
A5: 它会根据需求上下文自行选择一个大胆且契合的美学方向，先给出设计计划供你确认，再开始写代码。
Q6: 使用该 Skill 会牺牲代码质量吗？
A6: 不会。它强调生产级代码，包含语义化 HTML、可访问性（ARIA、键盘导航、对比度）与性能优化，风格与质量并重。