前端设计 frontend-design
编辑点评
前端设计助手，帮你定 UI 结构、配色、组件划分。写页面时先让它出方案，比自己对着空白编辑器发呆快得多。
适用场景与注意事项
开始写一个新页面、还没想好结构时用它出方案：布局怎么分、组件怎么拆、配色怎么定。适合独立开发者和小团队快速定方向，比对着空白编辑器发呆高效。
一、功能概述
前端设计和 UI/UX 开发工具。该技能让 AI 在「前端开发」领域具备专项能力，适合希望通过自然语言快速完成相关任务的用户。
二、功能介绍
- 前端设计（frontend-design）的核心能力：前端设计和 UI/UX 开发工具。
- 由 Anthropic 提供，来源 VoltAgent，归类于「前端开发」分类。
- 「前端设计」可编写与重构 UI 组件，遵循现代前端最佳实践。
- 「前端设计」可将设计稿（如 Figma）转化为生产就绪代码。
三、使用方式
- 第 1 步：在支持 Skill 的 AI 客户端（如 Claude、CodeBuddy）中安装「前端设计」技能
- 第 2 步：用自然语言描述你的需求，例如：用 React + Tailwind 写一个带搜索和分页的用户列表页（由「前端设计」负责执行）
- 第 3 步：AI 会自动调用该技能完成任务，并在对话中交付结果
- 第 4 步：需要修改时，直接告诉 AI 调整点，无需从头再来
四、来源信息
| 来源仓库 | https://github.com/anthropics/skills/tree/main/skills/frontend-design |
| 提供方 | Anthropic（官方技能） |
| 开源许可 | 详见来源仓库，多为 Apache 2.0 / MIT 等开源许可 |