線框圖文字版提示詞（低保真頁面結構：區塊、元素、優先級、交互說明，可交給設計師或 AI 原型工具）
產品經理、創業者在動手畫原型之前，先把頁面想清楚時用：根據需求生成文字版的低保真線框（頁面區塊、元素、內容優先級、交互與跳轉、各種狀態），可以直接交給設計師，也可以作為 AI 原型 / 前端生成工具的輸入。
通用大模型 對話模型通用
你是一名交互設計師，習慣在畫圖之前先用文字把頁面「搭」出來。你的原則：線框關注的是「放什麼、按什麼順序、點了會怎樣」，不討論顏色和字體。 頁面 / 功能：[頁面或功能] 目標用戶與他們來這個頁面要完成的任務：[用戶任務] 頁面需要承載的資訊與操作（可以是需求文檔的片段）：[頁面需求] 平台與螢幕（手機豎屏 / 桌面網頁 / 平板）：[平台螢幕] 參考的產品或現有頁面（描述即可）：[參考頁面] 請輸出： 1. 頁面目標：一句話說明這個頁面要幫用戶做成什麼，以及主要操作（只能有一個最主要的按鈕）。 2. 資訊優先級：把所有要放的內容按「必須一眼看到 / 需要時能找到 / 可以放到二級頁面」分三級。 3. 文字版線框：從上到下按區塊描述，格式如下—— 【區塊名稱】位置與大致高度佔比 - 元素：類型（標題 / 文本 / 按鈕 / 輸入框 / 列表 / 圖片 / 標籤）+ 示例內容 - 交互：點擊、滑動、長按後發生什麼，跳轉到哪裏 4. 狀態：首次進入、加載中、空狀態、錯誤、內容很多 / 很少時的變化。 5. 響應式或適配說明（如需要）：不同螢幕下區塊如何調整。 6. 交互流程：從這個頁面出發的主要路徑（文字版流程圖）。 7. 待決定的問題：需要和團隊或用戶確認的設計選擇。 8. 可選：一段可以直接交給 AI 原型 / 前端生成工具的頁面描述（結構化、無歧義）。 約束：內容使用真實感的示例數據而不是「XXXX」；不涉及視覺風格；不確定的需求標註。
高亮處換成你自己的內容：[頁面或功能]、[用戶任務]、[頁面需求]、[平台螢幕]、[參考頁面]
ChatGPT Plus 充值
已被複製 0 次
使用說明
怎麼填變量：[頁面需求] 可以直接粘貼 PRD 裏關於這個頁面的部分。[用戶任務] 很重要，它決定什麼放在最上面——同樣是商品詳情頁，用戶來「比價」和來「了解怎麼用」，重點完全不同。
常見坑：
- 什麼都想放在首屏，最後沒有主次；先做資訊優先級，再排版；
- 只描述「理想狀態」，忘了空狀態和錯誤狀態；
- 頁面有三四個同等重要的按鈕，用戶不知道該點哪個。
迭代追問：「根據這份線框，寫出每個元素的介面文案」「把線框改成桌面網頁版」「為這個頁面的空狀態和錯誤狀態寫詳細說明」。
示例輸出
示例，僅供參考（虛構：社區團購小程式「團品詳情頁」，手機豎屏）
頁面目標：讓鄰居快速確認「這是什麼、多少錢、什麼時候能拿到」並參與接龍。主要操作：參與接龍。
【商品圖區】頂部，約 40% 屏高
- 元素：輪播圖（3–5 張）+ 右下角頁碼
- 交互：左右滑動切換，點擊放大
【核心資訊區】
- 元素：商品名「臍橙 10 斤裝」、價格「59 元 / 箱」、標籤「本週四 20:00 截單」「週六上午提貨」
【底部固定欄】
- 元素：主按鈕「參與接龍」+ 已參與人數「已有 36 戶參與」
- 交互：點擊彈出數量選擇與樓棟號輸入
同款作品
用這條提示詞做出來的作品；原作者會因此獲得積分
還沒有同款，來做第一個。
0 條評論
還沒有評論，來搶沙發～