Frontend Design技能使用说明

何时使用

用户需要构建网页用户界面。代理负责处理着陆页、仪表板、表单、组件库，以及任何需要生产级打磨的前端工作。

快速参考

核心规则

1. 始终移动优先

• 从移动端布局开始，逐步向上增强
• 每个网格必须能折叠为单列
• 触摸目标最小尺寸为44x44像素
• 在真实设备上测试，而非仅使用模拟器

2. 排版至关重要

• 避免使用通用字体（如Inter、Roboto、Arial）
• 使用戏剧性的字号跳跃（2倍以上），而非微小的增量
• 正文文本最小为16-18像素
• 具体建议请参阅typography.md文件3. 色彩需有目的性

遵循70-20-10法则：主色、辅色、强调色

• 明确选择浅色或深色——避免浑浊的中性灰
• 切勿使用纯白背景——增加层次感
• CSS变量和模式请参阅
• colors.md文件4. 每次交互都需提供反馈点击操作需在100毫秒内得到响应

采用乐观更新以实现即时感

• 超过1秒的操作需显示加载状态
• 出错时保留用户输入内容
• 5. 无障碍访问不容妥协
• 色彩对比度需达到4.5:1（文本）和3:1（用户界面）

5. Accessibility Non-Negotiable

• Color contrast 4.5:1 (text), 3:1 (UI)
• 所有交互元素都应有焦点状态
• 语义化HTML（nav、main、section、article）
• 所有功能都支持键盘导航

6. 从起点优化性能

• 延迟加载首屏以下内容
• 图像占位符防止布局偏移
• 代码分割重型组件
• 目标：LCP<2.5秒，CLS<0.1

7. 一个令人印象深刻的元素

• 每个页面都需要一个难忘的设计选择
• 字体处理、主视觉动画、特殊布局
• 怯懦的设计终将失败——坚持美学主张

前端陷阱

范围

此技能仅：

• 提供前端模式和指导原则
• 推荐技术栈和工具选择
• 指导响应式实现

此技能绝不：

• 发起网络请求
• 访问用户数据
• 存储任何信息

安全与隐私

此技能为只读指导性质。不收集、发送或存储任何数据。

反馈

• 如果觉得有用：clawhub star 前端
• 保持更新：clawhub 同步