Frontend Design

核心定位

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 为只读指导文档，不执行网络请求、不访问用户数据、不存储信息。

核心用法

Frontend Design 是一款专注于现代化 Web 界面开发的纯文档型 Skill，为开发者提供从设计原则到技术实现的系统性指导。核心能力覆盖三大领域：响应式布局（Mobile-First 设计、网格系统、触摸目标规范）、视觉系统（70-20-10 配色法则、字体层级、动效设计）以及交互体验（即时反馈、加载状态、错误处理）。技术栈聚焦 React 生态（Next.js、Tailwind CSS），配套完整的模块化文档体系，包括字体规范、色彩系统、移动端模式、动画指南及实战示例。

显著优点

1. 设计权威性：遵循行业最佳实践（WCAG 无障碍标准、Core Web Vitals 性能指标），提供可量化的设计规则（如 2x+ 字号跳跃、100ms 反馈延迟、4.5:1 对比度）。

2. 实用主义导向：不仅提供抽象原则，更通过"Frontend Traps"表格直接指出常见错误（如纯白背景、通用字体、表单清空输入）及修复方案，降低决策成本。

3. 安全零风险：纯 Markdown 架构，无可执行代码、无网络请求、无数据收集，S+ 安全等级认证，完全合规 GDPR 数据最小化原则。

4. 美学强制性：强调"One Memorable Element"原则，推动开发者突破保守设计，建立品牌辨识度。

潜在局限

• 技术栈绑定：深度聚焦 React/Next.js/Tailwind，Vue、Angular 或原生开发者需额外适配。
• 设计为主，实现为辅：提供设计规范和模式指导，但不包含可直接引用的代码组件库。
• 静态内容：作为只读文档，无法根据项目上下文动态生成定制化建议。
• 许可不明：当前版本未声明开源许可证，商业使用需注意法律风险。

适合人群

• 需要快速建立设计系统的独立开发者或初创团队
• 追求"production polish"的全栈工程师（非专职设计师）
• 希望统一团队 UI 规范的技术负责人
• 学习现代前端最佳实践的初级开发者

常规风险

本 Skill 本身无安全风险，但使用者需注意：设计建议需结合具体业务场景调整，严格遵循所有规则可能导致过度设计；性能指标（LCP <2.5s）依赖实际部署环境，Skill 无法保证最终交付性能。