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