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 整合