前端设计

要解决什么问题

让大模型直接生成前端代码，最常见的失败是「能跑但没法维护」：样式随手写死、颜色值散落在各组件里、桌面端看着还行、手机上一打开就横向滚动。更隐蔽的坑在无障碍和暗色模式——多数模型默认只输出浅色界面，键盘焦点不可见、对比度不达标、暗色背景下图片发灰。

核心能力与工作方式

这个技能把前端产出收敛成一条有约束的流水线：

• 设计系统先行：写任何组件之前先定义 spacing scale（4px 基准）、type scale、语义化 color tokens（primary、success、warning 等，亮暗两套变体）以及圆角和阴影 token。
• 变体用 props 控制：组件按 size、color、state 定义变体，通过 props 或 CSS class 切换，而不是复制 markup。交互态覆盖 default、hover、focus-visible、active、disabled，每个可交互元素都有可见焦点环。
• 响应式布局：二维布局用 CSS Grid，一维对齐用 Flexbox；断点为 sm: 640px / md: 768px / lg: 1024px / xl: 1280px，mobile-first 逐级增强，触摸目标不小于 44×44px。
• 无障碍内建：优先语义化 HTML（nav、main、article），正文对比度达到 WCAG 2.1 AA（4.5:1），ARIA 只在语义 HTML 不足时补充。
• 暗色模式：通过 CSS custom properties 或 Tailwind 的 dark: 变体切换 token，背景用深灰（如 #0f172a）而非纯黑。

适用边界与注意点

• 用户没给任何设计规范时，默认中性方案（Inter 字体栈、slate 中性色、蓝色主色），后续容易替换。
• 框架未知时输出语义化 HTML + 原生 CSS custom properties，可无痛迁移进 React、Vue 或 Svelte。
• 内容长度不定的场景用 min-height 和 line-clamp 兜底，不要写死高度。
• RTL 语言需使用逻辑属性（margin-inline-start），并在根元素设置 dir="rtl" 验证镜像布局。
• 组件 API 保持精简：15 个 prop 的组件没人用得对，优先组合（children、slots）而非配置开关。
• 暗色模式下照片可加 brightness(0.9) 压暗，装饰性 SVG 用 currentColor 跟随主题。