一鍵拯救大模型的前端審美能力

作者：劉小排r

日期：2025年12月28日下午6:41

來源：WeChat 原文

✦整理版優先睇

速讀 5 個重點高亮

安裝 Anthropic 的 frontend-design skill 可即時提升主流模型的前端審美能力，效果顯著。

整理版摘要

呢篇文章係由劉小排寫嘅，佢發現好多主流編程模型（例如 GPT-5.2-Codex、GLM-4.7、M2.1）雖然其他方面好叻，但前端設計嘅審美能力好差。為咗解決呢個問題，佢揾到一個快速提升方法：安裝 Anthropic 官方嘅 frontend-design skill。

呢個 skill 嘅原理就好似畀大廚一個詳細嘅食譜，強調動效、質感、字體、一致性呢啲美學元素，令模型可以充分發揮佢哋本身已經有嘅能力。效果非常顯著，對比之下，用咗 skill 之後嘅網頁設計喺字體、動畫、排版等方面都有質嘅飛躍。

使用方法好簡單，只要喺 Claude Code、Codex 或者 Cursor 呢啲工具入面執行一句 npx 指令就得。安裝完成後，每次需要前端設計時叫佢用 skill 就得。另外，仲可以自己改個 skill，加入自己嘅品牌風格，令效果更加好。

結論：安裝 frontend-design skill 可以即時令 GPT-5.2-Codex 等模型嘅前端審美能力大幅提升。
方法：用 npx skills-installer 指令安裝，支援 Claude Code、Codex 同 Cursor 三種工具。
差異：對比直接落指令，用咗 skill 之後嘅網頁設計喺字體、一致性、動畫、質感同排版上都明顯優勝。
啟發：Skill 嘅原理係透過詳細嘅美學要求，充分調用模型本身已有嘅能力，達到「化腐朽為神奇」嘅效果。
可行動點：可以響原版 skill 基礎上修改，加入自己嘅主色、字體等品牌調性，變成個人化 skill，效果更佳。

值得記低

流程

安裝 Frontend-design Skill 指令

根據使用嘅工具執行對應 npx 指令：Claude Code: npx skills-installer install @anthropics/claude-code/frontend-design --client claude-code；Codex: npx skills-installer install @anthropics/claude-code/frontend-design --client codex；Cursor: npx skills-installer install @anthropics/claude-code/frontend-design --local --client cursor

整理重點

前端審美不足嘅煩惱

劉小排指出，目前只有 Gemini 3 Pro、Gemini 3 Flash、Claude Opus 4.5 同 Claude Sonnet 4.5 呢四款模型本身有審美能力。其他模型好似 GPT-5.2-Codex、GLM-4.7、M2.1 雖然其他方面好勁，但前端設計就唔掂。

作者對呢啲模型嘅感覺係「哀其不幸、怒其不爭」。

點樣可以快速提升佢哋嘅審美能力呢？答案係用 Anthropic 官方嘅 frontend-design skill。

整理重點

一鍵安裝，效果立竿見影

安裝好簡單，只要根據你用緊嘅工具執行對應嘅 npx 指令就得。

frontend-design skill 就係用 npx skills-installer 安裝。

用 Claude Code：npx skills-installer install @anthropics/claude-code/frontend-design --client claude-code
用 Codex：npx skills-installer install @anthropics/claude-code/frontend-design --client codex
用 Cursor：npx skills-installer install @anthropics/claude-code/frontend-design --local --client cursor

整理重點

背後原理：畀大廚一份詳細食譜

你可以將大模型想像成一個擁有全世界菜譜嘅頂級廚師。普通指令「給我做頓飯」，佢可能會求其整碟番茄炒蛋。但 frontend-design skill 就好似同佢講「你係米芝蓮三星主廚，請用分子料理技術，做一道展現深海孤獨感嘅創意菜」，仲詳細解釋咗咩係分子料理、深海孤獨感同注意事項。

呢個 skill 特別強調咗動效、質感、字體、一致性呢啲美學元素。

仲有情感化連接、大膽美學同意圖表達。

整理重點

使用技巧同自訂建議

安裝完成後，每次需要前端設計時，只要強調一句「使用 frontend-design skill 來完成前端設計工作」就得。

如果係新項目，呢個 skill 會唔安裝任何依賴，快速完成 HTML；
如果係老項目或者顯式強調依賴，佢會按你要求嘅技術棧完成工作。

你可以將自己嘅品味（例如主色、字體、圓角、陰影、按鈕風格）寫入 skill。

咁樣就可以成為一個新 skill，令模型每次都按你嘅品牌調性出圖，表現更好。

哈囉，大家好，我係劉小排。

目前，如果我哋咩都唔做，冇額外畀風格規範/設計系統/示例參考嘅話，可以話有審美能力嘅編程模型得Gemini 3 Pro、Gemini 3 Flash、Claude Opus 4.5、Claude Sonnet 4.5呢四款。

當我哋見到GPT-5.2-Codex呢啲明明其他方面都好叻、但係偏偏前端審美唔掂嘅模型嗰陣，成日會感嘆「哀其不幸、怒其不爭」。

如果我哋想包括GPT-5.2-Codex、GLM-4.7、M2.1在內嘅其他主流模型都擁有審美能力，點算？有冇快速提升佢哋前端審美能力嘅方法呢？

有。

答案係：skill

近期發佈嘅主流編程大模型全部已經原生支援skill協議，我哋為佢哋安裝Anthropic官方提供嘅frontend-design skill，就可以即刻提升所有主流模型嘅前端審美能力。

唔信？我哋先睇嚇效果對比。

效果對比

對於

重新設計 https://raphael.app 的首頁

呢條簡單嘅指令。

如果我哋直接落任務畀GPT-5.2-Codex，效果如下。

唔係我黑佢，下面右邊嗰個奇怪嘅圓圈，佢就係嗰個樣，根本唔會鬱。你見到嘅，已經係完整截圖。好似有動畫效果咁，其實冇。

如果我哋用skill，效果如下：

我哋可以見到，用咗front-design skill之後，無論係字體、一致性、動畫效果、質感、排版，都有質嘅飛躍。

嘿嘿，神奇嗎？

咩原理？

其實並唔神奇。

你可以咁理解：大模型就好似一個擁有全世界食譜嘅頂級廚師。

普通指令「煮餐飯畀我食」，廚師為咗穩陣、或者為咗偷懶、或者受限於佢自身嘅品味，佢會畀你做一碟番茄炒蛋，雖然食得，但好普通。

使用Frontend-design Skill，等於額外強調咗「你係米芝蓮三星主廚，請務必用分子料理技術，做一道展現『深海孤獨感』嘅創意菜，唔準用常規調料」而且詳細畀出咗咩係「分子料理技術」、咩係「深海孤獨感」、仲有咩注意事項，廚師就會調動佢畢生所學，畀你做出一道藝術品。

Anthropic嘅Frontend-design skill嘅運作方式就係咁，佢特別強調咗動效、質感、字體、一致性、情感化連接、大膽美學(Bold Aesthetic)、意圖表達(Intentionality)等等，而大模型完全可以理解呢個skill畀出嘅要求同食譜。

我認為，Frontend-design skill係一款教科書級嘅skill，雖然簡短，但係佢完全針對大模型運作原理同底層工作方法嚟寫，能夠穩定發揮化腐朽為神奇、四兩撥千斤嘅效果，充分調用咗大模型自身已經藴含嘅強大能力。

點樣用？

好簡單，一句命令行嘅事。

如果你用Claude Code，執行呢條命令。

我知道我有好多讀者朋友用國產模型GLM-4.7、M2.1嚟驅動Claude Code，嗯，都係得嘅，只要係Claude Code，都得。

npx skills-installer install @anthropics/claude-code/frontend-design --client claude-code

如果你用Codex，執行呢條命令。佢同時對Codex CLI同Codex IDE Extension生效。喺上面嘅演示入面，其實我用嘅係Codex IDE Extension。

npx skills-installer install @anthropics/claude-code/frontend-design --client codex

如果你用Cursor

npx skills-installer install @anthropics/claude-code/frontend-design --local --client cursor

安裝完成之後，喺我哋Vibe Coding需要用到前端設計能力嘅時候，只需輕輕講一句「使用用frontend-design skill嚟完成前端設計工作」，就可以召喚佢喇。

對了，額外提多幾句：

如果係新項目、唔加任何約束，呢個Skill會唔安裝任何依賴，快速完成html；
如果係舊項目或者明確強調依賴，佢會按照你要求嘅技術棧嚟完成工作。
你仲可以做啲修改：喺原版frontend-design skill嘅基礎上，將你自己嘅品味（主色/字體/圓角/陰影/按鈕風格）等等寫入去，成為一個新嘅skill，令模型每次都按你嘅品牌調性出圖，表現更加好。

好喇，分享完，到你喇。

去試嚇啦！歡迎到留言區交流！

哈嘍，大家好，我是劉小排。

目前，如果我們啥都不做，在不額外給風格規範/設計系統/示例參考的情況下，說得上有審美能力的編程模型只有Gemini 3 Pro、Gemini 3 Flash、Claude Opus 4.5、Claude Sonnet 4.5四款。

當我們看到GPT-5.2-Codex等明明其他方便都挺厲害、但是唯獨前端審美不行的模型的時候，嚐嚐感嘆“哀其不幸、怒其不爭”。

如果我們想要包括GPT-5.2-Codex、GLM-4.7、M2.1在內的其他主流模型也擁有審美能力，怎麼辦？是否有快速提升他們前端審美能力的方法呢？

有。

答案是：skill

近期發佈的主流編程大模型全都已經原生支持skill協議，我們為其安裝Anthropic官方提供的frontend-design skill，即可立即提升所有主流模型的前端審美能力。

不信？我們先看看效果對比。

效果對比

對於

重新設計 https://raphael.app 的首頁

這條簡單的指令。

如果我們直接下達任務給GPT-5.2-Codex，效果如下。

不是我黑它，下圖右邊那個奇怪的圓圈，它就長那樣，根本不工作。你看到的，已經是完整截圖了。看上去好像是有動效的樣子，其實沒有。

如果我們使用skill，效果如下：

我們可以看到，使用front-design skill後，無論是字體、一致性、動畫效果、質感、排版，都有質的飛躍。

嘿嘿，神奇嗎？

什麼原理？

其實並不神奇。

你可以這麼理解：大模型就像一個擁有全世界菜譜的頂級廚師。

普通指令“給我做頓飯”，廚師為了保險、或者為了偷懶、或者受限於它自身的品味，它會給你做一盤西紅柿炒雞蛋，雖然能吃，但很普通。

使用Frontend-design Skill，等同於額外強調了 “你是米其林三星主廚，請務必使用分子料理技術，做一道展現‘深海孤獨感’的創意菜，拒絕使用常規調料”並且詳細給出了什麼是“分子料理技術”、什麼是“深海孤獨感”、還有哪些注意事項，廚師就會調動他畢生所學，給你做出一道藝術品。

Anthroipic的Frontend-design skill的工作方式正是如此，它特別強調了動效、質感、字體、一致性、情感化連接、大膽美學(Bold Aesthetic)、意圖表達(Intentionality)等等，而大模型完全可以理解這個skill給出的要求和菜譜。

我認為，Frontend-design skill是一款教科書級的skill，雖然簡短，但是它是完全針對大模型工作原理和底層工作方法來寫的，能夠穩定發揮化腐朽為神奇、四兩撥千斤的效果，充分調用了大模型自身已經藴含的強大能力。

如何使用？

很簡單，一句命令行的事。

如果你用Claude Code，執行這條命令。

我知道我有很多讀者朋友使用國產模型GLM-4.7、M2.1來驅動Claude Code，嗯，也是可以的，只要是Claude Code，都可以。

npx skills-installer install @anthropics/claude-code/frontend-design --client claude-code

如果你用Codex，執行這條命令。它同時對Codex CLI和Codex IDE Extension生效。在上面的演示中，其實我用的是Codex IDE Extension。

npx skills-installer install @anthropics/claude-code/frontend-design --client codex

如果你使用的是Cursor

npx skills-installer install @anthropics/claude-code/frontend-design --local --client cursor

安裝完成後，在我們Vibe Coding需要用到前端設計能力的時候，只需要稍微強調一句“使用frontend-design skill來完成前端設計工作”，就能夠召喚它了。

對了，額外囑咐幾句：

如果是新項目、不加任何約束，這個Skill會不安裝任何依賴，快速完成html；
如果是老項目或者顯式強調依賴，它會按照你要求的技術棧來完成工作。
你還可以做一些修改：在原版frontend-design skill的基礎上，把你自己的品味（主色/字體/圓角/陰影/按鈕風格）等等寫進去，成為一個新的skill，讓模型每次都按你的品牌調性出圖，表現更好。

好的，分享完了，到你了。

去試試吧！歡迎到評論區交流！