draw-ui – エージェントのためのAI支援UI設計スキル

概要

draw-uiは、AIエージェントが製品ページのテキスト説明や既存のスクリーンショットを完全なUIデザインに変換し、オプションで実行可能なHTML/CSS（またはWeChatミニプログラム）に変換できるようにするスキル（プラグイン）です。このスキルはワークフロー全体を処理します：

1. ページの目的、コア機能、および不変領域（固定サイドバーなど）を明確にします。
2. 必要に応じて参照画像を取り込み、スタイル、タイポグラフィ、間隔などを調整します。
3. 選択した視覚的方向に沿ったビジュアルモックアップ（PNG/JPEG）を生成します。
4. モックアップをコード（レイアウト、コンポーネント、テキスト）とアセット（ロゴ、イラスト、写真）に分割します。
5. デザインモックアップおよびすぐに使える実装（HTML/CSSまたはミニプログラム用のWXML/WXSS）を出力します。

このスキルは、画像生成機能を持つLLM駆動型エージェント（ChatGPTスタイルのボットなど）によって呼び出されることを想定しています。これはフロントエンドフレームワークを置き換えるものではありません。開発者が既存のReact/Vue/TSプロジェクトに組み込んだり、静的ページとして提供したりできるデザイン成果物を作成するだけです。

---

使用方法

2つのエントリポイントがあります：

1. エージェントから直接呼び出す

請安装這個 Skill：https://github.com/oil-oil/draw-ui

スキルがインストールされた後、エージェントに次のように指示できます：

[$draw-ui] 帮我设计一个创作者数据分析页面，包含 30 天趋势、热门内容和收入数据。

または、既存のUIを再構築する場合：

[$draw-ui] 把这张设计稿还原成 HTML/CSS，侧边栏保持不变，先告诉我哪些部分需要单独准备图片素材。

このスキルは、情報が曖昧な場合にのみ、3つの明確化の質問（ページの目的、参照スクリーンショット、不変領域）を行います。

2. コマンドラインインストール

npx skills add oil-oil/draw-ui   # スキルの登録

その後、ターミナルや基盤となるLLMサービスと通信するスクリプトからスキルを呼び出すことができます。

---

主な機能

入力	draw-uiの動作	出力
テキスト説明のみ	ゼロからフルページのビジュアルコンセプトを生成し、レイアウト、カラーパレット、コンポーネント階層を決定します。	1つ以上のデザインモックアップ画像 + 短い実装ガイド。
スクリーンショット + 不変領域	固定部分（ナビゲーションバーなど）を抽出し、それらの領域を維持しながら残りを再設計します。	更新されたモックアップ + 変更されていないセクションを再利用するHTML/CSS（またはミニプログラム）。
参照スタイル画像	新しいビジネスケースに合わせてコンテンツを再配置しながら、参照画像のフォント選択、間隔、視覚言語をコピーします。	スタイルが一致したモックアップ + 参照の視覚文法を反映したコード。
既存のフロントエンドプロジェクト	プロジェクトのスタック（React, Vue, TSなど）を使用して、生成されたデザインに適合するコンポーネントを出力します。	プロジェクトに組み込めるコンポーネントファイル。

このスキルは、デザイン成果物（画像）と実行可能な成果物（HTML/CSS, WXML/WXSS）を区別します。完全にレスポンシブな実装やアクセシビリティへの準拠を保証するものではありません。これらは開発者が検証する必要があります。

---

技術的な詳細

• 依存関係 – Python 3.10+、画像処理用の Pillow、ZenMuxアダプター用のオプションの google-genai。Node 22.18+ は npx skills add ラッパーにのみ必要です。
• サポートされているプラットフォーム – macOS（テスト済み）、Windows（PowerShellエントリポイント、完全な検証は未実施）、Linux（Bash経由）。コアロジックはOSに依存しません。スクリプトラッパーのみが異なります。
• モデル統合 – デフォルトでは、ホストエージェントの組み込み画像生成モデルを使用します。スキルの設定（references/generation.mdを参照）を通じてモデル/サービスをオーバーライドできます。
• ワークフロー –
  1. プロンプトオーケストレーション – スキルは、明確化された要件と参照画像を含むプロンプトを構築します。
  2. 画像生成 – 選択した画像モデルを呼び出してUIモックアップ（単一の長いページまたはセグメント化されたブロック）を作成します。
  3. 測定と抽出 – Pillowを使用してコンポーネントのバウンディングボックスを測定し、クリーンなアセットを抽出し、色/間隔の値を記録します。
  4. コード合成 – 測定されたレイアウトに基づいてHTML/CSS（またはWXML/WXSS）を組み立て、手動作成が必要なアセットのプレースホルダーを挿入します。
• テスト – 単体テスト (python -m unittest discover) およびシェルテスト (bash tests/test_ask_draw.sh) は、リクエストのパッケージ化、出力のサニタイズ、ブロックの組み立て、アセットの透明度、領域の測定をカバーしています。
• APIキーの取り扱い – 外部画像サービスを使用する場合、ローカル設定UIがキーをシステム資格情報ストアに保存します。キーがLLMに送信されることはありません。

---

適さないケース

• ポスター、イラスト、ストーリーボードなどの純粋なグラフィック作業（draw-uiは製品指向のUIページに焦点を当てています）。
• 完全なインタラクションロジック、レスポンシブなブレークポイント、またはすぐに使えるアクセシビリティ準拠が必要なプロジェクト。
• 画像生成機能がない環境（スキルは制限を報告するだけです）。

---

ライセンス

MIT – このスキルは自由に利用、変更、再配布できます。

---

要約: draw-uiは、AI駆動でエージェントフレンドリーなプラグインであり、ページの説明やスクリーンショットをビジュアルデザインとスターターHTML/CSS（またはミニプログラム）の実装に変換します。スタイル参照、不変領域、アセット抽出を処理し、最終的なコーディングとQAは開発者に委ねます。