
AIコーディングの「事故」を減らす3つの設計術
朝の出汁版(通勤2分)
- ポイント1: GoogleがAIへデザイン意図を直接渡す仕様ファイル「DESIGN.md」をオープンソース化し、既製ファイルが72本揃うなど実用段階に入りつつある。
- ポイント2: 複数の発信者に共通するのは「AIに賢さを求める前に、触らせる範囲・文脈・環境を設計側で絞る」という発想で、これが安定稼働の鍵とされている。
- ポイント3: まず試せるのは「DESIGN.mdをプロジェクトに置く」「AIに渡すフォルダを触っていいゾーンと捨て用一時領域に分ける」の2点で、どちらも既存環境をすぐ変更できる。
出汁の素(深読みモード)
これって結局どういうこと?
AIコーディングツールでUIを作るたびに、配色や余白がぶれて手直しが発生する。あるいはClaude Codeに作業させたら、意図しないファイルまで触られてヒヤリとした——そういった「AIの暴走」に近い体験が、開発者・ビルダーのあいだで共通の悩みとして浮上しています。
要は「AIの賢さの問題」ではなく「AIに何を渡すか・どこまで触らせるかという設計の問題」ということ。3つのトピックに共通するのはこの一点です。Googleが仕様をオープンソース化した「DESIGN.md」も、Claude Codeの作業ゾーン分割も、スマホからのリモート操作も、すべて「AIに渡す文脈と権限を設計側でコントロールする」という発想から出発しています。
なぜこのタイミングで重要?
AIコーディングが「書ける人だけのもの」から「ビルダー全員の道具」になりつつある今、問題は生成精度よりも「安定して使い続けられるか」に移ってきています。
注目したいのは、GoogleがDESIGN.mdの草案仕様をオープンソースとして公開したタイミングです。CursorやClaude CodeといったAIコーディングエージェントは、プロジェクト直下に置かれた.mdファイルを「文脈」として自動的に読み込む仕組みを持っています。RULES.mdやSYSTEM.mdで挙動を制御するアプローチ自体は以前から存在しましたが(SOUL.mdに一行書くだけでAI秘書が完成するでも触れた通り)、今回Googleが「デザインの意図を渡すための専用フォーマット」として仕様化したことで、ツール横断で使える共通言語が生まれつつあります。既製ファイルがすでに72本公開されているという点も、「個人が一から書く手間」を大幅に下げるという意味で実用性が高い。
もうひとつの軸は「権限スコープの管理」です。AIエージェントに作業させるとき、文脈を増やせば増やすほど出力の精度は上がりますが、同時に「予期しない範囲に手が届く」リスクも比例して高まります。これはモデルの性能とは独立した問題で、どれだけ賢いモデルを使っても「触っていいフォルダ」と「捨てていい一時領域」を分けておかなければ、誤削除・誤上書きのリスクはゼロにはなりません。複数の実践者がこの「ゾーン分割」に独立してたどり着いているという事実は、現時点のAIエージェント運用における構造的な課題を示しています。
リモート操作についても同様で、スマホからClaude Codeのセッションを操作するニーズ自体は以前からありましたが、tailscaleとTermuxを組み合わせたSSH接続という形で具体的な構成が共有されてきたのは最近の話。Claude Codeの実用範囲が「ローカル一台」から「マルチデバイス」に広がりつつあることを示しています。
具体的に始めるなら
まず試せる優先順位1:DESIGN.mdをプロジェクトに置く
Googleがオープンソース化したDESIGN.md仕様は、GitHubリポジトリ(google/design-md)から確認できます。まず既製ファイル72本の中から自分のプロジェクトに近いものを選んでコピーし、プロジェクトのルートディレクトリに配置するだけで試せます。CursorやClaude Codeはプロジェクト直下の.mdファイルを自動的に参照するため、追加の設定は基本的に不要です。
書き方の要点は「配色・タイポグラフィ・余白の数値ルールをそのままテキストで記述する」こと。既製ファイルをそのまま使うのではなく、まず一枚コピーして自分のデザインシステムに合わせて上書きするのが現実的な出発点です。ゼロから書く人向けには、仕様ページに最小構成のテンプレートが記載されています。
優先順位2:作業ゾーンを物理的に分ける
Claude Codeに作業させるとき、プロジェクト全体を渡すのではなく「触っていいフォルダ」を事前に決めておくのが安定運用の鍵です。具体的には:
ai-workspace/(AIが自由に生成・編集してよい領域)ai-tmp/(試作・捨て用の一時領域)- 本番ソースは別ディレクトリとして明示的に分離
この構造をプロジェクト開始時に作っておき、Claude Codeへの指示にも「ai-workspace/内で作業してください」と毎回明示する運用が、複数の実践者から報告されています。小規模なプロジェクトであれば、既存ディレクトリ構成を変えなくても.cursorrulesやCLAUDE.mdに「触れないフォルダ」のリストを書く方法でも代替できます。
興味があれば試せる:スマホからClaude Codeをリモート操作
出先からPCのClaude Codeを操作したい場合は、Android + tailscale + Termuxの組み合わせが現時点では有力な選択肢のひとつです。PC側でtailscaleを起動し、Android側もtailscaleを導入した上でTermuxからSSH接続、claudeコマンドを起動して/remote-controlを叩く流れです。iOSの場合は公式のClaude.aiアプリと/remote-controlの組み合わせでより簡単に接続できるとされています。ただし新規セッションを出先から始める場合はPC側の設定が必要なため、「定期的に外出先で作業を継続したい」用途向けの構成です。
よくある疑問
Q. DESIGN.mdはCursorとClaude Codeのどちらで使えますか?
どちらでも使えます。仕様上はツール非依存で設計されており、プロジェクトルートに.mdファイルとして置けば、プロジェクト内ファイルを参照するAIコーディングエージェントであれば基本的に読み込まれます。ただし「どこまで厳密に守られるか」はモデルとツールの実装に依存します。公式仕様ページには対応ツールのリストが随時更新されているため、使用前に確認するのが確実です。
Q. 「触っていいフォルダ」を分けただけで本当に事故は防げますか?
ゼロリスクにはなりません。ただし「どこまで触らせるか」を明示していない状態よりは、誤操作の発生頻度と影響範囲を絞れます。AIエージェントはフォルダ構造を文脈として読み取るため、ディレクトリ分離+指示文での明示という二重のガードが現実的な対策です。加えて、本番環境は.gitignoreで除外する・Git管理下に置いて変更履歴を追えるようにするといった基本的な安全策との組み合わせが前提になります。
Q. DESIGN.mdの既製ファイルは無料で使えますか?
Googleのオープンソースリポジトリとして公開されているため、ライセンスの範囲内で無料で利用できます。72本の既製ファイルはコミュニティによる貢献も含まれており、今後も増える見込みです。ただし内容の正確性は各ファイルのメンテナーに依存するため、本番利用前に自分のプロジェクトの要件と照合して確認する手間は必要です。
もう一歩踏み込みたい人へ
DESIGN.mdの仕組みをより深く活用したい場合、注目したいのは「AI向けのデザイントークン記述」という考え方です。数値としてのカラーコード・フォントサイズ・スペーシングをDESIGN.mdに集約しておき、CSSのカスタムプロパティやTailwindのconfig生成をAIに自動化させる構成が技術的には成立します。DESIGN.md → AI生成 → tailwind.config.jsの自動更新という流れは、フロントエンド開発においてデザインと実装の乖離を継続的に抑える仕組みとして応用できます。
ゾーン分割については、Claude CodeのCLAUDE.md(プロジェクトルートに置く指示ファイル)と組み合わせるのが実装上の近道です。CLAUDE.mdに「ai-workspace/以外は編集禁止」「ai-tmp/は自由に書き捨てていい」と記載しておくことで、セッションをまたいで設定が引き継がれます。公式ドキュメントではCLAUDE.mdの記法や読み込み順について詳細が公開されているため、参照元として確認する価値があります。
リモート操作の構成をより安定させたい場合、tailscaleのACL(アクセスコントロールリスト)設定でSSH接続を許可するデバイスを限定しておくのが現実的な安全策です。スマホ紛失時のリスクを考えると、tailscaleのデバイス管理コンソールからリモートで接続を切断できる運用フローを事前に決めておくことが推奨されます。公式ドキュメント(tailscale.com/kb)に構成例が記載されています。
Claudeを「正しくフル活用」する前提知識でも整理した通り、Claude Codeの挙動はプロジェクト構造とコンテキスト設計に大きく左右されます。ツールの賢さを引き出す前に「渡す情報の設計」を先に固めるというアプローチは、どのエージェントツールにも横断して適用できる考え方です。
元になったツイート
CursorやClaude CodeでUIを作るたび、配色や余白が毎回ぶれて手直しに追われる開発チームへ|Googleが、デザインの意図をAIに直接渡す設計ファイル「DESIGN.md」の草案仕様をオープンソース化しました。既製ファイルは早くも72本まで揃っています。 https://t.co/yUKt3TkqTv ■
Claude Codeで事故る時は、モデルの賢さではなく「PCの見せ方」を間違えている。 AIは文脈が多いほど強くなる。これは半分だけ正しい。 作業中のPCでは、文脈が増えるほど事故の面積も広がる。 安定したのは、能力を上げるより先に置き場を分けた時。 ・触っていいフォルダ ・捨てていい一時領域
・スマホにClaudeのアプリ入れる ・PCで /remote-control しておく これで安定している間はいけるはず。 出先で新規セッション始める場合は、 PC側(WSL2/Ubuntu):Claude Code + tailscale Android側:tailscale + Termux(Android) で ssh 接続して claude 起動して /remote-control してる。 https://t.co/GbzMSijhrn
参照ソース
- [X]@id_2055880968905613312: CursorやClaude CodeでUIを作るたび、配色や余白が毎回ぶれて手直しに追われる開発チー…→ twitter.com/id_2055880968905613312/status/2062…
- [X]@id_814688806905352192: Claude Codeで事故る時は、モデルの賢さではなく「PCの見せ方」を間違えている。 AIは文脈…→ twitter.com/id_814688806905352192/status/20626…
- [X]@id_5394062: ・スマホにClaudeのアプリ入れる ・PCで /remote-control しておく これで安…→ twitter.com/id_5394062/status/2062625438812578…
