typeui について
typeuiは、TypeUIのプロジェクトコンテキストを使ってHermes AgentがUIを構築・改善するためのスキルです。プロジェクトのデザインスキル、ブランドキット、プロンプトライブラリ、レイアウト指針を適用し、利用可能な場合はTypeUI MCPツールを優先します。
主な機能
- 01プロジェクト固有のデザインスキル
- 02ブランド要素とスタイルトークンを含むブランドキット
- 03UIセクションや製品フロー向けのプロンプト
- 04レイアウト案のバリエーション指針
- 05TypeUI MCPツールの利用手順
活用シーン
- 01TypeUIプロジェクトを使ったランディングページの作成
- 02料金セクションの複数案の生成
- 03デザインスキルを使ったダッシュボードの再設計
- 04UI変更前にプロジェクトのデザインコンテキストを読み込む
MCP 対応
このプラグインはTypeUIリモートMCPサーバー（https://mcp.typeui.sh）をインストールします。Hermesエージェントはそのツールを利用でき、プラグインコマンドまたはtypeui_install_mcpでMCP設定を追加できます。
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/typeuiを入力して読み込まれたか確認します。
詳細
Hermes Agent 向け TypeUI
Hermes Agent に TypeUI のコンテキストを利用して、UI の構築、再設計、またはブラッシュアップを依頼する場合に、このスキルを使用してください。
TypeUI が提供するもの
- 一貫したビジュアルの方向性を保つためのプロジェクトデザインスキル。
- プロジェクト名、ロゴ、タイポグラフィ、ブランドカラーのトークンを含むブランドキット。
- 一般的なインターフェースのセクションや、製品全体のフローに対応する UI プロンプトライブラリ。
- 実装前により良い選択肢を生み出すためのレイアウトバリエーションのガイダンス。
TypeUI の使用方法
- セッションで利用可能な場合は、TypeUI MCP ツールを優先して使用してください。
- リクエストで指定されていない場合は、どの TypeUI プロジェクトまたはデザインスキルを使用するか、ユーザーに確認してください。
- 色、書体、余白、コンポーネントのトーン、ページ構成を決める前に、選択したプロジェクトのコンテキストを適用してください。
- ブランドキットの値は、ロゴ、プロジェクト名、タイポグラフィ、ブランドカラーのみを定めるブランドパラメーターとして扱ってください。
- UI のスタイル、コンポーネントの動作、視覚的な階層、余白、インタラクションパターンの基準として、デザインスキルを扱ってください。
MCP サーバー
このプラグインパッケージは、TypeUI リモート MCP サーバーをインストールします。
https://mcp.typeui.sh
現在の Hermes セッションで TypeUI ツールを利用できない場合は、プラグインコマンドで MCP サーバーをインストールしてください。
hermes typeui install-mcp
hermes mcp login typeui
Hermes エージェントは typeui_install_mcp を呼び出して、TypeUI MCP サーバーのエントリーを書き込むこともできます。
プロンプトの例
- 自分の TypeUI プロジェクトを使って、ランディングページを作成してください。
- TypeUI で料金セクションのバリエーションを 3 つ生成してください。
- 自分の TypeUI デザインスキルを使って、このダッシュボードを再設計してください。
- UI を変更する前に、このプロジェクトの TypeUI コンテキストを取得してください。
コメント
Markdown 対応