企业官网建设流程全解析

如何用UI Skills构建团队级设计系统Agent工作流：企业落地方案

【免费下载链接】ui-skillsSkills for Design Engineers项目地址: https://gitcode.com/GitHub_Trending/ui/ui-skills

UI Skills是面向设计工程师（Design Engineers）的技能集项目，它为 Codex、Cursor、Claude Code 等 AI 编程 Agent 提供一组可直接加载的「设计系统技能」，帮助企业把 UI 规范、可访问性、动效性能等团队共识固化成 Agent 可执行的工作流，让 AI 写出的界面不再"千码一面"。本文给出一套从零上手的团队级落地方案。

一、为什么团队需要 UI Skills

AI 生成界面最大的痛点是风格漂移：同一个产品里，Agent 今天用渐变色、明天又手写键盘焦点逻辑，团队设计系统形同虚设。

UI Skills 的思路是把「团队规范」拆成一个个带明确边界的技能文件（SKILL.md），Agent 在动手前先加载对应技能，再按规则实现。项目官网入口：

• 技能注册表：src/data/registry.ts
• 技能总目录页逻辑：src/lib/skill-catalog.ts
• 站点设计规范（本身就是范本）：DESIGN.md

💡 一句话理解：技能 = 给 Agent 的岗位手册，加载哪份手册，Agent 就按哪套规范干活。

二、仓库结构速览：技能如何组织

每个技能目录下的 SKILL.md 都包含name、description前置元数据和具体规则，可被 CLI 和 MCP 服务发现（见 src/lib/agent-skills-discovery.ts 与 src/pages/mcp/server.astro）。

三、第一步：用 CLI 让 Agent 自动选技能

UI Skills 提供命令行入口，Agent 或人都可以运行：

npx ui-skills start npx ui-skills categories npx ui-skills list --category motion npx ui-skills get baseline-ui

核心是 skills/ui-skills-root/SKILL.md 定义的路由协议：

1. 判断任务是否属于 UI 相关，否则返回no skill needed
2. 识别任务所属类别，用 CLI 查看该类别
3. 只加载 1 个最相关技能（复杂任务最多 2~3 个，绝不超过 3 个）
4. 基于选中的技能上下文开始实现

这套「先路由、后加载」的机制保证了 Agent 上下文干净、规范命中精准，是企业级多 Agent 场景里避免"技能过载"的关键。CLI 实现参考 src/lib/ui-skills-cli.ts，行为测试见 tests/cli.test.ts。

四、第二步：用 DESIGN.md 沉淀团队设计语言

企业落地的第一个产出物应该是DESIGN.md——团队设计系统的"单一事实来源"。

create-design-md技能（skills/create-design-md/SKILL.md）支持两种模式：

• 仓库模式：从源码中的 token、主题、组件所有权中重建设计语言
• URL 模式：从线上站点的计算样式中反推视觉规范（标注为重建草稿）

生成的文档结构固定为## Overview、Colors、Typography、Layout 等段落，配合 YAML frontmatter 存放颜色与字体 token。本仓库根目录的 DESIGN.md 就是活案例：parchment 中性色阶、JetBrains Mono 等宽字体、克制的圆角与阴影，全部以可校验的格式写出。

✅ 团队约定：DESIGN.md由设计师与 Agent 共同维护，任何 UI 类技能执行前都先引用它。

五、第三步：用"基线技能"卡住 AI 界面劣化

skills/baseline-ui/SKILL.md 是防止"AI 界面垃圾感"的第一道闸门，规则包括：

• 动画只允许动transform/opacity等合成器属性，禁止动画width、margin等布局属性
• 交互反馈不超过 200ms，必须尊重prefers-reduced-motion
• 图标按钮必须带aria-label，销毁性操作必须走AlertDialog
• 禁止紫色多色渐变、发光效果等营销风样式

配合 skills/fixing-motion-performance/SKILL.md（按"绝不模式 > 机制选择 > 滚动 > 滤镜"的优先级表审计动画）与 skills/fixing-accessibility/SKILL.md（按"可访问名称 > 键盘 > 焦点"优先级审计交互），团队可以形成日常开发 → 性能审计 → 可访问性审计的三段式质量流水线。

六、第四步：improve-ui 审计与多 Agent 交接

当界面已经存在、需要"改善而非重写"时，skills/improve-ui/SKILL.md 定义了严格边界：

1. 只读审计：不改产品源码，只允许在design-plans/下产出计划
2. 证据三证明：每条问题必须同时给出设计契约、运行时路径、修正方案，否则丢弃
3. 计划交接：产出的计划完全自包含，交给另一个 Agent 执行

这正是企业级多 Agent 协作的形态：审计 Agent（只读、保守）与执行 Agent（按计划动手）职责分离，天然规避 AI 越权改代码的风险。计划模板见 skills/improve-ui/references/plan-template.md。

七、团队落地清单

给管理者的三点建议：① 技能数量宁少勿多，遵循 root 技能的"最多 3 个"原则；② 把DESIGN.md的变更纳入设计评审流程，而非个人随意修改；③ 用审计 Agent 的"置信度"列作为团队排期依据，先修高杠杆问题。

用 UI Skills 搭建团队级设计系统 Agent 工作流，本质上是把设计团队的隐性经验变成 Agent 可加载、可审计、可交接的显性资产——规范一次沉淀，全流程复用。

【免费下载链接】ui-skillsSkills for Design Engineers项目地址: https://gitcode.com/GitHub_Trending/ui/ui-skills