1. 為什么 AI 寫的網(wǎng)頁(yè)總像同一套模板用 Claude Code、Cursor 或 Codex 生成網(wǎng)頁(yè)時(shí)很多人會(huì)遇到同一個(gè)現(xiàn)象不管項(xiàng)目換成什么行業(yè)出來(lái)的頁(yè)面結(jié)構(gòu)高度雷同。頂部一段大標(biāo)題中間三張功能卡片下面一個(gè)行動(dòng)按鈕最后接頁(yè)腳。你把顏色從藍(lán)改成綠把字體從 Inter 換成思源黑體整體觀感還是像同一套模板換皮。這不是模型能力不行而是它在沒有額外約束時(shí)會(huì)默認(rèn)收斂到訓(xùn)練數(shù)據(jù)里最高頻的布局模式。要打破這種收斂需要給 AI 編程助手注入一套明確的設(shè)計(jì)規(guī)則。Hallmark 就是干這個(gè)的它由 Nutlope 開發(fā)是一套面向 AI 編程助手的開源設(shè)計(jì)技能MIT 許可證當(dāng)前技能版本 1.1.0支持 Claude Code、Cursor 和 Codex。它不替代 React、Next.js、Vue 或普通 HTML而是作為一份 AI 助手會(huì)讀取的設(shè)計(jì)規(guī)范約束頁(yè)面結(jié)構(gòu)、字體搭配、顏色和組件節(jié)奏讓不同項(xiàng)目產(chǎn)生更明顯的差異。這篇內(nèi)容聚焦 Hallmark 在 Claude Code、Cursor、Codex 中的安裝與配置給出可復(fù)制的 settings.json / config.toml 骨架以及用 TaoToken 統(tǒng)一 Key 接入的步驟最后演示安裝后如何驗(yàn)證生成頁(yè)面的去模板化效果。適合正在用 AI 做企業(yè)官網(wǎng)、SaaS 介紹頁(yè)、管理后臺(tái)重設(shè)計(jì)或者給多個(gè)品牌生成不同風(fēng)格落地頁(yè)的開發(fā)者。Hallmark 提供四種使用方式默認(rèn)模式按需求創(chuàng)建新界面hallmark audit檢查已有頁(yè)面并列出設(shè)計(jì)問題但不改代碼hallmark redesign保留原有內(nèi)容、品牌和信息結(jié)構(gòu)只重做視覺層hallmark study分析截圖或網(wǎng)頁(yè)的結(jié)構(gòu)、字體和顏色特征提取設(shè)計(jì)思路而非逐像素復(fù)制。項(xiàng)目還內(nèi)置 20 種主題和一套自定義設(shè)計(jì)流程不同需求不會(huì)只做簡(jiǎn)單顏色替換。2. 前置準(zhǔn)備TaoToken 統(tǒng)一 Key 與技能安裝在裝 Hallmark 之前先把 AI 編程助手的模型接入理順。如果你同時(shí)用 Claude Code、Cursor 和 Codex每個(gè)工具各配一套 Key 會(huì)很亂。TaoToken 提供統(tǒng)一的 API 入口官網(wǎng)是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 地址是 https://taotoken.net/api 不加 UTM。你可以在控制臺(tái)創(chuàng)建 Key然后讓三個(gè)工具共用同一個(gè) Key省去反復(fù)切換的麻煩。創(chuàng)建 Key 的入口在控制臺(tái)地址是 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite 。Key 管理頁(yè)面在 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 生成后復(fù)制保存后面配置里會(huì)用到。接入文檔在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 遇到參數(shù)不確定時(shí)可以對(duì)照。Hallmark 本身的安裝很簡(jiǎn)單官方命令是npx skills add nutlope/hallmark這條命令會(huì)把技能文件拉到本地對(duì)應(yīng)目錄。以后重新執(zhí)行相同命令即可更新技能。安裝完成后根據(jù)你用的 AI 編程工具檢查技能文件位置工具技能目錄Claude Code~/.claude/skills/hallmark/Codex個(gè)人級(jí)~/.codex/skills/hallmark/Codex項(xiàng)目級(jí)項(xiàng)目目錄/.codex/skills/hallmark/Cursor項(xiàng)目目錄/.cursor/rules/hallmark.mdcCursor 的做法是把SKILL.md正文保存為項(xiàng)目規(guī)則文件hallmark.mdc。Claude Code、Cursor 和 Codex 的手動(dòng)安裝路徑在項(xiàng)目 README 里都有列出自動(dòng)安裝失敗時(shí)可以手動(dòng)放置。注意Hallmark 只是技能文件不需要單獨(dú)啟動(dòng)數(shù)據(jù)庫(kù)、后臺(tái)服務(wù)或 Docker 容器。個(gè)人開發(fā)者直接裝在自己電腦上就能用。3. 可復(fù)制配置settings.json 與 config.toml 骨架這一節(jié)給出三個(gè)工具的可復(fù)制配置骨架。核心思路是把模型請(qǐng)求指向 TaoToken 的 API 地址并把 Key 通過(guò)環(huán)境變量注入避免硬編碼進(jìn)倉(cāng)庫(kù)。3.1 Claude Code 的 settings.jsonClaude Code 的配置放在~/.claude/settings.json。下面是一個(gè)骨架把ANTHROPIC_BASE_URL指向 TaoTokenKey 從環(huán)境變量讀取{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: ${TAOTOKEN_API_KEY}, ANTHROPIC_MODEL: claude-sonnet-4-20250514 }, permissions: { allow: [ Read, Edit, Bash(git status), Bash(git diff) ] } }然后在 shell 里導(dǎo)出 Key不要寫進(jìn)配置文件export TAOTOKEN_API_KEY你的Key如果你更習(xí)慣用 Claude Code 的 Anthropic 兼容接入方式可以參考 https://taotoken.net/ClaudeCodeAnthropic?utm_sourcetaotoken_aicg_blog_endutm_contentClaudeCodeAnthropicutm_campaignrewrite 里的說(shuō)明把 base URL 和鑒權(quán)頭對(duì)齊。3.2 Codex 的 config.tomlCodex 的配置放在~/.codex/config.toml。骨架如下model gpt-5-codex model_provider taotoken [model_providers.taotoken] name TaoToken base_url https://taotoken.net/api env_key TAOTOKEN_API_KEY [profiles.default] model_provider taotoken approval_policy on-requestenv_key指向環(huán)境變量名Codex 啟動(dòng)時(shí)會(huì)去讀TAOTOKEN_API_KEY。這樣 Key 不進(jìn)配置文件也不進(jìn) Git。3.3 Cursor 的規(guī)則與模型配置Cursor 分兩部分。模型接入在設(shè)置里填 OpenAI 兼容的 base URL 和 Keybase URL 用https://taotoken.net/apiKey 填你的 TaoToken Key。設(shè)計(jì)規(guī)則部分把 Hallmark 的SKILL.md正文保存為項(xiàng)目目錄/.cursor/rules/hallmark.mdcCursor 會(huì)在該項(xiàng)目里自動(dòng)加載這條規(guī)則。如果你需要長(zhǎng)期跑編碼任務(wù)或 Agent 流程可以看 Coding Plan地址是 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 它更適合持續(xù)性的編碼場(chǎng)景而不是單次對(duì)話。提示三個(gè)工具共用同一個(gè) TaoToken Key 時(shí)建議在控制臺(tái)給 Key 起一個(gè)能區(qū)分用途的名字方便后續(xù)排查是哪個(gè)工具在消耗額度。4. 驗(yàn)證請(qǐng)求確認(rèn)接入成功并觀察去模板化效果配置寫完后先驗(yàn)證模型請(qǐng)求是否真的走通了再驗(yàn)證 Hallmark 是否生效。分兩步走。4.1 驗(yàn)證 TaoToken 接入在 Claude Code 里發(fā)一條最簡(jiǎn)單的請(qǐng)求比如讓它讀一個(gè)文件并總結(jié)。如果返回正常說(shuō)明 base URL 和 Key 都對(duì)。如果報(bào)鑒權(quán)錯(cuò)誤優(yōu)先檢查環(huán)境變量是否在當(dāng)前 shell 生效echo $TAOTOKEN_API_KEY輸出為空說(shuō)明沒導(dǎo)出成功。Codex 那邊可以用codex啟動(dòng)后發(fā)一條測(cè)試指令觀察是否命中taotokenprovider。Cursor 則在設(shè)置里點(diǎn)驗(yàn)證或者直接開一個(gè)對(duì)話問一句。想單獨(dú)驗(yàn)證模型對(duì)話是否正?？梢杂媚Ｐ蛯?duì)話頁(yè)面地址是 https://taotoken.net/model-chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel-chatutm_campaignrewrite 發(fā)一條消息看返回能快速區(qū)分是 Key 問題還是工具配置問題。4.2 驗(yàn)證 Hallmark 去模板化效果接入通了之后進(jìn)入一個(gè)準(zhǔn)備開發(fā)的網(wǎng)站目錄cd ~/projects/company-site啟動(dòng)已經(jīng)裝好 Hallmark 的 AI 編程助手然后描述真實(shí)需求。關(guān)鍵是給足業(yè)務(wù)上下文而不是只說(shuō)“做個(gè)首頁(yè)”使用 Hallmark 重新設(shè)計(jì)這個(gè)企業(yè)官網(wǎng)首頁(yè)。 保留現(xiàn)有文字內(nèi)容和路由不要?jiǎng)h除原有業(yè)務(wù)組件。 頁(yè)面面向工業(yè)材料采購(gòu)客戶需要清晰展示產(chǎn)品分類、 生產(chǎn)能力、質(zhì)量控制和聯(lián)系方式。 不要編造客戶數(shù)量、認(rèn)證證書或銷售數(shù)據(jù)。Hallmark 會(huì)根據(jù)需求選擇頁(yè)面結(jié)構(gòu)和主題并在輸出前做設(shè)計(jì)檢查。對(duì)比安裝前后你會(huì)看到明顯差異安裝前 AI 大概率給你三卡片加行動(dòng)按鈕安裝后它會(huì)根據(jù)“工業(yè)材料采購(gòu)”這個(gè)場(chǎng)景選擇更貼近 B 端信息密度的布局比如參數(shù)表、分類導(dǎo)航、資質(zhì)區(qū)塊而不是套用通用 SaaS 模板。如果只是想檢查已有頁(yè)面的問題在 AI 助手里輸入hallmark audit ./src想保留內(nèi)容但重做界面hallmark redesign ./src想分析參考頁(yè)面的設(shè)計(jì)特點(diǎn)hallmark study 頁(yè)面地址這些都是在 AI 編程助手的對(duì)話里輸入的不是在普通 Shell 里執(zhí)行的獨(dú)立命令。這點(diǎn)容易搞混我第一次用的時(shí)候就在終端里敲了hallmark audit結(jié)果當(dāng)然找不到命令。4.3 修改已有項(xiàng)目的安全操作Hallmark 的規(guī)則明確要求在已有項(xiàng)目中不能未經(jīng)確認(rèn)就刪除生產(chǎn)文件、路由目錄或組件。默認(rèn)應(yīng)修改指定文件或增加新組件和設(shè)計(jì)變量。涉及批量刪除時(shí)需要先列出文件計(jì)劃并獲得確認(rèn)。為了進(jìn)一步防誤改可以在操作前要求先列出準(zhǔn)備創(chuàng)建和修改的文件不要?jiǎng)h除任何文件。 等我確認(rèn)后再開始修改。改完檢查 Git 差異git status git diff確認(rèn)沒問題再提交git add . git commit -m redesign homepage with Hallmark重要項(xiàng)目先建獨(dú)立分支git switch -c hallmark-redesign這樣設(shè)計(jì)效果不符合預(yù)期時(shí)隨時(shí)能回到原來(lái)的代碼。5. 本篇常見錯(cuò)排查這一節(jié)整理安裝和配置 Hallmark 時(shí)最容易踩的坑按現(xiàn)象給排查方向?，F(xiàn)象一npx skills add nutlope/hallmark執(zhí)行后找不到技能目錄。先確認(rèn) Node.js 和 npm 可用node --version、npm --version、npx --version都要能輸出版本號(hào)。如果 npx 拉取慢檢查網(wǎng)絡(luò)和 npm 源。安裝完成后按第 2 節(jié)的表格逐個(gè)核對(duì)目錄Claude Code 看~/.claude/skills/hallmark/Codex 看~/.codex/skills/hallmark/Cursor 看項(xiàng)目里的.cursor/rules/hallmark.mdc。現(xiàn)象二在終端里敲hallmark audit報(bào) command not found。這是最常見的誤解。Hallmark 的四種模式都是在 AI 編程助手的對(duì)話里輸入的不是獨(dú)立 CLI 命令。你不需要把它裝成全局命令也不需要在 Shell 里執(zhí)行。現(xiàn)象三配置寫好了但請(qǐng)求還是走原來(lái)的模型。檢查環(huán)境變量是否在當(dāng)前 shell 生效echo $TAOTOKEN_API_KEY有沒有輸出。Claude Code 的settings.json里如果用了${TAOTOKEN_API_KEY}這種占位要確認(rèn)工具支持變量展開不支持的話就改成直接讀環(huán)境變量的寫法。Codex 的config.toml里env_key名字要和實(shí)際導(dǎo)出的變量名完全一致大小寫敏感?，F(xiàn)象四Cursor 里 Hallmark 規(guī)則不生效。確認(rèn)hallmark.mdc放在項(xiàng)目根目錄的.cursor/rules/下而不是全局目錄。規(guī)則文件是按項(xiàng)目加載的換項(xiàng)目要重新放。另外確認(rèn) Cursor 的模型接入 base URL 填的是https://taotoken.net/apiKey 是 TaoToken 控制臺(tái)生成的?，F(xiàn)象五AI 仍然編造客戶數(shù)量、轉(zhuǎn)化率、評(píng)價(jià)。Hallmark 規(guī)則要求 AI 不得隨意編造證明材料如果用戶沒提供真實(shí)數(shù)據(jù)應(yīng)使用占位內(nèi)容或調(diào)整頁(yè)面結(jié)構(gòu)。但規(guī)則生效的前提是技能被正確加載。如果發(fā)現(xiàn)還在編數(shù)據(jù)先確認(rèn)技能目錄存在再在對(duì)話里明確要求“不要編造客戶數(shù)量、認(rèn)證證書或銷售數(shù)據(jù)”。現(xiàn)象六改完項(xiàng)目發(fā)現(xiàn)文件被誤刪。這是沒走確認(rèn)流程導(dǎo)致的。操作前要求 AI 先列出準(zhǔn)備創(chuàng)建和修改的文件等確認(rèn)后再動(dòng)手。已經(jīng)誤刪的話用git status和git diff看變更沒提交的可以git checkout恢復(fù)提交過(guò)的用git revert或回到之前的分支?，F(xiàn)象七想預(yù)覽 Hallmark 倉(cāng)庫(kù)里的示例站點(diǎn)?？寺}(cāng)庫(kù)后啟動(dòng)本地預(yù)覽git clone https://github.com/Nutlope/hallmark.git cd hallmark npm run serve檢查監(jiān)聽端口ss -lntp | grep 4173這個(gè)靜態(tài)站點(diǎn)用 Python HTTP 服務(wù)器在 4173 端口運(yùn)行site目錄主要用于展示不同主題和頁(yè)面案例不是必須部署的管理后臺(tái)。遠(yuǎn)程服務(wù)器上想本地查看用 SSH 隧道ssh -L 4173:127.0.0.1:4173 developer服務(wù)器IP然后訪問本地 4173 端口。不建議把開發(fā)端口直接暴露到公網(wǎng)。6. 把設(shè)計(jì)規(guī)則沉淀成團(tuán)隊(duì)資產(chǎn)Hallmark 真正有價(jià)值的地方不是裝完就完事而是把設(shè)計(jì)約束變成項(xiàng)目里可復(fù)用的規(guī)則。你可以把hallmark.mdc或技能目錄提交到私有倉(cāng)庫(kù)團(tuán)隊(duì)里每個(gè)人用 Claude Code、Cursor 或 Codex 時(shí)都加載同一套規(guī)則生成出來(lái)的頁(yè)面風(fēng)格才會(huì)一致而不是各寫各的。配合 TaoToken 的統(tǒng)一 Key三個(gè)工具共用一套接入配置換工具不用重新配模型。需要長(zhǎng)期跑編碼任務(wù)或 Agent 流程時(shí)Coding Plan 比單次對(duì)話更合適只是偶爾驗(yàn)證模型輸出用模型對(duì)話頁(yè)面就夠。接入過(guò)程中遇到鑒權(quán)或參數(shù)問題先翻接入文檔再對(duì)照 API Keys 頁(yè)面確認(rèn) Key 狀態(tài)。最后提醒一句Hallmark 能減少模板化但最終效果仍取決于需求描述、真實(shí)文案、品牌資料和圖片素材。企業(yè)網(wǎng)站如果缺少真實(shí)產(chǎn)品信息、品牌顏色、應(yīng)用案例和業(yè)務(wù)結(jié)構(gòu)光靠設(shè)計(jì)規(guī)則還是很難得到完整結(jié)果。把業(yè)務(wù)信息給足規(guī)則才發(fā)揮得出來(lái)。