こんにちは、株式会社 divx 開発課・大阪ラボの松橋です。

2026/04/17 に発表された Claude Design を、公式想定ユースケースの外側で試した記録です。
「再利用可能な React UI コンポーネントライブラリを、AI だけでどこまで作れるか」をテーマに半日触り、レートリミット到達後は Claude Code に引き継いで仕上げました。
本記事では Claude Design と Claude Code をどう役割分担させたか を軸に、レートリミットの実態、ハンドオフの段取り、階層設計が Design 段階ですでに出力されていたという発見、ピクセル単位の指示への順守性の限界まで、半日 + α で見えた実装知見を順に整理していきます。

• Claude Design など、AI の新機能を業務でどう使えるか探している方
• React をフロントで使っているエンジニアの方
• デザインの素養はないが、UI を自分で形にしてみたい方
• AI を組み合わせた開発ワークフローに興味がある方

Claude Design が公式に挙げているユースケースは、おおむね以下の 5 つです。

• インタラクティブなプロトタイプ: 動く Web サイトやアプリの試作。
• プレゼン資料(スライド): デザイン済みのスライドデッキ出力。
• ワンペーパー・マーケティング資産: 企画書、チラシ、LP。
• コードへの変換: 完成したデザインを実行可能コードに(Claude Code 連携)。
• デザインシステム連携: 自社コードベース・デザインファイルを読み、出力に統一感を持たせる。

いずれも「最終成果物」を作るユースケースです。今回はここから少し外れて、再利用可能な「部品の集合体」= UI コンポーネントライブラリそのものを AI に生成させられるか を検証しました。

具体的には「棒人間キャラクターを軸にした React UI ライブラリ」をテーマに、半日で設計から実装まで進めることを目標にしました。

起点として投げたプロンプトは以下です。

アニメーションって言っても、UIコンポーネントとして利用できるアニメーションを作成する。
まず基本基盤を作成してキャラクターという概念を設定する。
それをローディングであったり、ボードクリックであったり、常駐アニメーションであったりで
いくつか設定できるようにし、ReactやTSX、CSSで実装できるように、
コンポーネント利用できるように組み込んでいく。
まずはその基本仕様をすり合わせたい。

基本は頭があって胴体、足を広げている棒人間がモチーフ。
動作によって手が描写されるスタイル。

歩いたり、座ったり表情豊かであること。体育座りとかもできるといいよね。

基本キャラクター原案が完成したらそれを用いて、
ローディングアニメーションやボードに対するクリックアニメーションなどに実装を進めていきたい。

Claude Design は要件を整理した上で質問を返し、回答に応じて 3 案を並列に提示 してくれました。

採用したのは案 B です。続けて「座りモーション」など表現が難しいポーズを個別に詰めながら、ベースとなるキャラクター仕様を固めていきました。

ベースが固まった段階で「これをコンポーネント化したい」と伝えると、フェーズ別ロードマップまで提案 してくれました。

抽象的な指示から視覚と構造の両方が同時に、しかも複数案で返ってくるため、
デザインを作る過程そのものが段違いにサクサク進みます。
素養がないエンジニアにとって、通常なら詰まりがちな企画〜ビジュアル確定までの時間が、大きく圧縮されるのを実感しました。

実装を回していたところ、およそ半日で Claude Design のレートリミットに到達 しました。Research preview 期間中は通常レートとは別枠で管理されており、ロック解除まで 1 週間とのこと。長時間の反復作業を続けるには現実的でないと判断し、ここまでの成果物を Claude Code に引き継ぐ 判断をしました。

幸い Claude Design は成果物を ZIP エクスポート できます。FOLDERS / PAGES でファイルが整理されており、PDF / PPTX / Canva 連携 / standalone HTML / Claude Code への handoff など出力先を選べます。

ZIP を展開してみて驚いたのは、ファイル構成がすでに「描画核(StickFigure)」「配信核(Provider)」「個別コンポーネント群」という役割分担で整っていた ことです(型定義ファイルはこの時点ではまだなく、ポーズやムードの列挙は各コンポーネントの中に散在していました — これは後述の Claude Code 側で types.ts として顕在化します)。ただページを吐き出すだけでなく、再利用可能な階層をあらかじめ設計して出力してくれている — これは今回の大きな発見でした。

ここからは、Claude Design が実際に何を出力し、Claude Code 側でどこを補強したか を具体的に見ていきます。筆者はコードを直接書いていないため、以下は「AI が自由に任された結果、何を選んだか」の観察レポートとして読んでください。

Claude Design が出した Provider.jsx は 30 行 の素朴な実装でした。theme / wobble / reduceMotion の 3 軸を context で管理し、状態を data-atbow-theme 属性と CSS 変数経由で DOM に流す割り切りが入っています(context を通さなくても CSS ルール側から拾える設計)。

// Claude Design 出力 (Provider.jsx) — 抜粋
const AtbowProvider = ({
  theme: initialTheme = 'light',
  wobble: initialWobble = 1,
  reduceMotion: initialReduce = false,
  children,
}) => {
  const [theme, setTheme]         = React.useState(initialTheme);
  const [wobble, setWobble]       = React.useState(initialWobble);
  const [reduceMotion, setReduce] = React.useState(initialReduce);

  React.useEffect(() => {
    const root = document.documentElement;
    root.setAttribute('data-atbow-theme', theme);
    root.style.setProperty('--atbow-wobble-amount', String(wobble));
    root.setAttribute('data-atbow-reduce-motion', reduceMotion ? '1' : '0');
  }, [theme, wobble, reduceMotion]);

  const value = { theme, wobble, reduceMotion, setTheme, setWobble, setReduce };
  return <AtbowContext.Provider value={value}>{children}</AtbowContext.Provider>;
};

Claude Code は TSX 化と同時に、この骨格に 3 点を補強し、約 100 行まで育てています。

• OS の prefers-reduced-motion を初期値に反映(アクセシビリティ補強)
• notice / emitNotice を追加 — キャラがボタンクリックなどに反応するためのイベントパイプライン(Design 段階では未着手)
• AtbowContextValue / AtbowProviderProps など型を明示

// Claude Code 補強 (Provider.tsx) — reduceMotion の OS 追従
const [reduceMotion, setReduce] = useState<boolean>(() => {
  if (initialReduce !== undefined) return initialReduce;
  if (typeof window !== "undefined" && window.matchMedia) {
    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  }
  return false;
});

// Claude Code 補強 (Provider.tsx) — notice パイプライン
const [notice, setNotice] = useState<AtbowNoticeEvent | null>(null);
const emitNotice = useCallback(
  (e: Omit<AtbowNoticeEvent, "id">) => {
    setNotice({ ...e, id: Date.now() + Math.random() });
  },
  [],
);

notice / emitNotice は「壁打ちで合意した仕様を Claude Code に具体化させた」典型例です。Design 段階では思想として存在していなかった相互作用の配線が、Provider に素直に載りました。

Design 出力の JSX には Pose や Mood の型定義ファイルは存在しません。かわりに、列挙は各コンポーネントの switch-case や object リテラル の中に散らばっていました。

// Claude Design 出力 (StickFigureV2.jsx) — mood は objectリテラルの key として暗黙に列挙
const auraMap = {
  happy: "var(--aura-happy)",
  sad: "var(--aura-sad)",
  sleepy: "var(--aura-sleep)",
  angry: "var(--aura-angry)",
  love: "var(--aura-love)",
  think: "var(--aura-think)",
  cheer: "var(--aura-cheer)",
  none: "transparent",
};
// pose は switch-case で 13 分岐 (case "crouch" / "sit" / "sleep" / ...)

Claude Code は、これらを吸い出して types.ts 1 ファイルに集約しました。

// Claude Code 補強 (types.ts) — 散在していた列挙を顕在化
export type Pose =
  | "idle" | "walk" | "run" | "sit" | "crouch" | "jump"
  | "cheer" | "sad" | "clap" | "point" | "think"
  | "wave" | "sleep" | "enter" | "exit";

export type Mood =
  | "happy" | "sad" | "sleepy" | "angry"
  | "love" | "think" | "cheer" | "none";

export type Direction = "left" | "right";

/** キャラ相互作用用: コンポーネントが発火する「注目」イベント */
export interface AtbowNoticeEvent {
  id: number;
  source?: string;
  x: number;
  y: number;
}

types.ts には他にも ButtonVariant / AvatarStatus / MascotPosition などといった個別コンポーネント側の語彙も集約されており、最終的に 12 の union / interface が並ぶ形になりました。

この集約によって IDE 補完と型エラー検出が効くようになり、ライブラリとして扱いやすい形になりました。

まとめると、Claude Code 側の役割は TSX 化 / 型の顕在化 / 相互作用の配線追加 の 3 点でした。

こうして TSX 化を経た最終形を、依存関係で描くとこうなります。

【層3】 コンポーネント群 (合成)
        層2 を取り込んで画面を構成する個別の UI 部品
        (フィードバック系 / アクション系 / 入力系 など)

              ▲ 依存

【層2A】StickFigure (描画核)     【層2B】Provider (配信核)   ← 並列 (互いに依存なし)
        棒人間を SVG で描画             theme / reduceMotion /
        pose / mood / size /            注目イベントを
        direction を props で受ける     context で配る

              ▲ 依存

【層1】 types.ts (語彙核)
        Pose / Mood / Direction / AtbowNoticeEvent など

層2A と層2B は 互いに依存せず並列で、どちらも層1の型定義だけを使います。この積み方だと、「画面で動くもの(層3)」から「概念(層1)」に向かって依存が一方向に流れるため、見通しが良く、import して使うライブラリとして自然に成立します。

なお Provider は実行時にはアプリ全体を包むラッパーとして振る舞いますが、これは依存関係とは別の話です(ランタイムでは Provider が外側、その内側にコンポーネント群、さらに奥で StickFigure が描画されます)。

振り返ると、今回は 人間がゴリゴリ書き直したり追加で詰めたりする場面が、想像よりずっと少なかった です。ダークモード対応、境界の防御、アクセシビリティ対応、相互作用の仕込み — いずれも「こうしたい」と伝えれば、AI との 壁打ち のなかで形になっていきました。

唯一気になったのは、細かいキャラクターデザインの指示に対する順守性 です。

• 「腕の角度を少しだけ内側に」「座ったときの頭の傾きをもう少し」のようなピクセル単位の指定は、一度で反映されないことがありました。
• 一方で「全体的にもう少しふっくら」「もっと小さく軽やかに」といった 大づかみな方向修正は、素直に反映 されます。

簡易な指示ならサクサク形になり、ピクセル単位の細部の詰めだけは もう少し成熟を待ちたい、というのが率直な印象です。それ以外は AI との壁打ち前提で大半が進みました。

ダークモード対応、reduceMotion への追従、showcase ページの整備まで進めて完成としました。

得意領域:

• 視覚要素の高速な「たたき台」生成、複数案の並列提示。
• 抽象指示から段階的な設計案(ロードマップやフェーズ分け)を返してくれる。
• 成果物を ZIP エクスポートでき、後工程にそのまま持ち込める。

今回ぶつかった制約:

• Research preview のレートリミットが厳しく、長時間の反復作業には向きません。
• ピクセル単位の細部デザイン指示 への順守性は、現時点ではまだ発展途上。大づかみな方向修正は得意ですが、細かい微調整は一度で決まらないことがあります。

「Design で発散させ、Code で収束させる」 という二段構えが、現時点で最も効率の良いやり方だと感じました。デザインの素養がなくても、半日 + α でキャラ駆動 UI ライブラリの土台が組めたのは、この分担のおかげです。

Claude Design は 公式ユースケースの外側 ── 今回で言えば UI コンポーネントライブラリの生成 ── でも十分に機能しました。レートリミットこそ厳しいものの、Claude Code との二段構え に切り替えることで、半日 + α のスパンで成果物にたどり着けています。

特に驚いたのは、階層分けされたコード構造が Claude Design の段階ですでに出力されていた ことでした。Claude Code 側が担ったのは TSX 化や細部の補強が中心で、人間の関与は「壁打ち」でほぼ済んだ のが率直な実感です。唯一、ピクセル単位の細部デザイン指示 に対する順守性には、まだ AI 側に伸びしろを感じました。

デザインの素養がないエンジニアでも、ここまで走れる現在地はなかなか心強いと感じています。新機能を業務で評価・導入する際の、ひとつの事例として受け取っていただければ嬉しいです。

※ 本記事内のスクリーンショットは Anthropic 社の Claude Design / Claude Code の画面を使用しています。