企业官网建设流程全解析

ux-ui-agent-skills（别名 XIAS）是一套面向 AI 编程助手的设计系统技能包：内置 138 个品牌级设计系统、14 个 DTCG 设计令牌文件和 52 个客观质量门禁，让 AI 生成的 Dashboard 秒变 Stripe 或 Linear 风格，而不是千篇一律的紫色渐变。

为什么 AI 生成的 Dashboard 总是一股"AI 味" 🤔

如果你让 AI 帮你写一个数据面板，拿到的结果往往是：靛蓝紫渐变头图、四张一模一样的卡片、emoji 当图标、一个蓝色的"Delete Account"按钮。这类页面在行业里有个名字叫slop（AI 泔水），仓库里还特意留了一个标本页供对照学习：tests/fixtures/bad/slop-screen.html。

问题根源不是模型"不够聪明"，而是缺了两种东西：

1. 没有设计教条——没人告诉 AI"专业"长什么样；
2. 没有可验证的门禁——没人告诉你"这个悬停态的对比度只有 1.13:1"。

ux-ui-agent-skills 恰好同时补上这两块：138 个命名设计系统定义"该长什么样"，14 个 DTCG token 文件定义"怎么承载"，52 道门禁定义"怎么验证"。

138 个设计系统长什么样 🎨

138 个设计系统全部位于 design-systems/library/，每个系统一个文件夹、一份完整的 DESIGN.md 规格，统一遵循六段式结构：

Visual Theme → Color Palette & Roles → Typography Rules → Spacing → Component Stylings → Motion

它们覆盖 20 个类别：AI & LLM（14 个）、Creative & Artistic（11 个）、Media & Consumer（12 个）、Modern & Minimal（10 个）、Productivity & SaaS（10 个）、Professional & Corporate（10 个），直到 Automotive（6 个）和 Retro & Nostalgic（4 个）。完整目录见 taste/aesthetic-systems.md。

与 Dashboard 最常用的几个：

规格的可执行性体现在细节颗粒度：每个系统都拆到具体 hex 色值、字体字重、字距、阴影配方和按钮内边距——AI 拿到的是"施工图"，不是"感觉描述"。

Stripe 风格：轻盈的金融感 ✨

design-systems/library/stripe/DESIGN.md 中的关键特征：

• 品牌紫#533afd承担 CTA 与交互高亮；
• 标题使用weight 300 细体加负字距——用轻盈表达自信，而不是加粗喊话；
• 标题色是深海军蓝#061b31，而不是黑色；
• 招牌多层蓝调阴影rgba(50,50,93,0.25)，连高度感都带着品牌色。

Linear 风格：暗色优先的精密感

design-systems/library/linear-app/DESIGN.md 则走向另一极：

• 近黑画布#08090a，信息层级靠白色透明度而非颜色区分；
• Inter Variable 的招牌510 字重（介于常规与中等之间）；
• 全系统唯一彩色是靛紫#5e6ad2/#7170ff，只留给 CTA 与激活态；
• 边界全部用超细半透明白rgba(255,255,255,0.05)。

一明一暗、一渐变一无彩，两套截然不同的美学能共用同一套 token 架构——这正是"138"这个数字的意义：方向可以换，纪律不变。

从一句话到"Stripe 风格"：四步流水线 ⚙️

完整工作流定义在 taste/aesthetic-systems.md：

1. 选方向——读需求，选一个美学原型（如 High-End Agency）或 138 个库中的命名系统（如stripe）；
2. 解析到 token——把所选系统的颜色/字体/间距/圆角/阴影/动效逐一映射进 tokens/ 下的 14 个文件，例如 colors.json、typography.json、shadows.json；
3. 渲染代码——通过 frameworks/adapter-protocol.md 协议输出目标框架代码，覆盖 React + Tailwind、Vue、Svelte、SwiftUI、Flutter 等 16 种技术栈；
4. 跑门禁——/gate输出真实的 N/N 分数，52 道门禁包括 WCAG 对比度真实渲染、键盘可达、目标尺寸、RTL、减少动效等，任何一道都无法"假装通过"。

其中有一条铁律：品味永远不能凌驾于无障碍之上。如果某个品牌色不过对比度检查，规格明确要求"必须调整该品牌色"，然后再跑对比度、焦点、目标尺寸复核。也就是说，你拿到的"Stripe 风格"页面，是一个先通过了 WCAG 2.2 的版本。

最终效果是"One theme, two modes, no per-page palette"：浅色/深色来自同一套 token，删除账号永远穿 danger 变体，加载态绝不借用禁用态的灰度——这些全是门禁会检查的规则。

仓库里可以直接查看"成品"：

• Atlas 营收控制台：侧边导航、英雄指标、多种图表与可排序表格，通过全部 52 道门禁，源码在 examples/showcase/；
• Meridian Terminal：单屏承载 10 种图表（K 线、深度、瀑布、相关矩阵……），全部用同一套 token 内联 SVG 绘制，零图表库依赖。

3 种方式把设计系统技能包装进项目 🔧

不需要 clone 仓库，docs/INSTALL.md 列了完整对比，最常用的是：

# 不安装，先看效果（复制渲染示例并打开） npx ux-ui-agent-skills demo # 装进任意项目（支持 Claude Code / AGENTS.md 双入口） npx ux-ui-agent-skills init npx ux-ui-agent-skills add tokens taste design-systems # 只装部分模块 # 走 Homebrew brew install plugin87/tap/ux-ui-agent-skills

装好后，直接用自然语言驱动：

• "Build the billing settings screen, one shared theme, light and dark"
• "把这个 Dashboard 改成 Linear 暗色风格，表格要真的能排序"
• /gate——跑完 52 项检查，报告真实分数
• /critique——把结果交给一个"专门挑毛病、论证为什么要打回"的批评者

谁适合用这套设计系统技能包？✅

• 产品团队：给现有 Dashboard 做品牌级视觉升级（Stripe、Linear、Notion 风格任选）；
• 独立开发者：没有设计师，也能让 AI 交付 token 一致、深浅双主题的 UI；
• 有无障碍要求的项目：WCAG 2.2 AA-AAA 清单在 accessibility/wcag-checklist.md，门禁自动校验；
• 已有设计系统的团队：design-systems/crosswalk.md 提供与 Material 3、Apple HIG、Fluent、Carbon、shadcn/ui、Ant Design 的角色映射表，迁移主要是"改名"。

写在最后

138 个设计系统不是"风格画廊"，52 道门禁也不是"AI 自评分"。它们合起来把"做得好看"从主观意见变成了可执行、可验证的工程流程——这就是一个 Dashboard 从"AI 味"走向"品牌级"的最短路径。