Frontend Design

核心用法

Frontend 技能是一套完整的前端开发设计模式指南，覆盖从加载状态到无障碍设计的 12 个关键维度。它提供了具体的数值标准（如 44×44pt 触摸目标、100ms 反馈延迟）和可落地的设计决策框架，适用于 Web 与移动端的跨平台开发。

显著优点

• 量化标准明确：大量具体数值指标（100ms 反馈阈值、150-300ms 动画时长、8pt 网格系统）可直接落地
• 场景覆盖全面：从 Skeleton 屏到错误恢复、从首次使用空状态到离线降级，涵盖用户旅程全链路
• 平台感知设计：尊重 iOS/Android/Web 原生规范，避免跨平台"四不像"
• 性能与感知并重：区分"实际加载"与"可交互时间"，提供乐观更新、懒加载等具体策略

潜在局限

• 无代码实现：仅提供设计原则，需配合具体技术栈（React/Vue/Swift 等）自行实现
• 未覆盖新兴范式：未涉及 AI 生成界面、跨端框架（Flutter/React Native）的特定约束
• 平台细节有限：虽提及"尊重平台惯例"，但未给出各平台的深度适配清单

适合人群

前端开发者、UI/UX 设计师、产品经理，尤其适合需要建立团队设计规范或统一多平台体验的中大型项目。

常规风险

• 过度追求"乐观更新"可能导致状态不一致的复杂回滚逻辑
• 44pt 触摸目标在密集数据表格场景可能与信息密度冲突，需权衡

核心用法

本 Skill 是一套完整的前端界面设计规范，以 Markdown 文档形式提供可操作的开发指南。内容按主题划分为12个模块：

• Loading/Empty States：骨架屏优于加载动画，空状态需配备行动引导
• Error Recovery：每个错误界面必须提供恢复路径，表单失败时保留用户输入
• Immediate Feedback：100ms 内响应用户操作，乐观更新提升感知速度
• Touch & Interaction：44×44pt 最小触控区域，滑动操作需可发现性提示
• Visual Hierarchy：单屏单一主操作，8pt 网格系统保证一致性
• Motion & Animation：150-300ms 交互时长，尊重系统减弱动画偏好
• Consistency：跨平台设计令牌，组件复用降低认知负荷
• Accessibility：屏幕阅读器测试、色彩对比度、键盘可访问性
• Responsiveness：移动优先，真实设备测试，横竖屏兼容
• Performance Perception：优先可交互时间，懒加载、占位图、积极缓存
• Microcopy：按钮标签描述动作，错误信息说明解决方案

显著优点

1. 零依赖零风险：纯文档结构，无代码执行、无 API 调用、无供应链攻击面
2. 权威实践聚合：涵盖 Apple HIG、Material Design、WCAG 等主流设计体系精华
3. 量化指标明确：大量具体数值（100ms、44pt、8pt、150-300ms）可直接落地
4. 全链路覆盖：从加载到错误、从触控到动画、从性能到文案的完整闭环

潜在局限

1. 平台版本差异：iOS/Android/Web 演进迅速，部分建议可能滞后于最新平台规范
2. 框架抽象缺失：未提供 React/Vue/Flutter 等具体框架的实现代码示例
3. T3 来源等级：个人开发者/社区项目，缺乏企业级维护背书

适合人群

• 前端开发者快速查阅设计规范
• 产品经理制定交互验收标准
• 设计团队协作统一设计语言
• 独立开发者构建 MVP 界面

常规风险

无安全风险。文档本身不处理用户数据、不调用外部服务、不执行任何代码。风险主要存在于使用者误用——若将建议机械套用于特定平台（如 iOS 原生开发）而未遵循最新 HIG，可能导致审核问题。