to-wireframe

ワイヤーフレーム化

画面の構造、コンポーネント、表示される内容を記述した、型付きワイヤーフレームを作成します。密度とマークアップの正式な参照例として、references/wireframe.example.svg を使用してください。

必須の呼び出し形式

ユーザーは呼び出しごとに形式を指定する必要があります：format=svg または format=ascii。指定がない場合は、希望する形式を尋ねてください。デフォルトを選んではいけません。

入力ソースは1つだけ受け付けます：

• image=<path> または添付画像：既存の画面構造を抽出します；
• brief=<descrição da tela>：受け取った概要、提案、または仕様に基づいて画面の構成を作成します。

画像の場合、output=<path> は任意です。brief の場合は必須です。入力が画像で output が指定されていない場合は、画像と同じ場所に保存します：

image=mocks/dashboard.png format=svg    → mocks/dashboard.wireframe.svg
image=mocks/dashboard.png format=ascii  → mocks/dashboard.wireframe.txt

呼び出し例：

Use $to-wireframe: format=svg image=mocks/dashboard.png
Use $to-wireframe: format=ascii image=mocks/dashboard.png
Use $to-wireframe: format=svg brief="Dashboard de projetos com sidebar, KPIs e atividade" output=mocks/12-wire-a.svg

生成されたパスを表示してください。必要に応じて SVG を開いてください。ワイヤーフレームを納品した時点で、このスキルは終了します：HTML/CSS、アセット、最終画像、段階的な計画、承認ゲートは実装しないでください。

ワイヤーフレームが表すもの

ワイヤーフレームは構造を示す設計図であり、ピクセル単位で見た目を再現するものではありません。独自のスタイルを持つ各サーフェスまたはコンポーネントには、nav、hero、media、card、card2、card3、form、rail、quote、section のいずれかのラベルを付けます。

• 同じ見た目には同じ ID を使用し、見た目に違いがある場合は次の ID を使用します（card、card2、card3）。
• リストカード、浮動ツールチップ、コントロールドック、グラフパネルなど、画面内に独自のサーフェスがある場合は、領域を入れ子にします。
• 描画するすべてのボックスにラベルが必要です。コンポーネントを親の中のラベルなしテキストにしてはいけません。

型付きタグ

表示されるすべてのテキストとコントロールをタグに含めてください。タグなしの内容を残してはいけません。次の限定語彙を使用してください：

タグ	用途
[h1:]、[h2:]、[h3:]	見出し
[t1:]、[t2:]、[t3:]	本文、メタ情報、マイクロテキスト
[btn:]、[btn2:]、[btn3:]	スタイルの異なるボタン
[lnk:]	非アクティブなナビゲーションリンク
[in:]	プレースホルダーまたは入力テキスト
[ico:]	アイコン
[img:]	画像、ラスター画像、または3D画像
[av:]	アバター
[chart:]	グラフ

同じタグ ID は同じスタイルを表します。見た目が異なるボタンには、異なる ID を使用してください。アクティブなナビゲーションは [btn:]、非アクティブなナビゲーションは [lnk:] です。アイコン付きボタンは [btn: [ico:plus] Add project] のように記述できます。視覚的な1行につきタグを1つ記述してください。3行の見出しは、[h1:] タグを3つ使って表します。

画像入力では、読み取れる重要なテキストを使用してください。確実に読み取れない場合は、内容をでっち上げず、適切なタグに ... を入れてください。brief 入力では、brief に記載された内容、または画面に宣言された機能を説明するために必要な内容のみを使用してください。

手順

1. 画像または brief を読み、領域、状態、型付きコンテンツを定義します。
2. 指定された形式で、1回の作業で設計図を描画します。
3. 1回だけ見直しを行います：すべてのサーフェスにラベルがあること、すべてのテキストがタグに含まれていること、内部コンポーネントが入れ子になっていること、アクティブ／非アクティブなナビゲーションが正しく型付けされていることを確認します。
4. 指定された output、または画像用のデフォルトパスに保存します。

ピクセルの計測、OCR、クロップ、スポイトの使用、最終的な見た目のシミュレーションは行わないでください。画像入力の場合は位置とサイズを推定し、brief 入力の場合は説明された階層を優先してください。

SVG のレンダリング

format=svg の場合：

• <?xml version="1.0" encoding="UTF-8"?> から始めます。
• 画像のキャンバスに比例した viewBox を使用します。比率が指定されていない brief の場合は、0 0 1440 810 を使用します。
• グレーで、シンプルなストロークとラベルを使い、rect と text のみを描画します。
• プロダクトカラー、高級感のあるタイポグラフィ、影、グラデーション、曲線、アイコン、模擬グラフは使用しないでください。
• XML が無効にならないよう、ラベルには基本的な英字と数字を使用してください。

ASCII レンダリング

format=ascii の場合：

• どのターミナルでも動作するよう、境界には +、-、| のみを使用します。
• 各領域のラベルをボックスの最初の行に配置し、型付きタグをその中に収めます。
• 入れ子になった領域は入れ子のボックスで表し、列やセクションの間に視覚的な余白を設けます。
• 色、影、グラデーション、描画したアイコン、模擬グラフ、ピクセル単位の精密な配置は使用しません。

+------------------------------------------------------------------------+
| nav                                                                    |
| [ico:logo] [t1: Orbit]          [lnk: Explore] [btn: [av:] Profile]  |
+------------------------------------------------------------------------+
| hero                                                                   |
| [h1: Build your next project]                                          |
| [t2: Keep the team aligned from one place]          [btn2: Create]    |
+-----------------------------------+  +---------------------------------+
| card                              |  | card2                           |
| [h2: 24] [t2: Open projects]      |  | [h3: Activity]                  |
| [chart: sparkline]                |  | +-----------------------------+ |
|                                   |  | | card3                       | |
|                                   |  | | [av:] [t1: New comment]    | |
+-----------------------------------+  | +-----------------------------+ |
                                       +---------------------------------+