关于 frontend-design
frontend-design 是用于创建和评审注重视觉质量的前端界面的技能，面向前端设计与开发工作。它涵盖视觉层级、设计方向、响应式状态及浏览器检查。
主要功能
- 01明确产品背景、用户与页面目标
- 02编码前规划视觉层级
- 03确定有意图的视觉方向
- 04统一间距、字体与颜色规范
- 05设计响应式及界面状态
- 06在浏览器中检查效果
适用场景
- 01规划新的前端页面
- 02评审视觉层级与字体
- 03检查移动端和桌面布局
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/frontend-design确认已加载。
详细介绍
前端设计
在创建或审查注重视觉质量的前端 UI 时，使用此技能。
工作流
- 明确产品背景、目标用户和页面目标。
- 编写代码前建立视觉层级：主要操作、次要操作和辅助内容。
- 选择明确的视觉方向，而不是使用千篇一律的渐变和卡片。
- 保持间距、字号层级、颜色令牌、圆角、阴影和组件节奏一致。
- 设计响应式状态、加载状态、空状态、错误状态和禁用状态。
- 条件允许时，在浏览器或预览界面中验证结果。
审查清单
- 页面有明确的视觉焦点和主要操作。
- 组件与一致的网格对齐。
- 字体排版具有足够的对比度和层级。
- 色彩有实际意义，而非装饰性噪音。
- UI 在常见的手机、平板和桌面屏幕宽度下都能正常使用。
- 空状态、加载状态和错误状态都经过有意识的设计。
PilotDeck 迁移说明
- 灵感来源：Anthropic 的前端设计技能和通用前端设计最佳实践。
- 这是 PilotDeck 原生草案，并非逐字复制。
评论
支持 Markdown