F
Frontend Design
精选frontend-design
v1.0.0⚡ 加速下载可用
Frontend Design 技能让 Claude 成为一个专业的前端设计师，能够生成独特、精良的生产级界面代码。它最大的特点是刻意避免通用 AI 美学——不会生成千篇一律的紫色渐变、通用系统字体和模板化组件。每次设计前，技能会引导 AI 经历完整的设计思维过程：分析产品目标和受众特征，选择具体的美学方向（如粗野主义、极繁主义、复古未来主义、奢华风、趣味风等），然后生成匹配该方向的独特排版、色彩方案和动画效果。支持 React、Vue 和原生 HTML/CSS 代码输出，内置复杂网格布局、CSS 高级动画和 Motion 库集成。生成的代码注重细节：有意的留白设计、打破常规的栅格布局、精心设计的微交互和加载动画。无论是仪表盘、落地页还是设置面板，都能产出令人眼前一亮的定制化界面，而不是机械化的 AI 产物。
1.9万下载量
153收藏
200+安装量
安装方式
将此提示发送给你的 Agent，以安装技能
请帮我安装 Frontend Design 技能。
可以通过 npm install -g @anthropic-ai/frontend-design 全局安装，
或使用 npx @anthropic-ai/frontend-design 免安装直接运行。
也可以将技能内容添加到项目的 CLAUDE.md 或 ~/.claude/CLAUDE.md 文件中。
卸载方式
1
npm 卸载
推荐如果是通过 npm 全局安装的技能，在终端执行
npm uninstall -g @anthropic-ai/frontend-design2
手动卸载
找到并删除对应的技能配置内容
步骤 1 — 定位技能文件
检查以下位置，找到包含 Frontend Design 相关内容的文件：
- 项目根目录
CLAUDE.md - 全局配置
~/.claude/CLAUDE.md - 技能目录
~/.claude/skills/
步骤 2 — 删除技能内容
打开对应文件，删除 Frontend Design 技能的完整配置段落，保存文件后即生效。