mcpField
P
prototype

prototype

github.com/ryanthedevデザイン・UI32552 回インストール17 週間前に更新
リポジトリ

prototype について

デザインスキルとして、デザイントークンとページ仕様から単体で開ける HTML モックを作成し、実装前の構造やスタイルの確認に役立ちます。スタイル適用とワイヤーフレームに対応し、browser MCP があれば描画とスクリーンショットも行います。

主な機能

  1. 01トークン適用済みモック
  2. 02グレースケールのワイヤーフレーム
  3. 03単一ファイルの HTML 出力
  4. 04動きの抑制とタッチ領域の規則
  5. 05ブラウザー描画とスクリーンショット

活用シーン

  1. 01JOURNEY.md のページ仕様をプレビュー
  2. 02本番コード作成前のデザイントークン確認
  3. 03デザインレビュー用のスクリーンショット作成

MCP 対応

browser MCP が接続されている場合、ローカル HTML ファイルを開いてスクリーンショットを取得します。利用できない場合も HTML ファイルは生成します。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/ryanthedev/design-for-ai --skill prototype

インストール後、Claude Code で/prototypeを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

examples/
sample-DESIGN.md
sample-mock.html
references/
mock-recipe.md

詳細

Prototype は、デザイントークンとページ仕様から、ビルド手順なしであらゆるブラウザーで開ける、単独で完結した .html ファイルのプレビュー可能な成果物を作成します。

該当するケース

  • 「どんな見た目か見せて」／「モックを作って」／「プロトタイプを作って」／「ワイヤーフレームをレンダリングして」
  • JOURNEY.md のページ仕様からページを視覚化する
  • 本番コードを書く前にトークンの適用状態を確認する
  • design-review-agent がレビューするためのスクリーンショットを用意する

手順

1. 入力を収集する

次の3つの入力を集めます。

入力参照元ない場合
トークンプロジェクトルートの DESIGN.md（palette.mjs の CSS カスタムプロパティブロック）ワイヤーフレームモード：グレースケールのデフォルト値
ページ仕様JOURNEY.md のページ仕様セクション、またはユーザーの説明汎用的なページの骨組みを作成
忠実度ユーザーの依頼。「wireframe」＝構造のみ、「styled」＝すべてのトークンを適用DESIGN.md がある場合は styled、ない場合は wireframe をデフォルトにする

DESIGN.md がない場合は、その旨を伝えてワイヤーフレームモードで進め、コメント `` を付けた .html を出力します。

2. モックを作成する

references/mock-recipe.md を読み込みます。選択した忠実度に応じてレシピに従います。

  • ワイヤーフレーム： HTML 構造と、デフォルトでグレーを設定する CSS カスタムプロパティ。意味的なセクション分け（<header>、<main>、<nav>、<section>、<aside>、<footer>）。プレースホルダーラベル（[Hero headline]、[Body copy]、[CTA]）。色や画像は使用しません。
  • スタイル適用： DESIGN.md のすべてのトークンを CSS カスタムプロパティとして :root に適用します。DESIGN.md に記載されている文字サイズのスケール、色、余白、サーフェスの制約を守ります。DESIGN.md に Web フォントの指定がある場合は、<link> を含めます。

どちらの忠実度でも、ファイルは1つにまとめ、すべての CSS を <style> 内に記述します。prefers-reduced-motion メディアクエリでトランジションを抑制し、モバイル画面ではタッチターゲットを44×44px以上にし、セマンティック HTML を使用します。

ファイルは <project-root>/mocks/<page-name>.html に書き込みます（必要に応じて mocks/ を作成）。プロジェクトルートが明確でない場合は ./mock.html に書き込みます。

3. レンダリングとスクリーンショット（柔軟なプロトコル）

browser MCP が接続されている場合：

  1. browser_connect(mode: "launch", channel: "chrome", headless: true) を実行します。または、既存の接続を再利用します。
  2. browser_navigate(url: "file://<absolute-path-to-html>", allow_internal: true) を実行します。ローカルファイルのレンダリングには allow_internal が必要です。
  3. browser_screenshot() を実行します。{path}（PNG）が返されます。
  4. Haiku サブエージェントを起動して PNG を読み取り、テキストで要約させます（ペイロードの取り扱いに注意し、大きな成果物をメインコンテキストに含めないでください）。
  5. .html のパス、スクリーンショットのパス、Haiku の要約を返します。

browser MCP が接続されていない場合（柔軟なフォールバック）：

.html のパスを出力し、「ブラウザーで <path> を開いて表示してください。browser MCP が接続されていないため、スクリーンショットは撮影されていません。」と伝えます。エラーにはしません。モックは引き続き成果物として納品します。

検出：browser_connect が失敗した場合は、フォールバックに切り替えます。MCP の利用可能性によって処理を中断しないでください。

4. 引き継ぎ

レンダリング結果をレビューするには /design-for-ai:mock（design-review-agent を起動）を、ゲート付きの完全なレビューを行うには build を実行するよう提案します。

参考資料

参考ファイル読み込むタイミング
references/mock-recipe.mdあらゆるモックの作成時。HTML/CSS のレシピ、トークンのマッピング、サーフェス制約の表、忠実度の仕様、prefers-reduced-motion のルールを確認します

コメント

Markdown 対応