mcpField
F
frontend-design-ui-ux

frontend-design-ui-ux

github.com/ulpi-io设计与 UI52.4k 次安装8 周前更新
代码仓库

关于 frontend-design-ui-ux

面向需要界面设计方案而非生产 UI 代码的团队，制定鲜明且可落地的 UI/UX 规范。它将设计语言锁定在 DESIGN.md，并把流程、状态、无障碍要求和组件规格交给工程 Agent 实现。

主要功能

  1. 01在 DESIGN.md 锁定项目设计语言
  2. 02定义用户流程、状态与边缘情况
  3. 03规格化响应式及无障碍组件
  4. 04通过 Design Pre-Flight 检查
  5. 05委托工程 Agent 实现

适用场景

  1. 01规划新页面或功能
  2. 02保持多个界面的视觉一致
  3. 03准备可直接实施的工程交接

安装

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

$npx skills add https://github.com/ulpi-io/skills --skill frontend-design-ui-ux

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

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
anti-slop.md
component-spec-template.md
design-language-lock.md
design-preflight.md
design-system-routing.md
design-tokens-template.md
inspiration-intake.md
user-flow-template.md

详细介绍

这是一项设计规范技能，而非实现技能。不可妥协的规则： 1. 请勿依据此技能编写生产级 UI 代码。应产出规范和锁定的设计语言，并将构建工作委派给工程 Agent。设计规范由我们负责；Agent 负责实现。 2. 在指定屏幕之前，先确定一种独特的美学身份，并通过反事实默认测试：如果你会为任何类似需求做出同样的视觉效果，那它就是默认方案——请更改。 3. 明确禁止 AI 式俗套（`references/anti-slop.md`）。俗套测试是工作的把关标准：如果别人能毫无疑问地说出“这是 AI 做的”，那就算失败。 4. 在 `DESIGN.md` 中锁定设计语言，并确保每个屏幕都遵循它。在同一身份内变化，绝不在身份之间变化。每次后续功能开发或新会话开始时，都要先重新阅读 `DESIGN.md`。 5. 如果用户提供了灵感链接，请使用 `browse` 技能访问并综合提炼——绝不照搬单个参考，也绝不继承其中的俗套设计。 6. 交接前运行设计预检关卡。只要有一项无法如实勾选，就还未完成。 7. 保持让我们脱颖而出的严谨性：覆盖各状态、流程和边界情况，以及无障碍要求——绝不跳过。

frontend-design-ui-ux

输入

  • $request：要设计的功能、页面、组件或 UX 问题——以及可选的灵感 URL。

目标

产出一套独特、一致且可构建的设计方案——由受委派的工程 Agent 直接实现的规范。所有产物均写入 .ulpi/design/：

  • .ulpi/design/DESIGN.md — 锁定的设计语言（身份、调色板、字体、比例、标志性元素、语气和选定的设计系统）。适用于整个项目；每次会话开始时都要先重新阅读。
  • .ulpi/design/<feature>.md — 单项功能的规范：用户流程与状态、组件规范，以及构建交接信息（目标 Agent 和验收标准）。须遵循 DESIGN.md。

步骤 0：发现与输入

明确：目标用户 · 产品目标 · 设备／使用场景 · 现有设计系统或品牌限制 · 无障碍预期。询问一次：“有没有你欣赏的参考网站或设计？请贴出 1–4 个 URL。”

如果问题描述不够明确，就提问——但最多只问几个有针对性的问题；绝不长篇盘问。成功标准：问题已从用户和产品角度明确界定，并已收集灵感链接（如有）。

步骤 1：收集灵感（可选）

如果用户提供了链接，请使用 browse 技能逐一访问，提取其设计 DNA（字体、颜色、形状、间距、布局），并为每个网站提炼一句 DNA 注释。综合这些参考——绝不照搬其中任何一个。 如果 browse 不可用或链接无法访问，请让用户描述想要的风格，然后继续。

加载 references/inspiration-intake.md。成功标准：将每个参考都归纳为可复用的 DNA，并明确说明要借鉴什么、舍弃什么——或明确跳过此步骤。

步骤 2：设计解读与美学方向

以绝不交付模板化视觉效果的设计负责人视角开展工作。在确定任何设计变量之前，先摒弃默认美学的惯性：

  • 用一句话给出 Design Read（感受 + 设计押注）。
  • 从 references/anti-slop.md 的方向列表中确定一种命名的美学方向，并根据需求简述选择理由（如有灵感 DNA，也需纳入考虑）。
  • 进行反事实默认测试：对于任何类似需求，你都会给出这种视觉效果吗？如果会，请更改。
  • 可选地设定审美旋钮（design_variance／motion_intensity／visual_density，范围 1–10），并让复杂度与方向相匹配（极繁主义 → 精致繁复；极简主义 → 克制、精准、留白）。

加载 references/anti-slop.md，查看方向列表、模式词汇表和明确禁用项。 成功标准：确定一种与当前需求紧密相关、而非泛化默认方案的方向。

步骤 3：推导并锁定设计语言 → 编写 .ulpi/design/DESIGN.md

确定品牌定位（品牌型还是产品型）；若为产品型，则确定要采用的设计系统（参见 references/design-system-routing.md）。然后推导并锁定产品形象：配色（OKLCH、带色调的中性色、60-30-10、经 WCAG 检查）、沿对比轴配对的字体角色、统一的间距／圆角／动效比例、标志性元素和语气。将其写入 .ulpi/design/DESIGN.md，作为每个屏幕都必须遵循的一致性唯一依据。

加载 references/design-language-lock.md（产物与锁定规则）、references/design-tokens-template.md （推导方法）和 references/design-system-routing.md（从设计简报到系统的映射）。成功标准： .ulpi/design/DESIGN.md 完整且已锁定；没有通用的默认形象。

步骤 4：建模流程与状态

记录主要用户旅程、分支／决策以及完整的状态模型——加载中、空、部分完成、成功、错误——以及边缘情况（刷新、会话过期、返回、离线）。写入 .ulpi/design/<feature>.md。使用 references/user-flow-template.md。成功标准：覆盖各种状态下的行为，而不只是理想路径。

步骤 5：定义组件与交互规则

为每个组件定义：用途、变体、属性／数据、状态、交互反馈、响应式行为和无障碍支持（ARIA、键盘、屏幕阅读器、焦点）。所有视觉值都必须依据 .ulpi/design/DESIGN.md；追加到同一个 .ulpi/design/<feature>.md 中。使用 references/component-spec-template.md。成功标准：受委派的工程师无需猜测即可实现，且所有内容都符合已锁定的产品形象。

步骤 6：设计预检关卡

从头到尾执行 references/design-preflight.md——检查产品形象锁定、反粗制滥造、状态覆盖、无障碍、布局工艺、认知负荷和打分式自我评审。有些项目需要机械计数。修复任何未通过项或得分 ≤ 2 的任何维度，用一行说明你改了什么以及为什么改（修改并说明理由），然后重新执行。成功标准：所有项目均已勾选，且没有任何评审维度得分 ≤ 2。

步骤 7：构建交接（委派实现）

在 .ulpi/design/<feature>.md 末尾完成委派简报：目标工程 Agent、选定的 design_system（及其设置说明）和验收标准，并附上指示： “严格按照此规格实现。使用我们锁定的令牌为设计系统设置主题；不要重新设计或重新实现其组件。” 构建工作委派给 Agent；此技能不会编写 UI。

Agent 选择
标准目标 Agent
服务端渲染 / SEO / App Router / Server Actionsnextjs-senior-engineer
纯 SPA / 仅客户端 / CLI Web UI / Electron-Taurireact-vite-tailwind-engineer
无 SSR 的静态站点任一（询问用户）
不明确询问用户

成功标准：受委派的 Agent 可以直接使用 .ulpi/design/DESIGN.md + .ulpi/design/<feature>.md 进行实现，无需重新设计。

护栏

  • 不要使用此技能实现生产环境 UI 代码；应产出规格并完成交接。
  • 不要采用通用的默认形象——根据设计简报推导配色和字体；反粗制滥造测试会把关产出。
  • 不要让屏幕偏离 DESIGN.md：只允许在同一形象内变化，不允许形象各异。
  • 不要照搬单一灵感参考，也绝不要继承其粗制滥造之处。
  • 不要跳过无障碍、状态覆盖或响应式行为——这些是我们的优势所在。
  • 需要具体产物时，不要只给出含糊的设计描述。
  • 即使缺少 browse 或图像工具，也不要停下——应妥善降级，并根据设计简报继续推进。

何时加载参考资料

  • references/inspiration-intake.md — 使用 browse 访问参考链接并提取设计基因（步骤 1）。
  • references/anti-slop.md — 方向菜单、明确列出的 AI 糟粕禁令，以及糟粕测试（步骤 2、3、6）。
  • references/design-language-lock.md — DESIGN.md 产物和一致性锁定规则（步骤 3）。
  • references/design-system-routing.md — 简报→设计系统映射 + 诚实原则（步骤 3，产品语域）。
  • references/design-tokens-template.md — 针对每份简报的颜色／字体推导方法 + 中性色阶（步骤 3）。
  • references/user-flow-template.md — 用户旅程和验收流程（步骤 4）。
  • references/component-spec-template.md — 组件简报和接口契约（步骤 5）。
  • references/design-preflight.md — 交接前的质量与一致性检查门槛（步骤 6）。

输出约定

写入 .ulpi/design/，并报告：

  1. 设计研读结果 + 已确定的美学方向（如有灵感来源设计基因，也一并报告）
  2. .ulpi/design/DESIGN.md — 已锁定的设计语言（语域、设计系统、配色、字体、比例、标志性特征、语气）
  3. .ulpi/design/<feature>.md — 流程和状态
  4. — 组件规格（同一文件）
  5. 交付前检查结果（每项均已勾选，且任何评审维度的分数都不低于 2）
  6. 构建交接信息 — 目标 Agent + 设计系统 + 验收标准（“严格按此实现；不得重新设计”）

评论

支持 Markdown