用途：frontend-design 是一个前端设计技能，位于 {project_path}/skills/frontend-design/，用于把模糊的 UI 风格需求转化为可执行、生产级的前端代码。适用于网站、Web 应用、组件、仪表盘、落地页、管理后台、组件库与设计系统，以及把设计稿转成代码；不适用于后端 API、纯逻辑算法和非视觉任务。
主要能力：采用“令牌优先”方法，按设计令牌→组件样式→页面布局→交互状态的顺序推进。要求所有视觉属性来自令牌系统，禁止硬编码颜色、间距、阴影和圆角。覆盖完整状态：默认、悬停、激活、聚焦、禁用，以及加载、空、错误状态。强调无障碍（WCAG AA 对比度、键盘导航、ARIA、焦点指示）与移动优先响应式。同时要求避免通用 AI 审美，选择明确的美学方向，如极简高级 SaaS、大胆编辑风、柔和有机、暗色霓虹、活泼多彩。
使用方式：技能包含 SKILL.md、examples/css/（tokens.css、components.css、utilities.css）、examples/typescript/（design-tokens.ts、theme-provider.tsx、sample-components.tsx）和 templates/（tailwind-config.js、globals.css）。默认技术栈为 React + TypeScript、Tailwind CSS、shadcn/ui、CSS 自定义属性主题，也支持 Vue、Svelte、Angular、原生 HTML/CSS 及 MUI、Ant Design、Chakra UI 等。Tailwind 必须构建时集成，命令为 npm install -D tailwindcss postcss autoprefixer 和 npx tailwindcss init -p，禁止使用 CDN（仅原型或内部测试可接受）。工作流分四阶段：设计分析与令牌定义、组件开发、页面组装、质量自检。
限制：资料未提供具体收费、价格、平台支持范围或效果数据。