承認を取る設計書は「ひと目でわかる版」1 枚を安い AI に下書きさせて先に出す

目的

技術者向けの要求定義・設計書・タスクリスト（表と専門用語の長文）を、スマホで 1 分で読んで承認できる 1 ページに変換し、承認の往復を減らす。下書きは安価な LLM（Gemini Flash 等）に任せ、監督役の AI は機械チェックと体裁確認だけを行う。

前提

• 承認者はスマホで読む（横幅 375px、横スクロール不可）
• 詳細版（docs/・.steering/ の HTML）はゲート用に残し、承認依頼では「1 枚版（主）＋詳細版（参考）」の順でリンクする
• 1 枚版を公開する手段（claude.ai Artifact、Drive、社内の静的ホスティングなど）がある

手順

1. 事実リストを書く（監督役）。1 枚版に載せてよい事実だけを箇条書きにする。数値・固有名詞・決定事項・やらないこと・人に頼む作業（誰が／何回）を含める。
2. プロンプトを作る。次の構成を指定し、HTML の <main> の中身だけを返させる。
   • 構成: ①何が変わる（いま→これから）②誰がどう使う ③画面はこんな感じ（HTML+CSS のモック）④決めたこと（3〜5 個）⑤やらないこと＋承認者側の作業の有無
   • ルール: 技術用語（API・DB・RLS・JSON・migration・cron・env・コンポーネント名）禁止、各文 1〜2 行、クラス名を固定（.ba .before/.after、.flow .step、.decision li、.note）
3. 安い LLM に下書きさせる。例: node llm-ask.mjs --provider gemini "<プロンプト全文>"（プロンプトは引数で渡す。ファイルパスを渡しても LLM は読めない）。
4. 機械チェック（監督役・スクリプト）
   • 禁止語リストで includes 判定 → 1 件でもあれば差し戻し
   • タグ開閉の一致（<section>/<ul>/<li> 等）
   • 共通の <head><style> で包み、Chromium（Playwright）を 375px で開いて document.documentElement.scrollWidth === 375、JS エラー 0、h2 の数が期待どおり
   • フルページのスクリーンショットを 1 回目視（文字の重なり・切れ）
5. 公開してリンクを渡す。承認依頼メッセージは「1 枚版（主）／詳細版（参考）」の 2 行＋「次にすること: リンクを開いて OK か番号を返信」。
6. 差分の承認でも同じ（第 2 版・追記）。詳細版だけで依頼しない。

1 枚版のテンプレ（CSS の要点）

• :root に色トークン、prefers-color-scheme: dark を両対応
• section はカード（角丸・薄い枠）、h2 は丸番号付き
• .ba は 3 カラム grid（いま／矢印／これから）。420px 以下では 1 カラムにして矢印を 90 度回転
• .mock は幅 360px のスマホ枠。カード内の行は display:flex; justify-content:space-between、ボタンは 28px 以上

失敗パターンと回避

• 詳細版だけを渡して「よくわからない」と差し戻される → 必ず 1 枚版を先に
• LLM にファイルパスを渡す → 読めない。本文を引数で渡す
• 1 つの LLM が 429/口座停止 → フォールバック順（Gemini → Groq 等）を持つラッパーで呼ぶ
• 専門用語が混ざる → 禁止語の機械チェックを必ず通す（目視だけにしない）
• 承認依頼の「次にすること」にローカルパスを書く → スマホで開けない。公開 URL とログインするアカウントを書く

見積り

• ゼロから作る: 約 25,000 トークン（設計書を読み直して 1 枚版を監督役が自分で書く）
• この指示書を読んでから作る: 約 6,000 トークン（事実リスト＋プロンプト＋チェックスクリプトの流用）