TypeUI：用设计系统提示词武装 AI 编程工具

场景切入：为什么 AI 生成的 UI 总是不太对劲？

当你用 Claude 或 Cursor 写一个网页时，有没有遇到这种情况：代码能跑，但界面看起来像十年前的Bootstrap风格，配色奇怪、间距不一致、按钮状态残缺？问题不在 AI 不够聪明——而在于 AI 缺乏系统性的设计知识，它不知道你的品牌色是什么、圆角用多少、hover 状态怎么处理。

TypeUI 正是为解决这个问题而生。它不是一个 UI 组件库，也不是一个设计工具，而是一套结构化的设计系统提示词库，让 Claude、Cursor、Codex 等 AI 编程工具能够像专业设计师一样思考 UI、生成遵循设计规范的代码。

注册页设计规范示例

图1：注册页设计规范示例——包含视觉层级、间距规则、组件状态等完整设计指引

背景故事：Bergside 团队的设计工程化实践

TypeUI 由 Bergside LLC（https://bergside.com）开发和维护，团队在 AI 编程工具领域有深厚积累。项目核心作者 Zoltan 将多年在设计系统和 AI 提示词工程方面的经验，沉淀为这套可复用的 TypeUI 框架。

这个项目的背景是 AI-First 开发工作流 的兴起。传统开发流程是"设计稿 → 开发"，但在 AI 编程时代，流程变成了"自然语言需求 → AI 生成代码"。TypeUI 填补了中间缺失的设计系统层——它不是替代 Figma，而是把 Figma 上的设计系统翻译成 AI 能理解和遵循的 SKILL.md 格式。

项目采用 MIT 开源协议，GitHub 仓库已有 1146 Star、83 Fork，TypeScript 语言实现，版本 0.7.1，属于活跃维护状态。

核心能力：三层设计系统架构

TypeUI 的设计思路非常清晰，它提供三层相互配合的设计系统资源：

第一层：设计令牌（Design Tokens）与风格基础

DESIGN.md 是整个设计系统的宪法级文件，定义了：

视觉风格关键词：品牌调性、精简度、现代感等定性描述
字体层级（Typography Scale）：标题、正文、说明文字的字号和字重规范
色彩体系（Color Palette）：语义化令牌（primary、secondary、error 等）而非直接写 hex 值
间距系统（Spacing Scale）：8px 基准网格、4px/8px/16px/24px/32px 等间距层级
圆角/阴影/动效令牌：统一的光影风格

联系页设计规范

图2：联系页设计——结构化的表单布局规范，包含双按钮交互指引

第二层：设计技能文件（Design Skills）

skills/ 目录包含可复用的设计技能模块：

fundamentals/ui-principles.md — 通用 UI 设计原则（视觉层次、用户引导、信息密度）
fundamentals/typography-principles.md — 字体使用规范（可读性、行高、响应式字号）
fundamentals/accessibility.md — 无障碍设计规范（WCAG 2.2 AA 标准、键盘导航）
fundamentals/ux-principles.md — UX 交互规范（状态反馈、错误处理、加载体验）

这些 skill 文件遵循标准 SKILL.md 格式（包含 YAML frontmatter 元数据），可被 Hermes Agent 等工具索引和调用。

第三层：UI Prompts 布局库

typeui.sh 网站提供 200+ 精心设计的 UI Prompt，覆盖：

Marketing 类：Hero、CTA、Feature、Testimonial、Pricing、FAQ、Blog、Team、Footer、Social Proof、Newsletter、Event Schedule、Portfolio、Customer Logo
Application 类：Login、Register、Dashboard layouts

每个 Prompt 包含多个布局变体（共 200+ 布局），带有实际 SVG 预览图，开发者可直接选择适合自己产品的布局模板。

技术架构：Node.js CLI + MCP 协议

TypeUI 的技术实现非常轻量，核心是 TypeScript 编写的 Node.js CLI 工具，通过 MCP（Model Context Protocol）与 AI 编程工具集成。

目录结构

typeui/
├── src/                      # TypeScript 源码
│   ├── cli.ts               # 主命令行入口（10KB）
│   ├── config.ts            # 配置管理
│   ├── types.ts             # 类型定义
│   ├── domain/              # 领域模型
│   ├── generation/          # 代码生成逻辑
│   │   ├── runGeneration.ts
│   │   ├── runDesignGeneration.ts
│   │   └── randomDesignSystem.ts
│   ├── prompts/             # 交互式命令行提示
│   │   └── designSystem.ts  # inquirer 交互表单
│   ├── registry/            # 设计系统注册表客户端
│   ├── renderers/           # 输出渲染器
│   └── io/                  # 文件读写
├── skills/fundamentals/     # 设计技能 Markdown 文件
├── plugins/                 # 各 AI 工具的插件包
│   ├── claude/             # Claude Code 插件
│   ├── cursor/             # Cursor 插件
│   ├── codex/              # Codex 插件
│   └── vscode/             # GitHub Copilot in VS Code 插件
├── .mcp/server.json         # MCP 服务器配置
└── package.json            # Node.js >= 18，commander + inquirer + zod

核心依赖

commander：命令行参数解析
inquirer：交互式命令行表单（生成设计系统时的引导提问）
zod：运行时类型校验（Design System Schema）
tsx：TypeScript 执行（开发阶段）
vitest：单元测试框架

MCP 集成：无需本地安装的 AI 插件

TypeUI 最大的亮点之一是托管 MCP 服务器。用户无需 clone 仓库、安装依赖，只需在 AI 工具中添加 MCP 配置，填写托管服务器 URL 即可。AI 工具即可访问 TypeUI 的完整设计系统资源。目前支持：Claude Code、Cursor、Codex、VS Code (GitHub Copilot)、Windsurf、OpenCode、Grok、Mistral、Antigravity 等主流 AI 编程工具。

CLI 命令行接口

TypeUI 提供 5 个核心命令（均通过 npx typeui.sh 调用）：

命令	功能
`generate`	交互式提问，生成 SKILL.md 或 DESIGN.md
`update`	原地更新已存在的设计系统文件
`randomize`	生成随机设计系统（快速原型）
`list`	浏览注册表中的公开设计系统
`pull <slug>`	拉取指定设计系统到本地

代码质量评估

基于源码分析，TypeUI 的代码质量较高：

TypeScript 严格类型：使用 .ts 文件编写，Zod Schema 做输入校验，无 any 逃逸
测试覆盖：vitest 单元测试框架，CLI 命令均有对应测试
模块化架构：domain/generation/prompts/registry/renderers/io 清晰分层
多插件生态：为 10+ AI 编程工具提供原生集成插件
文档完善：README 详细、功能清晰；但 DESIGN.md blueprint 文档偏技术化，普通设计师可能需要额外学习成本

代码质量评分：85/100

部署评估：极简 CLI 开箱即用

TypeUI 是纯命令行工具，无 Web UI 和容器化配置。

安装方式：直接 npx typeui.sh 运行，无需安装
环境要求：Node.js >= 18（大多数现代系统自带）
本地开发：npm install && npm run build 即可
MCP 接入：修改 JSON 配置文件，填写托管 MCP URL
资源消耗：几乎为零（纯文本处理）
GPU/内存：无需

由于无 Docker/Compose 支持，且纯 CLI 无 Web UI，quick_deploy 评级为 partially_supported——可通过 npx 即开即用，但非容器化一键部署。

局限与争议

依赖 AI 工具生态：TypeUI 的价值完全取决于用户使用哪种 AI 编程工具，非 AI 编程工具用户无法直接受益
Skill 文件的学习成本：SKILL.md 格式虽然标准，但对没有提示词工程经验的设计师来说，上手门槛不低
非真正的设计工具：它不生成设计稿、不替代 Figma，需要设计师先将设计系统转化为 TypeUI 的 Skill 格式
商业化与开源边界：部分设计资源和 Prompt 库属于 Pro 版本，开源版功能相对基础

行业意义：AI 编程工具的设计系统化趋势

TypeUI 代表了一个新兴趋势：AI-First 设计工程化。随着 Claude、Cursor 等 AI 编程工具越来越普及，"如何让 AI 生成一致、高质量的 UI" 成为真实痛点。传统设计系统（Figma 组件库）无法直接服务于 AI 编程工作流，需要一个中间层——TypeUI 正是这个中间层的开源实现。

类似的项目还包括 v0.dev（Vercel）、Cursor Design Rules、Anysphere 设计规则等。TypeUI 的差异化在于跨工具通用性（支持 10+ AI 工具）和开源可扩展性（任何人都可以贡献 Skill）。

用户评价页设计规范

图3：用户评价页设计——包含引用样式、星级评分、装饰元素的设计规范

TypeUI：用设计系统提示词武装 AI 编程工具

场景切入：为什么 AI 生成的 UI 总是不太对劲？

注册页设计规范示例

图1：注册页设计规范示例——包含视觉层级、间距规则、组件状态等完整设计指引

背景故事：Bergside 团队的设计工程化实践

项目采用 MIT 开源协议，GitHub 仓库已有 1146 Star、83 Fork，TypeScript 语言实现，版本 0.7.1，属于活跃维护状态。

核心能力：三层设计系统架构

TypeUI 的设计思路非常清晰，它提供三层相互配合的设计系统资源：

第一层：设计令牌（Design Tokens）与风格基础

DESIGN.md 是整个设计系统的宪法级文件，定义了：

视觉风格关键词：品牌调性、精简度、现代感等定性描述
字体层级（Typography Scale）：标题、正文、说明文字的字号和字重规范
色彩体系（Color Palette）：语义化令牌（primary、secondary、error 等）而非直接写 hex 值
间距系统（Spacing Scale）：8px 基准网格、4px/8px/16px/24px/32px 等间距层级
圆角/阴影/动效令牌：统一的光影风格

联系页设计规范

图2：联系页设计——结构化的表单布局规范，包含双按钮交互指引

第二层：设计技能文件（Design Skills）

skills/ 目录包含可复用的设计技能模块：

fundamentals/ui-principles.md — 通用 UI 设计原则（视觉层次、用户引导、信息密度）
fundamentals/typography-principles.md — 字体使用规范（可读性、行高、响应式字号）
fundamentals/accessibility.md — 无障碍设计规范（WCAG 2.2 AA 标准、键盘导航）
fundamentals/ux-principles.md — UX 交互规范（状态反馈、错误处理、加载体验）

这些 skill 文件遵循标准 SKILL.md 格式（包含 YAML frontmatter 元数据），可被 Hermes Agent 等工具索引和调用。

第三层：UI Prompts 布局库

typeui.sh 网站提供 200+ 精心设计的 UI Prompt，覆盖：

Marketing 类：Hero、CTA、Feature、Testimonial、Pricing、FAQ、Blog、Team、Footer、Social Proof、Newsletter、Event Schedule、Portfolio、Customer Logo
Application 类：Login、Register、Dashboard layouts

每个 Prompt 包含多个布局变体（共 200+ 布局），带有实际 SVG 预览图，开发者可直接选择适合自己产品的布局模板。

技术架构：Node.js CLI + MCP 协议

TypeUI 的技术实现非常轻量，核心是 TypeScript 编写的 Node.js CLI 工具，通过 MCP（Model Context Protocol）与 AI 编程工具集成。

目录结构

typeui/
├── src/                      # TypeScript 源码
│   ├── cli.ts               # 主命令行入口（10KB）
│   ├── config.ts            # 配置管理
│   ├── types.ts             # 类型定义
│   ├── domain/              # 领域模型
│   ├── generation/          # 代码生成逻辑
│   │   ├── runGeneration.ts
│   │   ├── runDesignGeneration.ts
│   │   └── randomDesignSystem.ts
│   ├── prompts/             # 交互式命令行提示
│   │   └── designSystem.ts  # inquirer 交互表单
│   ├── registry/            # 设计系统注册表客户端
│   ├── renderers/           # 输出渲染器
│   └── io/                  # 文件读写
├── skills/fundamentals/     # 设计技能 Markdown 文件
├── plugins/                 # 各 AI 工具的插件包
│   ├── claude/             # Claude Code 插件
│   ├── cursor/             # Cursor 插件
│   ├── codex/              # Codex 插件
│   └── vscode/             # GitHub Copilot in VS Code 插件
├── .mcp/server.json         # MCP 服务器配置
└── package.json            # Node.js >= 18，commander + inquirer + zod

核心依赖

commander：命令行参数解析
inquirer：交互式命令行表单（生成设计系统时的引导提问）
zod：运行时类型校验（Design System Schema）
tsx：TypeScript 执行（开发阶段）
vitest：单元测试框架

MCP 集成：无需本地安装的 AI 插件

CLI 命令行接口

TypeUI 提供 5 个核心命令（均通过 npx typeui.sh 调用）：

命令	功能
`generate`	交互式提问，生成 SKILL.md 或 DESIGN.md
`update`	原地更新已存在的设计系统文件
`randomize`	生成随机设计系统（快速原型）
`list`	浏览注册表中的公开设计系统
`pull <slug>`	拉取指定设计系统到本地

代码质量评估

基于源码分析，TypeUI 的代码质量较高：

TypeScript 严格类型：使用 .ts 文件编写，Zod Schema 做输入校验，无 any 逃逸
测试覆盖：vitest 单元测试框架，CLI 命令均有对应测试
模块化架构：domain/generation/prompts/registry/renderers/io 清晰分层
多插件生态：为 10+ AI 编程工具提供原生集成插件
文档完善：README 详细、功能清晰；但 DESIGN.md blueprint 文档偏技术化，普通设计师可能需要额外学习成本

代码质量评分：85/100

部署评估：极简 CLI 开箱即用

TypeUI 是纯命令行工具，无 Web UI 和容器化配置。

安装方式：直接 npx typeui.sh 运行，无需安装
环境要求：Node.js >= 18（大多数现代系统自带）
本地开发：npm install && npm run build 即可
MCP 接入：修改 JSON 配置文件，填写托管 MCP URL
资源消耗：几乎为零（纯文本处理）
GPU/内存：无需

由于无 Docker/Compose 支持，且纯 CLI 无 Web UI，quick_deploy 评级为 partially_supported——可通过 npx 即开即用，但非容器化一键部署。

局限与争议

依赖 AI 工具生态：TypeUI 的价值完全取决于用户使用哪种 AI 编程工具，非 AI 编程工具用户无法直接受益
Skill 文件的学习成本：SKILL.md 格式虽然标准，但对没有提示词工程经验的设计师来说，上手门槛不低
非真正的设计工具：它不生成设计稿、不替代 Figma，需要设计师先将设计系统转化为 TypeUI 的 Skill 格式
商业化与开源边界：部分设计资源和 Prompt 库属于 Pro 版本，开源版功能相对基础

行业意义：AI 编程工具的设计系统化趋势

用户评价页设计规范

图3：用户评价页设计——包含引用样式、星级评分、装饰元素的设计规范