WebサイトやLP（ランディングページ。商品やサービスの紹介用の1枚ペラのページ）を作るとき、一番大変なのはデザイン。「かっこいいサイトにしたいけど、何をどうすればいいかわからない」——これはデザイナーを雇えない個人開発者にとっての永遠の課題よ。
世の中には素晴らしいデザインのサイトがたくさんある。LinearやStripeのような洗練されたサイトを見て「こんな雰囲気のサイトが欲しい！」と思ったことはあるはず。
でも「参考にしたい」と思ってから「実際にコードで再現する」までには巨大な壁がある。色のコード（#3ea8ff のような16進数の色指定）を1つ1つ調べて、フォント（文字の書体）を特定して、余白を合わせて...この作業を手でやると膨大な時間がかかる。しかもデザインの知識がないと「なんか違う」が延々と続く。
デザインクローナーは、この壁をAIが自動で壊してくれるスキル（Claude Codeに追加できる専用の能力パック）よ。これがなければ、デザインセンスのない人はゼロからデザインを考えるか、高いお金を払ってデザイナーに頼むしかなかった。
Claude Code（AIプログラミングアシスタント）に「デザインクローナー」という新しいスキルを開発・追加した。参考サイトのURLやスクリーンショット（画面の写真）を渡すだけで、そのデザインを分析して新しいサイトをゼロからコードで作ってくれるようになったわ。
「Linearみたいなダークでミニマルなサイト作って」
→ AIがLinearのサイトを自動で訪問して色やフォントを分析し、同じ雰囲気のサイトをゼロからコードで生成してくれる
「このスクショと同じデザインにして」
→ スクリーンショットを貼るだけで、画面の見た目を読み取ってコードに変換してくれる
「かっこいいLPの参考がほしいんだけど」
→ 世界中のイケてるサイトを集めたギャラリーサイト（デザイン見本市のようなサイト）を用途別に案内してくれる
デザインクローナーは、プロのデザイナーがやる作業を5段階に分解して自動化してるの。料理でいうと「お手本の料理を食べる→味の成分を分析する→自分でゼロから調理する→味見で比較する」みたいな流れ。ただし実際には、AIがサイトの色・フォント・レイアウト（配置）を数値として正確に特定し、それをコードに変換する処理よ。
landings.dev がおすすめ、みたいに。#08090a という真っ黒に近い色」「見出しのフォントはInterという書体の太さ600」「セクション間の余白は80ピクセル」のように。ここが雑だと「なんか微妙に違う」になってしまう。これ、大事なポイント。デザインクローナーは「丸パクリ」じゃなくて「デザインのエッセンスを参考にする」ためのツール。ちゃんと法的な線引きがスキルに組み込まれてるの。
| OK（合法） | NG（やっちゃダメ） |
|---|---|
| レイアウトの構成パターン（ナビの配置やセクションの並び順） | ロゴ・アイコン・イラスト・写真のコピー |
| 配色の傾向・カラーパレットのトーン | テキスト（文章）のコピー |
| 余白のバランス・グリッド構造 | ソースコード（プログラム）のコピペ |
| 複数サイトの要素ミックス（最も安全） | 特定ブランドの完全模倣 |
つまり「間取りや配色を参考にして新しい家を建てる」のはOKだけど、「看板ごと持ってくる」のはNG。デザインクローナーは写真やテキストは自動的にプレースホルダー（仮のダミー）に置き換えるし、ロゴもコピーしないように設計されてるわ。さらに「A社のヘッダー + B社のカード + C社のフッター」のように複数サイトのミックスを推奨してるから、1つのサイトの完全模倣にならない。
メシテロ（ドSなAIが食事を命令する食事管理アプリ）のLP作成で実戦投入済み。ギャラリーサイトから参考デザインを選ぶところからスタートして、ダーク系のイケてるLPを生成した。
また、スキルの精度を測るために、Resend（メール送信サービス）のサイトを題材にデザイントークン抽出のベンチマークテスト（性能評価）も実施。有料フォント（Domaine Display, ABC Favorit）の検出や、Radix UIというUIライブラリ（画面パーツの部品集）のカラースケール特定にも成功してるわ。
スキルって何？ — Claude Code に追加できる「専門能力パック」のこと。料理でいうと「イタリアン」「中華」のような得意分野を増やせる仕組み。デザインクローナーは「既存サイトのデザインを参考にして再実装する」という専門能力を追加するスキルよ。
なぜ「コピー」じゃなくて「クローン」なの？ — 元のソースコード（プログラムの中身）はまったく使わないから。デザイントークンというDNA（色・フォント・余白の数値）だけを読み取って、コードはゼロから新しく書く。生物のクローンと同じ発想ね。DNA情報だけ取り出して、体はゼロから作る。
見送ったこと — 現時点ではアニメーション（動きの演出）の自動クローンは対象外にしてるわ。色やフォントと違って、アニメーションは「何を動かすか」より「なぜ動かすか」の設計意図が重要で、単純コピーすると逆に安っぽくなることが多いから。
A. 「一括ダウンロード」に近いけど、全部じゃなくて厳選して取ってくる方式よ。具体的にはWebFetch（URLを指定してWebページの中身を取得する機能）を使って、まずトップページのHTMLを1回取得する。このHTMLの中に「このサイトはどのCSSファイルを読み込んでいるか」のリスト（<link rel="stylesheet">）が書いてあるから、その中からサイト固有のメインCSSファイルを2〜3本だけ選んで追加で取得する。合計で最大5回までというコスト制限が設けられてるの。Tailwind CDNやRadix UIみたいな汎用フレームワーク（どのサイトでも共通で使われる部品集）のCSSはわざわざ取得しない——中身が既知だから。つまり「全ソースコードをまるごとダウンロード」ではなく、「必要な設計図だけピンポイントで取ってくる」イメージね。Playwright（ブラウザを自動操作するツール）はスクリーンショット撮影にだけ使っていて、CSS取得には使わないわ。
A. いいえ、自動ピクセル比較ループではない。Phase 5（品質チェック）では、AIが参考サイトと完成サイトを「視覚的に」見比べて差異を判断する方式よ。AIは画像を「見る」ことができるから（マルチモーダル＝テキストも画像も理解できるAI）、「ここの色が微妙に違う」「余白が狭い」みたいなことを判断できる。ただし、Excelみたいにピクセル単位で重ねて完全一致を自動チェックし続けるわけじゃない。あくまで「目視レベルの確認」を1回やって、明らかな差異があれば修正する、という流れ。完全一致を追求するとキリがないし、そもそもデザインクローナーの目的は「100%コピー」じゃなくて「エッセンスの再現」だから、ある程度のところで品質OKとするのよ。