wilwaldon/claude-code-frontend-design-toolkit 是从 https://github.com/wilwaldon/claude-code-frontend-design-toolkit. 导入的 MCP 服务器候选
概览
wilwaldon/claude-code-frontend-design-toolkit 是从 https://github.com/wilwaldon/claude-code-frontend-design-toolkit. 导入的 MCP 服务器候选
概述（AI 翻译）
我找到的所有让Claude Code输出更漂亮前端的东西。技能、插件、MCP服务器、CLAUDE.md 技巧，按你想做的内容组织。
April 2026 ·70+ tools ·10 sections
如果这条信息有用，请加上星号，方便其他人找到。欢迎公关——参见贡献。
目录
- 设计技能——消除AI的糟糕
- 全站主题——让所有内容统一
- 动画与运动 — GSAP、帧体运动、滚动效果
- UI/UX智能 — 模式、a11y、研究
- 设计到代码 — Figma 流水线
- 测试与浏览器自动化——赋予Claude眼睛
- 文档与上下文 — 停止幻觉 API
- 框架技能 — React、Tailwind、Three.js、D3
- 部署与预览 — 发货
- 推荐堆栈——应一起安装什么
- 快速参考
- 延伸阅读
- 贡献
设计技能
默认的Claude输出看起来和其他AI生成页面一样。字体相同，紫色渐变，卡片布局相同。这些方法解决了这个问题。
前端设计（官方）
你先安装的那台。
本页由 AI 翻译，技术细节请以原文为准。
README
以下为原文 README 节选，完整内容请查看原文。
Claude Code Frontend Design Toolkit
Everything I’ve found that actually makes Claude Code output better-looking frontends. Skills, plugins, MCP servers, CLAUDE.md tricks, organized by what you’re trying to do.
April 2026 · 70+ tools · 10 sections
If this is useful, star it so others can find it. PRs welcome — see Contributing.
Table of Contents
- Design Skills — Kill the AI slop
- Site-Wide Theming — Make everything match
- Animation & Motion — GSAP, Framer Motion, scroll effects
- UI/UX Intelligence — Patterns, a11y, research
- Design-to-Code — Figma pipeline
- Testing & Browser Automation — Give Claude eyes
- Docs & Context — Stop hallucinating APIs
- Framework Skills — React, Tailwind, Three.js, D3
- Deploy & Preview — Ship it
- Recommended Stacks — What to install together
- Quick Reference
- Further Reading
- Contributing
Design Skills
The default Claude output looks like every other AI-generated page. Same fonts, same purple gradient, same card layout. These fix that.
Frontend Design (Official)
The one you install first. Anthropic’s own skill that tells Claude to pick an actual aesthetic direction before writing code instead of defaulting to Inter + purple gradient + rounded cards.
| Author | Anthropic |
| Install | claude plugin add anthropic/frontend-design |
| Type | Skill (auto-activates) |
| Source | anthropics/claude-code/…/frontend-design |
What changes:
- Claude picks a direction before coding (brutalist, editorial, retro-futuristic, etc.)
- Requires real typography pairing, not just whatever sans-serif
- Blocks generic component patterns and cookie-cutter layouts
- Enforces CSS variables and cohesive color systems
Install this first. Everything else on this list assumes you have it.
UI/UX Pro Max — 62.6k stars
240+ styles, 127 font pairings, 99 UX guidelines. Tell it “fintech dashboard” and it picks a design system that makes sense for fintech. The v2.0 reasoning engine does the style matching automatically.
| Author | nextlevelbuilder |
| Install | claude plugin add nextlevelbuilder/ui-ux-pro-max-skill |
| Type | Skill + CLI (uipro-cli) |
| Source | nextlevelbuilder/ui-ux-pro-max-skill |
Also works with Cursor, Windsurf, Codex, and a dozen other agents if you’re not locked into Claude Code.
Taste Skill
安装
npx ui-skills add baseline-ui