Claude CodeとRefero DESIGN.mdで作るテンプレート風ではないウェブサイト

プロジェクトやモデルの活用に関する実践資料：Ailootドキュメント。

Claude CodeのウェブサイトがTailwindテンプレートのように見えるのはなぜ？#

説明されている1月の例では、コールドセールス用ダイヤラーの小さなサイドプロジェクトが作られていました。空のリポジトリで、Claude Codeにホームページの作成を依頼しました。結果はありきたりなものでした。暗いslate-950の背景、purple-500のアクセント、太字のサンセリフ見出し、その下に同じ影を付けたカードが3つ。ChatGPTの初回リリース、Lovableの初回リリース、v0の初回リリースと同じレイアウトです。「モダン」「プレミアム」「ほかとは違う」と付け加えるプロンプト編集を5回行っても、何も変わりませんでした。ページは依然として、Tailwind UI Templatesのセットから出てきたように見えました。

つまり、Claudeは美しいものの作り方を「知らない」のではありません。大多数の人が何をするかを知っていて、その多数派を再現するのです。平均化されていない結果を得るには、使う色、フォント、余白、標準とするコンポーネントについて、エージェントに具体的な制約を与える必要があります。

ここで、デザインシステムがコンテキストとして役立ちます。「美しくして」ではなく、「この具体的なスタイルで作って。パラメーターはこれです」と伝えます。

Refero Stylesは、実際のプロダクトから抽出したパラメーターを含むDESIGN.mdファイルという既製の成果物によって、その差を埋めます。

Refero Stylesとは？#

styles.refero.designのホームページには、「主要なプロダクトウェブサイトから、AIエージェントが読み取れる2,000以上のデザインシステムを見つけよう」と明記されています。カタログには、ビジュアルの基準を定めるブランドが掲載されています。Apple、Linear、Stripe、Notion、Vercel、ElevenLabs、Mercury、PostHog、xAI、Modal、Duolingoです。手作業で抽出しているわけではありません。Referoチームが、サイトの実際のCSSとマークアップを分析するスクリプトを実行し、その結果を構造化されたMarkdownにまとめています。styles.refero.designのライブラリ自体は無料です。

重要なのは「構造化された」という言葉です。このファイルにはスクリーンショットも、「ミニマルなスタイル」といった説明もありません。具体的な16進数カラー、pt単位の正確なフォントサイズ、余白の単位、コンポーネントのルールを記したMarkdownです。AIエージェントはこのファイルを読み、言葉で好みを説明しようとするのではなく、具体的な情報を扱います。

Referoチームは、ai-agentsページで対応ツールとして「Cursor、Claude Code、Codex、v0、Lovable」を挙げています。つまり、DESIGN.mdは汎用的な成果物として機能します。主要なAI開発エージェントすべてに使える一つのファイルです。

DESIGN.mdには何が含まれる？#

Referoチームは、design-md-templateページでファイルの構造を次のように説明しています。

ファイルの構造は、通常次のようになります。

作成者たちは、AIデザインの問題の80%を解決する原則も強調しています。

つまり、16進数コード#5E6AD2は「Linearのように」より強い指定です。正確な値font-size: 13px / line-height: 18pxは「コンパクトなテキスト」より強い指定です。解釈に委ねるより、具体的に示すほうが優れています。

リポジトリ内のDESIGN.mdは、チーム向けの画像ではありません。これはプロジェクトの永続的なコンテキストを構成する要素です。AIがリクエストごとに読む、構造化された知識です。

4つのステップでLinear風のウェブサイトを作る方法#

新しいウェブサイトを作り始める手順は、この4ステップで構成されています。「一般的な4ステップ」ではなく、各ステップに一つずつ具体的な作業を割り当てた手順です。

1. Claude Codeをインストールする

   ネイティブのワンコマンドインストーラー：curl -fsSL https://claude.ai/install.sh | bash（公式ドキュメントで推奨される方法）。macOSではbrew install --cask claude-codeが使えます。Windowsではwinget install Anthropic.ClaudeCodeです。すでにインストール済みなら、バージョンを確認します：claude --version（2.1.178以降が必要です。このバージョンで、Tool(param:value)の権限設定と、オートモードで危険なgitコマンドをブロックする機能が導入されました）。アカウントにサインインします：claudeを起動するとウィザードが始まります。Claude CodeはProサブスクリプションに含まれます（年払いなら月額$17、月ごとの支払いなら月額$20）。

2. Refero Stylesを開いてブランドを選ぶ

   https://styles.refero.designにアクセスしてカタログを開きます。選択の主な基準は、見た目が「好きか」ではなく、プロダクトにどれほど合っているかです。SaaSダッシュボードを作っていますか？Linear、Vercel、Notionを見てみましょう。フィンテックのプロダクトを作っていますか？Stripe、Mercury、Columnを見てみましょう。メンバー向けのプロダクトを作っていますか？Duolingoを見てみましょう。ブランドカードを開き、「Copy DESIGN.md」をクリックします。

3. DESIGN.mdをプロジェクトに入れてコンテキストにする

   プロジェクトのルートにdocs/DESIGN.mdファイルを作り、コピーした内容を貼り付けます。次にCLAUDE.mdを開き、一行追加します：@docs/DESIGN.md。これはインポート指示です。Claude Codeはセッション開始時に内容をコンテキストへ読み込みます。CLAUDE.mdでのインポートについて詳しくは、Claude Code、Codex、Cursorに共通する一つの指示ファイルのガイドをご覧ください。

4. 特定のページをプロンプトで指定する

   「美しくして」ではなく、具体的に指示します：「コンテキスト内のDESIGN.mdを使って、SaaSのタスク管理プロダクトのホームページを作ってください。構成：見出しと小見出しのあるヒーロー、CTAボタンを2つ（primaryとsecondary）、その下にアイコン付きの機能紹介ブロックを3つ、続いてお客様の声のブロックを配置します。DESIGN.mdの色とタイポグラフィを厳密に使い、独自の値を作らないでください。」

4つ目のステップの後、Claudeがページを作ります。説明されている経験では、ホームページの作成には平均8～12分かかり、選んだブランドのスタイルに本当に近い見た目になります。ピクセル単位で完全に一致するわけではありませんが、同じフォント、同じパレット、同じ余白のリズム、ボタンにおける同じ細かな判断によって、見覚えのある美的スタイルになります。

Referoの作成者たちは、ai-agents/design-resourcesページで同じ三段階の原則をもう少し簡潔に説明しています。

この4ステップの手順は同じロジックに従い、Claude CodeのインストールとCLAUDE.mdへのファイルのインポートという明示的なステップが加わっています。

プロダクトにはどのスタイルを選ぶべき？#

Referoの作成者たちは、ガイドの最初のステップでこのアドバイスを示しています。ブランド名だけでなく、情報密度、トーン、対象ユーザーに基づいて参考スタイルを選びましょう。

Apple由来の色、書体、階層、控えめな動きはSaaSダッシュボードにも使えますが、特定の製品紹介ページの広い余白は合わない場合があります。ブランド名で選ばず、具体的な画面を見てください。会計画面では、数値と操作を読みやすく保ちながら行高、間隔、情報密度を明示し、広いプレゼンテーションの配置をそのまま写さないことが大切です。

プロダクトの種類に応じた簡単な選び方です。

それでも迷うなら、Linearを選びましょう。最も汎用性の高い基盤です。中立的なパレット、読みやすいタイポグラフィ（Inter／Söhne）、控えめな余白を備えています。Linearを基にしたウェブサイトなら、10種類のプロダクトのうち9種類でプロフェッショナルに見えるでしょう。

AIエージェントのためにDESIGN.mdを永続的なコンテキストに入れる理由は？#

説明されている実践では、AIエージェントで管理するすべてのプロジェクトで、DESIGN.mdはCLAUDE.mdの隣に保存されています。このファイルは「一つのタスクのための一時的なもの」とは考えられていません。今後のすべてのセッションが参照する恒久的な基準です。1か月後、Claudeにプロジェクトの新しいページを追加するよう頼めば、同じDESIGN.mdを開き、同じスタイルで作成します。6か月後、プロジェクトを別のチームメンバーに引き継いでも、その人がClaudeを使って一貫した結果を得られます。DESIGN.mdがリポジトリに入っているからです。

デザインでは、この原則は次のように機能します。パレット、タイポグラフィ、余白のリズムを一度決めます。その後は、どのAIエージェントもそれを前提として扱います。

つまり、デザインはコードとして（Markdownはコードです）存在し、AIが読めないFigmaファイルとしては存在しません。デザインがリポジトリ内のファイルなら、Claude CodeもCodexも、そして将来のあらゆるツールも読むことができます。デザインがFigmaにあると、別の場所に保存され、セッションごとに手作業で変換しなければなりません。

説明されているサイドプロジェクトでは、次の構造が使われていました。

project/
├── CLAUDE.md            (imports @docs/DESIGN.md)
├── docs/
│   ├── DESIGN.md        (visual canon, copied from Refero)
│   ├── ARCHITECTURE.md  (project structure)
│   └── BRAND.md         (tone of voice, vocabulary)
└── ...

これら3つのファイルは、プロジェクトの永続的なコンテキストを整理する一つの方法です。DESIGN.mdはビジュアル、ARCHITECTURE.mdは構造、BRAND.mdは語り口を扱います。リポジトリにアクセスできるAIエージェントは、3つすべてをコンテキストとして得られます。

Refero MCPとrefero_skillとは？#

Refero Stylesは基礎レイヤーです（ファイルとしてのDESIGN.md）。次の段階では、AIエージェントがライブラリに「ネイティブに」アクセスできるようにする統合が登場します。

Refero MCP（公式）。 これはhttps://api.refero.design/mcpにあるサーバーAPIで、Claude Codeはベアラートークンを使って接続します。するとエージェントは、実際のプロダクトから抽出された150,000以上の画面と6,000以上のユーザーフローを利用できます。スキルを使ってインストールできます。

npx skills add https://github.com/referodesign/refero_skill --skill refero-design

インストール後、Claudeは各セッションの開始時に必須の最初のステップとして「デザインリサーチ」を実行します。どのビジュアル上の選択がタスクに適しているかを調べ、必要に応じて、選んだ参考例に結びつく3つの方向性を提案します。2026年6月23日時点で、refero_skillリポジトリは67コミット、135スターです。積極的に開発が進められている新しいプロダクトです。

説明されている実践では、単純な方法を使います。サイトを手動で開き、DESIGN.mdをコピーしてファイルに入れます。デザインシステムの利用が日常的になった場合にMCPが役立ちます。たとえば、複数のクライアントプロジェクトを管理し、毎日ビジュアルの基準を切り替える場合です。Claude CodeにMCPサーバーを接続する詳しい方法は、NotebookLMとMCPのガイドをご覧ください。

ワークフローを壊す4つの間違いとは？#

説明されているデザインコンテキストの活用経験では、この4つの間違いがよく起きます。どれも無害に思えますが、それぞれ標準的なTailwindテンプレートに戻る結果になります。

間違い1.「モダンにして」というプロンプト。 これは最もよくある間違いです。Claude Codeを開き、「モダンでプレミアムな見た目のSaaSサイトを作って」と入力します。すると、暗い背景に紫のアクセントが付いたページができます。学習データでは、「モダン」という言葉は同じテンプレートから作られた2022～2024年のランディングページと相関しています。DESIGN.mdの正確なパラメーターがなければ、「モダン」は「平均的」を意味します。

間違い2. DESIGN.mdをチャットにメッセージとして貼り付ける。 DESIGN.mdをClaude Codeのチャットウィンドウにコピーして、「これがスタイルです。使ってください」と伝えることがあります。これはセッションが終わるまでは機能します。新しいセッションを開くか（または別のタスクに切り替えて/clearを実行すると）、コンテキストは失われます。スタイルを保持したいなら、ファイルをリポジトリに入れ、CLAUDE.mdでインポートする必要があります。CLAUDE.mdが永続的なコンテキストの要である理由については、Claudeのメモリに関するガイドをご覧ください。

間違い3.「好きだから」だけで選ぶ。 広いAppleのマーケティング画面を、30件の物件が必要な不動産ダッシュボードへそのまま写すと合わない場合があります。しかしApple由来の書体、色、階層は使えます。タスクに合わせて間隔と行密度を調整し、対象の画面サイズで実際に見える情報量を確認してください。ブランドだけでなく、具体的な参考の密度、トーン、利用者で選びましょう。

間違い4. プロンプト自体でDESIGN.mdに言及しない。 DESIGN.mdがリポジトリにあり、CLAUDE.md経由でインポートされ、エージェントから見えていても、プロンプトで「ウェブサイトを作って」と指示すると、Claudeはファイルに明示的に触れず標準的な手法をとることがあります。デザインに関するプロンプトには、次の一文が便利です：「docs/DESIGN.mdの色、フォント、余白を厳密に使ってください。独自の値を作らず、ファイルにある値を使ってください。」これにより、エージェントがDESIGN.mdを迂回せずに使うようになります。

正確なトークンとは、16進数コード、pt単位のフォントサイズ、DESIGN.mdに記載された余白の単位です。自然言語とは、「モダン」「プレミアム」「すっきり」「Appleのように」といった言葉です。正確なトークンは機能します。自由形式の言葉は機能しません。

次に何をすればよい？#

基本のワークフローはこれで整いました。Claude Code ＋ ReferoのDESIGN.md ＋ 4つのステップ ＝ テンプレート風ではないウェブサイトです。これでニーズの70%をカバーできます。残りの30%は、より高い精度、より速い作業、または検証が必要なケースです。

基本を習得した後に進める3つの方向です。

1. Frontend Design Skill。 Claude Code向けの公式スキルで、ビジュアルのフィードバックを追加します。エージェントがPuppeteerで組み立てたページのスクリーンショットを撮り、「目」（ビジョンモデル）で確認し、DESIGN.mdと比較して、修正案を自ら提案します。これは「プロンプト → コード → スクリーンショット → 批評 → プロンプト」という自動ループです。複雑なページで、一度の反復ではうまく仕上げられないときに役立ちます。

2. 本番モードでのRefero MCP。 3～5個のプロジェクトを並行して管理すると、それぞれに手動でDESIGN.mdを追加するのは面倒になります。Refero MCPは、プロジェクトの説明から適したスタイルを3つ見つけ、選択肢として提示できます。新しいプロジェクトの開始にかかる時間を30分から3分に短縮できます。

3. コンテキストエンジニアリングとの組み合わせ。 DESIGN.mdはコンテキストを構成する成果物の一つです。通常は、これに加えてARCHITECTURE.md（プロジェクト構造）、BRAND.md（語り口）、business/audience.md（対象ユーザー）があります。これらはすべてCLAUDE.mdにインポートされます。Claudeがページを作る際、ビジュアル、対象ユーザー、プロダクト構造を考慮します。これは本質的にコンテキストエンジニアリング、つまりリクエストの前にエージェントへ何を与えるかを体系的に設計する作業です。

実践資料：Ailootドキュメント。

実践資料：Ailootドキュメント。

その他の資料とツール：Ailoot。