スペックモックアップ
このスキルは描画方法を指示します。lw-spec-write はスペックの配置場所とページのレンダリング方法を指示します。
プロダクトの事実
アダプタフォルダは設定から取得します。まずそれを読み込みます：
ah config get harness.adapterDir
次に <adapterDir>/spec-mockup/ を読み込みます。プロジェクトがこれを所有します。以下の項目を命名します：
| 項目 | 例 |
|---|---|
| 各アプリのトークンファイル（順序あり） | apps/console/src/styles/tokens.css |
| ライト/ダーク値のセレクタ | :root, .dark |
| lucide アイコンフォルダ | node_modules/lucide-react/dist/esm/icons |
| サイドバーを持つ各アプリのナビゲーションとその取得元 | コンソールのルートテーブル |
| 実際のコピーのソース | アプリの i18n カタログ |
アダプタがない場合は、描画前にユーザーにトークンファイルを尋ねてください。色を創作してはいけません。
フォーマット
生成されたSVGは、このファイルの隣にある1つのライブラリ boards.py で描画されます。各スペックには1つのスクリプト docs/specs/assets/<date>-<topic>-boards.py があります。ライブラリをインポートし、docs/specs/assets/<date>-<topic>/ に書き込みます。生成されたSVGを手動で編集してはいけません。スクリプトを変更して再度実行してください。ライブラリに不足している部分がある場合は、スクリプトの隣にあるプロジェクト独自のヘルパーモジュールに追加し、次のスペックでも利用できるようにします。
example.py は動作するボードの例です。デスクトップとモバイルのページ、ピンと凡例が含まれています。次のコマンドで実行して形状を確認できます：
python3 .claude/skills/lw-spec-mockup/example.py <scratchpad>/mock --render
スペックスクリプトは次のように始まります：
import sys
from pathlib import Path
ROOT = Path(__file__).resolve().parents[3]
sys.path.insert(0, str(ROOT / ".claude/skills/lw-spec-mockup"))
from boards import GUTTER, Board, render, tokens
t = tokens("apps/console/src/styles/tokens.css", "light")
b = Board(1440 + 2 * GUTTER, 1200, icons="node_modules/lucide-react/dist/esm/icons")
b.title("Dashboard: the empty state")
f = b.sidebar_app(
GUTTER,
160,
t["bg"],
t["sidebar"],
t["ink"],
t["muted"],
t["active"],
["Dashboard"],
"Dashboard",
"Console",
)
b.pin(f.x + f.left + 24, f.top + 30, 1)
b.legend(
GUTTER, 1100, [(1, "The empty state", "No widget until the product names one.", "R1")], 1440
)
b.save("docs/specs/assets/<date>-<topic>/desktop-empty.svg")
| 呼び出し | 描画内容 |
|---|---|
tokens(files, theme, base=, dark=, overlay=) | トークンファイルの解決された --* 値。t["accent"]。欠落しているトークンはエラーを発生させます。overlay は提案されたリスタイルです |
phone(x, y, bg, ink, surface, url), desktop(x, y, bg, url) | スマートフォン（web または app）、ブラウザウィンドウ |
sidebar_app(x, y, ...) | コンソールなどの左サイドバー付きアプリ。nav をアプリのルートテーブルからコピーします |
screenshot(path, x, y), crop(path, ...) | 出荷済み画面の実際のキャプチャ、またはその領域（"Today" 列用） |
icon(name, x, y, size, color) | ボードの icons フォルダからの lucide グリフ |
image(path, ...), embed_font(family, path) | リポジトリからの実際のアートとブランドフォント |
pin, legend, caption, column_head, row_label, title | ノート。凡例のノートが2行を超えるとエラーが発生します |
render(svg, png, w, h) | 以下のチェック用のヘッドレスChromeスクリーンショット |
忠実度
- 色はトークン であり、
tokens()を通して取得します。スペックスクリプト内の16進数値は、トークンファイルに含まれていないアートを除き、誤りです。 - コピーは実際のもの です。アプリのカタログに存在する場合はその文字列を使用します。新しい文字列は短く、ラベル、値、空状態、エラー、または1行のヒントに限ります。
- データは現実的 です。もっともらしい値を使用し、発生しうる場合は長い値も使用します。
キャンバス
| サーフェス | フレーム |
|---|---|
| スマートフォン | 390 x 844、余白48px |
| デスクトップ | 1440 x 900 |
| ボード | フレームと同じ幅、行が必要とする高さ |
スペックが描画するもの
- Today、次にTarget。 "Today" は出荷済み画面の実際のスクリーンショット（
today-*.png）です。"Target" はSVGです。Markdownテーブルで並べて表示します。 - 該当する状態ごとに1行：デフォルト、空、ローディング、エラー、長いテキスト、最小および最大のコンテンツ。
- ピンと凡例。 変更される各要素に番号付きピン。フレームの下に番号付き凡例：太字の見出し、最大2行、およびそれが対応するスペックID。
- スペック内のコンポーネントリスト（ボードの横）：各要素、再利用するコンポーネント、および各新規コンポーネントとその理由。
名前
docs/specs/assets/<YYYY-MM-DD>-<topic>-boards.py
docs/specs/assets/<YYYY-MM-DD>-<topic>/<surface>-<state>.svg
docs/specs/assets/<YYYY-MM-DD>-<topic>/today-<surface>-<state>.png
スペックは assets/ 内のすべてのファイルのベース名を指定します。
コミット前にすべてのボードを確認する
ボードの欠陥はソースでは見えず、画像ではっきりとわかります。各ボードをレンダリングし、ReadツールでPNGを読み取ってください。PNGはスクラッチパッドに書き込み、docs/ には書き込まないでください。
- テキストがフレームからはみ出しておらず、ピンが値を覆っていない。
- 描画されたUI内の各文字列は、ラベル、値、空状態、エラー、またはヒントである。
- プレースホルダーアートや目視で選んだ色がない。
- スペックが触れる各状態とサーフェスにフレームがある。
- TodayとTargetが並んでいる。
render には google-chrome または chromium が PATH 上にある必要があります。
ビルド後
ビルドは承認されたボードと一致する必要があります。ビルドされた画面をキャプチャし、ボードの横に配置します。差異はビルドの欠陥であり、ボードを再描画する理由にはなりません。