# Claude CodeとRefero DESIGN.mdで作るテンプレート風ではないウェブサイト > Refero Stylesのデザインコンテキスト：DESIGN.mdの構造、ビジュアルシステムの選び方、CLAUDE.mdへのインポート、ページ作成の4つのステップ、よくある間違い。 Source: https://ailoot.ai/blog/ja/claude-code-refero-design-md/ Canonical: https://ailoot.ai/blog/ja/claude-code-refero-design-md/ Language: ja Publisher: Ailoot (https://ailoot.ai/) Translation: guide-205 Revision: sha256-f81d408391550b40d32f102a1409c0bc66d927a7a149b728fb3a7b8d8c1963bf
重要なポイント Claude Codeが「すぐに」作るウェブサイトは、どれも同じように見えます。暗い背景、紫のグラデーション、サンセリフフォント、デフォルトのshadcnカード。以下では、Apple、Linear、Stripe、ElevenLabsの既製のDESIGN.md（ライブラリには2,000以上のシステムがあります）を取得して、プロジェクトに入れ、Claudeにそのスタイルで書かせる方法を紹介します。完成したサイトは、もうAIテンプレートのようには見えません。
プロジェクトやモデルの活用に関する実践資料：[Ailootドキュメント](https://ailoot.ai/docs/)。 ## Claude CodeのウェブサイトがTailwindテンプレートのように見えるのはなぜ？
重要なポイント デザインシステムがなければ、Claude Codeは学習データから平均的なインターフェースを描きます。その学習データとは、Tailwind、shadcn/ui、そして何千ものそっくりなランディングページであふれるインターネット全体です。色、フォント、余白に関する明示的な入力コンテキストがなければ、エージェントは「すべてのテンプレートの算術平均」を出力します。
説明されている1月の例では、コールドセールス用ダイヤラーの小さなサイドプロジェクトが作られていました。空のリポジトリで、Claude Codeにホームページの作成を依頼しました。結果はありきたりなものでした。暗い`slate-950`の背景、`purple-500`のアクセント、太字のサンセリフ見出し、その下に同じ影を付けたカードが3つ。ChatGPTの初回リリース、Lovableの初回リリース、v0の初回リリースと同じレイアウトです。「モダン」「プレミアム」「ほかとは違う」と付け加えるプロンプト編集を5回行っても、何も変わりませんでした。ページは依然として、Tailwind UI Templatesのセットから出てきたように見えました。 つまり、Claudeは美しいものの作り方を「知らない」のではありません。大多数の人が何をするかを知っていて、その多数派を再現するのです。平均化されていない結果を得るには、使う色、フォント、余白、標準とするコンポーネントについて、エージェントに具体的な制約を与える必要があります。 ここで、デザインシステムがコンテキストとして役立ちます。「美しくして」ではなく、「この具体的なスタイルで作って。パラメーターはこれです」と伝えます。 Refero Stylesは、実際のプロダクトから抽出したパラメーターを含む`DESIGN.md`ファイルという既製の成果物によって、その差を埋めます。 ## Refero Stylesとは？
重要なポイント Refero Stylesは、実際のウェブサイトから抽出され、`DESIGN.md`ファイルとしてまとめられた2,000以上のデザインシステムのライブラリです。各システムはブランドを表しています。Apple、Stripe、Linear、Notion、Vercel、Airbnb、ElevenLabs、Cursorなどです。styles.refero.designにアクセスしてブランドを選び、そのMarkdownファイルをコピーして、Claude Code、Cursor、Codex、v0、Lovableのコンテキストとしてプロジェクトに追加します。
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には何が含まれる？
重要なポイント 一つのファイルに、デザインシステムの基本的なレイヤーがすべて含まれます。16進数で示すカラーパレット（ダークモードとライトモード）、タイポグラフィ（フォント、サイズの段階、ウェイト、行の高さ）、余白のルール（8pxグリッドなどのリズム）、コンポーネントの説明（ボタン、カード、フォーム）、モーションのルール（アニメーション、イージング）、そして「ブランドボイス」（メッセージのトーン）です。ファイルはMarkdownで100～400行です。
Referoチームは、design-md-templateページでファイルの構造を次のように説明しています。

プロダクトのトーンとデザイン原則から始め、色、タイポグラフィ、余白、コンポーネント、レイアウト、モーション、アクセシビリティ、そして使ってはいけないもののルールを定義します。

— Refero Stylesチーム、https://styles.refero.design/design-md/design-md-template
ファイルの構造は、通常次のようになります。 | セクション | 内容 | エージェントに必要な理由 | |----|----|----| | **プロダクトのトーン** | インターフェースの語り口を説明する2～3文 | マイクロコピーの方向性を定める | | **デザイン原則** | 「読みやすさを犠牲にしないミニマリズム」などの4～6個のルール | 同じくらい適切な選択肢の間で、エージェントが選ぶ際の指針になる | | **色** | 名前付きの16進数パレット（primary、secondary、accent、surface、text）＋ダーク／ライトモード | エージェントは色を作り出さず、正確なコードを使う | | **タイポグラフィ** | フォント（名前とフォールバックのスタック）、サイズの段階（10～12段階）、ウェイト（regular、medium、bold）、行の高さ | サイト全体が単一のInter 16pxになるのを防ぐ | | **余白** | 基本単位（4px、8px、16px）と、その倍数のスケール | パディングやマージンが「ばらつく」のを防ぐ | | **コンポーネント** | ボタン、カード、フォーム、ナビゲーションのルール。サイズ、状態、バリエーション | エージェントが新しいバリエーションを作り出さない | | **レイアウト** | グリッド、ブレークポイント、コンテナーの最大幅 | サイト内のすべてのページが一つのグリッド上に構築される | | **モーション** | 時間、イージング、許可するトランジション | アニメーションが控えめになり、Bootstrap-2010風にならない | | **声とトーン** | ボタン、見出し、エラーの文言例 | サイトのコピーがブランドらしくなる | | **使用禁止** | 禁止事項の一覧（「`box-shadow: 0 10px 30px`を使わない」など） | エージェントがテンプレート的な解決策に戻るのを防ぐ | 作成者たちは、AIデザインの問題の80%を解決する原則も強調しています。

好みを表す形容詞より、具体的なコンテキストのほうが効果的です。

— Refero Stylesチーム、https://styles.refero.design/ai-agents/design-md-examples
つまり、16進数コード`#5E6AD2`は「Linearのように」より強い指定です。正確な値`font-size: 13px / line-height: 18px`は「コンパクトなテキスト」より強い指定です。解釈に委ねるより、具体的に示すほうが優れています。 リポジトリ内の`DESIGN.md`は、チーム向けの画像ではありません。これはプロジェクトの永続的なコンテキストを構成する要素です。AIがリクエストごとに読む、構造化された知識です。 ## 4つのステップでLinear風のウェブサイトを作る方法
重要なポイント 作業の流れは簡単です。Claude Codeをインストールし、styles.refero.designを開いてブランド（たとえばLinear）を選び、DESIGN.mdを`docs/DESIGN.md`または`.claude/DESIGN.md`にコピーし、このファイルについての一行を`CLAUDE.md`に加えて、Claudeにページの作成を依頼します。実際には、空のプロジェクトから動作するホームページまで30分です。
新しいウェブサイトを作り始める手順は、この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を開いてブランドを選ぶ にアクセスしてカタログを開きます。選択の主な基準は、見た目が「好きか」ではなく、プロダクトにどれほど合っているかです。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に共通する一つの指示ファイルのガイド](https://ailoot.ai/blog/ja/agents-md-claude-md-one-instruction-file/)をご覧ください。 4. ### 特定のページをプロンプトで指定する 「美しくして」ではなく、具体的に指示します：「コンテキスト内のDESIGN.mdを使って、SaaSのタスク管理プロダクトのホームページを作ってください。構成：見出しと小見出しのあるヒーロー、CTAボタンを2つ（primaryとsecondary）、その下にアイコン付きの機能紹介ブロックを3つ、続いてお客様の声のブロックを配置します。DESIGN.mdの色とタイポグラフィを厳密に使い、独自の値を作らないでください。」 4つ目のステップの後、Claudeがページを作ります。説明されている経験では、ホームページの作成には平均8～12分かかり、選んだブランドのスタイルに本当に近い見た目になります。ピクセル単位で完全に一致するわけではありませんが、同じフォント、同じパレット、同じ余白のリズム、ボタンにおける同じ細かな判断によって、見覚えのある美的スタイルになります。 Referoの作成者たちは、ai-agents/design-resourcesページで同じ三段階の原則をもう少し簡潔に説明しています。

タスクを選び、関連するリソースを開き、エージェントにコンテキストを与えます。DESIGN.mdをエージェントのコンテキストに入れ、プロダクトを説明し、具体的な画面を依頼します。

— Refero Stylesチーム、https://styles.refero.design/ai-agents/design-resources
この4ステップの手順は同じロジックに従い、Claude Codeのインストールと`CLAUDE.md`へのファイルのインポートという明示的なステップが加わっています。 ## プロダクトにはどのスタイルを選ぶべき？
重要なポイント ブランドではなく、情報密度とトーンで選びます。チーム向けSaaSツール（密度の高いUI、大量のデータ）—LinearまたはVercel。金融プロダクト（信頼性、精密さ）—Stripe、Mercury、Column。消費者向けプロダクト（温かさ、感情）—Duolingo、チーム向けのNotion、Airbnb。AI／開発者向けツール（ミニマリズム、ダークテーマ）—ElevenLabs、xAI、Modal。メンバー向けプロダクト（アクセシビリティ、読みやすさ）—Duolingo。迷ったら、あらゆる用途に安全に使える選択肢としてLinearを使います。
Referoの作成者たちは、ガイドの最初のステップでこのアドバイスを示しています。ブランド名だけでなく、情報密度、トーン、対象ユーザーに基づいて参考スタイルを選びましょう。 Apple由来の色、書体、階層、控えめな動きはSaaSダッシュボードにも使えますが、特定の製品紹介ページの広い余白は合わない場合があります。ブランド名で選ばず、具体的な画面を見てください。会計画面では、数値と操作を読みやすく保ちながら行高、間隔、情報密度を明示し、広いプレゼンテーションの配置をそのまま写さないことが大切です。 プロダクトの種類に応じた簡単な選び方です。 | プロダクトの種類 | 適したReferoスタイル | 共通する特徴 | |----|----|----| | チーム向けSaaSダッシュボード | Linear、Vercel、Notion、PostHog。コンパクトな配置に調整したApple由来のトークンも選択肢 | 読みやすい高密度UI、明確な階層、簡潔なタイポグラフィ | | 金融プロダクト | Stripe、Mercury、Column | 信頼感のあるパレット、明瞭なタイポグラフィ、数値用の等幅フォント | | AI／開発者向けツール | ElevenLabs、xAI、Modal、Anthropic | ダークテーマ、控えめなアクセント、明るい色を一つ使ったモノクロ配色 | | 消費者向けプロダクト | Duolingo、Airbnb、Notion | 温かみのあるパレット、表情豊かなイラスト、親しみやすい語り口 | | マーケティングサイト | Linear、Vercel、Stripe（ホームページ） | 大きな見出し、明確な階層、落ち着いた背景 | | ミニマルなポートフォリオ | Apple、Mercury、Modal | 最大限の余白、サンセリフ、控えめなアクセント | それでも迷うなら、Linearを選びましょう。最も汎用性の高い基盤です。中立的なパレット、読みやすいタイポグラフィ（Inter／Söhne）、控えめな余白を備えています。Linearを基にしたウェブサイトなら、10種類のプロダクトのうち9種類でプロフェッショナルに見えるでしょう。 ## AIエージェントのためにDESIGN.mdを永続的なコンテキストに入れる理由は？ {#なぜdesignmdをプロジェクトの永続的なコンテキストに入れるのか}
重要なポイント DESIGN.mdは一度きりの成果物ではありません。`CLAUDE.md`や`business/`フォルダーと同じように、プロジェクトの永続的なコンテキストの一部です。ファイルがリポジトリにあれば、すべてのClaudeセッション、チームメンバー、そして新しいAIエージェント（Codex、Cursor、Gemini CLI）が、同じビジュアルの基準を参照できます。知識を一度構造化し、その後ずっと活用できます。
説明されている実践では、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 MCPは`api.refero.design/mcp`にあるサーバーで、Claude Codeからチャットを通じて、実際のアプリの150,000以上の画面と6,000以上のユーザーフローにアクセスできます。Refero_skillはClaude Code向けの公式スキル（`npx skills add`）で、MCPをラップし、コードを書く前の必須の最初のステップとして「デザインリサーチ」を組み込みます。
Refero Stylesは基礎レイヤーです（ファイルとしてのDESIGN.md）。次の段階では、AIエージェントがライブラリに「ネイティブに」アクセスできるようにする統合が登場します。 **Refero MCP（公式）。** これは`https://api.refero.design/mcp`にあるサーバーAPIで、Claude Codeはベアラートークンを使って接続します。するとエージェントは、実際のプロダクトから抽出された150,000以上の画面と6,000以上のユーザーフローを利用できます。スキルを使ってインストールできます。 ```bash 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つの間違いとは？
重要なポイント 一つ目は、DESIGN.mdを添付せず「モダンに見えるように」とプロンプトすることです（エージェントは学習データの平均に戻ります）。二つ目は、DESIGN.mdをリポジトリに入れず、チャットのメッセージとして貼り付けることです（セッションをまたいでコンテキストが持続しません）。三つ目は、具体的な画面と密度ではなくブランドで選ぶことです（広いマーケティング用配置を会計画面へそのまま写す、など）。四つ目は、プロンプトでDESIGN.mdに明示的に言及しないことです（ファイルがコンテキスト内にあっても、エージェントは無視します）。
説明されているデザインコンテキストの活用経験では、この4つの間違いがよく起きます。どれも無害に思えますが、それぞれ標準的なTailwindテンプレートに戻る結果になります。 **間違い1.「モダンにして」というプロンプト。** これは最もよくある間違いです。Claude Codeを開き、「モダンでプレミアムな見た目のSaaSサイトを作って」と入力します。すると、暗い背景に紫のアクセントが付いたページができます。学習データでは、「モダン」という言葉は同じテンプレートから作られた2022～2024年のランディングページと相関しています。DESIGN.mdの正確なパラメーターがなければ、「モダン」は「平均的」を意味します。 **間違い2. DESIGN.mdをチャットにメッセージとして貼り付ける。** DESIGN.mdをClaude Codeのチャットウィンドウにコピーして、「これがスタイルです。使ってください」と伝えることがあります。これはセッションが終わるまでは機能します。新しいセッションを開くか（または別のタスクに切り替えて`/clear`を実行すると）、コンテキストは失われます。スタイルを保持したいなら、ファイルをリポジトリに入れ、`CLAUDE.md`でインポートする必要があります。`CLAUDE.md`が永続的なコンテキストの要である理由については、[Claudeのメモリに関するガイド](https://ailoot.ai/blog/ja/claude-memory-claude-md-auto-memory/)をご覧ください。 **間違い3.「好きだから」だけで選ぶ。** 広いAppleのマーケティング画面を、30件の物件が必要な不動産ダッシュボードへそのまま写すと合わない場合があります。しかしApple由来の書体、色、階層は使えます。タスクに合わせて間隔と行密度を調整し、対象の画面サイズで実際に見える情報量を確認してください。ブランドだけでなく、具体的な参考の密度、トーン、利用者で選びましょう。 **間違い4. プロンプト自体でDESIGN.mdに言及しない。** DESIGN.mdがリポジトリにあり、`CLAUDE.md`経由でインポートされ、エージェントから見えていても、プロンプトで「ウェブサイトを作って」と指示すると、Claudeはファイルに明示的に触れず標準的な手法をとることがあります。デザインに関するプロンプトには、次の一文が便利です：「docs/DESIGN.mdの色、フォント、余白を厳密に使ってください。独自の値を作らず、ファイルにある値を使ってください。」これにより、エージェントがDESIGN.mdを迂回せずに使うようになります。 正確なトークンとは、16進数コード、pt単位のフォントサイズ、DESIGN.mdに記載された余白の単位です。自然言語とは、「モダン」「プレミアム」「すっきり」「Appleのように」といった言葉です。正確なトークンは機能します。自由形式の言葉は機能しません。 ## 次に何をすればよい？
重要なポイント DESIGN.mdは、ビジュアルの基準を作る最初の要素であり、唯一の要素ではありません。さらに発展させる方向は3つあります。スクリーンショットを通じてビジュアルのフィードバックを得るClaude CodeのFrontend Design Skill、異なるスタイルを定期的に扱うためのRefero MCP、そしてDESIGN.mdをコンテキストエンジニアリングと組み合わせることです。エージェントが最初にビジュアルの基準を読み、次にページを作り、最後にスクリーンショットで自ら結果を確認するようにします。
基本のワークフローはこれで整いました。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がページを作る際、ビジュアル、対象ユーザー、プロダクト構造を考慮します。これは本質的に[コンテキストエンジニアリング](https://ailoot.ai/blog/ja/context-engineering/)、つまりリクエストの前にエージェントへ何を与えるかを体系的に設計する作業です。 実践資料：[Ailootドキュメント](https://ailoot.ai/docs/)。
### 出典 - [Refero Styles - ホーム](https://styles.refero.design/) - [Refero Styles - DESIGN.mdの例](https://styles.refero.design/ai-agents/design-md-examples) - [Refero Styles - design-resources](https://styles.refero.design/ai-agents/design-resources) - [Refero Skill（GitHub）](https://github.com/referodesign/refero_skill) - [Claude Code Docs - 公式ドキュメント](https://code.claude.com/docs/en/overview) - [Claude Codeクイックスタート - 公式インストール手順](https://code.claude.com/docs/en/quickstart)
実践資料：[Ailootドキュメント](https://ailoot.ai/docs/)。 その他の資料とツール：[Ailoot](https://ailoot.ai/)。 ## Claude CodeとRefero DESIGN.mdで作るテンプレート風ではないウェブサイト | Ailoot：よくある質問 ### Appleの参考スタイルは、情報量の多いSaaS画面にも使えますか？ タスクに合わせて調整すれば使えます。適切な色、書体、階層、控えめな動きを取り入れ、広い紹介ページをそのまま写さず、行高、間隔、情報密度を明示してください。 ### DESIGN.mdを保存しても新ページへ反映されない場合は？ リポジトリ内にあり、CLAUDE.mdから取り込み、依頼で名前を指定しているか確認します。実際の色、書体、余白の値を答えさせ、描画したページと参考を比較してください。 ## Ailoot · 企業とそのプロジェクト群 Ailootは、蓄積した運営経験、幅広い顧客基盤、安定したサービス、継続的なKPI管理を基盤としています。 企業とそのプロジェクト群：数百万の顧客、毎月数十億規模の売上。 Ailootはこの運営経験を、お客様の製品、エージェント、アプリケーション、自動化でAI機能を利用するためのAPIアクセスに活かしています。