我用Stitch和Claude各做了兩版頁面，只加了一套skill，差距大到離譜

作者：擬像AIGC
日期：2026年3月22日 上午1:36
來源：WeChat 原文

✦整理版優先睇

速讀 5 個重點 高亮

建立設計約束系統，先寫DESIGN.md，先限制再生成，係擺脱AI模板味嘅關鍵。

整理版摘要

呢篇文章由一位vibe coding實踐者分享，佢發現大多數AI生成嘅網頁雖然結構完整，但總帶住一股模板味，冇記憶點同品牌感。原因唔係工具唔夠好，而係大家畀AI嘅輸入太相似，模型只會輸出一個「平均最優解」。

作者用同一個需求（跨境電商官網）做咗兩版測試：第一版直接用一句prompt，結果平庸；第二版事先寫咗一份DESIGN.md，列出具體設計約束，結果頁面完全唔同——有視覺節奏、有敍事感、唔再用標準卡片排版。佢強調關鍵在於畀AI「限制」，而唔係教佢做啲乜。

結論係：工具（Stitch、Claude Code等）只係輔助，真正拉開差距嘅係你有冇一套自己嘅約束系統。將設計規則拆成可複用skills，令AI喺有限制嘅情況下生成更有風格嘅結果，先係vibe coding嘅正確玩法。

  • AI生成頁面模板味源於輸入太相似，模型追求平均最優解，缺少設計約束。
  • 工具如Stitch同Figma雖然有差異，但第一步生成質量取決於你畀AI嘅輸入質量。
  • 實測顯示：同一prompt加上DESIGN.md前後效果天差地別，有規則嘅頁面更有節奏同視覺敍事。
  • 關鍵係畀AI「約束」——限制佢唔好做啲乜（例如禁止紫藍漸變、標準卡片網格），而唔係叫佢做啲乜。
  • 工作流由重線性（設計→開發→修改）變為生成→調整→回寫→上線，效率大幅提升。
值得記低
工具 stitch.withgoogle.com

Stitch by Google

AI生成網頁設計工具，直接生成結構同視覺內容，適合快速產出第一版。

開啟
工具 ascii-magic.com

ASCIIMagic

圖片風格化處理工具，可將圖片轉成ASCII藝術，用於增加網頁獨特視覺效果。

開啟
結構示例

內容片段

內容片段 text 
頁面整體基調偏暗黑電影感，不要常見紫藍漸變
首屏必須只有一個視覺焦點，其他信息儘量壓低
禁止使用標準卡片網格結構
模塊之間必須有明顯留白，不能擠在一起
滾動動效必須有順序，不允許同時出現
整理重點

點解AI生成嘅頁面總係帶住模板味？

原因其實唔複雜：大多數人用AI做網頁嘅方式仲停留喺好粗嘅層面——畀一句話「做一個科技感嘅AI產品官網」，然後等結果。模型追求完整，補齊hero區、按鈕、信息區、CTA，但出嚟嘅配色係常見嘅紫藍漸變，排版係標準三列卡片，背景有毛玻璃或粒子效果。呢啲元素本身冇問題，但太常見，就係vibe coding最大嘅詬病。

元素都有了，但設計美學沒有進去

簡單講，AI只會畀出一個「平均最優解」，因為輸入太相似。

整理重點

同一需求，兩版頁面，差距有幾大？

作者用同一個需求（跨境電商官網首頁）做咗兩版測試。第一次唔加任何額外信息，結果第一眼唔差但唔出彩，配色字體排版都有問題。

第一次生成：結構完整但平庸

第二次佢冇改prompt，只係喺生成之前寫咗一份DESIGN.md，列明頁面基調要偏暗黑電影感、首屏只有一個視覺焦點、禁止標準卡片網格、模塊間明顯留白、滾動動效必須有順序等。結果完全唔同——首屏更像一個場景，背景乾淨，視覺主體放大；往下滾有節奏感，段落依次浮現；排版自由，靠空間區分模塊。

第二次生成：視覺更集中，節奏更明確

作者仲用ASCIIMagic將圖片風格化，插入Claude設計嘅HTML，最終效果出眾。

  1. 1 冇規則時：元素齊全但冇記憶點，係「能運行嘅網頁」唔係「被設計過嘅網頁」。
  2. 2 有規則時：頁面有視覺敍事，每個模塊有存在意義，整體氣質唔同。
整理重點

點樣建立自己嘅約束系統？

作者將零散嘅設計「感覺」拆成可複用嘅規則，整咗一套UI design skills。內容好多係「話你知唔可以點做」，例如：頁面必須只有一個視覺中心、禁止所有模塊平均分佈、動效必須有先後關係、排版必須有明顯大小對比。

話你知唔可以點做

再落一層係更細嘅控制：咩場景用3D、咩場景用粒子背景、動畫只用transform同opacity、避開常見配色組合。呢啲細節決定咗頁面最後嘅氣質。

上下文持久化

呢個概念同Claude Code嘅CLAUDE.md一樣：唔係每次都重新教模型，而係畀佢一個長期存在嘅上下文。呢樣先係真正拉開差距嘅關鍵。

  • 先寫一份自己嘅DESIGN.md，哪怕只有三五條規則。
  • 規則例子：唔用藍紫漸變、首屏只放一個核心信息、模塊間留白不少於80px、所有圓角統一8px。
整理重點

工作流轉變：由重線性到輕循環

以前做頁面嘅流程係：Figma設計 → 交畀開發實現 → 反覆改。而家變成：Stitch生成完整頁面 → 瀏覽器入面跑 → 送入Figma微調 → 回寫代碼 → 上線。

生成 → 調整 → 回寫 → 上線

第一版已經唔係草圖，而係一個「有感覺嘅頁面」。你需要做嘅係調節奏、微調間距、優化層級，而唔係由零開始。

唔再係重線性流程

作者建議大家動手試：下次用AI做網頁前，先寫一份DESIGN.md。你會明顯感覺到結果開始變得唔一樣。

限制AI反而令佢更像設計師

vibe coding嘅呢兩年，大家都不停用AI整網頁。
Figma Make、Pencil、Claude Code，再到最近爆紅嘅Stitch——工具越嚟越多，門檻亦都越嚟越低。好多人覺得，AI整網頁呢件事，已經唔難啦。
但你有冇發現一個問題：
大多數AI生成嘅頁面，第一眼睇仲可以，睇多兩眼就覺得爭啲意思。
你又講唔出邊度唔好。結構完整，功能齊全，應有盡有。但就係冇記憶點，冇品牌感，冇嗰種令人願意停多兩秒嘅氣質。
佢係一個「行得鬱嘅網頁」，但唔似一個「被設計過嘅網頁」。
今日呢篇，我想講清楚呢個問題嘅根源，同埋一個我實測有效嘅解法。
圖片
圖片


一、AI生成嘅頁面，點解總係帶住一股模板味

原因其實唔複雜。
大多數人用AI整網頁嘅方式，仲停留喺一個好粗嘅層面：畀模型一句話，例如「做一個科技感嘅AI產品官網」，然後等結果。
模型收到呢種指令之後，會點做？
佢追求嘅係完整。先填滿hero區、再加掣、再排資訊區、再嚟一個CTA。
所以你會見到一個好典型嘅結果：
配色係大家都見過嘅紫藍漸變，排版係標準嘅三列卡片，背景有啲毛玻璃或者粒子效果，按鈕帶少少發光邊框。呢啲元素本身都冇問題，但佢哋太常見啦，vibe coding最大嘅垢病。
圖片
講白啲——元素都有齊，但設計美學冇入到去。
呢個亦都係點解，你喺網上見到嘅AI頁面，十個裏面有八個生得好差唔多。唔係工具唔得，係大家畀模型嘅輸入太相似啦，模型自然只能畀你一個「平均最優解」。

二、Figma係「砌設計」，Stitch係「生成設計」

喺講解法之前，先講下工具嘅分別，因為好多人搞亂咗。
Figma本質係一個畫布工具，由空白頁開始砌結構、做組件、調間距，所有細節都喺你嘅控制下。佢好強，但喺「第一版」階段，你仲係要自己諗風格、諗佈局、諗視覺方向。就算而家有Figma Make呢類AI輔助，或者用Claude Code先生成再導入Figma調整，第一步生成出嚟嘅嘢夠唔夠好，依然取決於你畀AI嘅輸入質量。
Stitch行嘅係完全唔同嘅路。佢圍繞「生成」嚟設計產品，唔只係生成結構，仲直接調用模型能力生成視覺內容、圖片、風格、甚至整體氛圍。再加上Gemini呢類模型喺背後撐住，相當於將UI設計裏面最關鍵嘅幾個環節——結構、視覺、內容——直接打通咗。所以相對嚟講確實更方便好用啲。
以前嘅流程係：先畫 → 再完善。 而家變成：先生成 → 再篩選 → 再精修。
所以好多人會覺得Stitch衝擊緊Figma。就算你將Claude Code嘅頁面再送入Figma調，喺「第一步生成能力」上，確實不如Stitch咁直接。
圖片
但呢個唔係我今日想講嘅重點。
我最近做咗一個好簡單嘅測試，發現咗一個更關鍵嘅問題：
就算你用同一個工具，結果都可以差好遠。
圖片

三、同一個需求，兩版頁面，差距喺邊

呢個測試好日常。
需求就係做一個跨境電商嘅品牌網站，官網首頁，首屏介紹、幾塊功能區、一個CTA收尾。標準到唔能夠再標準。
第一次，我冇加任何額外資訊：

做一個電商品牌嘅官網首頁。

Stitch好快出咗結果。講真話，第一眼唔差。應有盡有，結構完整。佢甚至連首頁都冇畀到。整體嘅配色、字體各方面仲睇得過眼，但係並唔出眾。
圖片
呢個係Claude官方客戶端出嘅，顏色、字體、排版都有問題，呢啲都係我冇用skills之前嘅。
圖片
圖片
第二次，我冇改prompt。
我只係做咗一件事：喺生成之前，寫咗一份DESIGN.md。
牽涉到：
    頁面整體基調偏暗黑電影感，不要常見紫藍漸變
首屏必須只有一個視覺焦點，其他信息儘量壓低
禁止使用標準卡片網格結構
模塊之間必須有明顯留白，不能擠在一起
滾動動效必須有順序，不允許同時出現
    然後用同一句話再生成。
    結果完全唔同。
    圖片
    首屏唔再係「標題+按鈕+背景」嘅組合，更似一個場景。背景變乾淨咗，視覺主體被放大，文字反而壓得好輕。
    向下碌嘅時候，你會明顯感覺到「順序」。唔係所有嘢一齊出現，而係一段一段被放出來。有啲係慢慢浮現，有啲係隨住滾動輕微位移，有啲係延遲進入。
    成個頁面開始有節奏啦。
    再向下，你會發現佢唔再用標準卡片裝資訊，而係用更自由嘅排版方式。有啲模塊甚至冇邊框，靠空間同位置去區分。
    頁面由「資訊列表」變咗做「視覺敍事」。
    【圖片位置：第二次生成頁面截圖——標註「視覺更集中，節奏更明確」】
    圖片
    咁我畀claude結合我嘅skills，都設計咗一套內容，呢套字體同排版明顯比之前強好多，但我冇畀佢加入多餘嘅配色，其實呢度右邊有粒子效果嘅。
    圖片
    Claude官方客戶端，呢度我做咗一個好好玩嘅嘢，就係用ASCIIMagic:https://www.ascii-magic.com做咗圖片風格化處理。
    圖片
    圖片
    然後我哋可以畀claude將呢個gif插入到我哋已經設計好嘅網頁裏面。
    然後將風格化嘅視頻插入到 claude 設計好嘅 html文件裏面。你就會得到：
    最終效果就出咗嚟：

    四、差別唔在於效果，而在於你有冇畀AI「約束」

    呢兩版對比之後，我最清晰嘅感受係：
    差別唔在於你用咗咩效果，而在於你有冇畀AI約束。
    第一次生成嘅時候，AI做緊一件事：盡可能滿足你嘅描述，同時畀出一個「通用最優解」。
    即係一個唔會出錯、亦都唔會太驚艷嘅結果。
    呢個亦都係點解大多數AI頁面都生得好似——佢哋都喺同一個平均值附近。
    呢件事，同Claude Code裏面嘅CLAUDE.md係完全一樣嘅邏輯——你唔係每次都要重新教模型，而係畀佢喺一個長期存在嘅上下文裏面工作。
    呢個就係所謂嘅上下文持久化。
    而呢件事，先至係真正拉開差距嘅關鍵。

    五、我開始將呢啲「約束」拆成可以重用嘅skills

    有咗呢個測試之後，我做咗一件更加系統嘅事：
    將呢啲零散嘅設計「感覺」，拆成可以重用嘅規則。
    即係而家呢套UI design skills。
    你如果去睇佢嘅內容，會發現裏面好多嘢唔係「教你點做」，而係「話你知唔可以點做」：
    • 頁面必須只有一個視覺中心
禁止所有模塊平均分佈
動效必須有先後關係
排版必須有明顯大小對比
再往下一層，是更細的控制：
什麼場景需要3D效果
什麼場景用粒子背景
什麼場景需要開場動畫
什麼場景應該收掉動效
動畫只用transform和opacity
節奏控制在一定時間內
避免某些常見配色組合
    呢啲睇落好「細」，但正正係呢啲細節，決定咗頁面最後嘅氣質。
    我後來有一個好明顯嘅體感：

    當你唔畀AI任何限制，佢會盡量「乜都畀啲你」。但當你開始限制佢，佢反而更似一個設計師。

    圖片

    六、成個工作流都變咗

    以前我做頁面嘅流程：
    Figma設計 → 交畀開發實現 → 反覆改
    而家變成：
    stitch生成完整頁面 → 瀏覽器裏面行 → 送入Figma微調 → 回寫代碼 → 上線
    呢個變化非常大。
    因為第一版已經唔係草圖啦，而係一個「有感覺嘅頁面」。你喺stitch裏面要做嘅嘢，唔再係由零設計，而係調節奏、微調間距、優化層級。
    圖片
    成條鏈路變成咗：

    生成 → 調整 → 回寫 → 上線

    而唔係以前嗰種好重嘅線性流程。
    圖片

    七、回到最開始嗰個問題

    點解同一個工具，有人做出嚟似模板，有人做出嚟似作品？
    我而家嘅答案好簡單：
    唔係工具嘅問題，而係你有冇一套自己嘅約束系統。
    當AI冇約束，佢只能畀你平均解。
    當AI有約束，佢先至開始有風格。
    DESIGN.md解決嘅係「畀模型記住你嘅規則」"。
    skills解決嘅係「你有冇規則」"。

    動手試下

    如果你而家都喺度用AI整網頁，可以做一個好簡單嘅嘗試：
    唔好急住生成，先寫一份你自己嘅DESIGN.md。
    就算得三、五條規則，例如：
    • 配色唔好用藍紫漸變
    • 首屏只放一個核心資訊
    • 模塊之間留白唔少過80px
    • 禁止同時出現超過兩種動效
    • 所有圓角統一8px
    你會明顯感覺到，結果開始變得好唔同。
    如果你唔想由頭整理，我呢套UI design skills已經幫你將常見嘅設計約束拆好曬，可以直接用喺Claude、Stitch、或者你自己嘅項目度。
    佢唔係模板，而係一套令AI生成結果變穩定嘅方法。
    關注我，私信獲取呢套ui設計嘅skills。
    相關連結：
    Stitch by Google: https://stitch.withgoogle.com
    ASCIIMagic: https://www.ascii-magic.com
    Impeccable Style: https://impeccable.style
    vibe coding的這兩年，大家都在用AI做網頁。
    Figma Make、Pencil、Claude Code，再到最近爆火的Stitch——工具越來越多，門檻也越來越低。很多人覺得，AI做網頁這件事，已經不難了。
    但你有沒有發現一個問題：
    大多數AI生成的頁面，第一眼看還行，多看兩眼就覺得差點意思。
    你說不上來哪裏不好。結構完整，功能齊全，該有的都有。但就是沒有記憶點，沒有品牌感，沒有那種讓人願意多停兩秒的氣質。
    它是一個"能運行的網頁"，但不像一個"被設計過的網頁"。
    今天這篇，我想聊清楚這個問題的根源，以及一個我實測有效的解法。
    圖片
    圖片


    一、AI生成的頁面，為什麼總帶着一股模板味

    原因其實不復雜。
    大多數人用AI做網頁的方式，還停留在一個很粗的層面：給模型一句話，比如"做一個科技感的AI產品官網"，然後等結果。
    模型拿到這種指令之後，會怎麼做？
    它追求的是完整。先補齊hero區、再加按鈕、再排信息區、再來一個CTA。
    所以你會看到一個很典型的結果：
    配色是大家都見過的紫藍漸變，排版是標準的三列卡片，背景有點毛玻璃或者粒子效果，按鈕帶一點發光邊框。這些元素本身都沒問題，但它們太常見了，vibe coding的最大詬病。
    圖片
    說白了——元素都有了，但設計美學沒有進去。
    這也是為什麼，你在網上看到的AI頁面，十個裏面有八個長得差不多。不是工具不行，是大家給模型的輸入太像了，模型自然只能給你一個"平均最優解"。

    二、Figma在"搭設計"，Stitch在"生成設計"

    在聊解法之前，先說一下工具的區別，因為很多人混在一起了。
    Figma本質是一個畫布工具，從空白頁開始搭結構、做組件、調間距，所有細節都在你的控制下。它很強，但在"第一版"階段，你還是需要自己想風格、想佈局、想視覺方向。哪怕現在有Figma Make這樣的AI輔助，或者用Claude Code先生成再導入Figma調整，第一步生成出來的東西夠不夠好，依然取決於你給AI的輸入質量。
    Stitch走的是完全不同的路。它圍繞"生成"來設計產品，不只是生成結構，還直接調用模型能力生成視覺內容、圖片、風格、甚至整體氛圍。再加上Gemini這樣的模型在背後撐着，相當於把UI設計裏最關鍵的幾個環節——結構、視覺、內容——直接打通了。所以相對而言確實更方便好用一些。
    以前的流程是：先畫 → 再完善。 現在變成：先生成 → 再篩選 → 再精修。
    所以很多人會覺得Stitch在衝擊Figma。哪怕你把Claude Code的頁面再送進Figma調，在"第一步生成能力"上，確實不如Stitch直接。
    圖片
    但這不是我今天想說的重點。
    我最近做了一個很簡單的測試，發現了一個更關鍵的問題：
    即便你用同一個工具，結果也可以差非常多。
    圖片

    三、同一個需求，兩版頁面，差距在哪

    這個測試很日常。
    需求就是做一個跨境電商的品牌網站，官網首頁，首屏介紹、幾塊功能區、一個CTA收尾。標準得不能再標準。
    第一次，我沒加任何額外信息：

    做一個電商品牌的官網首頁。

    Stitch很快出了結果。說實話，第一眼不差。該有的都有，結構完整。它甚至連首頁都沒給出。整體的配色，字體各方面還看得過去，但是並不出彩。
    圖片
    這是Claude 官方客戶端出的，顏色，字體，排版都有問題，這些都是我沒用skills之前的。
    圖片
    圖片
    第二次，我沒有改prompt。
    我只做了一件事：在生成之前，寫了一份DESIGN.md。
    牽扯到：
      頁面整體基調偏暗黑電影感，不要常見紫藍漸變
首屏必須只有一個視覺焦點，其他信息儘量壓低
禁止使用標準卡片網格結構
模塊之間必須有明顯留白，不能擠在一起
滾動動效必須有順序，不允許同時出現
      然後用同一句話再生成。
      結果完全不同。
      圖片
      首屏不再是"標題+按鈕+背景"的組合，更像一個場景。背景變乾淨了，視覺主體被放大，文字反而壓得很輕。
      往下滾的時候，你能明顯感覺到"順序"。不是所有東西一起出現，而是一段一段被放出來。有的是慢慢浮現，有的是隨滾動輕微位移，有的是延遲進入。
      整個頁面開始有節奏了。
      再往下，你會發現它不再用標準卡片裝信息，而是用更自由的排版方式。有些模塊甚至沒有邊框，靠空間和位置去區分。
      頁面從"信息列表"變成了"視覺敍事"。
      【圖片位置：第二次生成頁面截圖——標註"視覺更集中，節奏更明確"】
      圖片
      那麼我讓claude結合我的skills，也設計了一套內容，這套字體和排版顯然比之前強很多，但是我並沒有讓它加入多餘的配色，其實這裏的右邊是有粒子效果的。
      圖片
      Claude 官方客戶端,這裏我做了一個很好玩的東西，也就是用ASCIIMagic:https://www.ascii-magic.com做了圖片風格化處理。
      圖片
      圖片
      然後我們可以讓claude 吧這個gif插入到我們已經設計好的網頁裏。
      然後把風格化的視頻插入到 claude 設計好的 html文件裏。你就能得到：
      最終效果就出來了：

      四、差別不在效果，在於你有沒有給AI"約束"

      這兩版對比之後，我最清晰的感受是：
      差別不在於你用了什麼效果，而在於你有沒有給AI約束。
      第一次生成的時候，AI在做一件事：儘可能滿足你的描述，同時給出一個"通用最優解"。
      也就是一個不會出錯、也不會太驚豔的結果。
      這也是為什麼大多數AI頁面都長得很像——它們都在同一個平均值附近。
      這件事，和Claude Code裏的CLAUDE.md是完全一樣的邏輯——你不是每次都重新教模型，而是讓它在一個長期存在的上下文裏工作。
      這就是所謂的上下文持久化。
      而這件事，才是真正拉開差距的關鍵。

      五、我開始把這些"約束"拆成可複用的skills

      有了這個測試之後，我做了一件更系統的事情：
      把這些零散的設計"感覺"，拆成可以複用的規則。
      也就是現在這套UI design skills。
      你如果去看它的內容，會發現裏面很多東西不是"教你怎麼做"，而是"告訴你不能怎麼做"：
      • 頁面必須只有一個視覺中心
禁止所有模塊平均分佈
動效必須有先後關係
排版必須有明顯大小對比
再往下一層，是更細的控制：
什麼場景需要3D效果
什麼場景用粒子背景
什麼場景需要開場動畫
什麼場景應該收掉動效
動畫只用transform和opacity
節奏控制在一定時間內
避免某些常見配色組合
      這些看起來很"細"，但正是這些細節，決定了頁面最後的氣質。
      我後來有一個很明顯的體感：

      當你不給AI任何限制，它會盡量"什麼都給你一點"。但當你開始限制它，它反而更像一個設計師。

      圖片

      六、整個工作流也變了

      以前我做頁面的流程：
      Figma設計 → 交給開發實現 → 反覆改
      現在變成：
      stitch生成完整頁面 → 瀏覽器裏跑 → 送進Figma微調 → 回寫代碼 → 上線
      這個變化非常大。
      因為第一版已經不是草圖了，而是一個"有感覺的頁面"。你在stitch裏要做的事情，不再是從零設計，而是調節奏、微調間距、優化層級。
      圖片
      整個鏈路變成了：

      生成 → 調整 → 回寫 → 上線

      而不是以前那種很重的線性流程。
      圖片

      七、回到最開始那個問題

      為什麼同一個工具，有人做出來像模板，有人做出來像作品？
      我現在的答案很簡單：
      不是工具的問題，而是你有沒有一套自己的約束系統。
      當AI沒有約束，它只能給你平均解。
      當AI有約束，它才開始有風格。
      DESIGN.md解決的是"讓模型記住你的規則"。
      skills解決的是"你有沒有規則"。

      動手試一下

      如果你現在也在用AI做網頁，可以做一個很簡單的嘗試：
      不要急着生成，先寫一份你自己的DESIGN.md。
      哪怕只有三五條規則，比如：
      • 配色不要用藍紫漸變
      • 首屏只放一個核心信息
      • 模塊間留白不少於80px
      • 禁止同時出現超過兩種動效
      • 所有圓角統一8px
      你會明顯感覺到，結果開始變得不一樣。
      如果你不想從頭整理，我這套UI design skills已經幫你把常見的設計約束拆好了，可以直接用在Claude、Stitch、或者你自己的項目裏。
      它不是模板，而是一套讓AI生成結果變穩定的方法。
      關注我，私信 獲取這套ui設計的skills。
      相關連結：
      Stitch by Google: https://stitch.withgoogle.com
      ASCIIMagic: https://www.ascii-magic.com
      Impeccable Style: https://impeccable.style