React 生态专业 UI 开发指南

React/Next.js/Tailwind 前端开发指南，覆盖响应式、无障碍、性能优化，助你打造有记忆点的专业级 UI

基本信息

• 技能名称?Frontend Design
• 中文名称?React 生态专业 UI 开发指南
• 作者?ivangdavila
• 分类?专业技能
• 版本?1.0.2
• 标签?frontend, react, next.js, tailwind-css, responsive-design, accessibility, ui-ux, performance, design-system

使用方法

使用说明
核心定位
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
记忆点设计 ：每页必有一个难忘的视觉元素（字体处理、英雄动画、破格布局）
显著优点
体系完整：覆盖设计、代码、性能、无障碍四维
反常识纠偏：明确反对"桌面优先""通用字体""纯白背景"等常见错误
可量化指标：触控尺寸、对比度数值、性能阈值均为具体数字
陷阱清单：6 类高频失误与修复方案直接对应
潜在局限
技术栈锁定：React/Next.js/Tailwind 为主，Vue/Svelte 开发者需自行迁移
设计审美主观性："dramatic size jumps""unforgettable design" 执行依赖设计师判断力
无自动化检测：对比度、性能指标需外部工具验证，非本 skill 内置
内容深度有限：如 typography.md 等子文件未展开，实际使用时需查阅完整文档
适合人群
前端开发者寻求系统性 UI 规范
全栈工程师快速搭建高完成度界面
独立开发者避免"看起来像模板"的视觉陷阱
常规风险
合规风险 ：无障碍声明依赖开发者自觉执行，无强制校验机制
性能风险 ："hero animation" 等记忆点元素若实现不当，可能反向拖累 LCP
维护风险 ：子文件（stack/colors/mobile.md）分散，版本同步需人工确认
安全声明
本 skill 为只读指导文档，不执行网络请求、不访问用户数据、不存储信息。