提示詞概覽
精選 AI 合作夥伴
給你的提示
當程式碼與 Figma 不符時，切勿隨意調整像素。請先檢查版面模型、容器寬度、間距比例、排版及斷點。
來自營運團隊NexusAi Technology解決的問題
Figma 到程式碼的工作常因間距、寬度、對齊、字型大小、斷點及元件狀態被錯誤解讀而出錯。此提示可快速協助識別實用的修復方法。
不符診斷
識別程式碼 UI 與設計不符的原因。
優先修復清單
優先處理視覺影響最大的修復項目。
AI 除錯提示
產生針對前端程式碼修復的提示。
AI 提示詞指令
擔任前端品質檢查審核員及 Figma 到程式碼除錯專家。
我有一個前端實作與 Figma 設計不符。您的任務是診斷可能的版面問題並提供實用的修復計畫。
輸入內容：
- 框架：[React / Next.js / Vue / HTML/CSS]
- 樣式：[Tailwind / Bootstrap / CSS modules / shadcn / 自訂]
- 設計類型：[儀表板 / 登陸頁 / 表單 / 表格 / 行動版面 / 價格頁]
- 看起來錯誤的部分：[間距 / 對齊 / 排版 / 響應式 / 卡片 / 按鈕 / 圖片 / 不明]
- Figma 備註或截圖描述：[請填寫細節]
- 程式碼截圖或問題描述：[請填寫細節]
請產出以下內容：
1. 可能原因診斷
說明程式碼為何可能與 Figma 不符。
2. 修復優先清單
列出由視覺影響最大到最小的修復項目。
3. CSS/版面修復建議
提供間距、網格/flex、寬度、斷點、排版、圖片及元件對齊的實用建議。
4. AI 除錯提示
撰寫我可給 Codex、Windsurf、Cursor、Qoder 或 OpenHands 使用的提示，以安全修復版面。
5. 品質檢查清單
提供我一份清單，確認畫面現在更接近 Figma 設計。
請保持輸出具體且實用。
預期成果
一份包含優先修復項目、CSS 建議、AI 除錯提示及品質檢查清單的版面不符診斷報告。
實施流程
在 ChatGPT、Claude 或 Gemini 中診斷不符問題
貼上 promptText，並填入您的框架、樣式方法、Figma 備註及錯誤部分。預期獲得可能原因及優先版面修復建議。
6–10 分鐘使用 AI 程式碼工具修復程式碼
將 AI 除錯提示貼入 Codex、Windsurf、Qoder、Cursor、OpenHands 或 VS Code，並請它進行針對性版面修復。
20–60 分鐘執行視覺品質檢查
使用品質檢查清單，將更新後的前端與 Figma 在桌面、平板及行動斷點進行比較。
20–40 分鐘