Claude Codeを使い込んでいる人ほど、必ずこの壁に当たります。

AIの実行力はもう十分です。足りないのは「いま何が起きているかを一目で見る手段」。

本ガイドは、その解決策として実際に毎日運用している自作ダッシュボード「8-BIT Task Board」の設計・コード・構築手順を、Claude Codeに作らせるためのプロンプト集込みで全公開するものです。

ブラウザにRPG風のピクセルオフィスが表示され、

として、あなたのAI稼働状況がリアルタイムに描画されます。

見た目はゲームですが、中身は実用ツールです。

スクリーンショット 2569-07-15 19.57.25.png

第1章全体設計 ― なぜ「読むだけ」の設計が正解か アーキテクチャ全体図。Claude Code無改造・依存ゼロ・読み取り中心という3原則の理由。

第2章 ~/.claude の中身を読む projects/ 配下のJSONL構造、セッション・タスクの読み方、「稼働中」判定ロジック(最終更新時刻ベース)の実装。ここが本ガイドの心臓部です。

第3章依存ゼロNode.jsサーバーの構築 http/fs/pathだけでAPIサーバーを書く構成。/api/board のスナップショット設計、キャッシュ、CORS。

第4章ボードUI ― まず「表」で作る タスク一覧・セッション一覧・直近コミットの表示。デスクトップ常駐用コンパクト版の作り方。

第5章ピクセルオフィスの描画 16pxタイルマップ、家具の配置、ロボ猫スプライトの作り方(文字列グリッドでドット絵を定義する手法)、キャラの状態機械(待機→歩行→アクション)、家具を避けるBFS経路探索。

第6章 hooks連携 ―「発令→実行→報告」の双方向化 UserPromptSubmit hookで指令を注入し、Stop hookで最終回答をボードへ返す仕組み。キュー設計と重複防止。

第7章セキュリティ設計(重要) ユーザー入力をシェル引数に絶対混ぜない理由と実装、権限バイパスフラグを使わない運用、ローカルトークンによるAPI保護、同時実行ロック。

第8章複数PC統合と.app化 sources.jsonで複数マシンを1画面へ。macOSの.appラッパー作成(GUI起動時にnodeのPATHが通らない問題の解決込み)。

第9章構築プロンプト集 ― Claude Codeに作らせる 第1〜8章の内容を、段階別にそのままClaude Codeへ投げられるプロンプトとして再構成。コードを手で書かずに、あなたの環境で同等物を構築する手順。

付録

1,980円です。

このガイドの内容は、設計試行錯誤・セキュリティ設計・hooks仕様の調査を含めて相応の時間を投じて構築したものですが、「AI並列運用の管理基盤が飲み会1回未満で手に入る」ラインに設定しました。

Claude Codeの従量コストを考えれば、放置事故で無駄になるセッション数回分で回収できる計算です。

【本編】Claude Codeを「AI社員」化する ― 8-BIT Task Board 構築完全ガイド