mcpField
D
design-frontend

design-frontend

github.com/kensaurus设计与 UI938 次安装1 周前更新
代码仓库

关于 design-frontend

design-frontend 是面向前端开发的设计技能，指导先发现并复用代码库中的设计系统，再构建界面。它还提供可访问性和视觉质量检查。

主要功能

  1. 01发现设计令牌与禁用模式
  2. 02优先扩展现有组件
  3. 03遵循字体与触控尺寸要求
  4. 04检查键盘焦点与减少动态效果
  5. 05避免常见的通用视觉样式

适用场景

  1. 01在现有设计系统上开发新界面
  2. 02改进前端组件而不重复造轮子
  3. 03检查界面的可访问性与视觉一致性

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/kensaurus/skills --skill design-frontend

安装后在 Claude Code 中输入/design-frontend确认已加载。

详细介绍

前端设计技能

自由度：混合。 视觉构图 [高自由度]；设计系统发现 [低自由度 — 严格执行]。

发现设计系统，遵循现有模式，打造精美界面。

如何思考

  1. 发现 — 设计令牌、components/ui、禁止使用的模式
  2. 复用 — 扩展现有组件；不要另建一个 Button
  3. 组合 — 使用这些令牌构建新界面
  4. 检查 — 字号下限、44px 点击目标、减少动态效果，且不得使用反通用清单中列出的默认项

示例

发现： components/ui/button.tsx + globals.css 中的令牌；text-xs 为最小字号；rounded-sm。 复用： 设置行使用现有的 Button / Input；不新增基础组件。 组合： 新建 /settings 页面 — 使用令牌间距、text-sm 正文、44px 保存按钮。 检查： 不含反通用清单中的项目（没有 Inter、紫色配白色或药丸形按钮）；任何加载动画都支持 prefers-reduced-motion。

汇报前自我检查

  • 说明了发现结果 — 在编写 JSX 前说明令牌文件、圆角和禁止项清单
  • 优先复用 — 不在 components/ui 旁边重复创建基础组件
  • 遵守最小值 — 可读字号 ≥ text-xs；点击目标 ≥44px
  • 选择正确负责人 — 优化现有页面 → enhance-web-ui；落地页 → enhance-web-landing；重新设计现有页面 → enhance-web-redesign

第 1 阶段：发现设计系统 [低自由度 — 严格执行]

编写任何前端代码之前：

1.1 查找设计系统文件
Glob: **/*design-system*.{md,ts,css}
Glob: **/tokens*.{ts,json}
Glob: **/components/ui/**
Glob: **/_*README*
1.2 提取并记录设计令牌
类别查找内容示例
字体排版字号、字重text-xs、font-medium
间距内边距、间隙p-4、gap-2
颜色调色板、语义颜色bg-emerald-50
边框圆角、样式rounded-sm
动画时长duration-200
1.3 查找禁止使用的模式
grep -r "NEVER\|FORBIDDEN\|❌" docs/ README*
1.4 验证说明（必需）
"Design System Discovery:
├─ Found: [design system path]
├─ Typography min: [e.g., text-xs]
├─ Radius standard: [e.g., rounded-sm]
├─ Forbidden: [list patterns]
└─ Reusing: [existing components]"

第 2 阶段：实现标准 [高自由度]

字体排版最小值
场景最小值用途
正文text-sm（14px）主要内容
说明文字text-xs（12px）标签、提示
紧凑内容text-[10px]仅用于密集型仪表板

切勿将 text-[8px] 或 text-[9px] 用于可读内容。

无障碍要求
检查项要求
触控目标≥44×44px
对比度文字 4.5:1，UI 3:1
键盘tabIndex、焦点样式
动效prefers-reduced-motion
快速参考
Typography: text-xs=12px, text-sm=14px, text-base=16px
Spacing: 1=4px, 2=8px, 3=12px, 4=16px, 6=24px, 8=32px

第 3 阶段：质量检查清单 [低自由度 — 不可跳过]

[ ] Uses design system tokens (no hardcoded values)
[ ] Extends existing components (no duplicates)
[ ] Typography ≥ text-xs for readable content
[ ] Touch targets ≥ 44px
[ ] Focus states visible
[ ] prefers-reduced-motion respected
常见修复
问题修复
文字太小text-[9px] → text-xs
字重过粗font-bold → font-medium
圆角过大rounded-lg → rounded-sm
旋转动画animate-spin → animate-pulse

反通用检查清单

没有明确方向的初稿往往会落入相同的几种默认设计；只有明确列出这些选项，检查才有实际意义：

  • 将 Inter / Roboto / Arial 用作展示或正文字体
  • 白色背景上的紫色（violet/indigo）渐变
  • 奶油色 / 米白色页面背景
  • 标题中用斜体强调词语
  • 使用“01 / 02 / 03”作为编号的章节标签
  • 非代码类产品使用等宽字体眉题标签
  • 将药丸形（完全圆角）按钮作为默认按钮样式
  • 默认使用一行三个尺寸相同的卡片作为版块布局

将初稿中使用的其他类似设计也加入此清单。

请记住： 代码库中的设计系统是唯一可信来源。先搜索，再创建。先复用，再重造。

评论

支持 Markdown