Claude-Code-Frontend-Design-Toolkit
Claude-Code-Frontend-Design-Toolkit 提供多种前端设计技能，帮助 Claude 生成更美观的前端代码。
MCP设计与多媒体开源
- 形态
- MCP
- 传输协议
- stdio
- 是否开源
- 是
- GitHub Stars
- ★ 1.0k
- 收录来源
- mcp-github
能力说明
Claude-Code-Frontend-Design-Toolkit 是一个集合了多种前端设计技能、插件和 MCP 服务器的工具包。它可以帮助 Claude 生成更美观、更具一致性的前端代码。通过安装不同的技能，可以控制 Claude 的设计风格、主题、动画效果等。适合需要高质量前端输出的开发者和设计师使用。接入方式为通过 `claude plugin add` 命令安装相应的插件。
能力点
- ▪选择设计方向
- ▪真实字体配对
- ▪阻止通用组件模式
- ▪强制 CSS 变量和颜色系统
- ▪提供多种设计风格
- ▪支持响应式设计
适用场景
生成美观的前端页面统一网站主题添加动画效果提高 UI/UX 质量
接入方式
依赖：API KeyNode 环境
通过 `claude plugin add <plugin-name>` 命令安装相应的插件。
以上信息由 AI 基于公开资料整理，可能存在偏差，以来源为准。
常见问题
如何安装 Frontend Design 技能？
使用 `claude plugin add anthropic/frontend-design` 命令安装。
这个工具包包含哪些内容？
包含多种前端设计技能、插件和 MCP 服务器。
相关 Skill
video-shotcraft
AI 视频技能，用于制作电影级产品宣传视频。
Agent SkillAI 视频动态设计
manim_skill
为 Manim 提供创建 3Blue1Brown 风格动画的 Agent 技能。
Agent Skill
drawio-skill
从自然语言生成 draw.io 图表，支持多种预设和导出格式。
Agent Skill
sprite-gen
生成干净的2D游戏精灵和动画图集。
Agent Skill
logo-generator-skill
专业SVG标志生成器，提供多种设计变体和展示背景。
Agent Skill
claude-skill-aso-appstore-screenshots
生成高质量的App Store截图，提升应用下载率。
Agent Skill