🤖 AI運用ルール
learning
最終更新 2026年08月22日 ／ 22_AI運用ルール/コマンド集/system-flow/learning.md
/system-flow セルフ進化ログ（learning.md）
/system-flow（自社システム制作フロー・hp-flowのシステム版）の学習ストック。
起動時に必ず Read → 過去のFB・学びを継承してからフローを進める。
運用ルール
- FB検知したら即ここに追記（種別A=恒久ルール / B=学習候補 / C=一時対応）
- 種別A は
~/.claude/commands/system-flow.md本体も Edit して永続化 - 種別B は3回出たら本体昇格
- 矛盾FB・削除系FBは1回だけ確認してから反映
学習ログ
| 日付 | FB者 | FB内容 | 種別 | 反映先（本体のどこ/候補のまま） |
|---|---|---|---|---|
| 2026-06-25 | 大串 | hp-flowのシステム版を作る。コード抜き取り→オリジナル化→改修の流れはマスト（裏側がHP→システムに置き換わる粒度） | A | system-flow.md 新規作成（10ステップ） |
| 2026-06-25 | 大串 | 「スマホ最適化」「TERASU Lab還元」の2ステップは不要 | A | 12→10ステップに削減（該当ステップ削除） |
| 2026-06-25 | 大串 | 著作権は「再構築で見た目が変わる」でなく、HPと同じく見た目を完全再現しつつ指紋だけ消す | A | Step1完全再現＋確認①②＋Step8指紋ゼロ監査（見た目保持）として明記 |
| 2026-07-31 | 大串 | hp-flowの100%再現でシステム版を作って（コード抜き出し→完全再現→オリジナル化の同手順）。名前は/system-flow | A | system-flow.md 本体を新規作成（10ステップ・上記設計指針を全反映）。以降はこの本体を運用 |
| 2026-08-13 | 大串 | 参考システムの抜き出しは Claude in Chrome（大串のログイン済みChrome） で。「システムフローのコマンドは基本的にこれで」＝以降は毎回この方式を既定にする（アクセス方法を毎回聞かない） | A | system-flow.md 起動時セクション＋Step1に「抽出は Claude in Chrome 既定」を明記 |
| 2026-08-13 | 大串 | 「20画面全部見るの大変すぎて。1つのリンクで実装できない？」→ 実装したら「バッチリすぎる！」 | A | Step3の確認①は必ず「1リンクのシェル」で出す（画面別リンクを並べない）。仕様＝上部バーにプルダウン+←→+キーボード左右／中身はiframeで無加工／捕捉幅(例1728px)固定でウィンドウに合わせ縮小／アプリ内リンクをローカル画面に配線して本物同様に回遊／iframeのlocationを見て上部バーを追従。実装の型＝このフォルダの repro_shell_template.html（SCALE TASK案件の実物を汎用化・SCREENS配列を書き換えるだけで使える。旧build_repro.pyは現存しない） |
| 2026-08-21 | 大串 | 起動時にまず「実際に送れるリンク/コードがあるか」を聞く。あるならコード抽出ルート、ないなら画面録画ルート（SCALE TASKで確立した手法）で完全再現。「録画で超慎重に時間かけて完全再現してくれるなら録画でも全然いい。録画で100%に近づける工程ができればコマンドの価値めっちゃ上がる」 | A | system-flow.md 起動時セクションを2ルート制に改訂＋Step1にルートB（録画再現）を正式工程として追加 |
Step1 動画からの再現ノウハウ（2026-08-21 SCALE TASK案件で確立）
参考がスマホアプリでコードが取れない場合、画面録画から目視ピクセル再現する。確立した手順:
| 論点 | 結論 |
|---|---|
| フレーム分解 | ffmpeg fps=1,scale=300:-1 で1秒ごと小フレーム→ tile=4x3 でコンタクトシート化。個別フレームを読み漁らずシートで全体把握（コンテキスト節約の要） |
| 色の確定 | 目視でなく ffmpeg crop=8:8:x:y,scale=1:1 のピクセルサンプリング（8x8平均）でhex確定。文字に当たると狂うので平均必須 |
| 高解像度参照 | 作り込む画面だけ -ss <t> -vf scale=-1:1800 でピンポイント抽出（2000px制限内） |
| デバイス座標 | 1260x2736@3x → 420x912pt。画面は420px固定幅で組みシェルで縮小 |
| モーダル・状態違い | 1ファイル内に実装し URLハッシュ（#7days等）で状態を開く → シェルの画面一覧に「状態」も載せられる |
| アニメ・挙動 | 呼吸円の拡縮・タイマーカウントダウン・チェックボックス・タブ切替までJSで動かす（UI/UX再現の要望が強い場合は必須） |
| キーボード | OS標準キーボードは静的な疑似キーボードで見た目のみ再現（実入力はブラウザ） |
| フォント特定 | 雰囲気で選ばない（SCALE TASKで丸ゴを当てて大串FB「よく見ると結構違う」）。録画から文字を拡大切り出し（crop→2倍拡大）して骨格照合＝端の丸みの有無／英字a・数字0/1の形。iOSアプリの日本語はほぼヒラギノ角ゴ（システムフォント）＝'Hiragino Sans'指定＋Noto Sans JPフォールバック。英数字はPoppins等をGoogle Fontsで。見出しの折返し位置が録画と同じになるまでfont-size/letter-spacingを詰める（Rangeで1行目の文字列を機械検証） |
Step1 抜き出しの技術ノウハウ（2026-07-31 SalesNow案件で確立・毎回効く）
参考システムが SPA（Next.js/React + MUI + Emotion） の場合、素直にDOMを保存しても再現できない。以下が確立した手順。
| 論点 | 結論 |
|---|---|
| Emotion/CSS-in-JS のCSS | <style> タグの中身は空で保存される（CSSOMへ直接 insertRule するため）。document.styleSheets の cssRules から別途抽出しないとレイアウトが完全崩壊する。ここが最大の落とし穴 |
| Tailwind等の外部バンドル | DOM内の <link href="/_next/static/css/..."> を拾って curl で直接取得（認証不要の静的ファイル）。CSSOM抽出と二重取りしないよう、外部sheetは sheet.href で除外する |
| ローカルへのデータ搬出 | Chrome の Private Network Access により、参考ページ（https）から localhost への fetch も iframe も全部ブロック。通るのは トップレベルのフォームPOST（form.submit()）だけ。ただし送信＝画面遷移なので、全状態を先にJS変数へ溜めてから最後に一括送信する |
| 自動ダウンロード | 1回目だけ成功し、2回目以降はChromeがブロック。搬出路として当てにしない |
| base64での持ち帰り | ツールの安全フィルタに [BLOCKED: Base64 encoded data] で弾かれる。コンテキスト経由の持ち帰りは最後の手段（画像同様、肥大の主因になる） |
| 受信サーバー | ThreadingTCPServer + protocol_version="HTTP/1.1" + Content-Length 必須。シングルスレッド/Content-Length無しだと大容量POSTで確実に詰まる |
| SPA操作 | 描画完了まで3〜4秒待つ。パネル開閉のJSは 45秒のCDPタイムアウトに収まるよう3〜4状態ずつに分割。タブ状態は aria-selected で毎回検証（勝手に戻ることがある） |
→ 上記を守れば、コンテキスト消費ほぼゼロで全画面のDOM+CSSをローカルに落とせる。
ルートB完成参考例（同クオリティ再現の教科書・2026-08-21）
- 完成物:
~/dev/scale-task/（GitHub scale-group-jp/scale-task・本番 https://task.scale-group.co.jp/ ） repro/screens/*.html= 録画2本→14画面27状態の再現実物（状態=URLハッシュ・アニメ/タイマー/チェック連動まで動く）repro/assets/app.css= ピクセルサンプリングで確定したデザイントークンの実例repro/index.html= 確認①シェル実物／汎用版=このフォルダのrepro_shell_template.htmldocs/境界設計.md= Step4-2境界設計書の型（データモデル・API・画面⇄API対応表・モック台帳）- Step4指紋消しの型: ①Workflowで監査エージェント4並列（brand/feature-name/comment/dummy-data/version/otherの6カテゴリ・置換案は同字数±2指定）→ ②決定的指紋のみ置換（本人録画由来データ・一般語・体験の核は保持しStep8で再判断）→ ③
grepで残骸ゼロ機械確認 → ④確認②は横はみ出しの数値チェック（全画面 scrollWidth≦捕捉幅をiframeで一括検証・スクショ最小限）
確定している設計指針（このフローの背骨）
- 見た目1mm不変の大原則（参考UIを完全再現・変えるのは裏の実装だけ）
- 2回の確認ゲート（①参考と一致 ②オリジナル化後も不変）
- 抜けるのはフロントだけ・バックエンドは再実装（モック↔本実装の境界をStep4で設計）
- データ消失ゼロ・退化ゼロ（Step7データ安全ゲートは必須・HP版にない固有ステップ）
- 既存SCALEルールに接続（退化禁止フロー / 共通FBチェックリスト / GitHub自動デプロイ / 最新基準点 / changelog）