設計稿截圖轉前端代碼提示詞（先拆佈局結構與設計規範，再寫代碼，最後逐項對照還原度）
拿到設計稿截圖或一張參考網頁截圖，想快速做成前端頁面時用：上載圖片給支持識圖的模型，讓它先分析佈局結構、提取顏色字號間距等設計規範，確認後再生成響應式代碼，並標出它看不清、需要你確認的細節。
通用大模型 對話模型通用
我上載了一張設計稿截圖，請把它實現為前端頁面。你是一名對像素和細節很敏感的前端工程師，請分步進行，不要一上來就寫代碼。 - 技術棧：[技術棧]（例：React + Tailwind、Vue + 普通 CSS、純 HTML） - 頁面用途：[如 SaaS 產品落地頁首屏] - 需要適配的螢幕：[如桌面端為主，同時適配手機] - 可以使用的資源：[如圖標庫名稱、品牌色色值、字體] 第一步：分析（輸出後停下等我確認） 1. 佈局結構：把頁面從上到下劃分為區塊，說明每個區塊的佈局方式（如左右兩欄、三列卡片網格、居中單列），以及區塊內部的元素層級。 2. 設計規範提取：主色、輔助色、文字色、背景色（給出估計的色值）；標題、正文、說明文字的字號與字重；常用間距的規律（是否接近 4 或 8 的倍數）；圓角、陰影、邊框。 3. 不確定項：截圖中看不清或無法判斷的地方（如精確的色值、文字內容、圖片資源、懸停效果、手機端如何排列），列成問題。 第二步：編碼（我確認後進行） 1. 先把設計規範定義成變量或主題配置，再寫組件，組件中引用變量而不是到處寫死數值。 2. 使用語義化標籤；圖片設定替代文本與尺寸；按鈕和連結區分正確。 3. 響應式：說明各斷點下佈局如何變化。 4. 圖片和插畫用佔位圖並註明尺寸，圖標使用我指定的圖標庫。 5. 文字內容照截圖填寫，看不清的用明顯的佔位文字。 第三步：自查 對照截圖列出還原度檢查表：區塊 | 已還原 | 差異 | 原因（如缺少資源、需要確認）。
高亮處換成你自己的內容：[技術棧]、[如 SaaS 產品落地頁首屏]、[如桌面端為主，同時適配手機]、[如圖標庫名稱、品牌色色值、字體]
ChatGPT Plus 充值
已被複製 0 次
使用說明
怎麼填變量：這條提示詞需要配合上載圖片使用，要選支持圖片輸入的模型。[可以使用的資源] 裏給出品牌色和字體，生成的結果會準確得多，否則 AI 只能從截圖估計色值，難免有偏差。
常見坑：
- 直接讓 AI「照圖寫代碼」，生成的結構常常是一堆絕對定位或寫死的像素值，換個螢幕就亂了。先分析佈局結構，再寫代碼，質素明顯更好。
- 截圖壓縮後顏色會失真，AI 估計的色值只能作為參考，最終以設計規範或設計工具中的標註為準。
- 截圖看不出交互狀態（懸停、點擊、加載、空數據），需要另外補充說明。
追問技巧：生成後把渲染效果截圖和原設計稿一起發給 AI，問「對比兩張圖，列出差異最大的 5 處並修改」，可以迭代幾輪逐步逼近。
示例輸出
示例，僅供參考（第一步節選）
佈局結構：
- 頂部導航：左側 Logo，中間 4 個選單項，右側「登入」文字按鈕和「免費試用」實心按鈕；
- 首屏：左右兩欄，左欄為大標題、副標題和兩個按鈕，右欄為產品介面截圖，帶淺色陰影；
- 客戶標誌欄：一行 6 個灰度 Logo，均勻分佈。
設計規範（估計值）：
| 項目 | 值 |
|---|---|
| 主色 | 約 #4F46E5（按鈕、連結） |
| 大標題 | 約 48px，粗體，行高約 1.2 |
| 區塊上下間距 | 約 96px |
| 卡片圓角 | 約 12px |
需要確認：
- 主色的準確色值？
- 手機端首屏右側的截圖是放在文字下方，還是隱藏？
- 「免費試用」按鈕的懸停顏色？
同款作品
用這條提示詞做出來的作品；原作者會因此獲得積分
還沒有同款，來做第一個。
0 條評論
還沒有評論，來搶沙發～