Claude Design 由来のプロトタイプを本番化する — 単一ソース・CI・OGP自動生成の実装
Claude Design で作ったプロトタイプを Claude Code で本番運用に耐える形へ。生成物ランタイムを土台にする判断、ロジックを mixin で分離する構成、取引台帳を単一ソースにするデータ設計、GitHub Actions による自動更新と OGP 画像の実ブラウザ生成まで、実装込みで解説します。
Claude Design と Claude Code を行き来して作る — 発散と収束を分担する開発の流れ
デザインの大枠は Claude Design で、細部の作り込みは Claude Code で。デスクトップアプリへ統合されて往復しやすくなった2つを、発散と収束で役割分担する開発の進め方として整理します。Link Local code と Send to の橋渡しまで。
Claude Design の画面案を Claude Code にそのまま実装させる — ローカルコードベース連携で往復を畳む
6/17 の Claude Design 更新でローカルコードベース起点の動作が入りました。トークンを単一の正本にして、画面案を Claude Code へ受け渡し、実装まで一本の流れに畳む手順を、コピーして使えるコードと共にまとめます。
Claude Design に既存コードベースを読ませて画面案を作る — デザインと実装の往復を一人で畳む
6月17日の更新で Claude Design はローカルのコードベースを起点に動けるようになりました。既存コンポーネントを反映した画面案を作り、そのまま Claude Code へ渡すまでを、4サイトのUIを一人で手入れする個人開発の現場目線で設計します。
Claude Design と Figma Make の出力を並べて読む：UI 生成 AI で「ピクセル」が消えた後に残るもの
同じデザインシステムと PRD を Claude Design と Figma Make に読み込ませて出力を並べたとき、デザイナーの仕事の本質はどこに移るのか。個人開発と UI 設計を 12 年続けてきた立場から、二つの出力傾向を読み解きます。
Claude Design 使い方入門 — リサーチプレビューの始め方とプロンプトのコツ
Anthropicが公開したClaude Designリサーチプレビューの始め方を実務目線でまとめました。アクセス方法の確認から、通常のClaudeにデザインを頼む場合との違い、実際に試して効いたプロンプトの型、個人開発者にとって使えるシーンと不向きなシーンの見極めまで紹介します。
Claude Design → Claude Codeハンドオフ — デザインから本番実装までを一本化する
Claude DesignとClaude Codeを連結し、LP・ダッシュボード・ピッチ資料を本番実装まで仕上げるワークフローを検証しました。ハンドオフの内部仕様、本番に耐えるLP生成プロンプトの型、4回失敗したダッシュボード生成のパターン、受け入れ用スラッシュコマンド、5日間で測った数字を共有します。
Claude Designの全体像（ — Figma・Canvaと並ぶ選択肢になりうるのか
2026年4月17日に発表されたClaude Designの位置づけを、アプリ開発者の実務視点で整理します。既存デザインツールと何が違うのか、LPを1ショット生成して確かめた実力、誰にとって価値があるのか、FigmaやCanvaと併用する考え方、使い始める前に知っておきたい注意点まで扱います。