核心定位
Frontend Design 是一套面向生产环境的前端开发规范与实战指南，聚焦 React 生态（Next.js + Tailwind CSS），适用于落地页、仪表盘、表单及组件库等场景。
核心用法
- 移动优先：所有设计始于移动端，逐步增强；网格必坍缩为单列，触控目标 ≥44×44px
- 排版策略：禁用通用字体（Inter/Roboto），采用 2 倍以上字号跳跃（非渐进），正文 16-18px 起
- 色彩系统：70-20-10 主辅点缀比例，拒绝灰白背景，强制深度感
- 交互反馈：100ms 内响应触控，乐观更新，>1s 操作必配加载态，错误时保留用户输入
- 无障碍强制：对比度 4.5:1（文本）/ 3:1（UI），全键盘导航，语义化 HTML
- 性能基线：懒加载、图片占位防 CLS、代码分割，目标 LCP<2.5s、CLS<0.1
- 记忆点设计：每页必有一个难忘的视觉元素（字体处理、英雄动画、破格布局）
显著优点
- 体系完整：覆盖设计、代码、性能、无障碍四维
- 反常识纠偏：明确反对"桌面优先""通用字体""纯白背景"等常见错误
- 可量化指标：触控尺寸、对比度数值、性能阈值均为具体数字
- 陷阱清单：6 类高频失误与修复方案直接对应
潜在局限
- 技术栈锁定：React/Next.js/Tailwind 为主，Vue/Svelte 开发者需自行迁移
- 设计审美主观性："dramatic size jumps""unforgettable design" 执行依赖设计师判断力
- 无自动化检测：对比度、性能指标需外部工具验证，非本 skill 内置
- 内容深度有限：如
typography.md等子文件未展开，实际使用时需查阅完整文档
适合人群
- 前端开发者寻求系统性 UI 规范
- 全栈工程师快速搭建高完成度界面
- 独立开发者避免"看起来像模板"的视觉陷阱
常规风险
- 合规风险：无障碍声明依赖开发者自觉执行，无强制校验机制
- 性能风险："hero animation" 等记忆点元素若实现不当，可能反向拖累 LCP
- 维护风险：子文件（stack/colors/mobile.md）分散，版本同步需人工确认
安全声明
本 skill 为只读指导文档，不执行网络请求、不访问用户数据、不存储信息。