メニュー
UI/デザイン/画面レイアウト/コンポーネントを設計・提案するときに使用。文章で説明する代わりに、自己完結HTMLモックを書いてPlaywright CLIでスクショ→画像でユーザーに見せる。「デザイン作って」「画面イメージ見せて」「UI考えて」「レイアウト提案」「mockして」、または既存UIの改修案を提示する時に発火。実装前の合意形成フェーズで使う。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | design-mock |
| description | UI/デザイン/画面レイアウト/コンポーネントを設計・提案するときに使用。文章で説明する代わりに、自己完結HTMLモックを書いてPlaywright CLIでスクショ→画像でユーザーに見せる。「デザイン作って」「画面イメージ見せて」「UI考えて」「レイアウト提案」「mockして」、または既存UIの改修案を提示する時に発火。実装前の合意形成フェーズで使う。 |
UIの設計・提案は文章で説明しない。必ずHTMLモックを作って画像で見せる。複数状態(before/after, 各ステート)を1枚に並べると伝わる。
スクショは Playwright CLI (npx playwright screenshot) を使う。MCP サーバ・HTTP配信は不要(file:// を直接渡せる ※後述)。
/tmp/<name>.html — 中間ファイル): CSSはインラインで自前。CDN(bootstrap等)に依存しない(スクショ環境で読めない/遅い)。対象フレームワークの見た目を近似するだけでよい。複数ステートはラベル付きで縦に並べ、矢印で遷移を示す。file:// を直接渡す。PNGは永続dirに出力):
mkdir -p ~/Desktop/design-mocks
npx --yes playwright@latest screenshot --full-page --viewport-size=860,1200 \
"file:///tmp/<name>.html" ~/Desktop/design-mocks/<name>.png
--viewport-size の 幅を決める(カードUIなら 800〜860)。高さは初期値で、--full-page がコンテンツ全高を撮る~/Desktop/design-mocks/。/tmp に置くと後片付け(手順6)で消え、配信後にユーザーが再閲覧できなくなる(既知バグ)。永続dirなら消えない.playwright-mcp/ も落ちない)browser_close 等の後始末不要--wait-for-timeout=500 を足すsips): --full-page は基本コンテンツ高にフィットするので通常は不要。下に余白が出たときだけ:
sips -g pixelWidth -g pixelHeight ~/Desktop/design-mocks/<name>.png # 寸法取得
sips -c <新height> <width> ~/Desktop/design-mocks/<name>.png --out ~/Desktop/design-mocks/<name>_trim.png # 上から切り抜き
SendUserFile({files:["/Users/<user>/Desktop/design-mocks/<name>.png"], caption:"<各状態の要点>", status:"normal"})。captionに各ステートの意図を1行で。トリムした場合は _trim.png を送る。~ は SendUserFile では展開されないので絶対パスで渡す(echo $HOME 等で確認)。rm -f /tmp/<name>.html
~/Desktop/design-mocks/<name>.png に保持。古いモックの掃除はユーザー判断で手動(自動 rm しない)file:// がブロックされるのは Playwright MCP サーバ固有の制約。Playwright 本体(CLI)にはこの制約がないので file:///tmp/<name>.html を直接ナビゲートできる。よって python3 -m http.server 工程は丸ごと不要。
SendUserFile で送る(パスを文章で伝えるだけは不可)playwright-test skill を使う。本 skill は静的HTMLの撮影に特化worktree の使い分けと並列実行の運用方針。サブエージェントへの実装 fan-out、EnterWorktree / --worktree / isolation:worktree の利用、gwq への言及、複数セッション並列の相談があった時に必ず読む。ファイルを書くサブエージェントを起動する前にも読むこと。
Backlog の親チケットから子チケット群を規約に沿って起票する。「子チケット作って」「チケット分割して」「Backlog に起票」「サブタスク切って」等で発火。AITENCHO_PRD の実チケットから抽出した命名・本文構造・粒度・属性の規約に従う。起票前に必ず分割案をユーザーに提示して承認を得る。
agent 向けテキスト指示（skill / slash command / task プロンプト / CLAUDE.md 節 / コード生成プロンプト）を、バイアスを排した実行者に動かしてもらい、両面（実行者の自己申告 + 指示側メトリクス）で評価して反復改善する手法。改善が頭打ちになるまで回す。プロンプトや skill を新規作成・大幅改訂した直後、またはエージェントの挙動が期待通りにならない原因を指示側の曖昧さに求めたいときに使う。
Notionのデータベースを検索する。PREFIX-123 形式のIDやステータス、テキストで絞り込みが可能。
Notionページ・ブロックの更新・追記・新規作成。リッチブロック（heading/toggle/callout/code/divider）を活用して構造化された見やすい内容を書き込む。Markdownの平文貼り付けは禁止。
既存の Claude Code skill / slash command / subagent / hook の挙動を改善・観点追加・ルール追加する際に使用。ユーザーが「/<command>が甘かった」「<skill>が効かなかった」「次から<X>もチェックして」「<Y>の観点を足して」「<Z>のルールを追加して」等の振り返り・観点追加・ルール追加を依頼した時に発火。新規作成は add-claude-config を使う（こちらは既存定義の修正専用）。