既存のページがあれば、改善すべき点と守るべき点を具体的に定められます。VoltAgentのAwesome DESIGN.mdコレクションには、AIコーディングエージェントに提示できる公開サイトのテキスト形式の分析があります。本ガイドでは2026年10月14日のコミットにある1ファイルを、Claude Codeでの限定的な編集の視覚参考にします。変更後のコードと実際のページを自分で確認して初めて完了です。

BIG CHANGEは固定版リポジトリとClaude Codeの文書を確認しました。Claude Codeの実行、ページ編集、所要時間の計測、生成結果の確認は行っていません。そのツリーにはdesign-md/*/DESIGN.mdの直下に84ファイルあります。これはそのコミットの件数であり、恒久的なカタログ規模ではありません。

大きな変化

  • 何が変わったか： バージョンを固定した1つのデザイン分析を、編集権限のある1ページの明示的なコンテキストにできます。
  • なぜ重要か： 所有者は役立つレイアウトや余白の考え方を借りつつ、実際の内容、ブランド、動作に照らして結果を確認できます。
  • 注意点： 参考資料はコミュニティによる分析です。ブランドの詳細や内部指示の一部が誤っている、または自分のページに適さない場合があります。

始める前に

編集権限のあるページとリポジトリ、作業コピーまたはブランチ、ローカル表示の手段、利用可能なアカウントやプロバイダー経由でのClaude Codeへのアクセスが必要です。編集するページファイルと、プロジェクトで通常使う起動・確認方法を把握してください。対象読者、必須の文章とリンク、承認済みの色・フォント・ロゴ、今回解決する視覚上の問題1つを書き出します。所有者の判断を作業コピーのそばに置き、変更案の評価に使います。

顧客の非公開資料を渡す前に、アカウントのデータポリシーとツール権限を確認します。Claude Codeはアカウントの条件に従ってプロンプトとプロジェクト内容を処理します。プロジェクトがローカルでも、モデルのセッションまでローカル限定にはなりません。作業で公開される非公開の文章、素材、コードを共有してよいか確認してください。

1ページに1つの参考資料を使う

  1. まず固定版コレクションのREADMEを開きます。ページで定めた問題に役立つdesign-md/<name>/DESIGN.mdを1つ選び、使用前に全体を読みます。Notionの例は、レイアウト、文字、余白、コンポーネントの提案という形式を示しています。一方でボタンをカプセル形とも長方形とも説明しています。この矛盾は、全行をClaude Codeに従わせるのではなく、自分で判断すべき理由になります。
  2. 選んだ固定版のDESIGN.mdだけを作業プロジェクトへコピーします。配置例はdesign-reference/DESIGN.mdです。元のURL、パス、コミット3b605329240ce735b510037cca322f1831fdd7f8をそばに記録し、コピーにはリポジトリのMIT著作権・許諾表示を残します。Markdown資料自体にパッケージのインストールは不要です。ライセンスの対象はリポジトリの資料であり、掲載企業のロゴ、フォントファイル、画像、商標の使用権を与えるものではありません。
  3. 権限のあるプロジェクトでClaude Codeを開き、コピーしたファイルを明示的にコンテキストとして渡します。Anthropicはファイル参照と、別の仕組みであるプロジェクト指示ファイルを説明しています。単独のDESIGN.mdをフォルダーへ置いても、Claude Codeが読み込んだ証拠にはなりません。以下の角括弧内のページパスと所有者の規則を実値に置き換え、変更を受け入れる前に参考資料を読んだことを確認します。
Markdown
Read @design-reference/DESIGN.md as a visual reference. Edit only [path/to/owned-page] and the existing styles that page needs. Improve [one specific layout or hierarchy problem]. Keep the page's current audience, approved copy, links, brand colors, font and logo. Use only layout, hierarchy or spacing ideas that fit those rules. Do not copy the example site's name, assets or identity. Preserve working interactions and keyboard access. Show the proposed file changes and tell me how to render and check this page with this project's existing commands.
  1. 実行・承認する前に差分案を読みます。変更された各ファイル、文章、リンクを確認し、依頼していない依存関係、素材、別ページの編集は拒否します。プロジェクトで文書化済みの起動コマンドで表示し、PC幅とスマートフォン幅で開きます。エージェントの意図の説明ではなく、実際のページを確認してください。
  2. 表示を記録した要件と照合します。必要な文章とリンク、適切な見出し順序、文字・操作部品の十分なコントラスト、スマートフォンでの欠けや横スクロールがないことを確認します。変更対象のリンク、ボタン、メニュー、フォームへキーボードで移動し操作します。フォーカスやエラー表示も含め、変更された操作を試します。リビジョン、幅、確認内容、欠陥を記録し、そのページで確認を通過してから変更を受け入れます。

参考資料が無視されたらファイルを再度指定し、使った箇所を示すよう求めます。ブランド規則と衝突する指示は依頼から除き、該当コードを修正します。リンク、フォーカス移動、操作が壊れたら以前の動作に戻し、変更を小さくします。表示や結果確認ができなければ、確認できるまで承認しません。

このコレクションは他サイトを説明するコミュニティ資料で、管理者が現状のまま提供しています。Notionファイルには矛盾するボタン形状、文書で確認できないホバー動作、本ガイド未検証のlintコマンドがあります。その提案ではなくプロジェクト既存の確認方法を使ってください。Claude Codeの使用料や後のホスティング・素材費はアカウントとプロジェクト次第です。編集時間や完成品質はここでは立証していません。

別のAI支援ページ作成方法については、Gensparkプロトタイプのガイドでホスト済みプロトタイプの複製とエクスポートしたソースZIPの確認を説明しています。出発点となる成果物と完了条件が異なる作業です。

出典と参考資料

  • VoltAgentの固定版READMEは、コレクションと現状提供の公開サイト分析を説明しています。件数は固定版の再帰ツリーに基づき、将来版の件数の主張ではありません。
  • 固定版のNotion DESIGN.mdは形式と内部矛盾の例です。Notion承認の仕様でも、素材の使用権の根拠でもありません。
  • リポジトリのMITライセンスでは、コピーまたは重要部分に著作権・許諾表示を残す必要があります。
  • AnthropicのClaude Codeクイックスタート、ファイル参照ガイドおよびプロジェクト指示の文書が、アクセスと明示的コンテキストを説明します。今回の編集や、単独の参考資料の自動読み込みを検証するものではありません。
  • Anthropicの費用、データ使用および権限の文書は、アカウントごとの使用と制御を説明します。このガイドではセッション、請求書、生成ページをテストしていません。