過往在用 Claude Code 來打造產品時，都是以 Spec Kit 的方式直接進行，過程中沒有用到 Figma。但這也帶來一個問題：在撰寫 Spec 的同時，要怎麼把想要的風格樣式也一併規範進去呢？
剛好最近發現了 Design Prompts 這個網站，上面蒐集了超過 30 種網頁設計風格，從 Newsprint、Neo-Brutalism 到 Swiss Minimalism 都有，而且每一種風格都附上了完整的 Prompt。
讓人驚豔的是，每種版型不只風格一致，連 RWD 也做得很到位。這就讓我很好奇——它的 Prompt 結構到底是怎麼寫的呢？
這篇文章就以其中的「Newsprint」風格為例，來拆解這份 Prompt 的架構，看看它是怎麼從設計原則定義，一路寫到具體的元件規格與響應式策略吧：）
▍從意圖到實作：一份設計系統的遞進邏輯
這裡有將「Newsprint」風格的 Prompt 放在 Notion 上，同時也在各段落上加註說明，這樣你們就能邊閱讀文章，邊做內容對應囉。
在細部講到內容之前，可以先來瀏覽一下這份 Prompt 的整體架構，其主要可以分成兩個 Part 來說明：
Part 1：Role（角色與行為指引）
這裡主要是設定 AI 的角色與行為準則。
透過直接賦予它為前端工程師、UI/UX 設計師，甚至是字體排印專家，讓它在面對開發決策時，能自動切換各種專業視角來幫我們把關。
Part 2：Design System（設計系統）
接下來則是最重要的部分，其透過「為什麼 → 是什麼 → 怎麼用 → 怎麼不出錯」的遞進邏輯，帶著 AI 一步步把設計系統給架構起來：
第一層：為什麼（Why）
在開始開發前，先定義好所想要的風格感覺。例如這個視覺想傳遞什麼感受？遵循什麼樣式原則？在這裡需要先把心裡的想像，清楚地描繪出來。
第二層：是什麼（What）
當風格描繪完後，接著就會來定義原子層。這裡會把顏色、字型、間距、圓角、陰影等 Design Token 制定出來，為整個系統先打好統一的視覺地基。
第三層：怎麼用（How）
接下來，就會開始指引 AI 如何將原子組裝成具體的元件。從按鈕、卡片的各種狀態，到 Grid 佈局策略、動態效果等。從單一元件一路構築到完整的網頁版面。
第四層：怎麼不出錯（Guardrails）
最後，為了避免 AI 太過於自由發揮，這份 Prompt 還設下「護欄（Guardrails）」。像是字型載入規則、邊框呈現方法或是效能載入形式。進而透過規則的說明，引導 AI 一步步地把風格正確地打造出來。
▍Role 的寫法結構：先制定身份，再給指令
Part 1 裡的角色與行為指引，雖然只佔整份 Prompt 的一小段，但它決定了 AI 在整個開發過程中的行為模式。
這裡可以拆成三個面向來看：
用角色來建立專業視角
在一開始，會先為 AI 設定好角色，讓它同時擔任前端工程師、UI/UX 設計師、視覺設計與字型排印專家的角色。
這樣做的用意是為了幫 AI 建立更全面的視角。如預設的「工程師」思維，會讓 AI 把重心放在程式的執行與邏輯的正確性上；而當我們為它加上設計師的角色後，等於是明確告訴它：「在寫程式的同時，也要一起把關設計決策。」
有了這樣的設定，AI 在實作時就會主動留意視覺層級的安排、字型搭配的和諧度以及互動細節。確保能順利運作之外，亦兼顧好看且有良好操作體驗的成果出來。
建立心智模型，引導 AI 精準對焦
接著，可以透過一句關鍵指令：
Before proposing or writing any code, first build a clear mental model.
請 AI 在寫任何程式碼之前，先建立清楚的心智模型（Mental model），這就包含了技術架構（Tech stack）、現有的 Design tokens、元件架構（Component architecture）以及各種限制條件（Constraints）的規範等。
讓 AI 先去理解這些脈絡，幫助它順著現有的規則來思考與開發。
設立品質準則
最後，Prompt 透過一段「Always aim to...」列出每次產出都必須達到的標準，像是無障礙設計、響應式佈局與視覺一致性等。
這段內容能為 AI 提供明確的開發指引與預防出錯的護欄（Guardrail），確保 AI 在發揮創意的同時，依然能緊扣並落實這些設計原則。
▍從設計哲學到原子層
進入 Part 2 的設計系統後，這份 Prompt 即以「為什麼」→「是什麼」→「怎麼用」→「怎麼不出錯」的遞進邏輯來編排，其目的是讓 AI 能先理解設計意圖，再去執行具體細節。
讓我們先看前面兩個 Section。
§1 Design Philosophy — 設計哲學
All the News That’s Fit to Print.
這句話來自《紐約時報》的經典百年標語，也是整份文件裡最核心的一段話。
透過這樣一句話宣言的方式，直接向 AI 傳遞所想要的風格感受。幫助 AI 理解這個風格的核心精神，確保後續所有的產出，都能契合屬於這風格的視覺意象。
Core DNA — 五個具體原則
接著，把抽象的設計理念拆成五個需執行的方向：
Stark Geometry（嚴格幾何）
High Information Density（高資訊密度）
Typographic Drama（字型的戲劇張力）
Visible Structure（可見的結構）
Editorial Authority（編輯權威感）
這五條的價值在於，它們既夠抽象能涵蓋各種版面場景，又能夠具體能指導實際決策。例如看到「Stark Geometry」，AI 就知道在開發時，其樣式不應該出現圓角。
排除清單（什麼不該做）
Rejects modern web trends of soft shadows, blurred backgrounds, and rounded corners.
這在 AI 的應用場景中特別重要，因為 LLM 往往會傾向產出「什麼都有一點」的安全設計，排除清單能直接避免掉這些預設行為。
Vibe 描述（感官隱喻）
Like holding a fresh morning newspaper—crisp, organized, and information-rich.
接著，運用具體的感官體驗來描繪風格，藉此為 AI 建立明確的情感基準。
當 AI 後續在不同的設計方案之間進行評估與挑選時，這段場景的描述就能發揮很好的引導作用。它能幫助 AI 知道我們所想傳遞的氛圍，進而做出符合整體調性的設計決策。
§2 Design Token System — 設計系統的原子層
定調完設計理念後，接著就是定義最基礎的設計元素。
如果有做過設計系統，應該會對 Design Token 這個概念不陌生，它包含了顏色、字型、間距、圓角這些最小單位的設計值，相當於原子設計（Atomic Design）裡的「原子」概念。
賦予色彩語意，說明選色脈絡
這份 Prompt 在定義 Colors 時，除了為每個顏色附上了語意名稱外，更附上了使用情境的說明。
以背景色為例：
Background:
#F9F9F7(Newsprint Off-White) A warm off-white that mimics aged paper. Not pure white—adds subtle warmth and reduces eye strain.
這段描述同時定義了三個面相：這個顏色是什麼？用在哪裡？為什麼選這個？
這種寫法的好處是，AI 不只知道要用什麼色碼，還能理解「為什麼不能用純白」。當它後續開發中遇到需要判斷的情境時，就能有足夠的脈絡來做出對的決策。而我們自己日後回頭看時，也能清楚知道當初如此制定的原因。
善用排除清單，精準收斂視覺風格
在陰影與效果（Shadows/Effects）的設定上，則運用了前面提到的預防出錯的護欄（Guardrail）概念。
Prompt 裡明確標示出需要避開的項目：No blur、No inner shadows、No gradient overlays。
這個步驟在建構設計系統時很重要。因 AI 在生成 UI 時，預設其實都會加上柔和的陰影與漸層。但為能精準呈現 Newsprint 那種銳利、扁平的復古報紙質感，其實就必須主動劃定範圍，清楚指示需排除的視覺元素。
明確排除特定樣式後，往往能比單純描述需求，更有效地引導 AI 生成出所想要的質感出來。
▍從原子到元件：從卡片看懂設計規格怎麼寫
定義完原子層的 Tokens 之後，下一步就是告訴 AI 這些原子要怎麼組合成具體的元件。
§3 Component Stylings — 把 Design Token 組合成元件
在 Component Stylings 裡，針對四大基礎元件——按鈕（Buttons）、卡片（Cards）、輸入框（Inputs）、圖示（Icons），各自提供了三個層次的規格：
完整的 Tailwind className 字串
各狀態的變化邏輯（Default / Hover / Focus）
無障礙規範（觸控目標 44px）
以卡片（Cards）為例：
<div className="border border-[#111111] bg-[#F9F9F7] p-6">
從這可以看到裡面三個的屬性，各自對應到設計上的三個決策——銳利的黑色邊框、米白色背景、緊湊的內距（p-4 到 p-8），每個屬性都在強化 Newsprint 那種「報紙樣式」的視覺語言。
報紙欄位網格
更進一步，它還定義了「報紙欄位網格」的做法。
報紙的欄位之間會有細線分隔，Newsprint Style 也想在網頁上重現那個效果。核心概念是「折疊邊框」——相鄰格子共用一條線，而不是各自畫一圈框線（避免交界處會出現雙線）。
Use
border-randborder-bto create collapsed grid layouts. Example: 4-column feature grid where each cell hasborder-rexcept the last, and all haveborder-bon mobile.
這裡會看到 border-r、border-b 這類寫法，是 Tailwind 用方向縮寫來指定邊框位置：r 是右邊（Right）、b 是底部（Bottom），同理還有 t（Top）跟 l（Left）。
具體的做法是：桌面版四欄並排時，每個格子只在右邊畫一條線（border-r），最後一欄不畫，因為右邊沒有鄰居了。這樣四欄之間就出現三條垂直分隔線，看起來就像報紙的欄位。
到了手機版，四欄變成單欄堆疊，分隔線的方向也跟著從垂直轉成水平——改用 border-b 在每個區塊下方畫一條橫線來分隔內容。
border-b），欄位從並排轉為堆疊這種寫法同時定義了「卡片的外觀」與「卡片彼此間的排列關係」。引導 AI 從設計「單一元件」，延伸到規劃整體的「版面」。
▍用 Non-Genericness 差異化清單強化風格辨識度
這裡是整份 Prompt 裡覺得最有意思的段落。
它的標題叫「Mandatory Bold Choices」（必須做的大膽決定），用 Checklist 的形式，把有個性的風格這件抽象的事，轉化成一份可執行的設計規範。
這段清單的價值在於幫助 AI 跨越常規。AI 在設計 UI 時，往往會產出對稱版面與常規排版。為了創造出所想要的風格，這份 Prompt 便透過這份清單給予明確的指示，帶領 AI 採用大膽的設計手法，確保最終產出能展現出屬於這風格的鮮明視覺個性。
來看看 Newsprint 風格列出了哪些必須執行的差異化手法：
1. 垂直欄位分隔線（Vertical grid dividers）
不只用水平線分隔區段，還要用 border-r 在同一列的欄位之間畫上垂直分隔線。讓頁面看起來像報紙的多欄版面，而不是一般網頁的區塊堆疊。
2. 首字放大（Drop cap）
在重要段落的第一個字用超大字級（text-7xl）呈現，並透過 float-left（CSS 的靠左浮動指令）讓首字固定在段落左上角，後面的文字沿著右側與下方自然環繞。
這是傳統報紙和雜誌中經典的排版手法，能為頁面建立出明確的視覺焦點。
3. 跑馬燈（Marquee ticker）
用水平捲動的跑馬燈呈現數據或關鍵資訊，以黑底白字搭配紅色重點標記，模擬類似即時新聞的播報條。
4. 報紙式詮釋資料（Edition metadata）
在頁首加上「Vol. 1 | 日期 | New York Edition」這類報紙期刊的版本標記，營造出類似報紙的氛圍。
5. 齊行排版（Justified text）
多欄的內文使用 text-justify 讓左右邊緣對齊，重現報紙欄位那種整齊、密實的排版質感。
6. 灰階圖片（Grayscale images）
所有圖片預設套用灰階濾鏡（Grayscale），Hover 時轉成復古的棕褐色（Sepia）色調。這個手法直接呼應了早期報紙只有黑白印刷的視覺記憶。
7. 不對稱版面（Asymmetric layouts）
使用 8:4、5:7 這類不對稱的欄位分割，藉以營造出報紙版面那種「有主有次」的編輯節奏——主要內容佔大區塊，側欄資訊收在窄邊。
8. 大寫標籤（Uppercase labels）
導覽列、區段標籤、內文等文字一律使用大寫搭配加寬字距（uppercase tracking-widest text-xs font-mono）。其中的 tracking-widest 是 Tailwind 的字距設定，效果是把每個字母之間的間距拉到最寬。
這也是報紙排版中用來區分「標籤」與「內文」的常見排法，藉以讓資訊層級更分明。
9. 反轉色區塊（Inverted sections）
指定至少要有一個主要區段採用黑底白字的反轉配色，打破整頁只有米白色背景的單調感。搭配 Editorial red 作為強調色，讓頁面節奏產生明確的對比與變化。
這九項指引單獨看雖然都不複雜，但組合在一起就是讓 Newsprint 風格能更像 Newsprint 的關鍵。
這個概念寫法，很適合用在想創造各種風格的設計系統 Prompt 上，透過差異化清單的指示，讓 AI 知道哪些設計樣式是一定需要呈現出來的。
▍小結
到這裡，我們可以先歸納三個在撰寫設計系統 Prompt 的實用原則：
先建立脈絡，再提供規格
在給出具體的色碼與間距數值之前，優先引導 AI 充分理解整體的設計意圖與風格理念。建立好這層基礎認知後，AI 在處理後續的細節判斷時，就能做得更精準到位。
明確界定設計邊界
除了說明需要呈現的元素外，清楚列出需要避開的項目也同樣關鍵。由於 AI 預設會主動加上圓角、柔和陰影或採用對稱佈局，因此我們必須主動指示它捨棄這些常規做法，確保最終的成果能符合所想要的風格。
建立檢核表，精準刻劃風格調性
將專屬於這個風格的「招牌特色」整理成一份檢核表（Checklist），能有效引導 AI 多一步檢查，並產出原本所預期的風格調性。
在下篇文章中，將繼續拆解這份 Prompt 的後半段——涵蓋版面配置策略、動態效果，一路延伸到響應式設計、無障礙規範與技術實作限制。
接下來，就讓我們帶著這些觀念，一步步建立出理想中的設計風格吧：）