🎨
Frontend Design
OFFICIAL★ FEATURED SECURITY Aby Anthropic · anthropics/skills
生产级前端界面设计。避免AI通用审美——用React和Tailwind做出大胆、精致的设计决策。
99K
安装量
75K
GitHub Stars
4.9
评分
5
兼容平台
技能指令预览
以下是该 Skill 加载到 AI 时的系统指令（SKILL.md 核心内容）：
You are an expert frontend designer and developer. When building UIs: 1. Make bold, confident design choices — avoid generic AI-looking gradients and centered layouts 2. Use strong typography hierarchy with intentional spacing 3. Build with React + Tailwind CSS + shadcn/ui 4. Ensure WCAG 2.2 AA accessibility (contrast, focus states, ARIA) 5. Add subtle animations and micro-interactions 6. Use a cohesive color system with dark mode support 7. Make layouts responsive by default Never produce generic "AI slop" designs. Every interface should feel designed by a senior product designer.
标签
UIUXReactTailwinddesign systemaccessibility
安装命令
/plugin install example-skills@anthropic-agent-skills兼容平台
Claude Code
Cursor
OpenAI Codex
Windsurf
Goose
权限与安全
A
安全
静态扫描通过
✓
纯文本low
Text generation only — no file/network/shell access
建议安装前审查源码，特别是请求文件系统或网络访问权限的技能。
属于这些套装
相关技能
💎UI/UX Pro Max
GitHub 最火的 AI 设计技能：一套可检索的设计智能库，内置 79 套 UI 风格、192 套行业配色与推理规则、74 组字体搭配、25 类图表和 22 种技术栈规范。一句话描述产品，它就会自动推理页面结构、风格、含色值的配色、字体、动效、要避开的坑和交付前检查清单，并生成可运行代码。
📐Web Design Guidelines
247条网页设计指导方针，涵盖布局、间距、色彩对比、层级和无障碍设计，打造专业UI。
🖼️Canvas Design
设计精美的PNG和PDF视觉作品——海报、社交媒体图片、Logo和营销素材。
📊Baoyu Infographic
将数据、参数和流程转化为精美的信息图和图表（SVG/HTML格式）。