バイブコーディング
AIが一発で使えるデザインシステムにする、5つの具体策 — GUNJOでやったこと
Zenn AI公開: 2026年8月5日
出典：Zenn AI
この記事のポイント
- 1AIが「察する」ことを期待せず、すべての仕様をドキュメントと型で明示する設計
- 2JSONやllms.txtなど、AIエージェントが理解しやすい「機械可読」な入り口を用意
- 3予備知識ゼロのAIに175画面作らせる「コールドテスト」で設計の不備を徹底排除
要約
デザインシステム「GUNJO」の開発者は、AI（CursorやClaude等）が迷わず一発で画面を組み上げられるデザインシステムを構築するための5つの具体策を公開しました。175回に及ぶAIへのコーディング検証に基づき導き出された手法です。具体策は、(1)ドキュメントのみで完結させ暗黙の了解を排除すること、(2)MarkdownやJSON形式で機械可読な仕様書を配布すること、(3)サイトルートにAIクローラ用の案内図「llms.txt」を設置すること、(4)TypeScriptの型定義そのものをソースコードとして配布しAIに読み取らせること、(5)予備知識ゼロのAIにdocsだけを渡して動作確認するQAループを回すこと、の5点。人間なら「察して」補える余白がAIには通用しないという前提に立ち、情報を明示的かつ構造的に渡すことの重要性を説いています。
出典：Zenn AI の情報をもとにAIが要約
当サイトの考察
“
ヒナキラです！これぞ「バイブコーディング」時代のバイブルとも言える、超重要ノウハウです！先週、アンドレイ・カーパシー氏が『指輪物語』の1節から3Dシーンを生成させたニュースをお伝えしましたが、あれは「AIの想像力」に頼るものでした。一方、今回のGUNJOの手法は、私たちが実務でAIを「正確なエンジニア」として使いこなすための「情報の整え方」を教えてくれています。クリエイターや副業開発者の皆さんにとって、llms.txtの設置や機械可読な仕様書の準備は、自分の資産をAIに正しく扱わせるための「共通言語」作りです。特筆すべきは「型そのものを仕様にする」という視点。先週、Anthropicが『プロンプトは足すより削るほうが賢い』と発表しましたが、これは「言葉（プロンプト）」で説明するのをやめて「構造（コードや型）」で直接理解させる、次世代の最適解と言えるでしょう。この手法を自分のプロジェクトに取り入れれば、AIとのやり取りで発生する「そこじゃない感」を劇的に減らせるはずです！
よくある質問
Qllms.txtとは何のために置くものですか？
A
AIクローラやAIエージェントがサイトを訪れた際、最初に読み込む「AI専用の目次」です。どこに重要なドキュメントがあるかを教えることで、AIが情報を探す精度と速度を向上させます。
Qエンジニアでなくてもこの考え方は役立ちますか？
A
非常に役立ちます。AIに指示を出す際「背景を知っているはず」という思い込みを捨て、必要な情報をすべて構造化して渡す（マニュアルを渡す等）という考え方は、あらゆるAI活用に共通する成功法則です。
Q機械可読（マシンリーダブル）にすると何が良いのですか？
A
AIは人間向けの曖昧な文章よりも、JSONやMarkdownのような決まった形式のデータを処理する方がミスが圧倒的に少なく、かつ正確にプロパティや制約を理解できるからです。
用語解説
バイブコーディング
プログラミングの厳密な文法よりも、AIに「雰囲気（バイブス）」を伝えて自律的に開発させるスタイル。
機械可読 (Machine Readable)
コンピューターやAIが、人間による解釈を介さずに直接内容を理解・処理できるデータ形式のこと。
SSOT (Single Source of Truth)
「信頼できる唯一の情報源」。同じ情報が複数の場所に存在せず、一箇所を直せばすべてが整合する設計思想。
※ この記事の要約・考察・FAQ・用語解説はAIによって生成されています。正確な情報は元記事をご確認ください。
ヒナキラ
Hinakira AI News 編集長
AIツール・LLM・プロンプト活用術を中心に、個人クリエイター・副業者向けのAI最新情報を毎日お届けしています。AI歴3年以上、いろんな用途に実際に使って試してきた知見をもとに、読者が「自分ごと」として活用できる考察を心がけています。