あらゆるウェブサイトのデザインをコピーAI構築仕様書に変換。
Paste a URL and we copy any website design into a 6,000語のエンジニアリング仕様書. Drop it into Claude Code, Codex, Cursor, or Gemini and get 最初のプロンプトで90%完成.
公開されているサイトならどれでも — https:// がなければ追加します。Enterキーを押して生成します。
無料アカウント — スペック1回分が含まれ、カード不要、お一人様1アカウントまで。
例を試す：
すでに使用しているあらゆるAIコードツールで動作します。
近日公開予定
スクリーンショットはAIにJPEGと祈りを与えるだけです。フォントを幻覚させ、間隔をでっち上げ、間違ったコンポーネントライブラリを選択します。私たちは実際のデータを提供します。
ロックインされ、手探り状態
Bolt、Lovable、v0はあなたを彼らのエディターに閉じ込め、スクリーンショットでは表示できないすべてを幻覚させます。1つの良い仕様書があれば防げたはずのものを修正するために3時間を費やします。
- アニメーションは消滅。スクリーンショットは静止画です。
- フォントは推測。通常はsystem-uiになります。
- 色は目測。HSLのずれ、不正確な不透明度。
- レスポンシブレイアウトはでっち上げ。通常は間違っています。
- コンポーネントライブラリ：LLMが好きなもの。
- 技術スタックは不明。出力はスタイルなしのdivです。
- スクロール効果、ホバー状態、インタラクション：失われます。
- 曖昧なプロンプト入力、曖昧なコード出力。
ポータブル。正確。あなたのもの。
プレーンなMarkdown。すでに利用しているあらゆるAIツールに貼り付けるだけです。ライブページをクロールし、DOMを解析し、スクロール状態をレンダリングし、CSSグラフを抽出し、AIが推測する必要のない十分なシグナルを持つ仕様書を生成します。
- cubic-bezier曲線、期間、遅延 — すべてマッピングされます。
- 正確なフォントファミリー、ウェイト、サイズ、行の高さ。
- 16進数で正確な色、グラデーションストップ、CSS変数。
- すべてのブレークポイント、カラムの折りたたみ、フォントステップ。
- shadcn / Radix / MUI / Tailwindをフィンガープリントします。
- Next.js, Astro, Vite, Motion, GSAPを検出します。
- スクロールトリガーとホバー状態を文書化します。
- AIが実際に従うことができる6,000語以上の仕様書。
あなたのAIは、与えられたコンテキストの質に依存します。スクリーンショットではなく、仕様書を与えましょう。
DevToolsでの深掘り不要。カラーピッキング不要。パディング値のコンソールログ不要。サイトを6つの抽出パスに通し、45秒以内に真のソースをお届けします。
ライブサイトを取得
ヘッドレスChromiumが実際のページをレンダリングします — JSが評価され、ウェブフォントが読み込まれ、スクロール状態がキャプチャされ、ネットワーク呼び出しがログに記録されます。古いスクリーンショットやソースビューからの推測はありません。
DOMの真実を抽出
すべての要素の計算済みCSSを読み取ります — 正確な16進数カラー、フォントファミリー、行の高さ、パディング、ボーダーラディウス、シャドウ。さらに、AIがテキストを幻覚させるのではなく再現できるように、生のコピーも抽出します。
2パスの視覚分析
最先端のビジョンモデルがスクリーンショットを読み取ります。パス1ではレイアウト、階層、コンポーネント構造をマッピングします。パス2ではアニメーション、ホバー状態、スクロールトリガーモーションを検出します。
スタックをフィンガープリント
DOMパターンとランタイムグローバルから、Next.js, Astro, Vite, Tailwind, shadcn/ui, Radix, Framer Motion, GSAPを検出します。出力は同じスタックをターゲットとするため、AIはネイティブな形状のコードを構築します。
仕様書を合成
DOMの発見 + 視覚的な発見 + スタックのフィンガープリントを統合し、デザインシステム、レイアウトグリッド、アニメーションタイミング、レスポンシブブレークポイント、ビルド順序を含む構造化された6,000語のエンジニアリング概要を生成します。
あらゆるAIツールに貼り付け
プレーンテキスト出力 — Claude Code, Cursor, Codex, Windsurf, v0, Bolt, Lovable, ChatGPTで動作します。ベンダーロックインなし。解約しても仕様書は永久にあなたのものです。
実行ごとに構造化された6,000語以上のブループリントが生成されます。Claude Code、Cursor、またはCodexに貼り付けるだけで、幻覚的な近似ではなく、動作する実装が得られます。
# CLONE SPECIFICATION # source · linear.app ## TECH STACK DETECTED framework Next.js 14 (App Router) styling Tailwind CSS + CSS vars components Custom primitives + Radix animation Framer Motion font loader next/font · "Inter Tight" ## DESIGN TOKENS → colors --background #08090A --foreground #F7F8F8 --accent #5E6AD2 --muted #858699 --border rgba(255,255,255,0.08) ## TYPOGRAPHY font-family "Inter Tight", -apple-system scale 12 / 14 / 16 / 20 / 28 / 40 / 64 line-height 1.1 headings · 1.5 body tracking -0.022em headings ## LAYOUT ARCHITECTURE hero 12-col grid · 1200px max · centered nav sticky · backdrop-blur(24px) · 64h section 96px vertical rhythm cards 4px radius · inset 1px 0 rgba(...) ## ANIMATION SPECS hero.enter opacity 0→1, y 20→0, 600ms ease-out scroll.reveal IntersectionObserver · margin -80px hover.default scale(1.02) · 250ms cubic-bezier(.2,.8,.2,1) ## RESPONSIVE ≤ 640px single column · 16px padding ≤ 1024px 2-col grid · 24px padding ≥ 1024px 3-col grid · 48px padding ## BUILD INSTRUCTIONS Build in Next.js 14 (App Router). Use Tailwind with
技術スタック
ヘッダー、スクリプト署名、DOMパターンから検出。Next.js / Astro / Vite / Remix — 公開されている場合はバージョンも。
デザインシステム
16進数、CSSカスタムプロパティ、スペーシングスケール、フォントメトリクス、ボーダーラディウス、シャドウ定義 — 重要なすべての変数。
挙動
イージング曲線、スクロールトリガー、ホバートランジション、ブレークポイント切り替え。スクリーンショットでは捉えられないデザインの40%。
洗練されたビルドと粗いコピーを分けるシグナル — イージング曲線、計算済みトークン、実際のコンポーネントライブラリ。これらを画像からではなく、ライブページから抽出します。
レイアウトとスペーシングの抽出
スクリーンショットからの推測ではなく、ライブDOMから計算されたボックスモデル、グリッド定義、ギャップ値、パディング、視覚的階層を読み取ります。
正確な色とタイポグラフィ
16進数、グラデーションストップ、CSSカスタムプロパティ、フォントファミリー、ウェイト、サイズ、計算された行の高さなどをレンダリングツリーから直接抽出します。
コンポーネントライブラリの検出
shadcn/ui, Radix, MUI, Headless UI, Tailwindのパターンをフィンガープリント — AIがどのプリミティブを使用すべきかを仕様書が伝えます。
アニメーション曲線とトリガー
イージング関数、期間、スクロール連動エフェクト、ホバートランジションをキャプチャし、AIが実装できるMotion/GSAP仕様として記述します。
フルスタックのフィンガープリント
Next.js, Vite, Astro, Remix, 分析スクリプト、CDN署名、サードパーティ統合を検出します。ヘッダーで公開されている場合は正確なバージョンも。
レスポンシブブレークポイントマップ
すべてのブレークポイント、flex/gridの切り替え、カラムの折りたたみ、フォントサイズステップを文書化 — モバイルレイアウトが仕様書で後回しにされないようにします。
侵害ではなく、インスピレーション。
CopyDesign.aiは学習およびプロトタイピングツールです。デザインパターンを理解し、個々のコンポーネントを抽出し、独自のオリジナル作業を加速するために使用してください。 悪意のある使用はサポートしません — ブランドのなりすまし、フィッシングページ、商標権や著作権の侵害は行いません。ロゴ、名前、コピーを交換してください。あなた自身のものにしてください。
私たちが仕様書を作成します。あなたのAIが構築します。
プレーンなMarkdown出力。Bolt, Lovable, v0, Cursor, Claude Code, Codexで動作 — あなた次第です。
ツールロックインは一切なし。
仕様書はプレーンテキストです。今日Claude Codeに、明日Codexに、来週Geminiに貼り付けてください。
$1.99。1つの仕様書。サブスクリプション不要。
契約する前に試してください。1回限りの購入、即時出力。
最初のプロンプトで90%完成。正直に。
ピクセルパーフェクトは約束しません。AIが推測しないための十分なシグナルを約束します。
曖昧な説明ではなく、6,000語の構造化されたシグナル。
技術スタック、デザインシステム、アニメーション仕様、レスポンシブロジック — すべてを一度に貼り付け。
URLがプロンプトです。スクリーンショットはもうやめましょう。
AIが解釈しなければならない画像ではなく、必要なデータを与えましょう。
技術を学び、オリジナルを構築する。
侵害ではなく、インスピレーション。私たちはパターンを抽出し、あなたはアイデアをもたらします。
1回無料で試せます。カード不要。出力がその価値を証明したときにアップグレードしてください — トライアルなし、返金なし。
無料
1クローン · 永久
スターター
12クローン / 月
プロ
30クローン / 月
質問、回答。
CopyDesign.aiができること、できないことについての率直な回答。
ログインウォールの背後にあるアプリでも動作しますか？
LinearやStripeのようなCSS-in-JSサイトも処理できますか？
WebGLやcanvasを多用するサイトはどうですか？
私のURLはどこかに保存されますか？
1つの「クローン」とは何を指しますか — 再実行には追加費用がかかりますか？
通常、クローンにはどのくらい時間がかかりますか？
スクリーンショットからモバイルアプリをクローンできますか？
出力はどのAIツールで動作しますか？
あなたのAIに仕様書を与えましょう。
目を細めて見るスクリーンショットではなく。
1つのURL。45秒以内。AIが実際に構築できる6,000語の仕様書。最初の1回は無料 — カード不要、待機リストなし。
カード不要 · いつでもキャンセル可能 · 45秒以内に出力