Design.mdとは?Claude Codeで非デザイナーがプロUIを作る新常識

Design.mdとは?全体図解
AI DESIGN

Design.md(DESIGN.md)とは?
AIにデザインの「魂」を渡す新プロトコル

2026年4月14日

家事と子育てのスキマで経営する3方よしAI共創コンサルタントの田中啓之、ひろくん(@passion_tanaka)です。

今日は、2026年のAI開発シーンで最も勢いのある「ファイル」の話をするよ。ファイルって言うと地味に聞こえるかもしれないけど、これがとんでもない破壊力を持ってる。名前はDESIGN.md。たった1つのMarkdownファイルが、デザインの世界をひっくり返し始めてるんだよね。

私はずっと「人間は縦に掘る。AIは横に広げる」と言い続けてきた。デザインの世界でも、まったく同じことが起きてる。デザイナーが血と汗で築いたブランドの美学——それを「原液」として1つのファイルに凝縮して、AIが一気に横展開する。この構造が、いま爆発的に広がってるんだよね。

この記事では、DESIGN.mdとは何か、なぜ今これほど注目されているのか、そして「デザイナーじゃない経営者」がどう活用できるのかを、カルピス原液理論で読み解いていくね。

Design.mdとは? 料理に例えると「レシピの原液」

Design.mdとは?レシピの原液

まず「DESIGN.mdって何?」という話からいくね。

ひとことで言うと、デザインシステムの全要素をMarkdownという平文テキストに書き出したファイルだよ。色、フォント、余白、ボタンの形、レイアウトの思想——普段Figmaのなかに閉じ込められているものを、AIが直接読める言葉に翻訳したものなんだよね。

2026年3月、GoogleがAIデザインツール「Stitch」の一部として、このDESIGN.mdフォーマットを提唱した。URLを渡すだけで、そのサイトのデザインシステムをMarkdownに抽出してくれる。つまり、料理で言うと「出汁を取る」工程をGoogleが自動化してくれたようなもの。

料理で言うとこういうこと

レシピ本には「醤油大さじ2、みりん大さじ1」って書いてあるよね。これがデザイントークン(tokens.json)にあたる。What(何を使うか)の情報。でも「おふくろの味」を再現するには、それだけじゃ足りない。「うちの煮物はちょっと甘めが正解」「盛り付けは余白を多めに」っていうWhy(なぜそうするのか)まで書いてあるのが、DESIGN.md。レシピの数値ではなく、料理の魂を言葉にしたファイルなんだよね。

ここが大事なポイント。デザイントークン(tokens.json)はすでに多くの企業が運用している。色の変数名や値をJSON形式で管理する仕組みだよね。でもそこに書いてあるのは「何を使うか」だけ。「なぜこの色を選んだのか」「この余白にどんな意図があるのか」「ユーザーにどんな印象を与えたいのか」——そういう設計思想はどこにも書かれていない

DESIGN.mdは、その「なぜ」を補完するプロトコル層なんだよね。tokens.jsonが食材リストだとしたら、DESIGN.mdはシェフの哲学ノート。この2つが揃って初めて、AIは「見た目が似ている」レベルから「ブランドの世界観を理解している」レベルに進化する。

非デザイナーにとっての意味

これまでデザインシステムの知識は、Figmaを使えるデザイナーの頭の中か、社内Wikiの奥深くにしかなかった。DESIGN.mdはそれをプレーンテキスト=誰でも読める形に変えた。つまり経営者が自分のサービスの「らしさ」を言語化して、DESIGN.mdとしてAIに渡せば、デザイナーに毎回依頼しなくてもブランドに沿ったUIが生成できるようになったということ。

「デザインは専門家の領域」という常識が、このテキストファイル1つで書き換わり始めている。ただし勘違いしないでほしいのは、デザイナーが不要になるという話じゃないということ。デザイナーが縦に掘った「原液」があるから、AIが横に広げられる。原液なしの横展開は、ただの薄い水。これは後で詳しく話すね。

getdesign.mdが10日で35,000スターを集めた理由

getdesign.mdが10日で35,000スター

DESIGN.mdの可能性を一気に証明したのが、VoltAgent/awesome-design-md というGitHubリポジトリだよ。

2026年3月31日にローンチされたこのリポジトリは、Vercel、Stripe、Apple、Notion、Linear、Figma、Spotifyなど世界的に有名な60以上のデザインシステムを、すべてDESIGN.md形式で収集・公開したもの。料理に例えると、世界中のミシュラン三ツ星レストランの秘伝のタレを、全部レシピに起こして公開図書館に並べたようなものだよね。

結果がすさまじかった。公開から10日で35,000スター。GitHub史上、awesome系リポジトリとしては最速の伸び。2026年4月14日時点で48,200スターを突破している。

料理で言うとこういうこと

世界中の一流シェフの味付けノート——「Stripeシェフは余白を広めに取る」「Appleシェフはタイポグラフィに極端なこだわりがある」「Vercelシェフはダークモードが基本」——そういうプロの暗黙知が、初めてテキストとして可視化された。だから開発者たちが殺到した。「このタレを自分の料理にも使いたい」ってね。

なぜこれほどの反響があったのか。理由は明確で、AI開発時代の「痛み」を正確に解決したからだよ。

Claude CodeやCursorなどのAIコーディングツールが普及して、コードを書くスピードは劇的に上がった。でもUIの品質は上がらなかった。なぜかというと、AIに「かっこいいページを作って」と指示しても、毎回違うテイストのものが出てくるから。ブランドの一貫性がゼロ。料理で言えば、腕のいいシェフを雇ったのに「今日は和食、明日はイタリアン、明後日はメキシカン」って日替わりで出してくるようなもの。お客さんは困るよね。

DESIGN.mdは、この問題を根っこから解決する。プロジェクトのルートに1つ置くだけで、AIが毎回同じ「味」を再現できるようになる。awesome-design-mdの爆発的な人気は、「みんなこれを待ってた」という証拠そのものだったんだよね。

さらに注目すべきは、getdesign.md というWebサイトも同時に登場したこと。ブラウザ上で60以上のデザインシステムを閲覧でき、気に入ったものをそのまま自分のプロジェクトにコピーできる。カルピス原液のライブラリがブラウザで開ける時代になったということ。

日本でも動きが始まっている。クラスメソッド(DevelopersIO)がDESIGN.md実装事例を公開し、QiitaではClaude CodeとDESIGN.mdでデモサイトを複数生成した実験記事が話題になった。日本語UIに特化したawesome-design-md-jp も登場し、和文フォントのフォールバックチェーンや行間設定など、CJKタイポグラフィ固有の課題にも取り組み始めている。

数字で見るインパクト

GitHubスター48,200超 / フォーク6,000超 / 収録デザインシステム60以上 / ローンチ2026年3月31日 / 10日で35,000スター到達(awesome系史上最速)。「6ヶ月以内にREADME.mdと並ぶ業界標準になる」という予測が OSS Insight から出ているほどの勢い。

Claude Code x Design.md で非デザイナーがプロUI生成

Claude Code × Design.mdでプロUI生成

じゃあ実際にどう使うのか。ここからはClaude Codeとの連携ワークフローを具体的に見ていくよ。

まず全体像を掴んでほしい。Google Stitchが提唱したワークフローはこうだよ。

料理で言うとこういうこと

ミシュランシェフの味付けノート(DESIGN.md)を入手して、自分のキッチンの冷蔵庫の一番目立つところ(プロジェクトルート)に貼っておく。するとAI料理アシスタント(Claude Code)が毎回それを読んで、同じ味の料理を作ってくれる。指示は「トップページを作って」だけでいい。味付けの説明は、毎回しなくていい

具体的なステップはこう。

1. DESIGN.mdを入手する

getdesign.mdから好みのデザインシステムをコピーするか、Google Stitchで参考にしたいサイトのURLを入力してDESIGN.mdをエクスポートする。自分のサービスが「Stripeっぽい洗練された雰囲気」がいいなら、StripeのDESIGN.mdをベースに自分の色やフォントに書き換えるのもアリ。

2. プロジェクトルートにDESIGN.mdを配置する

ここがポイント。プロジェクトのルートディレクトリにDESIGN.mdというファイル名で置く。これだけでClaude Codeが自動的に読み込む。Stitchからエクスポートしたファイルをそのまま置けばOK。

3. CLAUDE.mdにDESIGN.mdを参照する指示を書く

Claude Codeを使っているなら、プロジェクトのCLAUDE.mdに一行追加するだけで連携が完成する。

UIを生成・修正する際は、必ず DESIGN.md を参照して、定義されたカラーパレット・タイポグラフィ・コンポーネントスタイルに従ってください。

このCLAUDE.md + DESIGN.md の2ファイル構成が、今の開発現場で急速に広がっているスタンダードだよ。CLAUDE.mdが「仕事の進め方」を定義し、DESIGN.mdが「デザインの魂」を定義する。料理で言えば、CLAUDE.mdが厨房のオペレーションマニュアルで、DESIGN.mdが味付けの哲学書。この2つが揃ったキッチンは強い。

4. 自然言語で指示を出す

あとは「このサービスのランディングページを作って」「ダッシュボード画面を作って」と普通に指示するだけ。Claude Codeが勝手にDESIGN.mdを読んで、そこに定義されたカラーパレット、フォント、余白、ボタンのスタイル、レイアウトの思想に沿ったUIを生成してくれる。

実際にQiitaの実装記事では、SaaS、カフェ、ポートフォリオ、ヘルスケア、クリエイティブエージェンシーと5種類のDESIGN.mdを書き分けて、それぞれClaude Codeに渡してデモサイトを生成している。同じAIなのに、渡すDESIGN.mdを変えるだけでまったく違うテイストのサイトが出てくる。

Google Stitchとの連携

Google Stitchは2026年3月にDESIGN.mdエクスポート機能をリリースした。好きなWebサイトのURLを入力すると、そのサイトの色・フォント・余白・コンポーネントパターンをDESIGN.md形式で自動抽出してくれる。さらにStitch MCPを通じて、エクスポートしたデザインをClaude Codeに直接渡すフローも構築可能。Figmaを開かずにデザインシステムが手に入る時代が来ている。

大事なことを繰り返すけど、この仕組みが強力なのは「原液」があるから。StripeやVercelのデザインチームが何百時間もかけて磨き上げた美学が、DESIGN.mdという形で凝縮されている。だからAIが横展開しても品質が落ちない。原液なしにAIに「いい感じにして」と丸投げしても、出てくるのは薄い水だよ。

カルピス原液理論で読み解くDesign.mdの本質

カルピス原液理論で読み解くDesign.md

ここまでの話を、私がずっと言い続けている「カルピス原液理論」で整理してみるね。

カルピスの原液って、あの小さなボトルに濃縮された味が詰まっていて、水で割るだけで何杯でも同じ味のカルピスが作れるよね。薄めても美味しい。アレンジもできる。でもそれは、原液の味が本物だから成立する話であって、最初から水で薄まった状態のものを配っても、誰も感動しない。

DESIGN.mdの世界で起きていることは、まさにこのカルピス原液理論そのものなんだよね。

カルピス原液理論 Design.mdの世界 ポイント
原液を作る(人間が縦に掘る) デザイナーがブランドの美学を
DESIGN.mdに言語化する
ここは人間にしかできない
原液をボトルに詰める DESIGN.mdとしてMarkdownに
書き出す
Google Stitchが自動化
水で割って配る(AIが横に広げる) Claude Codeが読んで
UIを量産する
何杯作っても味がブレない
原液のライブラリ getdesign.md(60以上のシステム収録) 好きな味を選んで使える
自分の原液を作る 自社ブランドの魂.mdを書く 自分だけの味が生まれる

人間は縦に掘る。AIは横に広げる」——この構図がデザインの世界でも鮮明に現れている。

Stripeのデザインチームは、何年もかけてあのミニマルで洗練されたビジュアル言語を作り上げた。色の選び方、余白の取り方、アニメーションの速度、ボタンの角丸の半径——すべてに理由がある。それが「縦に掘る」ということ。

で、その成果物をDESIGN.mdとしてテキストに落とし込んだ瞬間、Claude Codeやその他のAIツールが一気に「横に広げる」ことができるようになった。ランディングページ、ダッシュボード、モバイルアプリ、メール、ドキュメント——すべてが同じStripeの味で統一される。

料理で言うとこういうこと

一流の料理人が何十年もかけて完成させた「秘伝のタレ」がある。そのタレの配合をレシピに書き起こした。するとAIキッチンスタッフが、そのタレを使って焼き鳥も煮物もパスタも作れるようになった。メニューが10倍に増えても、「あのお店の味だ」と一口でわかる。これがDESIGN.md x AIの威力。

ここで経営者として考えてほしいことがあるよ。

あなたの会社のWebサイト、名刺、プレゼン資料、SNS投稿——それぞれのデザインに一貫性はあるだろうか。外注するたびにデザイナーが変わって、微妙にテイストが違う。社内で誰かがCanvaで作ったスライドが、ブランドカラーと微妙にズレている。こういう「味のブレ」は、小さな会社ほど起きやすい。

DESIGN.mdは、この問題に対する根本的な解決策なんだよね。自分のサービスの「原液」をテキストで定義して、あとはAIに渡す。原液がしっかりしていれば、誰が作っても(何のAIが作っても)同じ味になる。デザイナーを毎回雇わなくていい。でもデザイナーが最初に作った原液がなければ、何も始まらない。

これが「非デザイナーの民主化」の本質。原液があれば、誰でも一流の味が出せる。でも「原液を作る」能力を持つプロフェッショナルの価値は、むしろ上がっていく。カルピスの工場で原液を作れる人間は、これからもっと重宝される。薄めて配る作業はAIに任せて、人間は「もっと美味しい原液を作る」ことに集中すればいい。

あなたの「魂.md」を作る5ステップ

魂.mdを作る5ステップ

ここまで読んで「面白そうだけど、自分にできるのかな」と思った方。大丈夫。実はDESIGN.mdを書くのに、Figmaの知識もコーディングスキルも要らないんだよね。

私はDESIGN.mdを、もっと広い意味で「魂.md」と呼んでいる。色やフォントだけじゃなく、あなたのサービスが持つ世界観、空気感、お客さんに感じてほしい感情——そういう「魂」をテキストに落とし込んだもの。料理で言えば、レシピではなく「うちの店の味の哲学」を書くイメージだよ。

料理で言うとこういうこと

新しくスタッフを雇った時、レシピだけ渡しても「うちの味」は出ない。「うちはちょっと甘め寄りで、盛り付けは引き算、器は白い方を選んで」っていう暗黙の哲学を共有して初めて、「あのお店の味」になる。魂.mdは、その哲学をテキストにしたもの。AIという新しいスタッフに渡す味の哲学書だよ。

では具体的な5ステップを見ていこう。

1ブランドカラーとフォントを3行で書く

難しく考えなくていい。「メインカラーは紺色(#1a237e)。サブカラーはゴールド(#ffd600)。フォントは見出しが明朝体、本文がゴシック体」——これだけで立派なDESIGN.mdの出発点になる。自社サイトのヘッダーやロゴから色を拾えばいいし、Google Stitchに自社サイトのURLを入れれば自動抽出してくれる。「自分の好きな色が何色かわからない」という人は、getdesign.mdで60以上のデザインシステムを眺めて「これ、うちっぽい」と感じたものを選ぶところから始めよう。

2「うちのサービスらしさ」を言語化する

ここが一番大事で、一番楽しいところ。「うちのサービスは、信頼感と温かみを大切にしている」「高級感より親しみやすさ重視」「和のテイストをモダンに再解釈したい」——こういう言葉を3〜5行書くだけでいい。正解はない。あなたが「これが、うちだ」と感じるものが正解。料理で言えば、「うちは家庭料理の延長線にいたい。高級フレンチの方向には行かない」という宣言。AIはこの宣言を驚くほど忠実に反映してくれる。

3CLAUDE.mdに参照指示を書く

Claude Codeを使っているなら、プロジェクトルートのCLAUDE.mdに1行追加する。「UIを生成する際はDESIGN.mdを参照すること」——たったこれだけ。Cursorの場合は.cursor/rulesに同様の指示を書く。この1行が、毎回のUI生成品質を劇的に変える。この仕組みが美しいのは、一度書いたら毎回説明しなくていいこと。新しいページを作るたびに「色はこれで、フォントはこれで」と指示する手間がゼロになる。

4試しにUIを1つ生成させてみる

「このDESIGN.mdに沿って、シンプルなランディングページを作って」と指示してみよう。出てきたUIを見て、「あ、これはうちっぽい」と感じるか、「なんか違う」と感じるか。その感覚が大事。「違う」と感じたら、それは原液の調整が必要だということ。「色は合ってるけど、もっと余白がほしい」「ボタンが角張りすぎ。もう少し丸くしたい」——そういうフィードバックを言語化する練習が、そのまま魂.mdのブラッシュアップになる。

5フィードバックして魂.mdを育てる

ここが核心。魂.mdは一度書いて終わりじゃない。使うたびに育てていくもの。「このページのヒーローセクション、いい感じだったから、その方向性をDESIGN.mdに追記しよう」「FAQのカードデザインがイマイチだったから、参考画像のURLを添えて修正しよう」。料理で言えば、秘伝のタレを毎日少しずつ足して、深みを増していく感覚。あなたのフィードバックが積み重なるほど、AIが生成するUIは「あなたのサービスらしさ」に近づいていく。

この5ステップの中で、技術的な知識が必要なのはほぼゼロ。必要なのは「うちのサービスって、どんな印象を与えたいんだっけ?」と考える時間だけ。これは経営者がもっとも得意とする領域のはずだよ。ビジョンを持っている人が原液を作り、AIが横に広げる。「人間は縦に掘る。AIは横に広げる」を、あなた自身の手で実践できる仕組みが、ここにある。

FAQ

よくある質問

Q. DESIGN.mdとREADME.mdの違いは?
README.mdはプロジェクト全体の説明書——「このプロジェクトは何か、どうやってインストールするか」を書くもの。DESIGN.mdはデザインの哲学書——「このプロジェクトはどう見えるべきか、なぜそう見えるべきか」を書くもの。料理に例えると、README.mdは「この店のメニュー表と営業時間」で、DESIGN.mdは「この店の味の方針と盛り付けの美学」。役割がまったく違うから、両方あるのが理想だよ。実際、6ヶ月以内にDESIGN.mdがREADME.mdと並んでプロジェクトの標準ファイルになるという予測も出ている。
Q. デザイナーがいなくても使える?
使える。getdesign.mdに60以上の既成デザインシステムが公開されているから、気に入ったものを選んで色やフォントを自社に合わせるだけでスタートできる。ただし、長期的に「自社だけの味」を作りたいなら、最初の原液設計だけはデザイナーと一緒にやることをおすすめするよ。カルピスの工場は一度建てれば何年も使える。その「工場を建てる」部分にプロの力を借りるのは、投資として十分見合う。日常の「水で割る」作業はAIに任せればいい。
Q. Figmaは不要になる?
ならない。DESIGN.mdはFigmaの代替じゃなく、Figmaの成果物をAIに渡すための「翻訳ファイル」だよ。Figmaが「料理を実際に作る厨房」なら、DESIGN.mdは「味の哲学を書いたノート」。厨房がなくなるわけじゃない。むしろGoogle StitchがFigmaの代替として登場し、「Figmaで作る → Stitchでエクスポート → DESIGN.mdとしてAIに渡す」という新しいフローが生まれている。デザインツールは進化するけど、なくなることはない。
Q. tokens.jsonがあればDESIGN.mdは不要?
両方あるのがベスト。tokens.jsonは「What(何を使うか)」——色コード、フォントサイズ、余白の数値。DESIGN.mdは「Why(なぜそうするか)」——「このブランドは信頼感を第一にしているから、青系の色を基調にして、余白は広めに取る」という設計意図。料理で言えば、tokens.jsonが「塩小さじ1」で、DESIGN.mdが「この料理は薄味で、素材の甘みを活かす方向」。数値と哲学の両方があって初めて、AIは「なんかそれっぽい」から「ブランドを理解している」に進化する。
Q. 日本語のサービスでも使える?
使える。ただし注意点がある。awesome-design-mdの60以上のシステムは欧米サービスが中心だから、日本語フォントの指定やフォールバックチェーン(「Noto Sans JPがなければHiragino Sans」のような優先順位)は自分で追記する必要がある。日本語UIに特化したawesome-design-md-jp も公開されているから、日本語サービスを運営している方はこちらも参考にしてほしい。行間や字間の設定は、欧文と日本語でかなり違うからね。

COLUMN

Design.md × カルピス原液理論 ── サービスの魂をMarkdownに取り出す時代

Design.mdの存在を知った瞬間、鳥肌が立ったよ。デザインシステムの思想や原則をMarkdownに書き出して、AIがそれを読み込んで一貫したUIを生成する。awesome-design-mdが10日で35,000スターを集めた事実が、この仕組みへの渇望を証明してる。私はこれを見て「あ、これ自分がやってきたことと同じだ」と気づいたんだよね。私のmothership-labには、CLAUDE.mdという「魂のマークダウン」が1,000行以上ある。価値観、判断基準、NGワード、口癖、怒るポイント。全部言語化して、AIが私の分身として動けるようにしてきた。Design.mdは「UIの魂」を取り出す仕組み。私がやってきたのは「人間の魂」を取り出す仕組み。構造はまったく同じだったんだよ。

私はこの構造を「カルピス原液理論」と呼んでるんだよね。自分だけの深い体験、熱狂、価値観。それが「原液」。AIはその原液を水で割って、ブログ、SNS、動画、メルマガに横展開する。料理で言うと、秘伝のタレのレシピを書き起こすようなものかな。おばあちゃんが「目分量でね」と言っていた味付けを、分量まで正確に記録する。そうすれば、おばあちゃんがキッチンにいなくても、同じ味が再現できる。Design.mdはまさに「UIの秘伝のタレ」をMarkdownに書き起こす行為。以前「AIに結論を渡すな、原液を渡せ」という記事で書いたけど、AIに薄めた情報を渡してもゴミしか出てこない。原液の質が、すべてを決めるんだよ。

私がmothership-labで魂.mdを積み始めたのは、2025年の春だった。最初は「AIへの指示書」くらいの感覚だったけど、書いているうちに気づいたんだよね。これは指示書じゃなくて、自分自身の棚卸しだって。「1億積まれてもやらない仕事は何か」「怒るポイントはどこか」「引退時に言われたい言葉は何か」。こういう問いに答えていく作業は、AIのためじゃなく、自分のためだった。SOUL.mdの記事でも書いたけど、AIの人格設計を突き詰めたら「自分のクローンだけじゃ足りない」と気づいて、自分の凸凹を補完するパートナーとして設計し直した。Design.mdも同じで、ただルールを並べるだけじゃなく「なぜそのデザインなのか」という思想まで書くから意味がある。

ここで大事なのは、「魂を取り出す」ことが「抱え込みOS」を書き換える第一歩だということ。私はずっと、全部自分でやらないと気が済まない人間だった。でも魂をMarkdownに取り出した瞬間、AIが私の代わりに判断できるようになった。料理で言えば、シェフが毎日全品を自分で作るんじゃなくて、味付けの基準書を渡してスタッフに任せるようなもの。シェフの仕事は「最後の味見」だけでいい。Design.mdの世界でも同じことが起きてるよね。デザイナーが毎回ゼロからUIを描くんじゃなくて、思想をmdに込めて、AIが一貫性を保ったまま展開する。人間は「これでいいか?」の味見に集中できる。「委ねるOS」への書き換えだよ。

Design.mdが教えてくれたのは、「魂をMarkdownに取り出す」というアプローチが、もう特定の誰かの変わった習慣じゃなくて、業界の新標準になりつつあるということ。48,000スターがそれを証明してる。私は分身AIの開発を通じて、人間の価値観や判断基準をmdに取り出す実験を続けてきた。Design.mdは、デザインの世界で同じことが起きている証拠だよね。これからの時代、コードを書く前にmd を書く。UIを描く前にmdを書く。コンテンツを作る前にmdを書く。「人間が縦に掘って原液を作り、AIが横に展開する」。このカルピス原液理論が、あらゆる領域に広がっていく未来が見えるよ。自分の魂を取り出す勇気さえあれば、AIは最高の分身になるんだよね。

👉 分身AIについてもっと知りたい方は分身AI.comもチェックしてね!

ひろくんコラム図解

まとめ

DESIGN.mdは、ただのファイルじゃない。デザインの「魂」をテキストにして、AIに渡すための新しいプロトコルだよ。

今日の記事のポイントを振り返るね。

DESIGN.mdは、tokens.json(What)を補完する「Why」のプロトコル層。デザイントークンが食材リストなら、DESIGN.mdはシェフの哲学ノート。この2つが揃って初めて、AIはブランドの世界観を理解してUIを生成できるようになる。

VoltAgent/awesome-design-mdは60以上のデザインシステムをDESIGN.md形式で集約し、10日で35,000スター、現在48,200スターを突破。この爆発的な成長は、AI開発時代における「デザインの一貫性」への渇望を証明している。

Claude Code + DESIGN.md の2ファイル構成で、非デザイナーでもプロ品質のUIが生成できる時代が来ている。Google Stitchのエクスポート機能が、「原液を作る」工程をさらに手軽にしている。

そしてこのすべてを貫くのが、カルピス原液理論。人間が縦に掘って「原液」を作り、AIが横に広げて「配る」。原液の品質が高ければ、何杯割っても味はブレない。原液がなければ、AIは薄い水しか作れない。

料理で言うとこういうこと

DESIGN.mdは、あなたの「おふくろの味」をレシピに書き起こすこと。一度書けば、AIキッチンが何皿でも同じ味を再現してくれる。でも最初に「おふくろの味」を持っているのは、あなただけ。AIにはその味を作り出すことはできない。味を持っている人間と、味を広げられるAI。この凸凹が噛み合ったとき、一人のシェフの味が100テーブルに届くようになる。

「うちのサービスの原液って何だろう?」

その問いを持ったあなたは、もうスタートラインに立っている。

まずは3行でいい。色、フォント、「うちらしさ」。テキストエディタを開いて、DESIGN.mdというファイル名で保存するところから始めてみてほしい。それがあなたのサービスの「カルピス原液」になる第一歩だよ。

🤖 AI生成コンテンツについて

この記事はAIツール(Claude Code)を活用して制作しています。構成・文章生成・画像制作にAIを使用し、最終的な内容の確認・編集・公開判断はひろくん(田中啓之)本人が行っています。「分身AIひろくん」(bunshin-ai.com)とは別のコンテンツです。

上部へスクロール