Hallmark Hero 標(biāo)題長(zhǎng)度與字號(hào)鉗制關(guān)系4 檔自動(dòng)降檔規(guī)則完整指南【免費(fèi)下載鏈接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/hal/hallmarkHallmark是一個(gè)面向 Claude Code、Cursor 和 Codex 的 Anti-AI-slop 設(shè)計(jì)技能design skill它會(huì)拒絕一切一眼 AI 味的默認(rèn)審美。而在它的排版規(guī)則體系里最實(shí)用的一條就是Hero 標(biāo)題長(zhǎng)度與字號(hào)的鉗制關(guān)系A(chǔ)I 寫(xiě)出的 Hero 大標(biāo)題會(huì)先數(shù)清字符數(shù)再按 4 個(gè)檔位自動(dòng)選擇字號(hào)上限超長(zhǎng)標(biāo)題自動(dòng)降檔——這正是 Hallmark 生成的頁(yè)面看起來(lái)不像模板的關(guān)鍵細(xì)節(jié)之一。為什么字號(hào)要跟著標(biāo)題長(zhǎng)度走在 AI 生成的頁(yè)面里一條 100 字符的標(biāo)題配 display 級(jí)超大字號(hào)是最可靠的 AI 破綻AI tell之一。它會(huì)在 1280–1440px 的視口里擠成一團(tuán)換行后又讀起來(lái)像戲劇感而非分量感。Hallmark 的解法不是讓你手動(dòng)調(diào)字號(hào)而是把這條規(guī)則寫(xiě)進(jìn)了技能規(guī)則集AI 在構(gòu)建 Hero 時(shí)先統(tǒng)計(jì)渲染出的h1字符數(shù)再對(duì)照檔位表選字號(hào)上限。這條規(guī)則疊加在任何主題自己的--text-displayclamp 之上相當(dāng)于給字號(hào)加了一道長(zhǎng)度閥門(mén)。規(guī)則原文位于 typography.md 的 Hero headline sizing 一節(jié)并在 SKILL.md 的 Build 步驟中被列為強(qiáng)制項(xiàng)。4 檔自動(dòng)降檔規(guī)則速查表Hallmark 把 Hero 標(biāo)題分成4 個(gè)長(zhǎng)度檔位每檔對(duì)應(yīng)一個(gè)字號(hào)上限標(biāo)題長(zhǎng)度字號(hào)上限說(shuō)明≤ 20 字符如Limitless完整--text-display單詞標(biāo)題可放大到 7rem僅限 display 風(fēng)格強(qiáng)烈的主題21–50 字符默認(rèn)甜點(diǎn)區(qū)--text-display若 414px 寬度下?lián)Q行超過(guò) 2 行降一檔到--text-display-s51–90 字符封頂--text-display-s強(qiáng)烈建議拆成 eyebrow headline 90 字符重寫(xiě)得短或封頂--text-4xl并收緊行高100 字符標(biāo)題 display 字號(hào) 最典型的 AI 味可以看到降檔是漸進(jìn)的從完整 display 字號(hào) → display-s → text-4xl檔位越靠后字號(hào)越小、行高越緊。50 字符是整條規(guī)則的中軸線(xiàn)——Hallmark 默認(rèn)推薦你寫(xiě)的標(biāo)題就落在 21–50 字符這個(gè)甜點(diǎn)區(qū)。以 TallySaaS 示例這類(lèi)標(biāo)準(zhǔn)商業(yè)頁(yè)面為例Hero 標(biāo)題正好落在甜點(diǎn)區(qū)字號(hào)停在--text-display檔既不顯小氣也不溢出激進(jìn)展示主題 50 字符再降一檔Brutal、Riso、Manifesto 這幾類(lèi)激進(jìn)展示型主題的--text-display被鉗制在 6.5–9rem——這個(gè)天花板只適用于 ≤ 50 字符的短句。標(biāo)題一旦超過(guò) 50 字符這些主題會(huì)自動(dòng)路由到--text-display-s整體再降一檔。也就是說(shuō)激進(jìn)主題實(shí)際上是雙重鉗制主題自己鉗一次長(zhǎng)度規(guī)則再鉗一次。這解釋了為什么 Hallmark 的短標(biāo)題示例敢把字號(hào)推到 7rem單詞且 ≤ 12ch 的特例上限而長(zhǎng)標(biāo)題永遠(yuǎn)溫順得多字號(hào)令牌clamp 背后的真實(shí)數(shù)值降檔的目標(biāo)令牌定義在 Hallmark 官網(wǎng)的 tokens.css 中采用 CSSclamp()實(shí)現(xiàn)最小值 視口彈性 最大值的響應(yīng)式鉗制--text-display: clamp(3.0rem, 5.5vw 1.0rem, 5.75rem); /* 上限約 92px */ --text-display-s: clamp(2rem, 3vw 1rem, 3rem); /* 降檔檔上限 48px */降檔的幅度是實(shí)實(shí)在在的從 display 到 display-s上限直接從 ~92px 掉到 48px降幅接近一半。而 typography 規(guī)則同時(shí)規(guī)定 display 字號(hào)不得超過(guò) 5.5rem88px——超過(guò)這個(gè)值標(biāo)題在桌面視口里只會(huì)自我擠壓。最佳實(shí)踐從源頭控制長(zhǎng)度與其讓標(biāo)題撞線(xiàn)后被動(dòng)降檔Hallmark 更推薦一開(kāi)始就寫(xiě)短自己撰寫(xiě)標(biāo)題非用戶(hù)提供的文案時(shí)目標(biāo)≤ 7 個(gè)詞、≤ 50 字符用祈使句或名詞短語(yǔ)開(kāi)頭永遠(yuǎn)不要用動(dòng)名詞-ing開(kāi)頭標(biāo)題 50 字符時(shí)優(yōu)先考慮拆成 eyebrow headline 兩行結(jié)構(gòu)而不是硬塞進(jìn)一個(gè)大字號(hào)里整頁(yè)最多使用 5 種字號(hào)——需要更多層級(jí)時(shí)用字重和顏色而不是再加一個(gè)尺寸。Wayfare 這類(lèi)旅行頁(yè)面的 Hero 就是按這套規(guī)則產(chǎn)出的結(jié)果標(biāo)題長(zhǎng)度受控、字號(hào)穩(wěn)在甜點(diǎn)檔視覺(jué)重心落在氛圍而非文字堆疊上規(guī)則出處相關(guān)文件路徑一覽內(nèi)容路徑4 檔降檔規(guī)則原文typography.mdBuild 步驟強(qiáng)制項(xiàng)SKILL.md字號(hào)令牌定義tokens.css輸出前 65 項(xiàng) slop 測(cè)試門(mén)禁slop-test.md更多 Hero 構(gòu)建細(xì)節(jié)hero-enrichment.md小結(jié)Hallmark 的 Hero 標(biāo)題鉗制關(guān)系可以濃縮成一句話(huà)數(shù)清字符對(duì)號(hào)入座超長(zhǎng)自動(dòng)降檔?！?20 字符放開(kāi)用、21–50 字符是默認(rèn)甜點(diǎn)區(qū)、51–90 字符封頂 display-s、超過(guò) 90 字符直接重寫(xiě)——再疊加激進(jìn)主題的 50 字符二次鉗制保證任何輸出都不會(huì)出現(xiàn)超大字號(hào) 長(zhǎng)標(biāo)題的 AI 招牌破綻。掌握了這條規(guī)則你寫(xiě) brief 時(shí)就能反過(guò)來(lái)指導(dǎo) AI 生成更克制的標(biāo)題了 【免費(fèi)下載鏈接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/hal/hallmark創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考