mcpField
D
design-html

design-html

github.com/podoデザイン・UI30176 回インストール4 日前に更新
リポジトリ

design-html について

design-html は、承認済みのモックアップ、計画、概要から本番向けの HTML と CSS を作る gstack のスキルです。検出したフレームワークに合わせてコードを生成し、ライブプレビューと検証用スクリーンショットで調整して、デザイントークンを抽出します。

主な機能

  1. 01デザインや概要から HTML/CSS を生成
  2. 02素の HTML または検出したフレームワークに対応
  3. 03プレビューとスクリーンショットで調整
  4. 04Pretext によるテキストレイアウト計算
  5. 05デザイントークンの抽出

活用シーン

  1. 01承認済みモックアップの Web ページ実装
  2. 02計画や概要からの HTML/CSS 構築
  3. 03以前に生成したデザインの改良

インストール

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

$npx skills add https://github.com/podo/design-agent-skills --skill design-html

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

同梱ファイルstub.yaml

詳細

design-html

カタログのスタブ — garrytan/gstack の一部です（design-html）

判断フロー

  1. スキル全体がすでにインストールされていますか？

    • f=~/.claude/skills/gstack/design-html/SKILL.md; [ -e "$f" ] && ! grep -qs "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → スキルを呼び出して続行します
    • pointer → ステップ 2 に進みます

  2. インストール（skills CLI ではこのスキルをインストールできません）：

    このスキルは gstack の一部で、gstack 共通のツール群（~/.claude/skills/gstack/bin/…）を呼び出すため、単独のスキルではなく gstack 自体をインストールしてください。./setup は Bun を必要とし、バイナリをビルドして Chromium をダウンロードし、Claude の設定に Stop フックを登録します。実行前にユーザーに確認してください。

    git clone --single-branch --depth=1 https://github.com/garrytan/gstack.git ~/.claude/skills/gstack
cd ~/.claude/skills/gstack && ./setup

ご注意

  • 必要なもの： Bun、Claude Code
  • ライセンス： MIT
  • 大容量のダウンロード（約 185 MB）： skills CLI は 300 s 後にクローンを中断します。タイムアウトした場合は、SKILLS_CLONE_TIMEOUT_MS=900000 を指定して再試行してください。

インストール後の呼び出し

  • スキル名：design-html（上流で使われる表現：「build the design」、「code the mockup」、「make design real」）
  • トリガーフレーズ：「design html」、「design to HTML」、「implement design」、「mockup to code」
  • gstack の /design-shotgun で承認済みのモックアップを作成した後に使うのが最適です。計画や自由形式の概要からでも利用できます
  • より軽量で機能が制限された代替手段（gstack の bin/ ヘルパーを使わず、手順のみ）：npx skills add garrytan/gstack --full-depth --skill design-html

機能

Garry Tan の gstack の一部で、承認済みのデザインを、完成度の高い本番品質の HTML/CSS に仕上げます。エンジンには Pretext を採用しているため、テキストレイアウトは近似ではなく計算によって決まり、サイズ変更時にはテキストが再配置されます。入力（/design-shotgun で作成した承認済みのモックアップ、計画、自由形式の概要、または発展させるための以前の出力）を検出し、デザインを分析して、HTML（バニラまたは検出されたフレームワーク向け）を生成します。検証用スクリーンショットを使ったライブプレビューの反復調整を実行し、最後にデザイントークンを抽出します。Figma はドキュメントに記載された入力形式ではなく、このスキルは gstack 共通のツールとワークフローに依存します。

使用しない場合

  • Figma ファイルまたは仕様が信頼できる唯一の情報源である → figma-official-skills を使います
  • ビジュアル言語とデザインシステムをまだ定義している段階である → design-consultation を使います
  • 構築前に、計画または稼働中の UI のデザインレビューを行いたい → plan-design-review または design-review-garrytan を使います

コメント

Markdown 対応