デザインシステム、UIプロンプト、レイアウトのバリエーションに関するガイダンスをAIコーディングツールに提供し、ユーザーインターフェースの生成を強化します。
別名 bergside/typeui
- スター
- 2,251
- ツール
- —
- ダウンロード数（30日間）
- —
- 最新バージョン
- 1.0.1
- 最終コミット
- 2026年10月22日
- ライセンス
- —
TypeUI MCPとは
TypeUIはMCPサーバーです。 デザインシステム、UIプロンプト、レイアウトのバリエーションに関するガイダンスをAIコーディングツールに提供し、ユーザーインターフェースの生成を強化します。.
プロジェクトのREADMEから生成された概要
TypeUI MCP server について
TypeUIは、AIコーディングツールが高品質なユーザーインターフェースを生成できるよう、デザインシステム、UIプロンプト、およびレイアウトのバリエーションに関するガイダンスを提供します。これは、AIが生成するコードの視覚的な品質を向上させたいウェブサイトやアプリケーションの開発者向けに設計されています。本プラットフォームは、Markdownファイルまたは一般的なプロンプティングをサポートするあらゆるAIプロバイダーで動作します。
ユーザーは、TypeUI MCP serverを幅広い環境に接続できます。これには、Cursor、GitHub Copilotを搭載したVS Code、JetBrains AI Assistant、Junieなどのローカル開発ツールが含まれます。また、Claude、Grok、Mistral、Zed、Replitなどのホストされた環境やエージェントもサポートしています。これらのリソースを統合することで、開発者は自然言語でUIコンポーネントを要求でき、サーバーが必要なデザインスキルと構造的なガイダンスを供給します。
できること
- 1高品質なUIコンポーネントの生成特定のデザインシステムやレイアウトガイダンスを使用して、ユーザーインターフェースを構築するようAIコーディングツールに指示します。
- 2既存のユーザーインターフェースのリファクタリング厳選されたデザインガイダンスをClaudeに提供することで、既存のUIコードの改善や書き換えを行います。
- 3複雑なアプリケーション画面の構築Cursorプラグインを使用して、フルスクリーンやさまざまなレイアウトセクションの作成を支援します。
- 4エージェントによるデザインワークフローの強化自律型エージェントに特化したデザインスキルを追加し、出力の品質を向上させます。
プロジェクトの README から作成されています。すべてのユースケースは、その引用と照らし合わせて確認されています。
TypeUI MCPのインストール方法
フォーマット検証日 2026年11月10日Cursor に追加Gooseに追加Claude CodeにTypeUI MCPをインストール
$ claude mcp add --transport http typeui https://mcp.typeui.sh/mcpCursorにTypeUI MCPをインストール
~/.cursor/mcp.json
{
"mcpServers": {
"typeui": {
"url": "https://mcp.typeui.sh/mcp"
}
}
}VS CodeにTypeUI MCPをインストール
.vscode/mcp.json
{
"servers": {
"typeui": {
"type": "http",
"url": "https://mcp.typeui.sh/mcp"
}
}
}VS Code CLIにTypeUI MCPをインストール
$ code --add-mcp '{"name":"typeui","type":"http","url":"https://mcp.typeui.sh/mcp"}'CodexにTypeUI MCPをインストール
$ codex mcp add typeui --url https://mcp.typeui.sh/mcpCodex config.tomlにTypeUI MCPをインストール
~/.codex/config.toml
[mcp_servers.typeui] url = "https://mcp.typeui.sh/mcp"
Gemini CLIにTypeUI MCPをインストール
$ gemini mcp add -s user --transport http typeui https://mcp.typeui.sh/mcpGemini settings.jsonにTypeUI MCPをインストール
~/.gemini/settings.json
{
"mcpServers": {
"typeui": {
"url": "https://mcp.typeui.sh/mcp",
"type": "http"
}
}
}自動チェック
実行日 2026年11月12日完全なレポート →自動チェックに合格しました。これはセキュリティ監査ではありません。コードを読み、サーバーに必要最小限のアクセス権を与えてください。 チェックの仕組み · 点数を上げるための改善点
- ソースリポジトリがリンクされており、アクセス可能合格
- オープンソースライセンス (OSI)No license検出事項
- 過去1年以内にコミットまたはリリースあり合格
- パッケージ名が有名なパッケージに酷似していない未チェック
- リモートエンドポイントがHTTPSを使用合格
- 破壊的なツールがラベル付けされている未チェック
- モデルへの隠れた指示がない合格
- パッケージおよびその依存関係に重大な勧告なし未チェック
README
GitHubで見る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.
Design skills
Check out all design skills. Available in both DESIGN.md and SKILL.md formats.
TypeUI MCPのよくある質問
TypeUI MCPをClaude Codeに追加するには
ターミナルでclaude mcp add --transport http typeui https://mcp.typeui.sh/mcpを実行します。すべてのプロジェクトで利用するには--scope userを追加します。
TypeUI MCPをCursorに追加するには
~/.cursor/mcp.jsonを開き、上記のインストールセクションに示すCursor設定を使ってmcpServersの下にサーバーを追加します。
TypeUIをAIコーディングツールでどのように使用しますか？
AIコーディングツールをTypeUI MCPに接続してください。サーバーがデザインシステムやプロンプトを供給するため、自然言語でUIのリクエストが可能になります。
どのAIプロバイダーがTypeUIと互換性がありますか？
Markdownファイルまたは一般的なプロンプティングをサポートするすべてのAIプロバイダーで利用可能です。
デザインスキルはどのような形式で利用できますか？
デザインスキルはDESIGN.mdとSKILL.mdの両方の形式で利用可能です。