將圖片轉換為 Next.js 登陸頁面
一套複雜的工作流程，利用 Next.js 從圖片還原登陸頁面，透過影像生成技術製作素材，並使用 Playwright 進行驗證。
提示詞
/goal 使用 Next.js 實作附件圖片中的登陸頁面，直到還原準確度超過 95%。
對於難以透過圖片以外方式還原的部分，請適當使用 image_gen 生成素材。
- 圖示與圖片應盡可能與原始圖片相符。
從原始圖片中裁切相關部分，並將其作為參考圖片傳遞給 image_gen（使用 codex exec -i 傳遞參考圖片，並透過標準輸入提供提示詞）。
- 確保響應式設計。驗證 375px 到 1440px 的寬度，確保不會出現水平捲軸、元素重疊或裁切（固定寬度的卡片請使用 w-full max-w-[Npx]，僅在寬螢幕時使用絕對定位）。
- 執行 Playwright 截圖循環 -> 與原始圖片比對 -> 修正。當 npm run build 通過後即完成。
如何使用這條提示詞
- 1
複製上方完整的提示詞。
- 2
開啟支援 claude-fable-5 的平台（例如 YouMind），把提示詞貼上。
- 3
依你的想法替換主體、風格或細節，然後生成。
這是 YouMind 提示詞庫裡的一條免費 AI 提示詞。這裡還有成千上萬條 網頁 提示詞，都能免費複製與改用。
探索更多 網頁 提示詞
