前端设计工具包

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

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

UI/UX Pro Max——62.6万颗星

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

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

味觉技能

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

前端设计专业演示

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

Bencium用户体验设计师

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

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

品牌指导技巧

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

全站主题和设计代币

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

设计系统架构师

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

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

设计代币技能

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

输出如下：

@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等等）。

UI造型技巧（ClaudeKit）

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

顺风造型技巧（MajesticLabs）

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

创建设计系统规则（Figma）

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

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

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

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

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

## Frontend Theme
<always_use_solarpunk_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
</always_use_solarpunk_theme>

您可以调整更多预设：

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

何时使用什么

动画与运动

设计技巧让克劳德思考运动。这些为它提供了实现它的实际库知识——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）。

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

动作技巧（杰兹韦布）

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

设计运动原理

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

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

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、移动优先、响应式布局。用户体验知识的厨房水槽。

按代码设计管道

Figma到令牌到组件到代码。

Figma MCP服务器（官方）

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

关键工具：

• 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 <-- "Send this to Figma" <------------ Working UI

将此添加到Figma项目的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

Figma代码连接

不是MCP，而是Figma功能。将Figma组件映射到实际的代码组件。当克劳德来电时 get_code_connect_map，它使用您现有的 <Button> 而不是制作一个新的。杀死重复的组件。

Web工件生成器

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

测试和浏览器自动化

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

剧作家MCP（微软）

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

2026更新值得了解：

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

Chrome开发工具MCP

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

组合：

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自动化。当克劳德检测到需要测试某些东西时，自动激活。

故事书MCP（色彩）

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

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

视觉回归技能

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

网络质量技能（Addy Osmani）

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

文档和上下文

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

背景7

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

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

技能寻求者

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

Firecrawl MCP

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

框架技能

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

D3.js可视化

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

Three.js技能

3D元素和互动体验。

shadcn/ui技能（谷歌）

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

TypeScript LSP

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

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

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

1. /frontend-design             --> Generate the page
2. /baseline-ui                 --> Fix spacing, typography, states
3. /fixing-accessibility        --> Keyboard, labels, focus, semantics
4. /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管理部署、构建、日志和域。部署预览分支，检查构建状态，管理环境变量。

PinMe

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

推荐堆叠

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

基本要素（每个项目）

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

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

快速参考

背景预算

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

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

进一步阅读

贡献

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

要加入：

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

许可证

麻省理工学院

wilwaldon.com ·2026年2月