一、frontend-design 插件是什么Anthropic 官方插件anthropics/claude-code仓库plugins/frontend-design安装量 110 万2026-09 更新到 1.1.0。本质不是命令工具而是一份 SKILL.md 设计技能Claude 做前端任务时自动激活无需特殊命令。1.1 核心机制来自 SKILL.md 原文编码前先定设计方向确定主题/受众/页面唯一职责选定明确审美方向brutalist、maximalist、retro-futuristic、luxury 等“做一个能自圆其说的真实审美冒险”反AI 味三条默认脸brief 未指定时禁止使用米色底近 #F4F1EA 高对比衬线大标题 陶土色点缀纯黑底 单个荧光绿/朱红亮色点缀报纸风细线 零圆角 密集多栏先出设计 token 再写码两遍工作法Color4–6 个命名 hex 值Type2 角色字体有个性的展示体 互补正文体 可选数据/说明体Layout一句话布局概念 ASCII 线框Signature一个让页面被记住的独特元素自我批判流程brainstorm → 对照 brief 批判“这个选择放在任何类似页面是不是也成立成立就是默认不是选择”→ 修订并说明改了什么 → 确认独特性后才写代码写码注意CSS 选择器特异性冲突.section与.cta这类互相抵消质量底线响应式到移动端、键盘可见焦点、reduced motion 支持文案规范主动语态、按钮说清动作“Save changes” 不是 “Submit”、错误信息给方向不道歉、空态是行动邀请克制原则“把大胆花在一处signature 元素是唯一记忆点其余保持安静克制”1.2 安装方式 1官方插件命令推荐/plugin marketplace add anthropics/claude-code /plugin install frontend-designanthropics-claude-code⚠️ marketplace 标识是anthropics-claude-code。网上大量教程写的claude-code-plugins/claude-plugins-official是错的官方 issue #28173 确认。方式 2手动放 SKILL.md适合内网/项目级最轻量mkdir-p.claude/skills/frontend-designcurl-o.claude/skills/frontend-design/SKILL.md\https://raw.githubusercontent.com/anthropics/claude-code/main/plugins/frontend-design/skills/frontend-design/SKILL.md.claude/skills/项目根 项目级~/.claude/skills/ 全局装完不用任何特殊命令正常下指令即自动激活1.3 典型用法示例“做一个音乐流媒体应用的仪表盘”“给 AI 安全创业公司做个 landing page”“设计一个带深色模式的设置面板”1.4 配套增强可选Context7 MCP实时查 Vue/组件库版本文档防 API 幻觉Playwright MCP截图自检配合技能里 “take screenshots 自我批判” 的要求有 Figma 设计稿时走 Figma→code 流程比纯文字 brief 效果好得多二、用它开发 Vue2/Vue3 前端系统怎么做关键认知技能是框架无关的只教设计思维不绑定框架示例产出偏单页 HTML。Vue 工程里要做设计-实现分离2.1 流程先产出设计规范不直接写组件用 frontend-design 技能为「XX 系统」制定设计规范 确定审美方向、色板4-6个hex、字体配对、布局概念和 signature 元素。 只输出设计规范design tokens 线框先不要写代码。2.2 Token 落地方式场景落地建议Vue3 Vitedesign tokens 写成 CSS 变量放全局:root配合 scoped CSS / UnoCSS / Tailwind theme 配置Vue3 组件库色板/字体映射到 Element Plus / Ant Design Vue 主题定制--el-color-primary等 CSS 变量覆盖Vue2 老工程同样 CSS 变量现代浏览器均支持或 Less/Sass 变量注意 Vue2 scoped 穿透写法::v-deepVue2 Element UI主题定制只能走 Less 变量编译不能 CSS 变量热替换token 落地多一步2.3 组件级使用节奏系统级首页/驾驶舱/大屏自由发挥signature 元素放这里业务页表单/列表/CRUD不要让每页都大胆取险——技能自己说把大胆花在一处。做法首页/看板大胆业务页收敛为统一 token 的常规实现单组件任务把已有设计规范token显式贴进提示词比依赖自动激活更可控2.4 Vue2 特别注意生成代码大概率是 Vue3 语法script setup、ref提示词必须显式声明 “Vue 2.7 Options API不要用组合式 API”2.7 可用组合式则放宽Vue2 的 transition 和 CSS 变量都够用signature 动画不受限Element UIVue2 版主题定制走 Less 变量编译非 CSS 变量热替换三、旧系统Vue2/Vue3 人工开发加新功能如何保持界面风格一致核心思路先考古提取旧系统的设计规范再把它变成 AI 强制遵守的约束文件而不是让 AI 自由发挥。3.1 第一步设计规范考古一次性工作让 Claude Code 先做规范提取不要直接开始写功能分析这个项目的现有 UI 风格输出一份 DESIGN.md - 全局色板主色/辅助色/语义色从 CSS 变量、Less/Sass 变量、组件库主题配置里找 - 字体、字号阶梯、行高 - 圆角、阴影、间距体系找出常用的 4/8/16px 等节奏 - 按钮、表单、表格、弹窗、标签页的样式规律 - 布局模式侧边栏宽度、header 高度、卡片间距 - 图标库、组件库及版本技巧从代码反推不凭感觉描述。色值往往散落在.vuescoped style、static/css、element-variables.scss、tailwind.config.js等多处让 AI 全局搜索实际 hex 值并统计频率高频值就是事实标准有组件库Element UI / Element Plus / Ant Design Vue / iView主题配置文件是最高优先级规范直接读再看有没有覆盖定制纯手写 CSS 的老系统考古更重要常见 3 种按钮圆角、5 种主色深浅并存要指出主流用法新代码只用主流那套3.2 第二步固化成上下文文件关键机制仓库根目录CLAUDE.mdClaude Code 每次会话自动加载## UI 开发约束必须遵守 - 本项目 UI 规范见 DESIGN.md所有新页面/组件必须引用其中 token禁止自创新色值 - 组件库Element UI 2.15禁止引入新的 UI 库 - 新增颜色/字号必须先加入 src/styles/variables.scss 再使用 - 布局沿用 src/layout 现有结构不要改全局布局 - 表单/表格写法参照 src/views/xxx/List.vue项目内标杆页面 - 状态管理Vue2 项目用 Vuex不要用 Pinia - 路由/权限模式参照 router/index.js 现有写法配套——指定标杆页面旧系统总有几个最规整的页面点名新列表页参照views/device/List.vue的写法。一个真实参照文件比十句描述有效。3.3 frontend-design 插件在旧系统里的定位SKILL.md 明确适用范围是 “building new UI orreshaping an existing one”✅ “按 DESIGN.md 的规范用 frontend-design 技能优化这个列表页的视觉层次”——自动继承项目已定方向❌ “用 frontend-design 给这个系统做个新页面”无约束直接跑——会按它自己的审美偏好独特字体、signature 元素、大胆配色生成与旧系统格格不入的页面结论旧系统里该插件是润色器不是设计主。方向锁死在 DESIGN.md只借它对间距、动效、层次的讲究。3.4 实现层具体约束问题做法AI 自创色值所有颜色走变量var(--el-color-primary)/$primary评审/CI grep 新增 hex 值AI 新造轮子CLAUDE.md 明确优先复用src/components现有组件不够再新建新建后登记到该目录 READMEVue2 项目被写进 Vue3 语法CLAUDE.md 声明 “Vue 2.6 Options API禁止script setup、ref、computedfrom vue”scoped 样式互相污染约定新组件必须 scoped BEM 类名改全局样式前先问图标风格不一锁定图标库与线宽/填充风格禁止混用 emoji/unicode 符号3.5 验证闭环截图对比起 dev server 后对新页面截图与标杆页面截图并排看配 Playwright MCP 最顺lint 钩子可选但有效eslint 自定义规则或 pre-commit 脚本扫描.vue裸 hex 色值白名单外CI 挡掉改动面控制旧系统最大风险不是新页面丑而是新功能顺手改了公共组件/全局样式。约定新功能默认只加文件不改公共文件要改公共文件必须先列影响面四、总体结论frontend-design 是设计品味注入器而非 Vue 脚手架装好后先出 design tokens 与方向再落到工程 CSS 变量/组件库主题。新系统技能做设计主大胆留给首页/大屏业务页收敛为统一 token。旧系统技能只做润色一致性主要靠DESIGN.md 考古 CLAUDE.md 强制加载 标杆页面参照每次提示词重复叮嘱是最差方案。Vue2 老工程两个必做显式声明 Options API 约束Element UI 主题走 Less 变量编译路径。兜底靠验证截图对比 hex 值扫描 公共文件改动前置审批。