輸入任何網站生成一個 DESIGN.md 設計規範
整理版優先睇
新工具可輸入網址生成DESIGN.md，自動提取設計邏輯，讓規範直接進入代碼
今日 Rico 刷到 Mike Bespalov 嘅一段預告，佢話自己做緊一個工具：你丟個網址入去，佢會吐出一份可以直接俾 AI 用嘅設計規範文件。唔係截圖，唔係扒 CSS，而係將網站背後嘅設計邏輯整理成一份能被機同人同時讀懂嘅 DESIGN.md。呢一下子打穿咗「參考」同「複用」嘅邊界。以前我哋睇到一個好網站，最多記住感覺，順手截幾張圖，返去自己估點解咁排版、咁用色、呢個按鈕放呢度咁順眼。最費勁嘅唔係畫界面，而係還原邏輯。所以平時收藏嘅靈感，大多數其實從來冇真正用過，唔係唔想用，係唔會用，唔知背後邏輯。
呢個工具提取嘅唔係樣式，而係語義級規則：顏色體系、字體系統、間距規則、組件模式。佢仲支援導出多種格式，包括 DESIGN.md、JSON、Tailwind v4 配置、CSS Variables、Design Tokens。作者感嘆設計規範終於可以直接入代碼，傳統流程——設計出稿、手動整理規範、補說明文檔、同開發對齊、再落地——而家一條路徑：參考網站 → 自動生成規範 → 直接開發。呢個唔止係提效，直情將「整理規範」呢一步自動化咗大半。
作者進一步分析，呢個變化分三層：樣式複製→語義複製，頁面複製→設計系統複製，設計資產→開發資產。對設計師嚟講，真正被壓縮嘅係執行型重複勞動，被放大嘅係判斷力、風格選擇、品牌表達、信息結構同體驗策略。工具幫手搬走，但腦搬唔走。設計系統開始似代碼一樣被分發、組合、二次編譯。當然都有坑：…
- 呢個工具可以將任意網址轉換成語義級 DESIGN.md，提取設計邏輯而非樣式，讓機同人都讀得明。
- 使用流程簡單：揀個鍾意嘅網站 → 一鍵生成規範 → 直接進入開發，大幅縮短設計到開發嘅路徑。
- 同傳統靈感庫同抓樣式工具嘅最大分別係 AI 理解層級上咗嚟，識得認用途而唔係淨係認數值。
- 設計師嘅執行勞動（如整理規範）被自動化，判斷力（如風格選擇同品牌表達）反而變得更加重要。
- 可行動點：將參考網站生成 DESIGN.md 後，交俾 AI 編程助手按規範生成頁面，一個下午就睇到可運行版本。
一鍵生成設計規範，打破參考與複用嘅邊界
Rico 今日刷到 Mike Bespalov 嘅預告，佢話自己做緊一個工具：你丟個網址入去，佢會吐出一份可以直接俾 AI 用嘅設計規範文件。
唔係截圖，唔係扒 CSS，而係將網站背後嘅設計邏輯整理成一份能被機同人同時讀懂嘅 DESIGN.md。
呢一下子打穿咗「參考」同「複用」嘅邊界。以前我哋睇到一個好網站，最多記住感覺，順手截幾張圖，返去自己估點解咁排版、咁用色。最費勁嘅唔係畫界面，而係還原邏輯。
唔係CSS，而係語義級嘅設計邏輯
呢個工具提取嘅唔係樣式，而係語義級嘅設計邏輯。佢輸出嘅結構化內容包括：
- 顏色體系（主色 / 輔助色 / 層級關係）
- 字體系統（標題 / 正文 / 層級結構）
- 間距規則（spacing scale）
- 組件模式（卡片 / 按鈕 / layout 邏輯）
換句話說，佢提取嘅唔係「長咩樣」，而係「點解咁設計」。工具仲支援導出多種格式：
- DESIGN.md（俾 AI / 人睇嘅規範文檔）
- JSON（結構化數據）
- Tailwind v4 配置
- CSS Variables
- Design Tokens
以前你拿到嘅可能係一行尺寸同顏色，而家拿到嘅係「呢個層級係正文」「呢個層級係標題」，生產價值根本唔同量級。
呢個變化分三層：樣式→語義，頁面→系統，設計→開發
呢個變化其實分三層，對跨團隊協作嚟講好重要：
- 1 樣式複製退場，語義複製上場
- 2 頁面複製退場，設計系統複製上場
- 3 設計資產退場，開發資產上場
以前可流通嘅係代碼倉庫同設計稿社區，而家出現第三層：可流通嘅係設計邏輯本身。設計系統開始似代碼一樣被分發、組合、二次編譯。
執行被自動化，判斷變得更重要
好多朋友會問：設計師會唔會更難做，甚至被取代？Rico 認為，真正被壓縮嘅係執行型重複勞動，被放大嘅係判斷力、風格選擇、品牌表達、信息結構同體驗策略——呢啲先係越來越貴嘅能力。
工具幫你省力，但唔會替你負責品味同邊界。
冷靜啲睇，工具都有坑：版權邊界點定、品牌獨特性會唔會被同質化、團隊會唔會過度依賴外部風格，呢啲都要喺落地時盯緊。
真實工作流：參考網站→規範→代碼
如果將呢個工具放入真實工作流，步驟非常直接：
- 1 揾一個你認可嘅網站，丟入工具生成 DESIGN.md
- 2 將呢份規範交俾你嘅 AI 編程助手，叫佢按規範生成首頁
- 3 以前要來回拉扯好幾輪嘅事，而家一個下午可能就睇到可運行版本
輸入一個網址，輸出一份可執行嘅設計規範——呢個背後係一次角色重排，設計同開發之間嗰道最耗時嘅牆正在變薄。
我今日碌到 Mike Bespalov 一段預告，佢話自己做緊一個工具：
你掟任何網址入去，佢會吐出一個可以直接畀 AI 用嘅設計規範檔案。
我哋睇下演示影片：
「輸入任何網址，生成網站設計規範檔案。」你只需要揀一個鍾意嘅網站風格，就可以將佢的設計邏輯完整複製落嚟，並直接應用到自己嘅產品度。
唔係截圖，唔係抄 CSS，唔係臨摹 UI。
而係將一個網站背後嘅設計邏輯，整理成一份可以被機器和人同時讀得明嘅 DESIGN.md。
老實講，呢一下即刻將「參考」同「重用」嘅邊界打穿咗。
以前我哋睇一個做得好好嘅網站，最多係記住佢嘅感覺，順手 cap 幾張圖，返去自己估點解佢咁排版，點解咁用色，點解個掣放喺呢度睇落就順眼。
你諗下，呢度最頭痕嘅唔係畫介面，而係還原邏輯。
所以我哋平時收集嘅靈感，大部分其實從來冇真正用過。
唔係唔想用，而係唔識用，唔知佢背後嘅邏輯，只能睇落似，但整唔出嚟。
呢個就係呢個工具有趣嘅地方，佢畀你嘅唔係表面樣式，而係語義層嘅規則。顏色點樣分層，字體點樣建立資訊等級，間距點樣統一節奏，組件點樣保持一致性，呢啲嘢被打包成結構化輸出。
佢唔係傳統意義上嘅樣式提取（CSS），而係一個語義級嘅 DESIGN.md，包含：
• 顏色系統（主色 / 輔助色 / 層次關係） • 字體系統（標題 / 內文 / 層次結構） • 間距規則（spacing scale） • 組件模式（卡片 / 按鈕 / layout 邏輯）
換句話講，佢提取嘅唔係生得點樣，而係「為點解咁設計」。
從演示圖可以見到，呢個工具支援匯出多種格式：
• DESIGN.md（畀 AI / 人睇嘅規範檔案） • JSON（結構化數據） • Tailwind v4 配置 • CSS Variables • Design Tokens
講真，睇到呢度我個腦淨係得返一句話。
設計規範終於可以直接入 code 喇。。。
以前嗰套流程，設計出稿，人手整理規範，補說明文件，同開發來回對齊，最後再落地執行，邊個做過邊個知有幾折磨。而家路徑短到離曬譜，揾參考網站，自動生成規範，直接入開發。
呢個已經唔只係提升效率咁簡單。
呢個等於將「整理規範」呢一步，直接自動化咗大半。
好多朋友可能會話，呢個方向一早就有啦，靈感庫都有，抽樣式嘅工具都有。冇錯，我都咁諗過。但之前嗰批工具解決嘅係「睇到」，解決唔到「理解」。你只係拎到碎片，睇唔到系統。你只係抄到外形，抄唔到原則。
返到今次呢個工具點解突然成立，講到底唔係網頁抓取快咗，而係 AI 嘅理解層次上咗嚟。
佢唔再淨係識認數值，佢開始識認用途。以前你拎到嘅可能係一行尺寸同顏色，而家拎到嘅係「呢個層次係內文」「呢個層次係標題」，呢兩個嘢嘅生產價值，根本唔係同一個量級。
再順住上面講落去，呢個變化其實分三層。
第一層，樣式複製喺退場，語義複製喺上場。
第二層，頁面複製喺退場，設計系統複製喺上場。
第三層，設計資產喺退場，開發資產喺上場。
如果你做過跨團隊協作，會即刻明呢三層有幾關鍵。
咁設計師會唔會更難做，甚至被取代？
呢個問題我好明白，邊個都會焦慮，我自己都有呢種時刻。
但如果要判斷影響，我更傾向於咁睇：我覺得真正被壓縮嘅係執行型重複勞動，真正被放大嘅反而係判斷力，風格選擇、品牌表達、資訊結構、體驗策略，呢啲先係越來越貴嘅能力。
講白啲，唔係，坦白講，工具將對手搬走咗，但個腦搬唔走。
更加有意思嘅係，呢件事唔只係職位變化，佢係改變緊資源流通方式。
以前可以流通嘅係 code repository，後來可以流通嘅係設計稿社區，而家出現緊第三層，可以流通嘅係設計邏輯本身。
你可以理解成，設計系統開始好似 code 咁被分發，被組合，被二次編譯。
呢個就好似當年 GitHub 對開發帶嚟嘅衝擊，又有啲似 Figma 社區對設計帶嚟嘅衝擊，只不過今次被複製嘅唔再係成品，而係規則。
如果將佢放入一個真實工作流程入面，亦都好直接。
你先去揾一個你認同嘅網站，掟入工具生成 DESIGN.md，再將呢份規範交畀你嘅 AI 編程助手，叫佢按規範生成首頁。以前要來回拉扯好幾轉嘅事，而家可能喺一個下晝就見到可執行版本。
參考網站 → 一鍵生成規範 → 直接入 code
當然，冷靜啲睇，都唔係冇問題。版權邊界點樣定，品牌獨特性會唔會被同質化，團隊會唔會過度依賴外部風格，呢啲都要落地時睇緊。工具可以幫你慳力，但佢唔會幫你負責品味同邊界。
最後
再返到開頭，呢個工具仲未正式上線，就快推出。等上線後，我會第一時間更新。
「輸入一個網址，輸出一份可執行嘅設計規範。」
聽落好似一個小功能。
但佢背後其實係一次角色重排，設計同開發之間嗰道最花時間嘅牆，正在變薄。呢個諗法唔係新嘢，喺 AI 時代之前都有好多產品做緊，但主要係依賴人手篩選同整理，然後交付畀團隊同開發參考。但係 AI 時代，已經將人力嘅流程淘汰咗。
Mike Bespalov 話佢想做嘅係面向 AI agent 嘅 Pinterest，而且已經生成了數百份 DESIGN.md 去訓練 agent 理解優秀設計。我唔敢話呢件事一定會重塑行業，但有一點幾乎可以肯定，下一代團隊嘅競爭力，唔只係邊個畫得快、寫得快，而係邊個更快將好設計變成可執行嘅系統。
呢個對設計師嚟講意味住啲咩？
易明啲講，設計師嘅職能又被分走咗一啲，但更準確嘅講法應該係： 設計嘅「執行層」正在被自動化，設計嘅「判斷層」變得更加重要。
我係 Rico，多謝閲讀！
我今天刷到 Mike Bespalov 的一段預告，他說自己在做一個工具：
你丟進去任意網址，它會吐出一份可以直接給 AI 用的設計規範文檔。
我們來看看演示視頻：
“輸入任意網址，生成網站設計規範文件。”你只需要選擇一個喜歡的網站風格，就可以把它的設計邏輯完整複製下來，並直接應用到自己的產品中。
不是截圖，不是扒 CSS，不是臨摹 UI。
而是把一個網站背後的設計邏輯，整理成一份能被機器和人同時讀懂的 DESIGN.md。
坦率地講，這一下子就把“參考”和“複用”的邊界打穿了。
以前我們看一個做得很好的網站，最多是記住它的感覺，順手截幾張圖，回去自己猜它為什麼這樣排版，為什麼這樣用色，為什麼這個按鈕放在這裏看着就順眼。
你想想看，這裏面最費勁的不是畫界面，而是還原邏輯。
所以我們平時收藏的那些靈感，大多數其實從來沒被真正用過。
不是不想用，而是不會用，不知道它背後的邏輯，只能看着像，但做不出來。
這就是這個工具有趣的地是，它給你的不是表層樣式，而是語義層的規則。顏色怎麼分層，字體怎麼建立信息等級，間距怎麼統一節奏，組件怎麼保持一致性，這些東西被打包成結構化輸出。
它並非傳統意義上的樣式提取（CSS），而是一個語義級的 DESIGN.md，包含：
• 顏色體系（主色 / 輔助色 / 層級關係） • 字體系統（標題 / 正文 / 層級結構） • 間距規則（spacing scale） • 組件模式（卡片 / 按鈕 / layout 邏輯）
換句話說，它提取的不是長什麼樣，而是“為什麼這樣設計”。
從演示圖中可以看到，這個工具支持導出多種格式：
• DESIGN.md（給 AI / 人看的規範文檔） • JSON（結構化數據） • Tailwind v4 配置 • CSS Variables • Design Tokens
說真的，看到這裏我腦子裏只剩一句話。
設計規範終於可以直接進代碼了。。。
過去那套流程，設計出稿，手工整理規範，補說明文檔，和開發來回對齊，最後再落地實現，誰幹過誰知道有多磨人。現在的路徑短得離譜，找參考站點，自動生成規範，直接進入開發。
這已經不只是提效了。
這等於把「整理規範」這一步，直接自動化掉一大半。
很多朋友可能會說，這方向早就有啊，靈感庫也有，抓樣式的工具也有。沒錯，我也這麼想過。但之前那批工具解決的是“看見”，解決不了“理解”。你只能拿到碎片，看不到系統。你只能抄外觀，抄不到原則。
回到這次這個工具為什麼突然成立，說到底不是網頁抓取得更快了，而是 AI 的理解層級上來了。
它不再只會認數值，它開始能認用途。以前你拿到的可能是一行尺寸和顏色，現在拿到的是「這個層級是正文」「這個層級是標題」，這兩個東西的生產價值，根本不是一個量級。
再順着上面的聊聊，這個變化其實分三層。
第一層，樣式複製在退場，語義複製在上場。
第二層，頁面複製在退場，設計系統複製在上場。
第三層，設計資產在退場，開發資產在上場。
你要是做過跨團隊協作，會立刻懂這三層有多要命。
那設計師會不會更難了，甚至被替代？
這個問題我非常理解，誰都會焦慮，我自己也有這種時刻。
但如果要判斷影響，我更傾向於這樣看：我覺得真正被壓縮的是執行型重複勞動，真正被放大的反而是判斷力，風格選擇、品牌表達、信息結構、體驗策略，這些才是越來越貴的能力。
說白，不對，坦率地講，工具把手搬走了，但腦子搬不走。
更有意思的是，這個事不只是崗位變化，它在改資源流通方式。
以前可流通的是代碼倉庫，後來可流通的是設計稿社區，現在正在出現第三層，可流通的是設計邏輯本身。
你可以理解成，設計系統開始像代碼一樣被分發，被組合，被二次編譯。
這就很像當年 GitHub 對開發帶來的衝擊，也有點像 Figma 社區對設計帶來的衝擊，只不過這次被複制的不再是成品，而是規則。
如果把它放進一個真實工作流裏，也很直接。
你先去找一個你認可的站點，丟進工具生成 DESIGN.md，再把這份規範交給你的 AI 編程助手，讓它按規範生成首頁。以前要來回拉扯好幾輪的事，現在可能在一個下午就能看到可運行版本。
參考網站 → 一鍵生成規範 → 直接進入代碼
當然，冷靜一點看，也不是沒有坑。版權邊界怎麼定，品牌獨特性會不會被同質化，團隊會不會過度依賴外部風格，這些都得在落地時盯緊。工具能幫你省力，但它不會替你負責品味和邊界。
最後
再回到開頭,這個工具還未正式上線，推出在即。等上線後，我會第一時間進行更新。
“輸入一個網址，輸出一份可執行的設計規範。"
聽起來像一個小功能。
但它背後其實是一次角色重排，設計和開發之間那道最耗時的牆，正在變薄。這個想法並不新鮮，在 AI 時代之前也有許多產品在做，但是主要是依賴人工篩選和整理，然後交付給團隊和開發參考。但是 AI 時代，已經把人力的流程給淘汰掉了。
Mike Bespalov 說他想做的是面向 AI 代理的 Pinterest，並且已經生成了數百份 DESIGN.md 去訓練代理理解優秀設計。我不敢說這件事一定會重塑行業，但有一點幾乎可以確定，下一代團隊的競爭力，不只是誰畫得快、寫得快，而是誰更快把好設計變成可運行的系統。
這對設計師來說意味着什麼？
易懂點的話來說，設計師的職能又被分走了一些，但更準確的說法應該是： 設計的“執行層”正在被自動化，設計的“判斷層”變得更重要。
我是 Rico，感謝閲讀！