Hallmark：讓 AI 寫出來的頁面不再醜得辣眼睛

AI 寫代碼好快，但生成嘅網頁永遠都係同一個樣：紫藍漸變第一屏、全部內容置中、一種字體用到尾，睇三秒就知係 AI 整嘅。

Hassan 最近開源咗 Hallmark，個諗法好直接：將設計界公認嘅「反模板」規則整合成一個可以重用嘅 skill，直接掛喺 AI 編程工具上面，令佢默認就出到冇咁「AI」嘅網頁。目前支援 Claude Code、Cursor、Codex。

安裝就用一條指令：

npx skills add nutlope/hallmark

佢總共提供咗四個核心功能：

1. Build：問你三個問題，直接整出符合規範嘅完整頁面，每次唔會重複相同佈局
2. Study：貼上你鍾意嘅設計截圖或者連結，提取佢嘅結構、配色、字體系統，整出可以重用嘅設計DNA，唔會直接抄像素
3. Redesign：保留原有內容同品牌，重新設計頁面結構，擺脱模板感覺
4. Audit：幫現有頁面做檢查，列出 AI 設計常見問題，只俾診斷唔直接改

項目直接將 AI 生成設計嘅五大常見問題列曬出嚟，逐個俾出解決方法：

• 紫漸變第一屏 → 固定一個主色，取消漸變背景
• 一種字體用到尾 → 一定要配 display 同 body 兩種唔同字體
• 所有內容置中 → 打破對稱，設計唔對稱嘅佈局
• 圖標+標題+描述嘅三欄特性卡片 → 唔用固定模板，改做唔對稱設計
• 個個一樣嘅導航欄 → 根據頁面類型揀啱嘅導航結構

官方放咗同一個 prompt 嘅對比，左邊幅圖係冇 Hallmark 嘅原生輸出，仲係熟口熟面；右邊幅圖加咗 Hallmark，佈局、排版、細節剋制咗好多：

目前已經內置咗 22 套主題、21 種佈局結構，仲有 65 個驗證規則攔住常見問題。每次生成都會避開最近用過嘅三種結構，確保唔同頁面唔會撞佈局。

本質都係將領域設計知識用工具可以直接理解嘅方式固化落嚟，唔使每次都寫 prompt 不斷強調「頁面靚啲」、「唔好咁模板化」。安裝一次，一直用得。

項目完全開源，地址放咗喺度。如果你正喺度做網站重構，或者想快啲出到高還原度嘅落地頁，可以試試：https://github.com/Nutlope/hallmark

關注公眾號回覆「進羣」就可以入羣討論。

AI 寫代碼快，但生成的頁面永遠一個樣：紫藍漸變首屏、全居中排版、一種字體走天下，看三秒就能認出是 AI 做的。

Hassan 最近開源了 Hallmark，思路很直接：把設計圈共識的"反模板"規則打包成一個可複用的 skill，直接掛在 AI 編程工具上，讓它默認就能出不那麼"AI"的頁面。目前支持 Claude Code、Cursor、Codex。

安裝就一行命令：

npx skills add nutlope/hallmark

它一共提供了四個核心功能：

1. Build：問你三個問題，直接生成符合規範的完整頁面，每次不會重複相同佈局
2. Study：粘貼你喜歡的設計截圖或者連結，提取它的結構、配色、字體體系，生成可複用的設計 DNA，不會直接抄像素
3. Redesign：保留原有內容和品牌，重新設計頁面結構，擺脱模板感
4. Audit：對現有頁面做體檢，列出 AI 設計常見問題，只給診斷不直接修改

項目直接把 AI 生成設計的五大通病列出來，一一給出解法：

• 紫漸變首屏 → 固定單主色，取消漸變背景
• 一種字體用到底 → 必須搭配 display 和 body 兩種不同字體
• 所有內容居中 → 打破對稱，設計非對稱佈局
• 圖標+標題+描述的三欄特性卡片 → 去掉固定模板，改成非對稱設計
• 千篇一律的導航欄 → 根據頁面類型選擇合適導航結構

官方放了同 prompt 對比，左圖是沒有 Hallmark 的原生輸出，還是熟悉的配方；右圖加了 Hallmark，佈局、排版、細節剋制很多：

目前已經內置了 22 套主題、21 種佈局結構，還有 65 個校驗規則攔着常見問題。每次生成都會避開最近用過的三種結構，保證不同頁面不會撞佈局。

本質還是把領域設計知識以工具能直接理解的方式固化下來，不用每次寫 prompt 反覆強調"頁面好看一點""不要太模板化"。裝一次，一直用。

項目完全開源，地址放這了，正在做網站重構或者想快速出高還原落地頁可以試試：https://github.com/Nutlope/hallmark

關注公眾號回覆“進羣”入羣討論。