关于 Typeui
Typeui 为使用 AI 编码工具构建网站和应用的开发者提供设计系统、UI 提示词和布局指导。其命令行工具可生成、更新、随机生成或获取设计技能文件，适用于支持 Markdown 文件或提示词的 AI 提供方。
主要功能
- 01SKILL.md 和 DESIGN.md 设计技能
- 02常见 UI 区块提示词
- 03UI/UX 基础指导
- 04命令行生成和更新
- 05浏览注册表并获取文件
适用场景
- 01在 AI 生成的界面中应用设计系统
- 02探索页面区块的布局方案
- 03创建或更新本地设计指导
- 04将注册表规范文件拉取到项目
MCP 相关
Typeui 提供 MCP 服务，AI 编码工具可连接以获取设计系统、提示词和布局变化指导。README 还介绍了相关工具的插件和连接指南。
配置
远程服务无需本地安装。选择你使用的客户端，复制配置或使用一键安装。
https://mcp.typeui.sh/mcpclaude mcp add --transport http typeui https://mcp.typeui.sh/mcp{"mcpServers":{"typeui":{"type":"http","url":"https://mcp.typeui.sh/mcp"}}}在 Cursor 中打开{"servers":{"typeui":{"type":"http","url":"https://mcp.typeui.sh/mcp"}}}在 VS Code 中打开{"mcpServers":{"typeui":{"type":"http","url":"https://mcp.typeui.sh/mcp"}}}{"mcpServers":{"typeui":{"serverUrl":"https://mcp.typeui.sh/mcp"}}}命令在终端中运行；JSON 粘贴到对应客户端的 MCP 配置后重启。需要授权的服务会在首次连接时提示登录。
工具
详细介绍
TypeUI - 借助 AI 打造更出色的 UI
TypeUI 是一个 AI 优先的平台，你可以使用设计技能、UI 提示词及其他资源，增强 AI 能力，从而在构建网站和应用程序时生成更出色的用户界面和设计。只要 AI 提供商支持 Markdown 文件或通用提示词，此仓库中的资源就适用于任何 AI 提供商。
开始使用
在你进行构建的地方安装 TypeUI。将你的 AI 编码工具连接到 TypeUI MCP，然后用通俗语言提出 UI 需求，TypeUI 会提供设计系统、提示词和布局变化建议。
Codex 使用 TypeUI Codex 插件，自动将 Codex 连接到 TypeUI MCP。 在 Codex 中安装 → |
Claude 让 Claude 在编写或重构 UI 时，能够使用精选的设计指导。 在 Claude 中安装 → |
Cursor 在 Cursor 构建屏幕、版块和变体时，使用 TypeUI Cursor 插件。 在 Cursor 中安装 → |
Grok 将托管的 TypeUI MCP 服务添加到 Grok。 查看 Grok 指南 → |
Z.ai 将托管的 TypeUI MCP 服务添加到 Z.ai ZCode。 查看 Z.ai 指南 → |
Hermes 为 Hermes Agent 安装 TypeUI MCP 插件。 查看 Hermes 指南 → |
OpenClaw 将托管的 TypeUI MCP 服务添加到 OpenClaw。 查看 OpenClaw 指南 → |
Eve 为 Eve Agent 添加 TypeUI 设计技能。 查看 Eve 指南 → |
Mistral 将托管的 TypeUI MCP 服务添加到 Mistral。 查看 Mistral 指南 → |
OpenCode 让 OpenCode 使用 TypeUI 设计系统和提示词。 在 OpenCode 中安装 → |
VS Code 将 VS Code 中的 GitHub Copilot 连接到 TypeUI MCP。 在 VS Code 中安装 → |
Antigravity 将 Antigravity 连接到 TypeUI MCP，以用于 UI 生成工作流。 查看 Antigravity 指南 → |
Windsurf 将 Windsurf Cascade 连接到 TypeUI MCP。 在 Windsurf 中安装 → |
JetBrains 将 JetBrains AI Assistant 或 Junie 连接到 TypeUI MCP。 在 JetBrains 中安装 → |
Zed 将托管的 TypeUI MCP 服务添加到 Zed。 查看 Zed 指南 → |
GitHub Copilot 将托管的 TypeUI MCP 服务添加到 GitHub Copilot。 查看 GitHub Copilot 指南 → |
Cline 将托管的 TypeUI MCP 服务添加到 Cline。 在 Cline 中安装 → |
Qwen 将托管的 TypeUI MCP 服务添加到 Qwen Code。 查看 Qwen 指南 → |
Amp 将托管的 TypeUI MCP 服务添加到 Amp。 查看 Amp 指南 → |
Goose 将托管的 TypeUI MCP 服务添加到 Goose。 查看 Goose 指南 → |
Lovable 将托管的 TypeUI MCP 服务添加到 Lovable。 查看 Lovable 指南 → |
Replit 将托管的 TypeUI MCP 服务添加到 Replit。 查看 Replit 指南 → |
v0 将托管的 TypeUI MCP 服务添加到 v0。 查看 v0 指南 → |
查看所有设计技能。提供 DESIGN.md 和 SKILL.md 两种格式。
UI 设计提示词
浏览 TypeUI Prompts 中所有主要的 UI 提示词类别。
Hero Sections 17 layouts |
Pricing Sections 20 layouts |
Feature Sections 16 layouts |
CTA Sections 11 layouts |
Content Sections 12 layouts |
Contact Sections 9 layouts |
Customer Logos 10 layouts |
Team Sections 8 layouts |
Social Proof 11 layouts |
FAQ Sections 8 layouts |
Testimonials 8 layouts |
Blog Sections 8 layouts |
Portfolio Sections 7 layouts |
Newsletter 4 layouts |
Event Schedule 4 layouts |
Footer Sections 7 layouts |
Login Pages 5 layouts |
Register Pages 5 layouts |
UI/UX 基础
使用我们的官方技能，该技能基于多年的设计领域经验、知识和数据，可帮助确保你生成的任何 UI 与 TypeUI 的设计技能和 UI 提示词结合时，都能遵循间距、排版、色彩对比等基本设计原则。
运行此命令即可在本地安装：
npx skills add https://github.com/bergside/typeui --skill typeui-fundamentals
CLI 命令
所有命令均通过 npx typeui.sh 运行。在任意命令后添加 --help，即可查看其选项。
| 命令 | 功能 | |
|---|---|---|
| 🪄 | generate | 通过交互式提示生成全新的 SKILL.md 或 DESIGN.md。 |
| ✏️ | update | 重新运行提示，并原地更新现有输出文件。 |
| 🎲 | randomize | 生成完全随机的本地设计系统。 |
| 📚 | list | 浏览可用的注册表规范，并自动拉取其中一项。 |
| ⬇️ | pull <slug> | 按 slug 拉取指定的注册表 Markdown 文件。 |
generate
运行交互式提示，生成全新的 SKILL.md（默认）或 DESIGN.md 文件。
npx typeui.sh generate
npx typeui.sh generate --format design
update
运行交互式提示，并原地更新现有输出文件。
npx typeui.sh update
randomize
生成完全随机的本地设计系统，适合快速创建初始规范。
npx typeui.sh randomize
npx typeui.sh randomize --format design
list
浏览 bergside/awesome-design-skills 中可用的注册表规范（附有 typeui.sh 预览链接），然后自动拉取其中一项。
npx typeui.sh list
npx typeui.sh list --format design
pull <slug>
按 slug 拉取注册表 Markdown 文件。SKILL.md 会写入提供方路径；DESIGN.md 会写入项目根目录。
npx typeui.sh pull <slug>
npx typeui.sh pull <slug> --format design
本地开发
如果要在本地使用，请运行以下命令：
npm install
npm run build
然后在终端中使用以下命令代替 npx：
node dist/cli.js --help
许可证
CLI 和公共注册表以 MIT 许可证开源。
专业版
购买专业版，即可使用增强版设计技能文件、布局 UI 提示词和私有 Discord 社区，同时支持我们的开源工作。
赞助商
衷心感谢支持我们开源工作的公司。
|
Skybridge |
想在此处展示你的徽标？成为赞助商。
评论
一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。