複製任何網站設計 轉換為 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 個規格,無需信用卡,每人限一個帳號。
試試範例:
適用於您已使用的所有 AI 程式碼工具。
即將公開發布
截圖只會給您的 AI 一張 jpeg 和一線希望。它會憑空想像字體、發明間距,並選擇錯誤的元件庫。我們提供的是實際資料。
鎖定工具,盲目飛行
Bolt、Lovable、v0 將您困在他們的編輯器中,並憑空想像截圖無法顯示的一切。您會花費三個小時來修復一份好的規格本可以避免的問題。
- 動畫消失。截圖是靜止畫面。
- 字體猜測。通常會是 system-ui。
- 顏色憑肉眼判斷。HSL 漂移,錯誤的不透明度。
- 響應式佈局憑空想像。通常是錯的。
- 元件庫:LLM 隨意選擇。
- 技術堆疊未知。輸出是未經樣式化的 divs。
- 滾動效果、懸停狀態、互動:遺失。
- 模糊的提示輸入,模糊的程式碼輸出。
可攜式。精確。專屬於您。
純 Markdown 格式。將其貼到您已付費使用的任何 AI 工具中。我們爬取即時頁面、解析 DOM、渲染滾動狀態、提取 CSS 圖形,並生成一份具有足夠信號的規格,讓您的 AI 無需猜測。
- cubic-bezier curves、持續時間、延遲 — 全部映射。
- 精確的字體家族、字重、大小、行高。
- 精確到 Hex 值的顏色、漸變停止點、CSS vars。
- 每個斷點、欄位折疊、字體級距。
- 識別 shadcn / Radix / MUI / Tailwind。
- 偵測 Next.js、Astro、Vite、Motion、GSAP。
- 滾動觸發器和懸停狀態皆有文件記錄。
- 您的 AI 實際可遵循的 6,000+ 字規格。
您的 AI 表現取決於您提供的上下文。給它一份規格,而不是一張截圖。
無需深入 DevTools。無需選取顏色。無需在控制台記錄填充值。我們將網站進行六道提取工序,並在 45 秒內將真實來源交給您。
擷取即時網站
無頭 Chromium 渲染真實頁面 — JS 已評估、網頁字體已載入、滾動狀態已捕獲、網路呼叫已記錄。沒有過時的截圖,沒有原始碼視圖的猜測。
提取 DOM 真實數據
我們讀取每個元素的計算 CSS — 精確的 Hex 顏色、font-family、line-height、padding、border-radius、shadow。以及原始文案,讓 AI 複製文本而不是憑空想像。
兩階段視覺分析
前沿視覺模型讀取截圖。第一階段映射佈局、層次結構和元件結構。第二階段捕捉動畫、懸停狀態和滾動觸發的動作。
識別技術堆疊
我們從 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 — 若有公開版本則顯示。
設計代幣
Hex 值、CSS 自訂屬性、間距比例、字體度量、border-radius、陰影定義 — 每個重要的變數。
行為
easing curves、滾動觸發器、懸停過渡、斷點切換。截圖無法捕捉的 40% 設計。
將精緻建置與粗略複製區分開來的信號 — easing curves、計算出的代幣、實際的元件庫。我們從即時頁面而非圖片中提取這些數據。
佈局與間距提取
從即時 DOM 讀取計算出的盒模型、網格定義、間距值、填充和視覺層次結構 — 而非從截圖猜測。
精確顏色與字體
直接從渲染樹中提取 Hex 值、漸變停止點、CSS 自訂屬性、字體家族、字重、大小和計算出的行高。
元件庫偵測
識別 shadcn/ui、Radix、MUI、Headless UI 和 Tailwind 模式 — 因此規格會告訴您的 AI 應該使用哪些基本元素。
動畫曲線與觸發器
捕捉 easing functions、持續時間、滾動連結效果和懸停過渡 — 然後將它們寫成您的 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。一份規格。無需訂閱。
承諾前先試用。一次性購買,立即輸出。
首次提示即可達成 90%。誠實。
我們不承諾像素級完美。我們承諾提供足夠的信號,讓您的 AI 無需猜測。
6,000 字的結構化信號,而非模糊描述。
技術堆疊、設計代幣、動畫規格、響應式邏輯 — 一次貼上全部搞定。
網址就是提示。停止截圖。
給您的 AI 所需的數據,而不是一張它必須解釋的圖片。
學習工藝。建置原創作品。
靈感啟發,而非侵權。我們提取模式 — 您帶來想法。
免費試用一次,無需信用卡。當輸出結果不言而喻時再升級 — 無試用期,無退款。
免費
1 次複製 · 永久
入門
12 次複製 / 月
專業
30 次複製 / 月
問題,已解答。
關於 CopyDesign.ai 的功能與限制的直接解答。
它適用於登入牆後的應用程式嗎?
它能處理像 Linear 或 Stripe 這樣使用 CSS-in-JS 的網站嗎?
WebGL 或大量使用 canvas 的網站呢?
我的網址會儲存起來嗎?
什麼算作一次「複製」 — 重複運行會額外收費嗎?
典型的複製需要多長時間?
我可以從截圖複製行動應用程式嗎?
輸出結果適用於哪些 AI 工具?
給您的 AI 一份規格。
而非一張需要瞇眼查看的截圖。
一個網址。45 秒內。一份您的 AI 實際可以建置的 6,000 字規格。首次免費 — 無需信用卡,無需等待。
無需信用卡 · 隨時取消 · 45 秒內輸出