Typeui について
Typeuiは、AIコーディングツールでWebサイトやアプリを構築する人向けに、デザインシステム、UIプロンプト、レイアウト指針を提供します。CLIでは、Markdownやプロンプトに対応する各種AIプロバイダー向けに、デザインスキルやデザインファイルを生成、更新、ランダム生成、取得できます。
主な機能
- 01SKILL.mdとDESIGN.md形式のデザインスキル
- 02一般的なUIセクション用プロンプト
- 03UI/UXの基本指針
- 04CLIによる生成と更新
- 05レジストリの閲覧とファイル取得
活用シーン
- 01AI生成インターフェースへのデザインシステム適用
- 02ページセクションのレイアウト案の検討
- 03ローカルなデザイン指針の作成と更新
- 04レジストリ仕様のプロジェクトへの取り込み
MCP 対応
Typeuiは、AIコーディングツールが接続してデザインシステム、プロンプト、レイアウトのバリエーション指針を取得できるMCPサーバーを提供します。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 は、デザインスキル、UI プロンプト、その他のリソースを活用して AI の機能を強化し、ウェブサイトやアプリケーションの構築時により優れたユーザーインターフェースやデザインを生成できる、AI ファーストのプラットフォームです。このリポジトリのリソースは、Markdown ファイルまたは一般的なプロンプトに対応している AI プロバイダーであれば、どれでも利用できます。
はじめに
開発環境に TypeUI をインストールします。AI コーディングツールを TypeUI MCP に接続し、自然な言葉で UI を依頼すると、TypeUI がデザインシステム、プロンプト、レイアウトのバリエーションに関するガイダンスを提供します。
Codex TypeUI Codexプラグインを使って、CodexをTypeUI MCPに自動的に接続します。 Codexにインストール → |
Claude UIの作成やリファクタリング中に、Claudeが厳選されたデザインガイダンスを利用できるようにします。 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のエージェントにTypeUIのデザインスキルを追加します。 Eveガイドを開く → |
Mistral ホスト型のTypeUI MCP サーバーをMistralに追加します。 Mistralガイドを開く → |
OpenCode OpenCodeがTypeUIのデザインシステムとプロンプトを利用できるようにします。 OpenCodeにインストール → |
VS Code VS CodeのGitHub CopilotをTypeUI MCPに接続します。 VS Codeにインストール → |
Antigravity UI生成ワークフローで使えるように、AntigravityをTypeUI MCPに接続します。 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/UX の基本に関する公式スキルをご活用ください。これにより、TypeUI のデザインスキルや UI プロンプトと併せて生成するあらゆる 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> | スラッグを指定して、特定のレジストリ 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>
スラッグを指定して、レジストリの 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 ライセンスのもとでオープンソースとして公開されています。
Pro 版
Pro 版を購入すると、拡張されたデザインスキルファイル、レイアウト用 UI プロンプト、プライベート Discord コミュニティを利用でき、オープンソースの取り組みを支援できます。
スポンサー
オープンソースの取り組みを支援してくださる企業の皆さまに、心より感謝いたします。
|
Skybridge |
ここにロゴを掲載しませんか？ スポンサーになる。
コメント
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。