TypeUI

io.github.bergside由 GitHub 账号 bergside 发布v1.0.1更新于 Oct 25, 2026

Design systems, UI prompts, and layout variations for AI coding tools.

发布方自己的服务:type.com

已验证Streamable HTTP可网页运行开发者工具媒体与设计

概览

AI 生成的概览

托管的 TypeUI MCP 服务器,为 AI 编程工具提供设计系统、UI 提示词与布局变体指导,用于生成界面。

可以做什么
  • 在助手编写或重构界面时提供精选设计技能与设计系统指导
  • 提供常见页面区块的 UI 提示词与布局变体,如首屏、定价、功能、行动号召、评价与页脚
  • 给出间距、排版、色彩对比等 UI/UX 基础原则建议
  • 配套 CLI 可在本地生成、更新、随机化并拉取 SKILL.md 或 DESIGN.md 文件
适用场景
适合用 AI 编程工具搭建网站或应用界面、并希望生成的界面遵循统一设计系统或特定视觉风格而非通用默认样式的场景。
运行要求
通过 streamable HTTP 连接 mcp.typeui.sh 远程端点,需要 OAuth 认证。未声明环境变量或请求头。可选 CLI 通过 npx 运行,需要 Node.js。
安装前请注意
使用需通过 OAuth 登录第三方托管服务,与它共享的提示词和项目上下文会离开本机。README 还提到付费 Pro 版本提供增强技能文件与提示词,依赖前请先确认价格。

安装

在 SourceWeft 中

  1. 打开 控制台中的 TypeUI,将其添加到工作区。
  2. 连接 所需的 凭据。它们会被私密存储,绝不会在公开页面上展示。
  3. 为需要使用其工具的对话启用该服务。

Web executable,通过 Streamable HTTP。 远程服务在工作区中配置后即可从网页运行时运行。

交给智能体安装

把这段提示词粘贴到 Claude Code、Codex、Cursor 等智能体,或 SourceWeft 对话中。智能体会读取该服务器的安装指南,先向你展示发布者、端点和登录方式,经你同意后再把它添加到你的客户端。密钥不会写进任何命令。

阅读 https://sourceweft.com/mcp/io.github.bergside%2Ftypeui/install.md,并按其中说明把这个 MCP 服务器接入我的客户端。修改任何配置之前,先告诉我它的发布者、端点和登录方式,等我确认。不要把 API 密钥写进命令或我会提交的文件;问我密钥应从哪里获取。

查看智能体所依据的安装指南

其他 MCP 客户端

把它添加到你客户端的 mcpServers 配置中。 客户端会在首次连接时完成 OAuth 登录。

{
  "mcpServers": {
    "typeui": {
      "type": "http",
      "url": "https://mcp.typeui.sh/mcp"
    }
  }
}

README

TypeUI - Build better UI with AI

TypeUI is an AI-first platform where you can use design skills, UI prompts, and other resources to enhance AI capabilities to generate better user interfaces and design when building websites and applications. The resources from this repository will work with any AI provider, given they support markdown files or general prompting.

Getting started

Install TypeUI where you build. Connect your AI coding tool to TypeUI MCP, then ask for UI in plain language while TypeUI supplies design systems, prompts, and layout variation guidance.

[Codex logo]

Codex

Connect Codex to TypeUI MCP automatically with the TypeUI Codex plugin.

Install in Codex →
[Claude logo]

Claude

Give Claude access to curated design guidance while it writes or refactors UI.

Install in Claude →
[Cursor logo]

Cursor

Use the TypeUI Cursor plugin while Cursor builds screens, sections, and variations.

Install in Cursor →
[xAI logo]

Grok

Add the hosted TypeUI MCP server to Grok.

Open Grok guide →
[Z.ai logo]

Z.ai

Add the hosted TypeUI MCP server to Z.ai ZCode.

Open Z.ai guide →
[Hermes logo]

Hermes

Install the TypeUI MCP plugin for Hermes Agent.

Open Hermes guide →
[OpenClaw logo]

OpenClaw

Add the hosted TypeUI MCP server to OpenClaw.

Open OpenClaw guide →
[Eve logo]

Eve

Add TypeUI design skills to Eve agents.

Open Eve guide →
[Mistral logo]

Mistral

Add the hosted TypeUI MCP server to Mistral.

Open Mistral guide →
[OpenCode logo]

OpenCode

Give OpenCode access to TypeUI design systems and prompts.

Install in OpenCode →
[Visual Studio Code logo]

VS Code

Connect GitHub Copilot in VS Code to TypeUI MCP.

Install in VS Code →
[Antigravity logo]

Antigravity

Connect Antigravity to TypeUI MCP for UI generation workflows.

Open Antigravity guide →
[Windsurf logo]

Windsurf

Connect Windsurf Cascade to TypeUI MCP.

Install in Windsurf →
[Junie logo]

JetBrains

Connect JetBrains AI Assistant or Junie to TypeUI MCP.

Install in JetBrains →
[Zed logo]

Zed

Add the hosted TypeUI MCP server to Zed.

Open Zed guide →
[GitHub Copilot logo]

GitHub Copilot

Add the hosted TypeUI MCP server to GitHub Copilot.

Open GitHub Copilot guide →
[Cline logo]

Cline

Add the hosted TypeUI MCP server to Cline.

Install in Cline →
[Qwen logo]

Qwen

Add the hosted TypeUI MCP server to Qwen Code.

Open Qwen guide →
[Amp logo]

Amp

Add the hosted TypeUI MCP server to Amp.

Open Amp guide →
[Goose logo]

Goose

Add the hosted TypeUI MCP server to Goose.

Open Goose guide →
[Lovable logo]

Lovable

Add the hosted TypeUI MCP server to Lovable.

Open Lovable guide →
[Replit logo]

Replit

Add the hosted TypeUI MCP server to Replit.

Open Replit guide →
[v0 logo]

v0

Add the hosted TypeUI MCP server to v0.

Open v0 guide →

Design skills

Check out all design skills. Available in both DESIGN.md and SKILL.md formats.

UI design prompts

Browse all major UI prompt categories from TypeUI Prompts.

UI/UX Fundamentals

Use our official skill for UI/UX fundamentals based on years of experience, knowledge and data from the design world to make sure that any UI you generate together with the design skills and UI prompts from TypeUI will keep fundamental design principles in order, such as spacing, typography, color contrasts, and more.

Run this command to install it locally:

npx skills add https://github.com/bergside/typeui --skill typeui-fundamentals

CLI commands

All commands run via npx typeui.sh. Add --help to any command to see its options.

CommandWhat it does
🪄generateGenerate a fresh SKILL.md or DESIGN.md from interactive prompts.
✏️updateRe-run prompts and update existing output files in place.
🎲randomizeGenerate a fully randomized local design system.
📚listBrowse available registry specs and pull one automatically.
⬇️pull <slug>Pull a specific registry markdown file by slug.

generate

Run interactive prompts and generate a fresh SKILL.md (default) or DESIGN.md file.

bash
npx typeui.sh generatenpx typeui.sh generate --format design

update

Run interactive prompts and update existing output files in place.

bash
npx typeui.sh update

randomize

Generate a fully randomized local design system — useful for quickly seeding a starter spec.

bash
npx typeui.sh randomizenpx typeui.sh randomize --format design

list

Browse available registry specs from bergside/awesome-design-skills (with typeui.sh preview links), then pull one automatically.

bash
npx typeui.sh listnpx typeui.sh list --format design

pull <slug>

Pull a registry markdown file by slug. SKILL.md writes to provider paths; DESIGN.md writes to the project root.

bash
npx typeui.sh pull <slug>npx typeui.sh pull <slug> --format design

Local development

If you want to use this locally these are the commands you need to run:

bash
npm install
npm run build

Then use the following command instead of npx in your terminal:

node dist/cli.js --help

License

The CLI and public registry is open-source under the MIT License.

Pro version

Get access to enhanced design skill files, UI prompts for layouts and a private Discord community by getting the pro version and thus supporting our open-source work.

Sponsors

A huge thank you to the companies supporting our open-source work.

Want to see your logo here? Become a sponsor.

来源:README.md,提交 efc5f21

工具

0
该服务器需要登录,因此 SourceWeft 无法在没有账号的情况下读取其工具,也未收录。已连接账号所能看到的内容可能因账号及其权限而异。

版本历史

1
  1. v1.0.1最新Sep 16, 2026

评分

已满足适用检查项的 75%

该评分衡量此收录条目的完整程度,依据注册中心条目、端点与公开来源计算得出。它不是对服务器本身的评价,也不表示服务器安全或当前可用:可连通性是带日期的检查结果,评分也不包含安装量或用户评价。

  • 近 30 天内可连通必需25 分
  • 已声明认证方式必需10 分
  • 已列出工具15 分

    请让服务器在无凭据时响应 tools/list,或发布可在沙箱中无凭据启动的软件包。

  • 描述必需15 分
  • 图标10 分
  • 文档15 分
  • 许可证10 分

    请在仓库或注册中心条目中声明许可证。

其他 Type 集成