Frontend Design

基于 React、Next.js 和 Tailwind CSS 的前端开发指导，涵盖响应式设计与可访问性规范。

已扫描

项目

内容

适合谁

前端开发人员、UI/UX 设计师

不适合谁

无需前端开发的用户、希望自动生成完整网站的应用者

国内可用性

需网络配置。可能需要网络配置或第三方服务可访问。

安装难度

新手友好（★☆☆）。基于终端操作、依赖、API Key 和本地环境要求的初步判断。

安装与下载

复制命令安装

openclaw skills install @ivangdavila/frontend

官方 ZIP下载官方 ZIP

Skill 说明

命令、参数、文件名以原文为准

何时使用

用户需要构建网页界面。代理负责处理落地页、仪表盘、表单、组件库等前端内容，适用于需要生产级打磨的前端项目。

快速参考

主题	文件
技术栈与工具链	`stack.md`
排版规范	`typography.md`
色彩系统	`colors.md`
移动端设计模式	`mobile.md`
动效设计	`animation.md`
示例参考	`examples.md`

核心准则

1. 始终采用移动端优先

从移动端布局开始，逐步向上增强
所有网格必须能折叠为单列
触控目标最小尺寸为 44x44px
在真实设备上测试，而非仅依赖模拟器

2. 排版至关重要

避免使用通用字体（如 Inter、Roboto、Arial）
使用显著的字号跳跃（至少 2 倍以上），避免细微递增
正文字号不得小于 16-18px
详见 typography.md 中的具体建议

3. 色彩需有明确目的

遵循 70-20-10 原则：主色、辅色、强调色
统一选择浅色或深色主题——避免使用模糊的中间灰色
禁止使用纯白色背景——应添加渐变、纹理或层次感
详见 colors.md 中的 CSS 变量与配色模式

4. 每次交互都提供反馈

点击操作应在 100ms 内响应
采用乐观更新以获得即时反馈感
操作耗时超过 1 秒时显示加载状态
出错时保留用户输入内容

5. 可访问性不可妥协

文本颜色对比度不低于 4.5:1，UI 元素不低于 3:1
所有可交互元素必须有焦点状态
使用语义化 HTML 标签（nav、main、section、article）
键盘导航需覆盖所有功能

6. 从一开始就关注性能

对视口下方内容进行懒加载
使用图片占位符防止布局偏移
对大型组件进行代码拆分
目标：LCP < 2.5s，CLS < 0.1

7. 每页有一个令人难忘的设计点

每个页面都应有一个令人印象深刻的视觉亮点
如独特的排版处理、英雄动画或非传统布局
保守的设计容易失败——必须坚定地确立美学风格

前端陷阱

陷阱	后果	解决方案
使用通用字体	看起来像其他网站	使用具有辨识度的字体
纯白色背景	平面、无生气	添加渐变、纹理或深度感
将移动端视为次要考虑	60% 用户体验受损	始终采用移动端优先策略
表单错误后清空输入	用户产生愤怒情绪	保留输入内容，高亮错误项
缺少加载状态	用户误以为页面卡死	立即显示进度提示
保守的字号层级	缺乏视觉层次	头标题使用 2 倍及以上字号跳跃

适用范围

本技能仅：

提供前端设计模式与规范指南
推荐技术栈与工具链选择
指导响应式实现方式

本技能绝不：

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

安全与隐私

本技能仅为只读指导，不收集、不发送、不存储任何数据。

反馈

若有帮助：clawhub star frontend
保持更新：clawhub sync

@ivangdavila

已收录 16 个 Skill