如果你在用Claude Code做设计，默认的思路更偏开发者，让它做个落地页，功能能跑，但视觉常常停留在"把h1做得比h2大一点"的水平。这8个技能可以把Claude Code变成真正能一起做设计的伙伴。

为什么要按顺序安装

这些技能按顺序排，让每一个都建立在前一个的基础上：

• 技能#1：先让Claude有设计感
• 技能#2：让它用合适的方式实现
• 技能#3：给它组件库直接用
• 后面在此基础上叠加

8个核心技能

1. ui-ux-pro-max — 设计智能系统

最关键的一个。相当于塞进Claude里的"设计资料库"：

• 常见UI风格（玻璃拟态、极简、野兽派）
• 不同行业配色方案
• 成套字体搭配（还会解释为什么这样搭）
• UX规则（点击区域到z-index）
• 数据可视化类型

安装：

npx skills add nextlevelbuilder/ui-ux-pro-max-skill@ui-ux-pro-max -g -y

三步工作流程：

步骤1：跑设计系统

python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa"

步骤2：按领域补细节

python3 skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux

步骤3：按技术栈落地

python3 skills/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind

进阶技巧：持久化设计系统

# 先建一套主设计系统
python3 skills/ui-ux-pro-max/scripts/search.py "SaaS fintech" --design-system --persist -p "FinDash"

# 给结账页加覆盖
python3 skills/ui-ux-pro-max/scripts/search.py "payment checkout secure" --design-system --persist -p "FinDash" --page "checkout"

生成结构：

• design-system/MASTER.md — 全局规则
• design-system/pages/checkout.md — 页面级覆盖

2. frontend-design — 官方设计模式

Anthropic自己做的前端设计技能，"官方写法"：

• 布局方式、组件结构、响应式处理
• 现代Web最佳实践
• 更合理的CSS Grid布局
• 靠谱的响应式断点

安装：

npx skills add anthropics/skills@frontend-design -g -y

用法： ui-ux-pro-max给方向，这个负责按规范落地。

3. shadcn-ui — 现代组件库

基于Radix UI和Tailwind CSS的React组件库，Linear、Vercel、Cal.com同款风格。

安装：

npx skills add giuseppe-trisciuoglio/developer-kit@shadcn-ui -g -y
npx skills add google-labs-code/stitch-skills@shadcn-ui -g -y

为什么需要它： 从零写仪表盘很慢，用shadcn/ui直接提供好看、可访问、可定制的组件。

4. web-accessibility — WCAG合规

WCAG 2.1检查能力：颜色对比、键盘操作、屏幕阅读器支持、ARIA属性。

安装：

npx skills add supercent-io/skills-template@web-accessibility -g -y

用法：

"帮我检查这个页面的WCAG AA合规性，并把问题修一下。"

检查清单：

• 对比度够不够
• 有没有alt文本
• 表单标签是不是正确
• 键盘能不能正常操作
• 焦点是不是清晰
• prefers-reduced-motion

5. web-design-guidelines — 设计规范检查

Vercel Labs官方的"设计版Linter"：读代码，按最新Web设计规范检查，输出到具体行号。

安装：

npx skills add vercel-labs/agent-skills@web-design-guidelines -g -y

用法：

"按Web设计规范帮我检查这些文件"

6. ui-animation — 动效设计

常用动画方案：Framer Motion、GSAP、CSS动画、微交互、页面过渡、骨架加载。

安装：

npx skills add mblode/agent-skills@ui-animation -g -y

核心原则：

• 微交互控制在150-300ms
• 用弹簧（spring）做动画更自然
• 用transform和opacity，别动width/height
• 处理prefers-reduced-motion

7. figma-implement-design — Figma到代码

官方Figma→代码工具：从Dev Mode读取颜色、间距、字体，转成接近像素级还原的代码。

安装：

npx skills add figma/mcp-server-guide@figma-implement-design -g -y

用法：

"这是我的Figma链接：[url]，提取配色和字体，然后用React+Tailwind实现首屏"

搭配ui-ux-pro-max使用效果最佳。

8. tailwind-design-system — Tailwind模式

帮Claude把Tailwind用对：间距、颜色、断点、组件组织。

安装：

npx skills add wshobson/agents@tailwind-design-system -g -y

如果你不用Tailwind，可以跳过。

快速安装：一次装齐

# 核心设计智能
npx skills add nextlevelbuilder/ui-ux-pro-max-skill@ui-ux-pro-max -g -y

# 官方模式
npx skills add anthropics/skills@frontend-design -g -y

# 现代组件
npx skills add giuseppe-trisciuoglio/developer-kit@shadcn-ui -g -y
npx skills add google-labs-code/stitch-skills@shadcn-ui -g -y

# 无障碍性
npx skills add supercent-io/skills-template@web-accessibility -g -y

# 设计规范检查
npx skills add vercel-labs/agent-skills@web-design-guidelines -g -y

# 动画
npx skills add mblode/agent-skills@ui-animation -g -y

# Figma集成
npx skills add figma/mcp-server-guide@figma-implement-design -g -y

# Tailwind模式
npx skills add wshobson/agents@tailwind-design-system -g -y

实战工作流：从概念到落地

场景：给高端水疗中心做落地页

步骤1：跑设计系统

python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness luxury elegant" --design-system -p "Serenity Spa"

步骤2：搭页面结构

用上面的设计系统做一个落地页：首屏（全高+柔和渐变）、3列服务卡片（玻璃风格）、推荐轮播和CTA。用shadcn/ui。

步骤3：接入Figma（如果有设计稿）

这是Figma链接：[url]，提取首屏图、logo和配色，然后把首屏对齐。

步骤4：补动效

给首屏加淡入，服务卡片hover有缩放，推荐区用骨架加载。

步骤5：跑无障碍检查

帮我按WCAG AA检查一下，有问题直接修。

步骤6：设计规范检查

按Web设计规范帮我再扫一遍这些文件。

步骤7：过设计系统

再看一遍第一步的输出，重点盯"反模式"：有没有不该出现的阴影？颜色有没有跑偏？CTA会不会太激进？

上线前常识检查清单

检查项	说明
图标	别用emoji，换成SVG（Heroicons/Lucide）
logo	用对了没
hover	不要把布局挤来挤去
主题色	直接用bg-primary
可点击元素	有没有cursor-pointer
动画	是不是在150-300ms
异步操作	有没有loading状态
明暗模式	对比度是不是正常