wireframe 是做什麼的？

建立一個自包含的單一 HTML 檔案，產出中保真線框圖。多個畫面並排顯示、支援響應式設計、採灰度色調搭配一個強調色，並使用真實的文案。

核心原則

中保真的定義：

使用灰度色盤（請見下方 Token），加上一個強調色（--accent）用於主要操作和啟用狀態。這樣可以讓主要操作一目了然；除此之外不使用任何其他顏色。
使用真實的標籤、標題和各級標題，禁止使用「Lorem ipsum」假文。請以產品最終使用者將看到的語言來撰寫文案；如果不確定，則使用提出請求時所使用的語言。這樣一來，即使對話是以另一種語言進行，線框圖也能直接展示給利害關係人。
使用佔位區塊表示圖片（無需真實素材）
在意義重大的圖示處使用 Lucide 線條圖示（請見圖示章節）
所有可點擊元素皆需有懸停狀態（請見懸停狀態章節）
清晰的排版層級
無裝飾、無陰影，僅使用細微的邊框

嚴禁：

使用品牌顏色，或任何除強調色之外的顏色
使用真實圖片、照片、Logo 或插圖
使用 Emoji 或文字符號作為圖示（如 ☰、×、›）：請使用 Lucide
使用動畫（懸停時使用短暫的 transition 過渡效果是允許的）
在線框圖內部放置說明文字（註解應放在線框圖外部）

支持創作過程

線框圖是一個思考工具：它能幫助使用者透過大聲推理、提出疑問和反覆迭代，來釐清「做什麼」和「為什麼」。你的任務是支持這個過程，而不是主導它。這有兩層含義：不要不經討論就直接建構，也不要讓使用者在看到任何畫面之前淹沒在對話中。這個畫布是一個交談對象，而不是一份最終產出物。

針對不同輸入類型

全新需求： 在回覆開頭加入一段簡短的切磋區塊：列出最重要的 2-3 個選擇，每個選擇附上其選項和你偏好的理由。納入互動考量，而不僅僅是版面配置：點擊或輕觸時會發生什麼、回饋會出現在哪裡、哪些操作可以復原、使用 Modal 還是獨立頁面、內聯進行還是需要額外步驟。然後建構你偏好的選項，以便有個具體的東西可以討論。幾點條列即可，無需長篇大論。（需求模糊且範圍複雜？請先從「最佳化意圖」中問一個問題。）
探索性需求（如「我在…之間猶豫」、「…哪個比較好」、邊想邊說）：僅進行切磋。列出選項及其權衡取捨和你個人的偏好，然後詢問是否要建立其中一個選項，以及是哪一個。
後續反饋： 首先針對內容實質進行回應：一同思考、補充內容、指出弱點或其他替代方案。只有在某個事項已決定之後才修改線框圖，而不是每次都跟著一個念頭修改。不確定使用者是在切磋還是做決定？簡單問一句：「我要直接套用這個，還是先思考一下？」

如何切磋

大聲提出質疑。 如果某個模式在當前上下文中可能不適用（例如只有 2 個項目時卻使用短清單），請說出來，而不是盲目地建構它。
提供方向，而非既定方案。 當一個選擇真的開放時，在線框圖中將 A 和 B 並排顯示，而不僅僅是描述它們，並說出你偏好哪一個。
以小步驟迭代。 預期每個元素都會有變更。根據使用者選擇或指出的內容來建構。
不要強迫做決定。 目標是釐清問題；決定可以之後再做。
保持輕量。 每個選項一行，總共幾個要點，最多一個重點問題。線框圖本身會說話，所以不要逐一說明圖中的內容；只需提及使用者看不到的部分，例如某個假設或點擊後會發生什麼。

UX 原則

質疑概念，而不僅僅是版面。 持續檢查底層功能是否真的合理，並對其提出挑戰，而不僅僅是「它看起來像什麼」。
不要宣稱系統無法知道的狀態。 根據可用資料來設計 UI。如果某件事無法知道，則顯示操作而非狀態，或者讓使用者自行標記。
使內容的保真度符合畫面的目的。 如果重點是結構或導覽，則讓內容保持低保真（使用佔位行），以便焦點保持在主題上。
並排顯示關鍵狀態的線框圖。 登入/登出、空白/已填滿、開啟/關閉：這樣才能讓真正的決策一目了然。
刻意地為較小螢幕轉換導覽設計。 保留一個固定的錨點，讓轉換不會顯得突兀；優先排序並分組，而不是顯示所有內容。一個導覽結構，多種外殼，一個來源。

輸出方式

每個線框圖保持為一個自包含的 HTML 檔案。 旁邊不要有獨立的 JS/CSS 檔案：預覽通常會獨立渲染該檔案，不會有同級檔案。基礎模板中的兩個 CDN 連結（透過 Google Fonts 的 IBM Plex Sans，以及透過 jsDelivr 的 Lucide）是例外情況；它們在預覽中可以正常載入。想要重用？內聯一個主模板並同步拷貝。
如果是一組大量的畫面，請加入一個固定的畫面切換器（例如下拉式選單）以便在各畫面之間跳轉。
如果一個概念涵蓋多個產品部分，請建構一個概念網站（請見下方說明）。

概念網站

當一個概念涵蓋產品的多個部分（如入門引導、搜尋、帳戶...），且使用者希望將其作為一個整體來展示或審查時，請建構一個概念網站：每個部分一個頁面，透過相同的選單列連接。利害關係人可以在一個地方瀏覽整個概念，而你可以在不影響其他部分的情況下迭代某個部分。

選單列 位於每個頁面的頂部，在畫布上，在所有畫面框的上方。左側：概念名稱，旁邊有一個 info 圖示，其工具提示中顯示版本、日期和一行說明。然後是一個分隔線，接著是每個部分的連結。目前頁面獲得 aria-current="page" 屬性，並使用 --text-primary/600 樣式；其餘連結使用 --text-secondary。當連結太多無法容納時，工具列會水平捲動而非換行。對於大型概念（超過約 15 個畫面），在工具列的右端加入一個「前往畫面」下拉式選單，可跳轉到任何頁面的任何畫面；對於較小的概念，選單就足夠了。
資訊架構優先。 第一個連結是一個 IA 頁面：產品的結構，包含連接到每個部分的連結。它同時也是入口頁面。
每個部分頁面 是一個正常的線框圖：畫面框並排、畫面框標籤、以及點狀背景的畫布。
當檔案會一起開啟時使用獨立檔案。 如果你可以寫一個資料夾，讓使用者在瀏覽器中開啟或託管（在本地或 repo 中工作），則將 index.html 作為 IA 頁面，並為每個部分建立一個使用簡短別名（如 onboarding.html）的檔案，並使用相對路徑連結。
當檔案會被獨立預覽時使用單一檔案。 單一的 Artifact 或聊天預覽只會渲染一個獨立的檔案，因此與其他檔案的連結會失效。將所有部分放在一個檔案中作為區段，並透過選單使用 #hash 連結（如 #onboarding）來切換。
讓選單在各地保持一致。 從一個主拷貝將選單內聯到每個檔案中，這樣每個頁面在獨立運作時仍能正常顯示。當新增、重新命名或移除某個部分時，請同時更新所有檔案中的選單。

設計 Token

:root {
  --bg:        #F5F5F5;   /* 頁面背景 */
  --surface:   #FFFFFF;   /* 卡片、面板 */
  --border:    #D1D1D1;   /* 邊框 */
  --muted:     #E8E8E8;   /* 佔位區塊 */
  --text-primary:   #1A1A1A;
  --text-secondary: #595959;   /* 元資料、預留位置、圖片區塊內的標籤 */
  --text-disabled:  #AAAAAA;   /* 僅限已停用的控制項 */
  --accent:       #1560D0;   /* 唯一的顏色：主要操作、啟用狀態 */
  --accent-hover: #1250B0;
  --hover-bg:     #F0F0F0;   /* 淺色或透明元素上的懸停效果 */
  --border-hover: #AAAAAA;   /* 有邊框元素上的懸停效果 */
  --font: 'IBM Plex Sans', system-ui, sans-serif;
}

這些 Token 已調整為符合 WCAG AA（4.5:1）標準：--text-primary 和 --text-secondary 在此處的所有表面顏色（--surface、--bg、--hover-bg、--muted、--border）上皆可通過檢測；--accent 作為文字時在除 --border 之外的所有顏色上皆可通過；白色字型在 --accent 上可通過檢測。可及性始於線框圖本身，因此請保持這個狀態：不要為文字添加更淺的灰色。唯一的例外是 --text-disabled（2.3:1）：僅將其用於已停用的控制項（WCAG 對此有豁免），絕不能用於可讀文字，例如元資料。

HTML 結構

基礎模板

將 lang 屬性設定為文案所使用的語言。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Wireframe: [主題]</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&display=swap" rel="stylesheet">
  <style>
    /* tokens */
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; -webkit-font-smoothing: antialiased; }
    button, input, select, textarea { font: inherit; }  /* 表單控制項預設不會繼承字型 */
    /* layout + components */
  </style>
</head>
<body>
  <div class="wireframe-canvas">
    <div class="frame-row">
      <!-- 在此放置畫面框 -->
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/lucide@1/dist/umd/lucide.min.js"></script>
  <script>lucide.createIcons();</script>
</body>
</html>

多畫面框的版面配置

這個畫布能讓輸出結果一眼就被辨識為線框圖，因此請直接使用它。

.wireframe-canvas {
  background-color: var(--bg);
  background-image: radial-gradient(circle, #C8C8C8 1px, transparent 1px);
  background-size: 20px 20px;
  padding: 40px;
  min-height: 100vh;
  font-family: var(--font);
}

.frame-row {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.frame {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

/* 根據裝置設定寬度 */
.frame.mobile  { width: 375px; }
.frame.tablet  { width: 768px; }
.frame.desktop { width: 1280px; }
.frame.auto    { width: 100%; max-width: 1280px; }

畫面框標籤（位於每個畫面上方）

<div class="frame-label">畫面 1: [名稱]</div>
<div class="frame mobile">
  <!-- 內容 -->
</div>

.frame-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

元件

請自行撰寫元件的 HTML 和 CSS，但請遵循這些數值，以便線框圖在不同工作階段之間保持一致。為按鈕和輸入框設定 min-height 並使用 inline-flex 來居中，而不是依賴 padding：單獨使用 padding 最終會略低於 40px，而 40px 是最小的點擊目標。

元件	規格
主要按鈕	`--accent` 填滿，白色文字，14px/600，`min-height: 40px`，padding 0 20px，圓角 6px
次要按鈕	透明背景，`--accent` 文字，1.5px `--accent` 邊框，其餘與主要按鈕相同
文字按鈕 / 內聯操作	「編輯」、「設定狀態」、「變更」：`--accent` 文字，14px/500，無邊框。但仍需 40px 的點擊目標：使用 `inline-flex` 並設定 `min-height: 40px`，或當它位於一行文字內時，使用 padding 加上等量的負 margin
輸入框	標籤在上方（13px/500，`--text-primary`，間隙 4px）。欄位：1px `--border`，圓角 6px，`min-height: 40px`，padding 0 12px，14px 字型大小，預留位置文字使用 `--text-secondary`
圖片佔位	`--muted` 區塊，使用固定的 `aspect-ratio`，居中顯示 `--text-secondary` 13px 標籤，說明內容和比例（如「產品照片 16:9」）
卡片	`--surface` 背景，1px `--border`，圓角 8px，`overflow: hidden`。內文 padding 16px，間隙 4px：上方標題列 11px 大寫 `--text-secondary`，標題 15px/600，元資料 12px `--text-secondary`
標籤	12px/500，padding 2px 8px，圓角 4px（小於其所在的卡片），`--muted` 背景，`--text-secondary` 文字
行動裝置導覽列	padding 12px 16px，底部邊框。Logo 文字 16px/600 靠左，右側為一個 40×40 的按鈕內含 Lucide `menu` 圖示，並設定 `aria-label`
桌面導覽列	padding 16px 32px，底部邊框。Logo、連結（14px，`--text-secondary`，間隙 24px，啟用狀態為 `--text-primary`/500）、右側主要按鈕
步驟器	28px 圓圈搭配 13px/600 數字，32px 連接線使用 `--border`。待辦：`--muted`/`--text-secondary`。進行中：`--accent`/白色。已完成：`--border`/`--text-secondary`

需要一個未列出的元件？請根據這些數值（相同的圓角、字級和狀態）來推導，而不是創造新的數值。

最佳化意圖

如果需求中包含一個方向（如「步驟更少」、「更容易掃讀」、「不那麼擁擠」、「更快理解」），請將其作為一個透鏡：選擇能夠強化該方向的元件、層級和文案結構。

如果需求模糊且範圍複雜（3 個以上畫面或一個流程），請問一個重點問題：「您想要改善的是整體概覽、速度、信任感，還是其他方面？」

不要針對單一畫面提問，也不要在意圖已經很明確時提問。

針對不同輸入類型的方法

以文字描述的畫面或流程

識別描述中的畫面（每個畫面 = 一個畫面框）
決定裝置類型（未指定時，行動 App 使用手機，網頁使用桌面）
將所有畫面框放在同一個檔案中，並排顯示
使用符合上下文且以最終使用者語言撰寫的真實文案（請見核心原則）

畫面框數量

1 個畫面：以裝置寬度顯示
2-4 個畫面：並排在一行
5 個以上畫面：分為兩行，或水平捲動

懸停狀態

務必加入懸停狀態。線框圖應該是可點擊的，而懸停狀態可以顯示哪些元素是可互動的。共有三種模式。將它們套用到你在這個線框圖中建立的類別上，而不是一個固定的清單：

/* 1. 強調色填滿：主要按鈕、啟用的 Chip 或分頁、浮動動作按鈕 */
.btn-primary:hover   { background: var(--accent-hover); cursor: pointer; }

/* 2. 淺色或透明背景：次要按鈕、圖示按鈕、清單項目 */
.btn-secondary:hover,
.nav-menu:hover      { background: var(--hover-bg); cursor: pointer; }

/* 3. 有邊框：可點擊的卡片、Chip、選擇選項 */
.card:hover          { border-color: var(--border-hover); cursor: pointer; }

每個可互動元素都必須加上 cursor: pointer。不可互動的元素（文字、標籤、佔位符號、不作為按鈕的卡片等）則不應該有。

圖示

Lucide 圖示透過 npm 套件 lucide 提供。使用方式請參閱 Lucide 文件。圖示名稱應使用 kebab-case。

請記住：

僅在意義重大時使用圖示。不要在每個操作旁邊都放置一個圖示。
在按鈕中，圖示是作為視覺輔助，而非唯一的識別方式。按鈕應始終包含文字。
如果 USWDS 中定義了特定的圖示模式（例如用於下載、外部連結、關閉等），請遵循該模式。

使用者體驗指南

一般原則

聚焦於任務。 這個畫面幫助使用者達成什麼目標？確保 UI 讓該任務變得明顯且容易執行。
減少認知負荷。 不要一次顯示所有資訊。使用漸進式揭露（progressive disclosure）來引導使用者。
保持一致。 在整個線框圖中使用相同的元件、間距和術語。
提供回饋。 當使用者執行了某個操作時，顯示一個狀態變更、一個確認訊息或一個錯誤。
防止錯誤。 在可能造成問題的操作之前加入確認對話框，並使用約束條件（例如在數字輸入框中限制字元類型）。

具體模式

清單： 使用卡片或表格來顯示項目清單。如果清單很長，加入分頁或無限捲動。
表單： 將相關欄位分組，使用清晰的標籤，並提供即時驗證。
導覽： 使用麵包屑（breadcrumbs）來顯示使用者在網站中的位置，並提供一個搜尋功能。
Modal： 使用 Modal 來執行需要使用者注意力的任務，例如確認或填寫簡短表單。

常見問題

問：我該如何處理一個模糊的需求？ 答：使用最佳化意圖中的方法。問一個重點問題：「您想要改善的是整體概覽、速度、信任感，還是其他方面？」然後根據答案來調整你的方法。

問：我可以修改設計 Token 嗎？ 答：不行。這些 Token 是為了確保一致性和可及性而設定的。請勿修改它們。

問：我可以在線框圖中使用真實圖片嗎？ 答：不行。中保真線框圖不使用真實圖片。請使用佔位區塊。

問：我應該在線框圖中加入註解嗎？ 答：可以，但只能放在線框圖外部。註解不應在視覺上與 UI 混淆。

floorvanriet/wireframe

wireframe 是什麼？

在你喜歡的 AI 中提問

說明文件