AI-translated from English; not yet reviewed by a fluent editor.

# Claude Codeで固定版DESIGN.mdを参考に1ページを編集する

> 固定版のDESIGN.mdを1つ選び、編集権限のあるページの変更をClaude Codeに依頼し、コードとPC・スマートフォンの表示を確認します。

By BIG CHANGE Editorial

Published: 2026-10-20T00:01:06.937Z
Updated: 2026-10-20T00:01:06.937Z
Canonical: https://bigchange.ai/blog/claude-code-pinned-design-reference-page-guide

![Conceptual charcoal illustration of one clipped design-reference sheet beside an unbranded display showing a simple webpage layout.](https://bigchange.ai/api/media/file/pinned-design-reference-one-page-hero-v1.png)
AI-generated conceptual illustration by BIG CHANGE; no Claude Code run, Notion or edited and tested page is depicted.

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

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

## 大きな変化

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

## 始める前に

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

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

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

1. まず[固定版コレクションのREADME](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md)を開きます。ページで定めた問題に役立つ`design-md/<name>/DESIGN.md`を1つ選び、使用前に全体を読みます。[Notionの例](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md)は、レイアウト、文字、余白、コンポーネントの提案という形式を示しています。一方でボタンをカプセル形とも長方形とも説明しています。この矛盾は、全行をClaude Codeに従わせるのではなく、自分で判断すべき理由になります。
2. 選んだ固定版の`DESIGN.md`だけを作業プロジェクトへコピーします。配置例は`design-reference/DESIGN.md`です。元のURL、パス、コミット`3b605329240ce735b510037cca322f1831fdd7f8`をそばに記録し、コピーにはリポジトリの[MIT著作権・許諾表示](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE)を残します。Markdown資料自体にパッケージのインストールは不要です。ライセンスの対象はリポジトリの資料であり、掲載企業のロゴ、フォントファイル、画像、商標の使用権を与えるものではありません。
3. 権限のあるプロジェクトでClaude Codeを開き、コピーしたファイルを明示的にコンテキストとして渡します。Anthropicは[ファイル参照](https://code.claude.com/docs/en/common-workflows)と、別の仕組みである[プロジェクト指示ファイル](https://code.claude.com/docs/en/memory)を説明しています。単独の`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.
```

4. 実行・承認する前に差分案を読みます。変更された各ファイル、文章、リンクを確認し、依頼していない依存関係、素材、別ページの編集は拒否します。プロジェクトで文書化済みの起動コマンドで表示し、PC幅とスマートフォン幅で開きます。エージェントの意図の説明ではなく、実際のページを確認してください。
5. 表示を記録した要件と照合します。必要な文章とリンク、適切な見出し順序、文字・操作部品の十分なコントラスト、スマートフォンでの欠けや横スクロールがないことを確認します。変更対象のリンク、ボタン、メニュー、フォームへキーボードで移動し操作します。フォーカスやエラー表示も含め、変更された操作を試します。リビジョン、幅、確認内容、欠陥を記録し、そのページで確認を通過してから変更を受け入れます。

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

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

別のAI支援ページ作成方法については、[Gensparkプロトタイプのガイド](https://bigchange.ai/blog/genspark-design-prototype-source-zip)でホスト済みプロトタイプの複製とエクスポートしたソースZIPの確認を説明しています。出発点となる成果物と完了条件が異なる作業です。

## 出典と参考資料

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

## Sources

- [Awesome DESIGN.md固定版README](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) — 不変のコミットにあるリポジトリの主要説明と単一ファイルのコピー方法。公開サイトの分析を現状提供すると説明しています。出力品質の表現は宣伝です。独立確認した当該コミットの完全なツリーには84個の直接のDESIGN.mdファイルがあり、この版に限る件数です。
- [固定コミットのNotion DESIGN.md例](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md) — レイアウト、余白、文字、コンポーネントの分析例。カプセル形と長方形のボタンについて矛盾し、検証済みのホバーや動きは立証せず、未検証のlintコマンドを勧めています。コミュニティ分析であり、Notion公式ブランド仕様や素材複製の許可ではありません。
- [Awesome DESIGN.mdのMITライセンス](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) — Copyright (c) 2026 VoltAgent。コピーまたは重要部分には著作権・許諾表示を残します。このライセンスは掲載サイトの商標、ロゴ、独自フォント、画像の権利を立証しません。
- [Claude Codeクイックスタート](https://code.claude.com/docs/en/quickstart) — プロジェクト、アカウントやプロバイダー、ログインの公式要件。読者自身のプロジェクトと適切な利用経路が必要です。BIG CHANGEはClaude Codeのセットアップや有料アカウントをテストしていません。
- [Claude Codeの一般的な作業手順](https://code.claude.com/docs/en/common-workflows) — 明示的な@fileコンテキストとプロジェクト作業の公式説明。設定と制限の範囲でコピーしたファイルを意図的に参照する方法を支えます。任意のDESIGN.mdの自動読み込みではありません。
- [Claude Codeのプロジェクトメモリ](https://code.claude.com/docs/en/memory) — プロジェクト指示ファイルと設定ごとの読み込みを説明します。リポジトリに単独DESIGN.mdがあるだけで読み込まれるとは示していません。このガイドは指示設定を変更しません。
- [Claude Codeの費用](https://code.claude.com/docs/en/costs) — アカウントごとの使用・請求の背景。Markdown参考資料はパッケージ依存を追加しませんが、このガイドはClaude Code作業の固定料金、無料枠、時間短縮を立証しません。
- [Claude Codeのデータ使用](https://code.claude.com/docs/en/data-usage) — アカウントごとの公式データ処理とローカル会話記録の動作。顧客の非公開コードや素材を渡す前に所有者はポリシーを確認します。全面的なローカル限定処理や学習用途を一律に主張していません。
- [Claude Codeの権限](https://code.claude.com/docs/en/permissions) — 公式のツール権限制御。プロンプトの指示だけではツールアクセスを付与・強制できません。提案された操作と実際の変更ファイルを読者が確認します。