claudeskills文档Frontend Design
将 UI 需求转化为可落地的前端设计与实现，强调设计令牌、可访问性与差异化视觉表达。
来源：基于 anthropics/skills（MIT）内容改写。
该技能用于构建网页、应用、组件与落地页。重点：先做设计系统，再做组件与页面，并确保可访问性与差异化风格。
何时使用
- 需要创建/改造 UI、页面、组件库
- 要求“更好看/更现代/更高级/更统一”
- 涉及 React/Vue/Next 等前端框架
核心原则
- 先令牌，后组件：所有颜色/间距/圆角/阴影来自设计令牌。
- 拒绝模板化：避免 Inter/Roboto + 紫色渐变 + 统一圆角的套路。
- 可访问性优先：对比度、键盘可达、清晰焦点环必须满足。
- 状态齐全：默认/悬停/聚焦/激活/禁用 + 加载/空/错误。
- 移动优先：先 375px，再扩展到 768/1024+。
典型流程
1) 建立设计令牌
- 语义颜色（背景/表面/文本/边框/主色/强调）
- 字体层级（Display/H1/H2/Body/Small）
- 间距与圆角的统一尺度
- 动效时长与缓动
2) 组件化实现
- Button / Input / Card / Modal 等
- 必须覆盖 hover/focus/disabled/loading
3) 页面组装
- 使用组件 + 令牌
- 加入加载、空、错误状态
Tailwind 注意事项
- 不要使用 CDN，必须构建期集成
- 避免硬编码颜色与任意数值
设计方向建议
- 选择一个明确风格：编辑风 / 极简科技 / 柔和有机 / 深色霓虹等
- 使用独特字体与配色
- 加入背景质感（渐变、噪点、形状）
输出检查清单
- 颜色/间距/圆角来自令牌
- 对比度符合 WCAG AA
- 所有交互状态齐全
- 适配移动端与桌面端
- 结构清晰、代码可维护