ガイド

Claude CodeとCursorに、Webサイトに合ったUIを作らせる

コーディングエージェントに「すっきりした設定ページ」を頼むと、ありきたりなものができあがります。気に入ったサイトから取ったDESIGN.mdを渡せば、推測ではなく、そのサイトの実際のカラー、タイプスケール、角丸、コンポーネントのルールで作ってくれます。

このガイドでは、ギャラリーにあるLinearのファイルを例に、Claude CodeとCursorでの一連の流れを紹介します。

AIコーディングエージェントで開発する開発者向け。更新。

このガイドでわかること

  • 気に入ったサイトのDESIGN.md。エージェントが読めるよう、リポジトリに保存します。
  • Claude Code用のCLAUDE.mdの短い参照と、Cursor用のプロジェクトルール。どのUIタスクもこのファイルから始まります。
  • トークンを名指しするプロンプト。エージェントは近い値を推測するのではなく、正確な値を使います。
  • エージェントがずれた箇所を見つけるための、手早いレビューの手順。

スクリーンショットよりDESIGN.mdが優れている理由

スクリーンショットでは、エージェントはピクセルから推測するしかありません。雰囲気はおおむね合っても、値は外れます。近いけれど違う青、数ピクセルずれた角丸、似て見えるから選ばれたフォント。新しい画面のたびに推測し直すため、アプリは少しずつずれていきます。

DESIGN.mdなら正確な値を渡せます。ファイルはGoogleのDESIGN.md仕様に沿っており、冒頭のYAMLのフロントマターにトークン（hexカラー、フォントファミリーとサイズ、角丸、コンポーネント）が入り、その下のMarkdownでそれぞれをどこに使うかを説明します。初めての方はDESIGN.mdとは何かをご覧ください。

手順

  1. 作ろうとしているものに近いインターフェースのサイトを選ぶ

    大きなヒーローのあるランディングページより、密度が近いプロダクト画面のほうがうまくいきます。ダッシュボードを作るなら、ダッシュボードのあるプロダクトを選びましょう。まずDESIGN.mdギャラリーを確認してください。ファイルがすでにあるかもしれません。

  2. DESIGN.mdを入手する

    ギャラリーページからコピーするか、Design ExtractorのホームページにURLを貼り付けてPro抽出を実行します。Proはサイトの主要ページをサンプリングし、実行には少なくとも1分かかります。

  3. リポジトリのルートにDESIGN.mdとして保存する

    README.mdやAGENTS.mdと並べて置き、コミットしてください。どのブランチでも、チームメンバーのどのエージェントでも、同じファイルを読むようになります。

  4. エージェントに参照させる

    Claude CodeならCLAUDE.mdに、Cursorならプロジェクトルールに短い参照を追加します。設定は下にあります。

  5. ファイルの用語でUIを頼む

    プロンプトでトークンやコンポーネント（primary、body-md、ボタンのレシピ）を名指しし、見つからない値は作り出さずに一覧で示すよう頼みます。

  6. 結果をファイルと照らし合わせてレビューする

    変更を受け入れる前に、カラー、フォント、角丸、状態をDESIGN.mdと照らし合わせて確認します。

実例：Linear

ギャラリーのLinearのDESIGN.mdは、5ページをキャプチャしたPro実行でlinear.appから抽出したものです。17個のカラートークン、16個のテキストスタイル、12個の角丸が含まれています。これがエージェントの作業の拠り所になります。

カラー

タイポグラフィ

hero-displayDesign is intelligence made visibleInter Variable72px / 510 / 1
display-lgDesign is intelligence made visibleInter Variable64px / 510 / 1
display-mdDesign is intelligence made visibleInter Variable48px / 510 / 1
heading-lgDesign is intelligence made visibleInter Variable32px / 590 / 1.15
title-mdDesign is intelligence made visibleInter Variable20px / 590 / 1.35
body-lgDesign is intelligence made visibleInter Variable17px / 400 / 1.6

シェイプ

xs · 2px
sm · 4px
sm-2 · 4.4625px
md · 5px
md-2 · 6px
lg · 8px
lg-2 · 9px
xl · 12px

DESIGN.mdからレンダリングした、Linearの最初の12色、6個のテキストスタイル、8個の角丸です。スウォッチをクリックするとhex値をコピーできます。

ファイルの冒頭（抜粋）：17色中8色、16個のテキストスタイル中2個、12個の角丸中4個。エージェントがコピーするのは、この正確な値です。
---
name: Linear
colors:
  primary: "#5E6AD2"
  canvas: "#08090A"
  surface: "#121414"
  surface-raised: "#1C1C1F"
  ink: "#F7F8F8"
  ink-secondary: "#D0D6E0"
  muted: "#8A8F98"
  subtle: "#62666D"
typography:
  hero-display:
    fontFamily: Inter Variable
    fontSize: 72px
    fontWeight: 510
    lineHeight: 1
    letterSpacing: -1.584px
  body-lg:
    fontFamily: Inter Variable
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: normal
rounded:
  xs: 2px
  sm: 4px
  sm-2: 4.4625px
  md: 5px
---

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

ファイルによる見た目の説明

トークンの下の文章が、それぞれの値をどこに使うかをエージェントに伝えます。冒頭はこうです。

Linear's marketing surface reads like the product itself: a near-black Void canvas (canvas, #08090A) with charcoal panels stacked a half-step lighter, fenced by 1px hairlines rather than shadows. The mood is engineering-grade and restrained. Realistic product UI mockups, a customer logo strip and Berkeley Mono micro-labels ("FIG 0.1") stand in for illustration. Nothing shouts; the page earns attention through precision.

ファイルがエージェントに与えるルール

Do's and Don'tsセクションは、見た目をルールに変えます。最初のいくつかを紹介します。

推奨

  • Reserve Linear Indigo (primary, #5E6AD2) for focus and interactive accents. Every measured focus state is a 1px solid #5E69D1 outline with a 2px offset.
  • Shape every button as a pill with rounded.full. button-ghost, button-ghost-2 and button-ghost-3 all measure 9999px.
  • Keep control heights on the observed ladder: button-ghost and button-ghost-2 at 32px, button-ghost-4 at 29px, button-ghost-3 at 24px, and sidebar-nav-item and the icon buttons at 28px.

非推奨

  • Don't use weights other than 400, 510 and 590, and never substitute a static 600 or 700 for heading-lg or title-md.
  • Don't add a third typeface. Inter Variable carries everything, and Berkeley Mono is limited to micro figure labels.
  • Don't use accent-blue, danger or success for marketing chrome; they belong inside product mockups.

コンポーネント

ファイルには、HTMLとCSSによる30個のコンポーネントのレシピがあります。そのうち13個は実際のページとの照合に合格しました。それ以外については、合格しなかった理由やチェックできなかった理由がファイルに記載されています。ファイル全体は約276,000文字で、その大半がレシピです。だからこそ、プロンプトに貼り付けるのではなく、エージェントに参照させるのです。

エージェントにファイルを参照させる

ほとんどのエージェントは、自分からDESIGN.mdを開きません。すでに読み込んでいる指示に数行加えれば解決します。Claude Codeでは、リポジトリのルートにあるCLAUDE.mdに次を追加します。

## Design
Follow DESIGN.md in the repository root for every UI change.
Use its color, typography, rounded and component tokens instead of inventing values.
Before you build a button, card or input, read its recipe in the Components section.

Cursorでは、プロジェクトルールを追加します。次の内容を.cursor/rules/design.mdcとして保存してください。alwaysApplyにより、プロジェクト内のすべてのリクエストで読み込まれます。

---
description: Follow DESIGN.md for every UI change
alwaysApply: true
---
Follow DESIGN.md in the repository root for every UI change.
Use its color, typography, rounded and component tokens instead of inventing values.
Before you build a button, card or input, read its recipe in the Components section.

ファイルを指示に貼り付けるのではなく、参照を使ってください。Pro版のDESIGN.mdには、サイトから選び出したすべてのコンポーネントのレシピが含まれているため長く、エージェントが必要とするのはUIの作業のときだけです。

トークンを使うプロンプト

ファイルとそのトークンを名指しし、推測する理由ではなく、逃げ道をエージェントに与えましょう。これらのプロンプトは、このガイドのためにLinearの実際のトークン名で書いたものです。タスクはご自身のものに置き換えてください。

Claude Code

Build a pricing page with three plan cards. Follow DESIGN.md:
- use primary (#5E6AD2) only where the file says it belongs
- set headings in hero-display and body copy in body-lg
- reuse the button-ghost recipe for the plan buttons, with its hover and focus states
- start the plan cards from the card recipe
List any value you could not find in DESIGN.md instead of inventing one.

Cursor

@DESIGN.md Restyle the settings form in src/app/settings to match this file.
Take colors, type and radii from the tokens and inputs and buttons from the component recipes.
Keep the existing layout and logic, and list any value you could not find in the file.

Cursorでは、@DESIGN.mdでファイルをチャットに添付できます。タスクが主に見た目に関わる場合、ルールに加えて役立ちます。

結果はどのような見た目になるべきでしょうか。おおよそ、このページがトークンから直接描いたこのカードのようになります。これは値が何をするかを示すもので、エージェントが作ったものではありません。

次のリリースを計画しよう

タスク、日付、決定事項をすべて1か所に。チームが予定どおりにリリースできます。

作り始める営業に相談
Linearのトークン（canvas #08090A、ink #F7F8F8、primary #5E6AD2、button-ghost.rounded 9999px）をもとに、このページが描いたイラストです。コーディングエージェントの出力ではありません。また、フォントはお使いのデバイスにある場合にのみ表示されます。

エージェントが作ったものをレビューする

  • カラー。差分からhex値を探します。どれもDESIGN.mdにあるはずです。新しい値があれば、たいていエージェントが推測したものです。
  • フォント。多くのブランドは、配布できない商用フォントを使っています。ファイルのTypographyセクションには、たいていオープンソースの代替フォントが記載されています。エージェントが適当なフォールバックではなく、その代替フォントを読み込んだことを確認してください。
  • 角丸とスペーシング。ボタンやカードには、どこでも8pxのようなデフォルトではなく、ファイルのroundedトークンを使うべきです。
  • 状態。ホバー時とフォーカス時のスタイルは、各コンポーネントのレシピに含まれています。Tabキーでページを移動して、フォーカスリングを確認してください。
  • フラグ付きのレシピ。ファイルでレシピにフラグが付いている場合、その形状は近似です。そのコンポーネントを実際のサイトと比べてください。

DESIGN.mdを手で編集した場合は、エージェントが再び読み込む前に、無料のDESIGN.mdバリデーターでチェックしてください。

よくある質問

Claude CodeとCursorでWebサイトに合わせる：よくある質問

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

いいえ。リポジトリのルートにDESIGN.mdとして一度保存し、Claude CodeならCLAUDE.mdから、Cursorならプロジェクトルールから参照してください。タスクがインターフェースに関わるとき、エージェントがそれを読み込みます。コンポーネントのレシピ付きのPro版DESIGN.mdは長いため、参照にしておくとプロンプトが短く済みます。

いいえ。それは目的ではありません。エージェントが受け取るのは、サイトのトークン（カラー、書体、角丸）、コンポーネントのレシピ、ルールです。レイアウト、コンテンツ、機能はあなたのもののままです。実際のサイトとの照合に合格しなかったレシピはファイル内でフラグ付きとして示されるため、近似として扱ってください。

はい。リポジトリのファイルを読めるエージェントなら、どれでもDESIGN.mdを使えます。AGENTS.mdや.github/copilot-instructions.mdなど、そのエージェントがすでに読んでいる指示から参照するか、プロンプトでファイル名を挙げてください。

はい。どのギャラリーページにも、コピーできる完全なDESIGN.mdがあります。ギャラリーのファイルは各ブランドの公開Webサイトから抽出したもので、公式のブランドガイドラインではありません。ギャラリーにないサイトは、ホームページにURLを貼り付けて抽出を実行してください。

気に入ったサイトのDESIGN.mdを取得

公開URLを貼り付けてください。Pro抽出はサイトの主要ページをサンプリングし、エージェントが読めるDESIGN.mdを返します。

あらゆるWebサイトからDESIGN.mdを取得

関連ガイド

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