Claude代码前端设计工具包

我所发现的一切实际上使Claude Code输出在前端看起来更好。技能、插件、MCP服务器、CLAUDE.md技巧，按您要做的事情组织。

April 2026 · 70+ tools · 10 sections

如果这有用，请将其标记为星号，以便其他人可以找到。欢迎PR——请参阅贡献.

______________________________________________________________________

设计技巧 --杀死AI垃圾
全站主题化 --让一切都匹配
动画与运动 --GSAP、Framer Motion、滚动效果
UI/UX智能 --模式，a11y，研究
按代码设计 --Figma管道
测试和浏览器自动化 --给克劳德一双眼睛
文档和上下文 --停止产生幻觉的API
框架技能 --React、Tailwind、Three.js、D3
部署和预览 --发货
推荐堆叠 --一起安装什么
快速参考
进一步阅读
贡献

______________________________________________________________________

设计技巧

*默认的Claude输出看起来像其他AI生成的页面。相同的字体，相同的紫色渐变，相同的卡片布局。这些解决了这个问题。*

前端设计（官方）

您首先安装的那个。Anthropic自己的技能，告诉Claude在编写代码之前选择一个实际的美学方向，而不是默认为Inter+紫色渐变+圆形卡片。


作者	人类学
安装	`claude plugin add anthropic/frontend-design`
类型	技能（自动激活）
源	人类学/克劳德密码/。../前端设计

什么变化：

Claude在编码之前选择了一个方向（野兽派、社论、复古未来主义等）
需要真正的排版配对，而不仅仅是无衬线字体
阻止通用组件模式和千篇一律的布局
强制使用CSS变量和连贯的颜色系统

先安装这个。此列表中的其他所有内容都假定您拥有它。

UI/UX Pro Max——62.6万颗星

240多种风格，127种字体配对，99条用户体验指南。告诉它“金融科技仪表板”，它就会选择一个对金融科技有意义的设计系统。v2.0推理引擎自动进行样式匹配。


作者	nextlevelbuilder
安装	`claude plugin add nextlevelbuilder/ui-ux-pro-max-skill`
类型	技能+CLI(`uipro-cli`)
源	nextlevelbuilder/ui-ux-pro-max技能

如果你没有被锁定在克劳德密码中，也可以与Cursor、Windsurf、Codex和其他十几个代理合作。

味觉技能

克劳德的狂野程度可调旋钮。您可以设置设计差异（从安全到实验）、运动强度（从微妙到电影级）和视觉密度（从宽敞到紧凑）。如果你想输入输出的固执己见程度，那很好。


作者	Leonxlnx
安装	`claude plugin add Leonxlnx/taste-skill`
源	Leonxlnx/味觉技能

前端设计专业演示

11个命名为美学的HTML/CSS演示和生成演示的主提示。作为参考，你可以告诉克劳德“使用深色OLED豪华风格”，它知道你的意思。


作者	ClaudeKit（食品专家）
安装	`claude plugin add claudekit/frontend-design-pro-demo`
源	claudekit/前端设计专业演示

#	美学	思考。..
1	瑞士极简主义	Helvetica，网格，大量空白
2	Neumorphism	柔和阴影，挤压元素
3	玻璃形态	磨砂玻璃、模糊、透明
4	粗野主义	原始、反设计、大字体
5	粘土形态	3D粘土斑点，柔软的形状
6	极光网格渐变	流动的颜色渐变
7	复古未来主义/赛博朋克	黑暗中的霓虹灯，科幻
8	3D超现实主义	深度、透视
9	活力块最大化	色块，大声
10	深色OLED豪华版	纯黑、金色、高级
11	有机生物形态	大地色调，自然形状

Bencium用户体验设计师

两种模式： 受控的 （从发货到生产——WCAG，全响应规格，运动约束）以及 创新的 （探索——大胆、有创意、打破规则）。附带830行可访问性指南和600行响应模式，作为Claude在需要时加载的单独参考文件。


作者	苯
安装	`cp -r bencium-controlled-ux-designer ~/.claude/skills/`
源	bencium/benchium-claude代码设计技巧

文件包括： SKILL.md, ACCESSIBILITY.md （约830行）， RESPONSIVE-DESIGN.md （约600行）， MOTION-SPEC.md, DESIGN-SYSTEM-TEMPLATE.md

品牌指导技巧

Anthropic自己的品牌色彩和排版作为一种技能。它本身没有用，但如果你想为自己的公司创造一种品牌技能，它是一个很好的模板。


作者	人类学
源	claude.com/plugins

______________________________________________________________________

全站主题和设计代币

*上述设计技巧教会了克劳德思考美学。这些工具生成实际的配置文件——CSS变量、Tailwind @theme 区块、暗模式标记——这样你的整个网站看起来是一致的，而无需在每个提示下重新解释你的品牌。*

设计系统架构师

从头开始构建一个完整的代币系统。OKLCH颜色空间（P3宽色域），4px间距网格，语义亮/暗主题，排版比例。输出Tailwind v4 @theme 阻止你进入CSS。


类型	技能
源	mcp-market.vercel.app/kills/design系统架构

生成：语义颜色映射、品牌着色中性色（非纯白色/黑色）、排版比例、间距网格、深色模式标记。一切都会自动变成顺风公用事业。

设计代币技能

这就是懒惰天才的方法。它基于单一元素构建了你的整个色彩系统 --brand-hue 变量。更改一个数字，所有内容都会重新设置主题——主要、次要、背景、边框、静音状态，所有这些都是使用OKLCH数学从该色调中得出的。


作者	弗拉兹德
源	claude-plugins.dev/kills/design-tokes

输出如下：

@import "tailwindcss";
@theme {
  --brand-hue: 250;
  --color-primary: oklch(0.6 0.2 var(--brand-hue));
  --color-background: oklch(0.995 0.005 var(--brand-hue));
  --color-foreground: oklch(0.15 0.02 var(--brand-hue));
  --color-muted: oklch(0.94 0.01 var(--brand-hue));
  --color-border: oklch(0.88 0.015 var(--brand-hue));
  /* + typography, spacing, radius, shadows */
}

一个数字控制整个调色板。这就是行动。

顺风CSS套件

自动激活顺风v4技能。首先介绍CSS @theme 方法（不再 tailwind.config.js)、暗模式模式、响应实用程序、组件提取和插件设置(@tailwindcss/forms, @tailwindcss/typography等等）。


作者	blencorp（克劳德代码套件）
源	blencorp/claude代码套件

UI造型技巧（ClaudeKit）

shadcn/ui+顺风+形状处理在一个技能。生成主题组件配置， @layer 组织、黑暗模式切换实现和反应钩子形式+zod模式。如果你的堆栈是shadcn，那么就是这个。


源	claudecodeskills.wayjet.io/kills/ui-steling

顺风造型技巧（MajesticLabs）

专注于反应的顺风风格。组件级主题化、响应式布局、设计系统集成。如果你不需要shadcn，重量比ClaudeKit版本轻。


作者	majesticlabs开发
源	claude-plugins.dev/kills/tailwind气缸

创建设计系统规则（Figma）

将其指向您的Figma文件，它将生成一个Claude在每个任务中都遵循的规则文件。对组件所在的位置进行编码，使用哪些令牌，如何处理间距，遵循哪些Tailwind约定。设定并忘记一致性。


需要	Figma MCP
源	mcpservers.org/clade-kills/figma/create-design-system-rules

输出包括：组件目录规则、令牌强制（“从不硬编码十六进制”）、间距比例、顺风约定、Figma编码工作流步骤。

CLAUDE.md主题块（人类学方法）

不是插件，只是CLAUDE.md中的一块文本。这来自Anthropic的官方前端美学食谱，是在整个网站上实施美学的最快方法。五行配置。不安装。


源	前端美学食谱

示例——将整个项目锁定为太阳朋克美学：

## Frontend Theme

Always design with Solarpunk aesthetic:
- Warm, optimistic color palettes (greens, golds, earth tones)
- Organic shapes mixed with technical elements
- Nature-inspired patterns and textures
- Bright, hopeful atmosphere
- Retro-futuristic typography

您可以调整更多预设：

主题	关键指令
赛博朋克	暗霓虹灯，单空间型，毛刺效应，扫描线
社论	连载标题、杂志网格、静音调色板、引语
SaaS最低	一种强调色，系统UI字体，大量空气，基于卡片
深色OLED豪华型	没错 `#000` bg，金色/奶油色，细衬线字体
野兽派	系统字体、可见边框、无圆角、色彩鲜艳
复古未来主义	渐变网格、镀铬、几何形状、紫色/青色
有机/天然	大地色调、圆形、暖色阴影、衬线体
装饰艺术	金色+黑色，几何图案，游乐场展示，对称

CLAUDE.md.中的五条线路可立即运行，无需安装。

何时使用什么

你想要。..	使用这个
“让它看起来很快”	CLAUDE.md主题块
带有OKLCH的完整令牌系统	设计令牌或设计系统架构师
shadcn/ui主题	ui造型技巧
Figma文件中的自动规则	创建设计系统规则
AI为您的产品选择合适的风格	UI/UX Pro Max
命名美学预设	前端设计专业演示
可调方差旋钮	味觉技能

______________________________________________________________________

动画与运动

*设计技巧让克劳德思考运动。这些为它提供了实现它的实际库知识——GSAP时间线、Framer Motion变体、滚动触发效果和运动审计。*

动画设计技巧（freshtechbro）

涵盖主要动画库的23种技能：GSAP+ScrollTrigger、Framer Motion、React Spring、Lottie、anime.js、Locomotive Scroll、Barba.js等。当您请求该类型的动画时，每个自动功能都会激活。还包括3D技能（Three.js、React Three Fiber、Babylon.js、A-Frame、PixiJS）。

这是列表中其他部分没有涵盖的最大差距——实际上 *创建* 动画，而不仅仅是打磨它们。


作者	弗雷什特希布罗
安装	`claude plugin marketplace add freshtechbro/claudedesignskills` 然后安装个人技能
源	freshtechbro/claudedesignskills

动作技巧（杰兹韦布）

专注于运动（前身为Framer Motion）。声明式动画、手势（拖动、悬停、点击）、滚动效果、弹簧物理、布局动画、SVG操作。包括捆绑优化模式-- LazyMotion 4.6KB或 useAnimate 2.3KB。针对React 19+Next.js 16+Vite 7+Tailwind v4进行了测试。


作者	地狱
源	skillsdirectory.com/skills/jezweb-motion

设计运动原理

Emil Kowalski、Jakub Krehel和Jhey Tompkins接受了运动设计审计技能培训。查找条件UI *应该* 可以设置动画，但不能（无条件渲染） AnimatePresence，没有过渡的动态样式），然后根据严重程度为每个设计师提供建议。

适用于审查现有代码，而不仅仅是生成新的动画。


作者	上升
源	kylezantos/设计运动原理

______________________________________________________________________

UI/UX智能

*设计思维、用户体验研究、可访问性模式。*

Wondelai用户体验/成长技能

基于真实书籍的25种技能——唐·诺曼、恰尔迪尼、里斯、霍尔木兹。用户体验设计、营销/CRO、产品战略、增长。


源	跆拳道/技能

谷歌设计技能（Stitch MCP）

来自谷歌实验室。包括： design-md （管理DESIGN.md文件）， enhance-prompt （在提示中添加设计词汇）， react-components （从缝合到反应）， shadcn-ui （使用shadcn构建）， stitch-loop （迭代设计代码循环）， remotion （生成演练视频）。


作者	谷歌实验室

Jeffallan-Claude技能——66项技能

全栈技能库。前端相关专家：React专家（服务器组件、钩子）、Vue专家、Angular专家、Tailwind CSS专家、CSS/SCSS专家、可访问性专家、响应式设计专家。每个都会自动激活并加载相关的参考文档。


安装	请参阅快速入门指南
源	杰弗兰/克劳德技能

UI/UX设计技能（Useforcrode）

用户研究、人物角色、用户流、线框图、原型设计、可用性测试、信息架构、视觉层次结构、格式塔原则、Fitts定律、Hick定律、WCAG、移动优先、响应式布局。用户体验知识的厨房水槽。


源	claude-plugins.dev

______________________________________________________________________

按代码设计管道

*Figma到令牌到组件到代码。*

Figma MCP服务器（官方）

克劳德直接读取你的Figma文件。框架、组件、标记、布局数据。现在也可以反向工作——“将此发送到Figma”将您正在运行的UI捕获为可编辑的Figma层（Code to Canvas，2026年2月推出）。


作者	Figma
安装	`claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse`
需要	Figma桌面应用程序，Dev或Full seat
文档	figma.com/developers/mcp

关键工具：

get_design_context --您选择的结构化XML（层次结构、位置、大小、样式）
get_variable_defs --所有变量和样式（颜色标记、间距、排版）
get_code_connect_map --将Figma组件映射到实际的代码组件
generate_figma_design --将运行UI作为可编辑层推回到Figma

循环：

Figma design --> get_design_context --> Generate code --> Browser preview
     ^                                                        |
Code to Canvas ` 而不是制作一个新的。杀死重复的组件。

| | |
|---|---|
| **文档** | [figma.com/code-connect](https://help.figma.com/hc/en-us/articles/23920389749655-Code-Connect) |

### Web工件生成器

用于使用React、Tailwind和shadcn/ui构建多组件claude.ai HTML工件。教授Claude组件组合、正确的Tailwind使用和现代React模式。

| | |
|---|---|
| **源** | [出色的克劳德技能](https://github.com/ComposioHQ/awesome-claude-skills) |

______________________________________________________________________

## 测试和浏览器自动化

*默认情况下，Claude看不到您的UI。这给了它一个浏览器。*

### 剧作家MCP（微软）

标准。通过可访问性树快照（2-5KB）而不是屏幕截图（500KB+）进行浏览器控制的25+个工具。Claude导航、点击、填写表单、截图并读取渲染的DOM。

| | |
|---|---|
| **作者** |微软|
| **安装** | `claude mcp add playwright -s user -- npx @playwright/mcp@latest` |
| **源** | [微软/剧作家mcp](https://github.com/microsoft/playwright-mcp) |

2026更新值得了解：

- `--vision auto` --大多数时候，可访问性树会自动切换到canvas/WGBL的视觉
- `--save-video=800x600` --记录测试会话
- Chrome扩展桥-使用您现有的登录浏览器
- `@playwright/cli` 伴侣——比MCP少4倍的代币（27k对114k）
- 核心网络生命体征（LCP、CLS、INP） `--caps=devtools`

### Chrome开发工具MCP

当剧作家还不够的时候。控制台检查、网络请求分析、性能分析、DOM探索、HAR导出、设备仿真。把它想象成网络和性能选项卡，但克劳德可以阅读它们。

| | |
|---|---|
| **作者** |人类学|
| **安装** | `claude mcp add chrome-devtools -s user -- npx @anthropic-ai/chrome-devtools-mcp@latest` |

组合：

DEVELOP --> Claude Code (terminal) TEST --> Playwright MCP (E2E, cross-browser) DEBUG --> Chrome DevTools MCP (perf, network) VERIFY --> Claude in Chrome (quick visual checks)


### Webapp测试技巧

模型调用了Playwright自动化。当克劳德检测到需要测试某些东西时，自动激活。

| | |
|---|---|
| **作者** lackeyjb |
| **源** | [出色的克劳德技能](https://github.com/ComposioHQ/awesome-claude-skills) |

### 故事书MCP（色彩）

允许Claude访问您的Storybook组件库。它可以查找现有组件，阅读它们的文档和故事，并在生成新UI之前获取构建说明。还支持通过Chromatic进行视觉回归测试——每个PR上的截图差异。

如果你使用Storybook，这会阻止克劳德重新发明你已经拥有的组件。

| | |
|---|---|
| **作者** |色彩|
| **安装** | `claude mcp add storybook-mcp --transport http https://your-storybook-url/mcp --scope project` |
| **源** | [chromatic.com](https://www.chromatic.com/) |

### 视觉回归技能

生成故事书故事、Chromatc/Percy/BackstopJS配置和CI工作流，用于可视化回归测试。告诉它“为我的按钮组件设置可视化回归”，它就会检测你的堆栈，创建涵盖所有变体的故事，并连接CI管道。

| | |
|---|---|
| **源** | [claude-plugins.dev/kills/visional回归](https://claude-plugins.dev/skills/@alekspetrov/navigator/visual-regression) |

### 网络质量技能（Addy Osmani）

来自《谷歌网络性能》一书的作者。五项技能，涵盖核心网络生命（LCP、INP、CLS）、可访问性（WCAG 2.1）、搜索引擎优化和最佳实践。编排者技能会运行一个完整的站点审核。框架感知——有Next.js、Vue/Nuxt、Svelte和纯HTML的特定模式。

| | |
|---|---|
| **作者** |addyosmani|
| **安装** | `npx add-skill addyosmani/web-quality-skills` |
| **源** | [addyosmani/网络质量技能](https://github.com/addyosmani/web-quality-skills) |

______________________________________________________________________

## 文档和上下文

*克劳德的训练数据已经过时。这些为它提供了最新的文档。*

### 背景7

为您使用的任何框架获取实时、特定于版本的文档。当你使用React 19时，它会从Claude的训练数据中提取React 19文档，而不是React 18 API。覆盖1000多个图书馆。

| | |
|---|---|
| **作者** |Uptash|
| **安装** | `claude mcp add context7 -s user -- npx -y @upstash/context7-mcp@latest` |
| **源** | [uprish/context7](https://github.com/upstash/context7) |

最重要的是：React 19与18（不同的API），Tailwind v4与v3（完全重写），Next.js应用路由器与页面路由器。

### 技能寻求者

将其指向任何文档网站，它将从内容中生成克劳德技能。适用于内部组件库或Context7未涵盖的框架。

| | |
|---|---|
| **作者** |尤苏夫卡拉斯兰|
| **源** | [yusufkaraaslan/技能_求职者](https://github.com/yusufkaraaslan/Skill_Seekers) |

### Firecrawl MCP

Web抓取作为MCP服务器。废弃文档、竞争对手网站、设计灵感。当Context7没有你需要的东西时，填补空白。

| | |
|---|---|
| **文档** | [firecrawl.dev/docs](https://docs.firecrawl.dev/mcp) |

______________________________________________________________________

## 框架技能

*特定前端技术的专业知识。*

### D3.js可视化

教Claude制作D3图表和交互式数据可视化。作者：@chrisvoncsefalvay。

| | |
|---|---|
| **源** | [出色的克劳德技能](https://github.com/ComposioHQ/awesome-claude-skills) |

### Three.js技能

3D元素和互动体验。

| | |
|---|---|
| **作者** |CloudAI-X|
| **源** | [CloudAI-X/threejs技能](https://github.com/CloudAI-X/threejs-skills) |

### shadcn/ui技能（谷歌）

使用shadcn/UI构建UI组件。Stitch MCP生态系统的一部分。

| | |
|---|---|
| **作者** |谷歌实验室|

### TypeScript LSP

通过语言服务器协议进行实时类型检查。在克劳德完成写作之前就发现了错误。如果你写TypeScript，只需安装这个。

| | |
|---|---|
| **安装** | `claude plugin add anthropic/typescript-lsp` |

### 基线用户界面/辅助功能/运动+性能

三技能管道。在Claude生成页面后按顺序运行它们：

/frontend-design --> Generate the page
/baseline-ui --> Fix spacing, typography, states
/fixing-accessibility --> Keyboard, labels, focus, semantics
/fixing-motion-performance --> Reduced-motion, perf budgets


安装：

npx ui-skills add baseline-ui npx ui-skills add fixing-accessibility npx ui-skills add fixing-motion-performance


设计，然后是工艺，然后是11年，然后是性能。这就是循环。

______________________________________________________________________

## 部署和预览

### Vercel MCP

从Claude Code管理部署、构建、日志和域。部署预览分支，检查构建状态，管理环境变量。

| | |
|---|---|
| **源** | [claude.com/plugins](https://claude.com/plugins) |

### PinMe

零配置部署。没有服务器，没有帐户。将其指向一个目录，获取一个URL。

| | |
|---|---|
| **作者** |闪光网络|
| **源** | [闪闪发光的网络/pinme](https://github.com/glitternetwork/pinme) |

______________________________________________________________________

## 推荐堆叠

*一起安装什么，取决于你的工作方式。*

### 基本要素（每个项目）

这三个涵盖了你需要的大部分内容。从这里开始。

claude plugin add anthropic/frontend-design claude mcp add context7 -s user -- npx -y @upstash/context7-mcp@latest claude mcp add playwright -s user -- npx @playwright/mcp@latest


### 设计优先（图到代码）

适用于由设计师移交Figma文件的团队。

claude plugin add anthropic/frontend-design claude mcp add context7 -s user -- npx -y @upstash/context7-mcp@latest claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse claude mcp add playwright -s user -- npx @playwright/mcp@latest claude plugin add anthropic/typescript-lsp


添加到CLAUDE.md：

Figma Integration

Use get_design_context to read design structure
Use get_variable_defs for token definitions
Check Code Connect mappings before creating new components
Components: src/components/
Tokens: src/styles/tokens.css


### 单人构建器（MVP速度）

船开得快，看起来不错。最小配置。

claude plugin add anthropic/frontend-design claude mcp add context7 -s user -- npx -y @upstash/context7-mcp@latest claude plugin add nextlevelbuilder/ui-ux-pro-max-skill claude mcp add playwright -s user -- npx @playwright/mcp@latest


### 全栈（组件库+设计系统）

适用于维护自己的组件库的团队。

Design

claude plugin add anthropic/frontend-design claude plugin add nextlevelbuilder/ui-ux-pro-max-skill

Docs + types

claude mcp add context7 -s user -- npx -y @upstash/context7-mcp@latest claude plugin add anthropic/typescript-lsp

Figma

claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse

Testing + debugging

claude mcp add playwright -s user -- npx @playwright/mcp@latest claude mcp add chrome-devtools -s user -- npx @anthropic-ai/chrome-devtools-mcp@latest

Polish pipeline

npx ui-skills add baseline-ui npx ui-skills add fixing-accessibility npx ui-skills add fixing-motion-performance


______________________________________________________________________

## 快速参考

|工具|类型|类别|星级|设置|
|------|------|----------|-------|-------|
|前端设计|技能|设计|官方|一个命令|
|UI/UX Pro Max |技能|设计|16.9k|一个命令|
|品味技能|技能|设计|--|一个命令|
|前端设计专业版|技能|设计|--|一个命令|
|Bencium用户体验设计师|技能|设计|--|手动复制|
|设计系统架构师|技能|主题|--|手动复制|
|设计令牌（phrazzld）|技能|主题|--|手动复制|
|顺风CSS工具包|技能|主题|--|一个命令|
|UI造型（ClaudeKit）|技能|主题|--|手动复制|
|CLAUDE.md主题块|配置|主题|不适用|复制粘贴|
|创建设计系统规则|技能|主题|--|需要Figma MCP|
|动画技能（freshtechbro）|技能|动画|--|一个命令|
|动作技能（jezweib）|技能|动画|--|手动复制|
|设计动作原理|技巧|动画|--|手工复制|
|Figma MCP|MCP|按代码设计|官方|需要配置|
|故事书MCP|MCP|测试|--|需要配置|
|剧作家MCP|MCP|测试|20k+|一个命令|
|Chrome DevTools MCP | MCP |调试|官方|一个命令|
|网络质量技能（Osmani）|技能|Perf/A11y/SEO|--|一个命令|
|视觉回归|技能|测试|--|手动复制|
|Context7|MCP|文档|--|一个命令|
|TypeScript LSP|LSP|类型|官方|一个命令|
|Vercel MCP | MCP |部署|--|需要配置|
|基线UI |技能|波兰语|--|一个命令|
|修复可访问性|技能|A11y|--|一个命令|
|固定动作/Perf|技能|Perf|--|一个命令|

### 背景预算

MCP服务器在会话开始时吃掉令牌。最多保持3-5个活动状态。

|服务器|~令牌成本|
|--------|------------|
|剧作家MCP | 5.3k|
|Chrome DevTools | 5-6k|
|Figma MCP |3-4k|
|上下文7|2k（按需）|
|总共5台服务器|在您键入任何内容之前约为55k|

缓解措施： `/mcp disable ` 不使用时，工具搜索（延迟加载，可降低高达95%的成本），并在可能的情况下优先选择技能而不是MCP服务器。技能在会话开始时仅加载约100个令牌。

______________________________________________________________________

## 进一步阅读

|资源||
|----------|---|
| [很棒的克劳德代码](https://github.com/jqueryscript/awesome-claude-code) |主列表，5.5万颗星|
| [出色的克劳德技巧（特拉维索夫）](https://github.com/travisvn/awesome-claude-skills) |通过教程掌握技能|
| [出色的claude技能（ComposioHQ）](https://github.com/ComposioHQ/awesome-claude-skills) |技能+连接应用程序|
| [出色的claude技能（BehiSecc）](https://github.com/BehiSecc/awesome-claude-skills) |社区目录|
| [出色的代理技能（VoltAgent）](https://github.com/VoltAgent/awesome-agent-skills) |380+技能，所有代理|
| [很棒的claude插件（ComposioHQ）](https://github.com/ComposioHQ/awesome-claude-plugins) |插件注册表|
| [claude.com/plugins](https://claude.com/plugins) |官方市场|
| [前端美学食谱](https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design) |Anthropic的提示指南|
| [ClaudeKit.cc](https://claudekit.cc) |前端设计专业版|
| [克劳德代码文档](https://code.claude.com/docs) |官方文件|

______________________________________________________________________

## 贡献

你知道这个列表上应该有什么吗？打开一个PR。

要加入：

- 必须对前端/设计工作特别有用
- 必须使用Claude Code
- 必须维护或来自可信来源
- 高明星数或官方支持有助于

______________________________________________________________________

## 许可证

[麻省理工学院](LICENSE)

______________________________________________________________________

*[wilwaldon.com](https://wilwaldon.com) ·2026年2月*

Claude Code Frontend Design Toolkit

快速接入

详细介绍

Claude代码前端设计工具包

目录

设计技巧

前端设计（官方）

UI/UX Pro Max——62.6万颗星

味觉技能

前端设计专业演示

Bencium用户体验设计师

品牌指导技巧

全站主题和设计代币

设计系统架构师

设计代币技能

顺风CSS套件

UI造型技巧（ClaudeKit）

顺风造型技巧（MajesticLabs）

创建设计系统规则（Figma）

CLAUDE.md主题块（人类学方法）

何时使用什么

动画与运动

动画设计技巧（freshtechbro）

动作技巧（杰兹韦布）

设计运动原理

UI/UX智能

Wondelai用户体验/成长技能

谷歌设计技能（Stitch MCP）

Jeffallan-Claude技能——66项技能

UI/UX设计技能（Useforcrode）

按代码设计管道

Figma MCP服务器（官方）

Figma Integration

Design

Docs + types

Figma

Testing + debugging

Polish pipeline

目录标签

接入字段

权限和风险

来源信息

继续浏览同类 MCP