為 UI 逆向產生提示
產生一份自包含的 PROMPT.md，可在 Figma 中一比一重建現有設計。「自包含」
= 所有資產皆已內嵌（可立即導入的 SVG、base64 圖塊）、確切代幣/間距、完整的佈局樹，以及
建置時的常見陷阱 — 如此一來，一個具備寫入能力 Figma MCP 的全新代理就能貼上並直接使用，無需任何外部檔案。
將專案保存在一個 reverse-prompts 中心資料夾（例如 ~/reverse-prompts/）中 — 每個 UI 都是一個獨立的子資料夾。
如果中心資料夾內有一個頂層的 README.md，請先閱讀它（它包含專案索引和累積的學習經驗），並在完成後將新的畫面註冊到該檔案中。
先決條件（如果缺少，請明確說明，不要靜默失敗）
- 要建置/測試（任何模式）：一個具備寫入能力的 Figma MCP — 一個能執行外掛程式碼
（
figma_execute/exportAsync）的 MCP，例如 figma-console。官方的 Figma 開發模式 MCP 是唯讀的。 - 要萃取：取決於來源 — Figma MCP（模式 A）、瀏覽器（模式 B）或僅使用視覺（模式 C）。
- 設計使用的字型必須安裝在目標 Figma 中，或註明替代字型。
方法
請依序執行以下步驟。步驟 1–3 產出最終交付物；步驟 4–5 進行驗證並歸檔。
1. 萃取 — 選擇符合來源的模式
無論哪種模式，目標都是相同的：佈局樹和確切代幣（含透明度的顏色、
圓角、字體系列/大小/粗細/間距、內邊距/間距），以及可立即導入的資產。不同之處在於有多少是
測量而來的，有多少是推斷的 — 請在提示的 ## Requires 和 NOTES.md 中誠實說明。
| 模式 | 來源 | 保真度 | 代幣 | 資產 |
|---|---|---|---|---|
| A. Figma | 一個節點/框架 | 1:1 | 精確（包含變數） | 透過 exportAsync 取得的真實向量 |
| B. 即時網址 | 已上架的網站/應用程式 | 接近 1:1 | 精確（計算後的 CSS） | 來自 DOM 的真實 SVG |
| C. 影像 | 螢幕截圖 / 平面 PNG | 近似值 | 取樣/估算 | 從圖示庫配對 |
A — Figma（最佳）。 對框架及其關鍵子框架進行 get_design_context + 螢幕截圖；記下節點
ID、佈局樹和確切代幣。讀取變數/樣式定義。透過讀取實際擁有效果和漸層填色的節點來捕捉它們（references/figma-plugin-api.md →「填色屬於誰？」）。
B — 即時網址（被低估）。 在瀏覽器中開啟它，然後讀取計算後的值 — 這幾乎與 Figma 一樣好，且無需檔案。
對關鍵元素使用 getComputedStyle 可獲得確切的顏色、字體系列/大小/粗細、內邊距、間距、圓角、陰影；
getBoundingClientRect 可提供真實的幾何數據。直接從 DOM 中提取內嵌的 SVG（outerHTML）— 這些是真實的向量，無需描圖。
截圖作為參考。只要設計存在於某個網址，就優先選擇此模式而非模式 C。
C — 影像 / 螢幕截圖（近似值 — 請說明）。 您仍然可以產出一個結構良好、接近的 重建成果，但必須坦承這不是 1:1：
- 顏色： 取樣像素（撰寫腳本進行滴管取色，而非用肉眼猜測）。純色填色可以可靠讀取； 漸層、透明度和抗鋸齒邊緣則為估計值。
- 幾何： 以一個已知錨點（一個 44px 的按鈕、一個 16/24px 的圖示、框架寬度）進行測量，並 推導出間距比例 — 真實 UI 通常對齊 4/8，所以請四捨五入到比例，而不是回報 13px。
- 字體： 用肉眼識別字體系列，並將其視為一個假設 — 在
## Requires中說明您的最佳猜測，並註明為推斷。 - 圖示： 請勿描圖。識別它們，並從圖示庫中提取真實向量 — 預設使用 Phosphor（請參閱
references/asset-extraction.md→「從圖示庫取得圖示」）。 大多數現代 UI 使用標準圖示集，因此這可以從像素中恢復近乎完美的資產。 - 品牌標誌： 獲取官方 SVG；切勿描圖。
- 任何從像素中確實無法得知的內容（隱藏狀態、確切效果參數）— 請省略並註明。
檢查實際的可見性，而不僅僅是 node.visible。 一個節點可能是 visible: true，但實際上
並未渲染，因為其祖先是 visible: false（例如，一個 actions 框架在一張卡片上被隱藏，但其徽章文字節點
仍為 visible: true）。如果您天真地遍歷文字/圖示，您將會萃取 — 接著渲染 — 設計隱藏的元素。
將有效可見性計算為節點及其每個祖先的 visible 屬性的 AND 運算，並跳過任何實際隱藏的內容。
與螢幕截圖進行交叉比對：如果螢幕截圖沒有顯示它，就不要建置它。（兩個「相同」元件的實例通常
僅在哪些子圖層被關閉上有所不同 — 請檢查每個實例，不要假設它們完全相同。）
2. 清理並萃取資產
將每個圖示/標誌/插圖取得為可立即導入的 SVG，然後進行簡化。詳細資訊和 exportAsync 回退方案
請參閱 references/asset-extraction.md — 在提取資產之前請先閱讀。簡而言之：將 CSS var() 替換為
硬編碼的十六進位色碼；將多部件圖示扁平化為單一的 20×20 <g transform> SVG；對重向量（地圖、插圖）使用
Douglas-Peucker 演算法 + 整數座標；僅在最後手段時將重複紋理柵格化為一個微小的拼接 PNG。
3. 編寫 PROMPT.md
結構：建置注意事項 → 設計代幣表格 → 佈局樹（自動佈局、尺寸模式、各區塊規格） → 建置順序 → 內嵌的資產庫。
內嵌每個資產，使提示成為單一貼上內容。將佈局撰寫為規格（框架、layoutMode、FILL/HUG/FIXED、itemSpacing、內邊距、每個元素的類型/顏色）—
而不是程式碼。明確註明計畫中的替代方案（例如字型替換），並告知目標代理
進行螢幕截圖比較和疊代。
讓 PROMPT 真正自包含 — 內嵌它所需的建置時常見陷阱。 接收者是一個全新的代理 + Figma MCP，它可能
沒有此技能，因此一個連結到 references/… 以獲取常見陷阱的 PROMPT.md，在單獨發送時會
失效 — 它們會掉入 100px 陷阱並錯誤地建置。在頂部附近包含一個簡短的 **「建置注意事項」**區塊，其中包含適用的少數建置時常見陷阱：
100px 預設高度修正、建置後設定大小、填滿以匹配兄弟元素（如果使用），以及任何 PATTERN/NOISE/發光注意事項 如果設計使用了其中一個。
references/ 中的萃取/exportAsync/Douglas-Peucker 材料
是給您（編寫代理）使用的 — 接收者不需要它們，因為資產在到達時已預先內嵌。
不要將整個常見陷阱列表傾倒到每個提示中；僅包含該設計會用到的部分。
每個 PROMPT 都以一個 ## 需要（您提供） 區段開頭 — 這是一份獨立的合約，也是接收者
讀到的第一件事（它們可能在沒有其他上下文的情況下執行提示）。列出：(1) 一個具備寫入能力的 Figma MCP（唯讀的開發模式 MCP 無法建置）；(2) 必須安裝在目標 Figma 中的字型（命名它們，註明替代字型）；(3) 提供的內容 — 可以是「無，所有資產都已內嵌在下方」，或任何提示無法攜帶的點陣圖。大型內容點陣圖（主要照片、插圖）確實
無法內嵌 — 一張 1 MB 的照片大約是 27 萬個代幣 — 所以請提前將其說明為提供的資產，而不是讓建置者在建置過程中發現一個佔位符。
誠實說明「1:1」涵蓋的範圍：佈局 + 向量資產可以精確再現；提供的照片和安裝的字型是先決條件，
而非文字能承載的內容。
4. 即時測試建置
透過 MCP 在 Figma 檔案中建置它，以證明提示有效。為了避免在建置呼叫中重新傳遞大型資產，
請將來源節點複製 — 圖示，尤其是任何大型點陣圖（主要照片、插圖），其位元組您絕不想傳送 — 到一個
新建立的佈局中。這測試了佈局邏輯（困難的部分），而無需重新傳送資產，而且複製的點陣圖/效果會自動帶入。
放置 — 將建置成果直接放在來源旁邊，而不是在隨機的遠處空間： 讀取來源框架的 x/y/width，
目標為 (source.x + source.width + ~150, source.y)，並且在放置之前檢查該區域是否沒有其他頂層框架（掃描頁面子節點，看是否有任何與目標矩形相交的；如果被佔用則向下/向右移動）。將其包裹在一個名稱清晰的 Section 中，但請注意區段會自動調整大小並重新排列 — 從框架的目標設定區段的位置，然後驗證
frame.absoluteBoundingBox 確實落實在來源旁邊（詳細資訊和配方請參閱 references/figma-plugin-api.md #12）。這確保每個複製品整齊地坐落在其原始檔旁邊，並且絕不會覆蓋現有作品。然後截取結果的螢幕截圖並與原始檔進行比較 — 仔細檢查，逐個區塊。在建置之前，必須閱讀 references/figma-plugin-api.md 中的 Plugin-API 常見陷阱 — 它們可以防止最常見的失敗（100px 高度陷阱、重疊、發光效果套用到錯誤元素）。
5. 記錄差異並註冊
撰寫一個 NOTES.md 記錄：來源節點 ID、畫面特定內容、任何與原始檔的已知差異（字型替換、橋接器無法寫入的效果、簡化級別），以及建置過程中出現的任何新常見陷阱。在中心資料夾的 README.md 中註冊該畫面。如果一個修正揭示了一個可重複使用的經驗（適用於任何 UI，而不僅僅是這個），則同時將其納入中心 README 的方法/常見陷阱 AND
references/figma-plugin-api.md 中 — 這完全就是目的：每次建置都讓下一次更乾淨。
專案結構
選擇最適合的輕量級結構 — 在出現第二個畫面之前，不要建立多畫面支架。
- 一次性畫面 → 平面資料夾：
<project>/ ├── PROMPT.md 自包含的交付物 ├── NOTES.md 差異與保真度說明 └── assets/ 來源資產（icons/ 等） - 多畫面產品 → 共享核心 + 各畫面資料夾：
<project>/ ├── README.md ├── design-system/ DESIGN-SYSTEM.md（代幣、共享界面元素、常見陷阱）+ assets/ └── screens/<name>/ PROMPT.md + NOTES.md + assets/design-system/是可重複使用的編寫參考（側邊欄、導覽、標誌、跨畫面共享的代幣）；每個畫面的PROMPT.md仍會內嵌它需要的內容，以保持為單一貼上。
慣例
- 到處使用自動佈局；僅對真正的疊加層（徽章、FAB、地圖標記、角落支架）使用絕對定位。
- 資產可立即導入：硬編碼的十六進位色碼（無 CSS 變數）；圖示為 20×20
<g transform>SVG。 - 保真度是標準。進行測試建置並比較；一個「看起來差不多」但尚未建置的規格不算完成。當用戶指出錯誤時， 在修正之前先讀取來源節點的實際屬性 — 與來源匹配，而非用肉眼估計。
參考資料（相關時閱讀）
references/figma-plugin-api.md— 得來不易的 Plugin-API 常見陷阱。在任何建置之前閱讀。references/asset-extraction.md— 萃取、清理、扁平化和簡化資產。