返回首页
查看全部
支持平台
Claude CodeCodexCursor
安全等级
低风险
安装难度
新手友好最后验证
2026年7月2日01/功能概览
功能概览
让 AI 做有辨识度的前端视觉设计：美学方向、字体、避免模板化的廉价感。
- AI 生成的 UI 一眼就是模板感
- 字体和配色廉价
- 没有美学方向、像默认值堆出来的
- 缺乏辨识度
02/使用场景
使用场景
- 做新落地页时给出有设计感的方案
- 改现有 UI 提升视觉品质
- 选对字体和配色
- 避免模板化的廉价感
03/适合人群
适合谁用
- 前端开发者
- 独立开发者做产品
- 用 Claude Code / Cursor 做 UI 的人
04/不适合人群
不适合谁
- 只用组件库默认值就够的人
- 不需要视觉设计的人
普通人版解释
用大白话说这个技能包让 AI 会做有设计感的前端。普通 AI 做 UI 经常一眼就看出是模板、廉价、没辨识度。装了这个技能包后，AI 会按专业设计思路做：选对美学方向、字体搭配、避免模板化的默认值。
专业版解释
给 Claude Code / Codex 用户Anthropic 官方出品的前端设计技能包。安装后 AI 在做新 UI 或改现有 UI 时会遵循有意图的视觉设计：选对美学方向、字体、做出不像模板默认值的选择。避免 AI 生成「一看就是 AI 写的廉价 UI」。
07/安装方式
安装方式
复制对应平台的命令到终端执行。安装前建议先确认来源和安全等级。
安装命令
git clone https://github.com/anthropics/skills.git && cp -r skills/skills/frontend-design ~/.claude/skills/frontend-design
08/SKILL.md 预览
SKILL.md 预览
这是这个技能包的核心内容。默认折叠预览，确认后再复制或展开。
暂无 SKILL.md 内容预览。
09/使用示例
如何使用
安装后，把下面的提示词直接发给 AI 即可触发这个技能包。
使用示例（直接发给 AI）
- 1.请使用前端设计技能包，帮我做一个有设计感的产品落地页，避免模板感
- 2.请使用前端设计技能包，改这个页面的字体和配色让它更高级
- 3.请使用前端设计技能包，给我 3 个不同美学方向的 UI 方案
10/安全说明
安全说明
技能包可能不只是提示词。请先查看下面的权限表，了解这个技能包会做什么。
| 权限项 | 状态 | 风险 |
|---|---|---|
| 是否包含脚本 | 否 | 无风险 |
| 是否会执行系统命令 | 否 | 无风险 |
| 是否会读取本地文件 | 否 | 无风险 |
| 是否会联网请求 | 否 | 无风险 |
| 是否适合新手安装 | 是 | 适合新手 |
低风险
可以放心安装使用，适合所有用户。11/相关技能包
相关技能包
网页动画核心技能包
让 AI 正确使用 GSAP 核心 API：做网页动画、SVG 动画、React/Vue 动画时不再写错代码。
Web 组件构建技能包
让 AI 用 React、Tailwind、shadcn/ui 构建复杂的多组件 claude.ai HTML artifacts。
shadcn/ui 组件库
前端社区最火的 UI 方案，基于 Radix UI 无障碍组件 + Tailwind，复制粘贴即拥有全部代码，深度可定制。
Aceternity UI 特效组件库
主打视觉特效+微交互的组件库，200+ 发光卡片、视差滚动、文字渐显、3D 悬浮、Bento 网格，基于 Framer Motion。
HeroUI 组件库
React 生态颜值天花板之一，设计审美在线，主题系统灵活，支持明暗模式和自定义设计令牌，Next.js SSR 完美兼容。
Nuxt UI 组件库
Vue/Nuxt 生态官方旗舰 UI 库，基于 Tailwind，原生支持 SSR/SSG，对 SEO 和首屏加载友好，自带无障碍和暗黑模式。