community skill
Frontend Design
Anthropic 官方前端界面设计 skill，用于创建有明确审美方向、生产级可用、避免通用 AI 风格的 Web 页面、组件、artifact、海报和 HTML/CSS 布局。
communityskill packagefrontendui-designwebreactaesthetics
Frontend Design
Frontend Design 是 Anthropic 官方 skills 仓库中的前端界面设计 skill。它指导 agent 创建有明确审美方向、生产级可用、避免通用 AI 风格的 Web 组件、页面、海报、artifact、React 组件或 HTML/CSS 布局。
来源
- 上游 skill 目录：https://github.com/anthropics/skills/tree/main/skills/frontend-design
- 上游 SKILL.md：https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
- 上游仓库：https://github.com/anthropics/skills
- 许可证文件：https://github.com/anthropics/skills/blob/main/skills/frontend-design/LICENSE.txt
- 许可证：Apache-2.0
适合什么时候用
- 需要构建网站、Landing Page、Dashboard、Web App、React 组件或 HTML/CSS 页面。
- 需要把已有界面重新设计得更有辨识度、更像真实设计师作品，而不是普通模板感 UI。
- 需要为前端界面确定鲜明的视觉方向：极简、复古未来、工业、奢华、玩具感、杂志风、brutalist 等。
- 需要在字体、色彩、动效、空间构图、背景纹理和细节上提升页面审美质量。
核心原则
| 方向 | 要点 |
|---|---|
| 审美立场 | 先确定明确、甚至大胆的视觉方向，再执行到位 |
| 字体 | 避免默认字体和常见 AI 风，选择有性格的标题与正文字体组合 |
| 色彩 | 使用一致主题和高辨识度强调色，避免平庸渐变套路 |
| 动效 | 用少量高影响的入场、hover、scroll 动效，而不是到处堆动画 |
| 细节 | 通过纹理、阴影、几何、边框、背景层次提升界面完成度 |
安装提示
这是 Anthropic 官方 skill 目录。本站只收录索引和中文说明，不镜像上游文件。安装命令：
npx skills add https://github.com/anthropics/skills/tree/main/skills/frontend-design
使用注意
- 该 skill 偏重视觉设计与前端实现质量；后端逻辑、数据模型或部署任务不应强行使用。
- 设计建议会鼓励大胆审美选择；生产项目仍需结合品牌规范、可访问性和真实用户需求调整。
- 上游许可证文件为 Apache-2.0。