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