官方 Minimal 模板示例：浅色落地页采用克制排版、留白布局与单一主要操作。
项目截图关于这个 Skill
选择一种风格，为编程助手提供设计基础、组件指导、交互状态与审查标准。本次核对的 GitHub 索引包含 67 种模板，每种配有面向 Agent 的 SKILL.md 与便于阅读的 DESIGN.md。
为什么推荐
先选视觉风格，预览目标文件，再用 TypeUI CLI 拉取所选模板。本页按一个 Skill 统一收录，图库采用注明来源的官方仓库示例。
适合用来做什么
- 为新界面确定统一的视觉方向。
- 在多个页面沿用色彩、排版、间距与组件状态。
- 实现前比较 Minimal、Bento、Glassmorphism 等风格。
选择模板并加载到项目
下方以 Minimal 为例，把 minimal 替换为需要的风格标识。通用输出可供兼容的 Agent 使用，需要时改选宿主对应的 provider。
| 命令 | 用途与使用时机 |
|---|---|
npx typeui.sh list | 浏览可选设计方向。 |
npx typeui.sh pull minimal --format skill --providers universal --dry-run | 只预览通用 Skill 的目标位置，不写入文件。 |
npx typeui.sh pull minimal --format skill --providers codex,cursor,claude-code,open-code | 为这些明确选定的 Agent 写入所选模板。 |
npx typeui.sh pull minimal --format design | 拉取便于阅读的配套 DESIGN.md 设计规范。 |
应用设计规则
加载所选模板
让助手读取已安装的指令，并保留项目既有框架与产品要求。
实现一致的界面
应用模板的设计变量、排版、间距与组件状态。
检查渲染结果
交付前复查响应式布局、焦点、对比度、长内容与空状态。
官方示例预览
Minimal、Bento、Glassmorphism 图片来自所核对提交的 registry-examples/，用于说明上游模板，并保留其原有示例品牌。
使用前需要了解
- 使用 TypeUI CLI 需要 Node.js、包运行器和网络；模型及编程助手费用由所用服务决定。
- 在目标项目内运行命令；非交互执行时显式指定输出格式和 Agent 类型，写入前先用 --dry-run 检查。
- 使用当前 CLI 的 Agent 标识，例如 codex、cursor、claude-code、open-code；实际支持和最终安装根目录以所选宿主为准。
- 设计规范需要结合自己的项目实现并检查实际渲染界面；展示截图为上游官方示例。
支持的 Agent
Claude CodeCodex CLICursorGitHub CopilotDeepSeek HarnessGemini CLIGrok BuildHermes AgentOpenCodePiKiroRovo DevQoderMistral VibeGoogle Antigravity
资料与来源
原始资料见下方链接；文中的上手建议由 SkillHey 编辑整理。