一份規格。適用所有 AI 程式碼工具。無鎖定。

複製任何網站設計 轉換為 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%.

TailwindMotionshadcn/uiThree.jsGSAPWebGLReactNext.js

任何上線網站 — 如果缺少 https://,我們會自動補上。按下 Enter 鍵即可產生。

免費帳號 — 包含 1 個規格,無需信用卡,每人限一個帳號。

試試範例:

捲動

適用於您已使用的所有 AI 程式碼工具。

Claude Code
Claude Design
Codex
Gemini
Cursor
Windsurf
Replit
ChatGPT
v0
Bolt
Copilot
Lovable
Claude Code
Claude Design
Codex
Gemini
Cursor
Windsurf
Replit
ChatGPT
v0
Bolt
Copilot
Lovable

即將公開發布

為什麼截圖會失敗


截圖只會給您的 AI 一張 jpeg 和一線希望。它會憑空想像字體、發明間距,並選擇錯誤的元件庫。我們提供的是實際資料。

截圖方法screenshot.png → llm → guesswork

鎖定工具,盲目飛行

Bolt、Lovable、v0 將您困在他們的編輯器中,並憑空想像截圖無法顯示的一切。您會花費三個小時來修復一份好的規格本可以避免的問題。

  • 動畫消失。截圖是靜止畫面。
  • 字體猜測。通常會是 system-ui。
  • 顏色憑肉眼判斷。HSL 漂移,錯誤的不透明度。
  • 響應式佈局憑空想像。通常是錯的。
  • 元件庫:LLM 隨意選擇。
  • 技術堆疊未知。輸出是未經樣式化的 divs。
  • 滾動效果、懸停狀態、互動:遺失。
  • 模糊的提示輸入,模糊的程式碼輸出。
CopyDesign.aiurl → spec → any AI tool

可攜式。精確。專屬於您。

純 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-prompt.md
# 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
複製。貼入您的 AI 工具。交付。

技術堆疊

從標頭、腳本簽名和 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 是一個學習和原型設計工具。使用它來理解設計模式、提取單個元件,並加速您自己的原創作品。 我們不支援惡意使用 — 不得冒充品牌、不得用於釣魚頁面、不得侵犯商標或版權。更換標誌、名稱、文案。讓它成為您的。

為什麼選擇 CopyDesign.ai

我們編寫規格。您的 AI 負責建置。

純 Markdown 輸出。適用於 Bolt、Lovable、v0、Cursor、Claude Code、Codex — 由您決定。

永不鎖定工具。

規格是純文字。今天貼入 Claude Code,明天貼入 Codex,下週貼入 Gemini。

$1.99。一份規格。無需訂閱。

承諾前先試用。一次性購買,立即輸出。

首次提示即可達成 90%。誠實。

我們不承諾像素級完美。我們承諾提供足夠的信號,讓您的 AI 無需猜測。

6,000 字的結構化信號,而非模糊描述。

技術堆疊、設計代幣、動畫規格、響應式邏輯 — 一次貼上全部搞定。

網址就是提示。停止截圖。

給您的 AI 所需的數據,而不是一張它必須解釋的圖片。

學習工藝。建置原創作品。

靈感啟發,而非侵權。我們提取模式 — 您帶來想法。

定價

免費試用一次,無需信用卡。當輸出結果不言而喻時再升級 — 無試用期,無退款。

免費

$0/月

1 次複製 · 永久

入門

$9.99/月

12 次複製 / 月

專業

$19.99/月

30 次複製 / 月

常見問題

問題,已解答。

關於 CopyDesign.ai 的功能與限制的直接解答。

它適用於登入牆後的應用程式嗎?
不。我們只擷取和截圖公開可見的網址。儀表板、管理面板和需要驗證的流程無法觸及。對於這些情況,請切換到圖片或行動模式 — 自行截圖並上傳。
它能處理像 Linear 或 Stripe 這樣使用 CSS-in-JS 的網站嗎?
是的。我們在頁面渲染後讀取計算出的樣式,而不是原始 JS。Stripe 和 Linear 是我們最高保真度的輸出之一 — CSS-in-JS 不是問題。
WebGL 或大量使用 canvas 的網站呢?
部分支援。靜態佈局、排版和 UI 介面可清晰提取。WebGL 著色器和 Three.js 場景會進行近似處理 — 我們會描述效果並提供一個佔位符實作。完整的著色器複製不在我們的路線圖上。
我的網址會儲存起來嗎?
您的網址會儲存在您的複製歷史記錄中,可在您的儀表板中查看。我們不會出售或分享它。分析期間捕獲的截圖在規格生成後即被丟棄。請參閱隱私政策以了解完整資訊。
什麼算作一次「複製」 — 重複運行會額外收費嗎?
每次點擊「生成」都會花費一個點數,包括重複運行相同的網址。結果不會在會話之間緩存,因此重複運行會產生一份全新的規格並消耗一個點數。
典型的複製需要多長時間?
網址模式:20-45 秒。圖片和行動截圖模式:10-20 秒(無擷取步驟)。影片模式:60-90 秒,取決於檔案大小。大量 JS 的頁面需要更長時間,因為我們等待完全渲染。
我可以從截圖複製行動應用程式嗎?
是的 — 這就是行動應用程式模式。上傳任何 iOS 或 Android 應用程式最多 10 張截圖,即可獲得一份完整的規格,包含 React Native 和 SwiftUI 元件指導。更多螢幕截圖意味著更完整的輸出。
輸出結果適用於哪些 AI 工具?
規格是純文字。將其貼入 Claude Code、Codex、Gemini、Cursor、Windsurf、Replit、v0、Bolt 或 ChatGPT。它預設格式為 Next.js + Tailwind,但足夠易讀,可適應任何技術堆疊。

給您的 AI 一份規格。
而非一張需要瞇眼查看的截圖。

一個網址。45 秒內。一份您的 AI 實際可以建置的 6,000 字規格。首次免費 — 無需信用卡,無需等待。

查看定價

無需信用卡 · 隨時取消 · 45 秒內輸出