ガイド

サイトをリビルドするなら、まずデザインシステムを抽出

リビルド、リブランド、新しいフレームワークへの移行は、デザインシステムが知らないうちに失われるタイミングです。カラーは古いCSSの中に、タイプスケールは誰かの頭の中に、ボタンの状態は誰も開きたがらないコンポーネントの中にあります。

何かを変える前に、現在のサイトをDESIGN.mdとして抽出しましょう。新しいサイトのための、チームもコーディングエージェントも読める、文書化された基準が手に入ります。

リビルド、リブランド、移行を計画しているチーム向け。更新。

このガイドでわかること

  • リビルドの最初の1行より前にコミットした、現在のサイトのDESIGN.md。
  • ファイルが記録したものと、記録しなかったものの明確な把握。
  • 手で確認すべきことのチェックリスト：アセット、状態、モーション、ブレークポイント、ログインが必要なページ。
  • 完成後に新しいサイトと古いサイトを比較する方法。

これを行うタイミング

  • フレームワークの移行。見た目はそのままで、スタックだけが新しくなります。DESIGN.mdがあれば、コーディングエージェントは古いスタイルシートを読む代わりに、正確な値でコンポーネントを再構築できます。
  • リブランド。まず古いシステムを記録しておけば、どのカラー、フォント、角丸が変わり、どれが残るのかを正確に把握できます。
  • 引き継ぎ。新しいエージェンシーや新しいチームは、コードベースを案内してもらう代わりに、サイトの現在の見た目を記述した1つのファイルを受け取れます。

手順

  1. 何かを変える前に、公開中のサイトを抽出する

    Design Extractorのホームページに本番のURLを貼り付けて、Pro抽出を実行します。公開ページである必要があります。抽出は訪問者と同じようにページを読み込むため、localhostやログインが必要なページでは動作しません。

  2. 基準としてコミットする

    新しいリポジトリにDESIGN.mdとして保存し、リビルドを始める前にコミットします。これで、その日のサイトの見た目が記録されます。

  3. Known Gapsセクションを読む

    ファイルの末尾には、実行で記録できなかったものが一覧になっています。そこにある項目はすべて、手で確認すべきものです。

  4. DESIGN.mdに含められないものを確認する

    アセット、ログイン後の画面、モーション、そのほか下に挙げる項目です。進めながらファイルにメモを追加していきましょう。

  5. それを基準に構築する

    Claude CodeとCursorのガイドのとおりにコーディングエージェントにファイルを参照させ、新しい画面をひとつずつファイルと照らし合わせてレビューします。

Stripeでファイルが記録したもの

何が得られるかは、ギャラリーのStripeのDESIGN.mdをご覧ください。そのPro実行では、stripe.comの5ページをキャプチャしました：/nl, /nl/pricing, /nl/products, /nl/newsroom/news/stripe-openai-instant-checkout, /nl/contact/sales。ご自身のサイトで実行しても、同じ構造のファイルができます。

カラー21個のトークン、それぞれに役割付き
タイポグラフィSohneによる17個のスタイル
角丸10個のトークン
スペーシング62個のトークン
コンポーネントHTMLとCSSによる71個のレシピ：44個が実際のページとの照合に合格、27個はフラグ付きまたはチェック不可で、それぞれ理由付き
セクションOverview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts, Responsive Behavior, Iteration Guide, Known Gaps

記録できなかったと記載されているもの

ファイルは自らの限界を正直に記載しています。Known Gapsセクションの11項目のうち、最初の5項目です。

StripeのDESIGN.mdの末尾から、原文のまま引用しています。
## Known Gaps

- **Many recipes did not reproduce exactly.** `button-primary` (84% pixel match), `card` (78%), `card-2` (94%), `promo-banner` (77%) and `skip-link` (0%; it is visually hidden until focused) are approximations. So are several header and footer recipes (`header-landing`, `header-inner-2` timed out, `footer-landing`, `footer-inner`, `footer-inner-2`).
- **Some recipes could not be judged at all.** `stat` and `stat-2` were not verifiable, because page media covered most of the element.
- **Some elements were never visible.** `footer-landing`, `header-inner` and `logo-strip-item` were not visible when verification ran, so their values come from computed styles only.
- **No section rhythm was measured.** `sectionRhythm` is empty, so vertical spacing between page sections and the inner padding of large cards is described only qualitatively.
- **No `base` spacing step was published.** The evidence frequency (4px, 8px, 12px, 16px and 24px most common) suggests a 4px-derived grid, but it is not a verified token.

Stripeの公開Webサイトから抽出したもので、公式のブランドガイドラインではありません。StripeのDESIGN.mdをすべて読む

ご自身のファイルには、そのファイル独自のリストがあります。下のチェックのためのToDoリストとして扱ってください。

手で確認すべきこと

項目ファイルに含まれない可能性がある理由対応
ロゴ、アイコン、画像DESIGN.mdが記述するのはスタイルで、ファイルではありません。現在のコードベースから書き出し、新しいコードベースと一緒に保管します。
ログイン後の画面抽出で見えるのは公開ページだけです。より密度の高いテーブルやサイドバーなど、アプリがマーケティングサイトとどう違うかを書き出します。
状態ホバー時とフォーカス時は実行中に確認できた範囲で記録されますが、押下時、無効時、エラー時の状態は記録されないことがよくあります。フォームやボタンを操作して、足りない状態をメモします。
モーショントランジションやアニメーションは、せいぜい言葉で説明される程度です。現在のCSSから、デュレーションとイージングをメモします。
ブレークポイント実行でキャプチャするのは、デスクトップとモバイルの幅です。タブレットのレイアウトを確認し、カラム数が変わる位置をメモします。
サンプル外のテンプレートProがサンプリングするのは主要ページの約5ページです。ドキュメントや決済など、見た目が異なるページは個別に抽出します。

リビルドの後

新しいサイトが公開されたら、もう一度抽出して2つのファイルを比較します。変わっていないトークンは見た目が引き継がれたことを意味し、変わったトークンは計画どおりのリブランドか、修正すべきずれのどちらかです。

一般的なテキストの差分でも、変更されたhex値やサイズがわかります。Googleの@google/design.mdパッケージには、2つのバージョンをトークン単位で比較するdiffコマンドもあります。形式とそのツールについてはDESIGN.mdの解説をご覧ください。途中でファイルを手で編集した場合は、DESIGN.mdバリデーターでチェックしてください。

よくある質問

リビルドの前にデザインシステムを抽出する：よくある質問

試す前によく寄せられる質問への簡潔な回答です。

いいえ。DESIGN.mdはスタイルを記述するテキストファイルです。カラー、タイポグラフィ、スペーシング、角丸、HTMLとCSSによるコンポーネントのレシピが含まれます。ロゴ、アイコン、イラスト、写真は現在のコードベースやデザインファイルから書き出し、DESIGN.mdと一緒に保管してください。

いいえ。抽出は訪問者と同じようにURLからページを読み込むため、ログインが必要なページ、localhost上のページ、プライベートネットワーク上のページには対応していません。公開サイトを抽出し、ログイン後の画面がどう違うかを書き留めておいてください。

Proはサイトの主要ページを約5ページサンプリングし、見つけた内容を1つのDESIGN.mdにまとめます。ドキュメントページや決済ページなど、重要なテンプレートが含まれていない場合は、そのページのURLも抽出して、2つのファイルを比較してください。

新しいサイトが公開されたら抽出し、2つのファイルを比較します。Googleの@google/design.mdパッケージには、DESIGN.mdの2つのバージョンをトークン単位で比較するdiffコマンドがあり、一般的なテキストの差分でも変更されたhex値やサイズがわかります。

変更する前にサイトを記録する

本番のURLを貼り付けてください。Pro抽出は主要ページをサンプリングし、DESIGN.mdを1つ返します。

現在のサイトのDESIGN.mdを取得

関連ガイド

DESIGN.mdのガイドをすべて見る