jenreh/hallmark

hallmark 是做什麼的？

讓編碼助手生成的 UI 看起來是「設計過的」，而不是「生成的」：一道對抗每個模型訓練預設值的堅硬底線，一個明確的方向以防止連續建構趨同，每頁只聚焦一個概念。在底線之上，頁面由你掌握：你是一位有能力的设计師。

由 Together AI 提供支援。

底線

綁定每個環境中的每一次輸出，不可放棄，即使其他內容未讀取也一樣。

1. 每個顏色和每種字型都必須透過 :root（或已宣告的主題區塊）中定義的代號來使用。代號區塊之外不得使用任何直接顏色或 font-family。(48)
2. 永遠不要使用 transition: all。永遠不要動畫化 width、height、top 或 left。(10a)
3. 羅馬字體的標題內，絕不要有斜體單詞。(38i)
4. 在 html 和 body 上都設定 overflow-x: clip。永遠不要使用 hidden 或 100vw。(34)
5. 包含圖片的網格軌道使用 minmax(0, 1fr)；顯示標題需帶有 overflow-wrap: break-word; min-width: 0。(50)
6. 每個互動元素都必須有即時出現的 :focus-visible。(26a, 15)
7. 每個動畫都必須有 prefers-reduced-motion: reduce 的降級方案，且關閉腳本時內容仍可見。(27, 62)
8. 絕不虛構指標、推薦、標誌牆或案例研究數量。(46a)
9. 絕不使用眉題，也絕不使用追蹤大寫或小型大寫的標籤：標籤、說明文字、表格標題、標籤和導航連結應使用正文字體（或主題的標籤字體），字號小一級，使用句子大小寫或小寫，不加追蹤。(54, 67)
10. 絕不使用中間點連接的中繼資料字串、貼在連結文字上的箭頭或裝飾性狀態點。(63)
11. 絕不使用紫到藍的漸層、卡片中的卡片、作為圖示的表情符號或手繪的瀏覽器/作業系統視窗。(2a, 4, 30a, 47a)
12. 在 1280 x 800 的視窗中，英雄區的標題、一個句子和主要操作都必須可見，無需滾動。(44b)
13. 任何單一螢幕上約 80 個單詞；英雄區的文字僅包含標題、一個句子及其操作。(58)
14. 容器有最大寬度並置中：在 1920 解析度下，外邊距增大，但度量與網格保持不變。(44d)
15. CSS 原始碼的第一個非空行必須是 Hallmark 印記，接著是評論行，再來是任何豁免聲明。(20)
16. 如果 Node 可用，在交付前執行 node <skill-dir>/scripts/sloplint.mjs <output> --render。修復所有 FAIL；修復或豁免所有 REFLEX。

在底線之上，Reflex 門檻是模型會陷入的預設，若有正當理由可記錄豁免；Finish 檢查是工藝細節，需回答但不會阻擋（references/gates.md § 1 和 § 2）。

流程

0. 預檢：在提問前先讀取專案。
1. 一次性提問：素材、受眾、用途、風格。
2. 形狀：設計頁面，然後為其命名。
3. 方向：分配一個主題，或在要求自訂時自由設計。
4. 載入佈局、圖像、工藝、類型和主題檔案以及 gates.md § 1 到 § 4。
5. 提取區塊，僅一次。
6. 建構：先做英雄區，再做整個頁面；印記、tokens.css、紀錄。
7. 掃描：sloplint --render 直到乾淨，檢查已判斷的門檻、完成審查、素材詢問。

動詞，僅在用戶提及 Hallmark 時使用：redesign <target>（保留內容和連接的完整重新設計）和 audit <target>（一份報告）；先閱讀 references/redesign.md。對現有設計的任何其他更改都不是 Hallmark 運行：按照要求並在專案自有系統中執行。

Codex CLI 和 OpenCode 先閱讀 references/flow.md § 環境；其他環境照此檔案執行。

0. 預檢

訊號，依序：根目錄下的 design.md 或 DESIGN.md（鎖定系統：覆蓋以下所有內容，頁面共享它）；.hallmark/brand-spec.md 或提及真實品牌的提示（執行 references/brand-truth.md；切勿憑記憶為真實品牌設定主題）；專案的字型、調色盤、間距、動畫庫和框架（package.json、Tailwind 設定、:root、代號、字型連結）；產品本身：一個 URL、正在運行的開發伺服器、一個可用一條指令啟動的專案或機器上的應用程式（建構時使用 scripts/capture.mjs 擷取，請見 imagery.md § 4）；一個 Inspo MCP 伺服器（mcp__inspo__* 工具：訊號 8，請見 flow.md § 訊號 8）；一個 /hallmark 提示、提及 Hallmark 或自訂要求優先於它）；已設定的 TOGETHER_API_KEY（訊號 9，構圖步驟）。

輸出一個區塊（檔案:行數引用、保留了什麼、引入了什麼），快取在 .hallmark/preflight.json 中（請見 flow.md § 預檢）。

1. 一次性提問

一條訊息，即使提示只有五個字：

在我開始建構之前，有四件事。 1. 素材，最重要的一項：頁面可以展示什麼？截圖或螢幕錄影（或告訴我應用程式、其 URL 或資料夾位置，我會執行並擷取它們），你的照片，真實數字（客戶數、正常運行時間、價格），一句附有來源人名的引言，你可以使用的標誌。貼上它們或提供路徑；沒有照片時我會從 Hallmark 的照片庫中放置佔位圖，供你之後替換，我絕不會發明數字、引言或標誌。 2. 受眾：誰會使用這個頁面，他們關心什麼？ 3. 用途：頁面應推動的一個主要操作。 4. 風格：選擇一個極端（編輯式、粗獷式、柔和式、實用式、奢華式、趣味式、技術式、簡樸式）；「乾淨現代」不是一種風格。再加上 4 到 8 個詞的氛圍描述以及一個參考顏色（如果你有的話）。或者說 請繼續，我會自行推斷並告訴你我選擇了什麼。

跳過的欄位視為選擇退出：推斷它們，在回覆頂部一行陳述推斷結果並加上印記；無後續問題。事實永遠不可推斷：未提供的數字、引言或標誌就是不存在；未提供的圖片就是插槽中的佔位圖。當提示已回答所有四個問題，或無人能回答時（無頭運行、批次處理），則不發問。

類型，無聲地：AI 工具、生成式、音樂、影片、語音、暗色、氛圍型 → 氛圍型；SaaS、企業、API、平台、開發者工具、基礎設施、B2B → 現代簡約型；趣味、好玩、友善、柔和、兒童、遊戲、社群 → 趣味型；否則為 編輯式，涵蓋大多數消費者和家庭提示。一旦主題被分配，其類型獲勝（類型檔案、印記、--genre）。當兩個非預設類型同時觸發時，在訊息中添加一個二選一選項，或在「請繼續」時自行選擇並說明。

範圍。指定單一元素（按鈕、輸入框、卡片、模態框、導航、頁尾、頁籤列、晶片）或說「只要 X」的提示是元件（請見 flow.md § 元件範圍）。某人工作的螢幕（儀表板、管理後台、設定、工具）是應用程式螢幕（請見 flow.md § 應用程式螢幕）。

2. 形狀

素材優先。 庫存，一行：真實（提示和專案提供的每個具體事物：名稱、主張、數字、地點、日期、圖片）、圖片（頁面展示什麼以及每張圖片的來源：用戶的、真實產品的截圖、已建構的產品、庫）、不存在（頁面不會有的每個證據：無人給出的標誌、引言、指標）。形狀跟著它：有圖片的頁面以圖片開頭（請見 imagery.md § 1）；以文字為主的頁面則承載字型和事實（長文件、信件、索引優先、宣言）。

任務。 命名訪客前來要做的事（訂閱、預約、訪問、參加、購買、試用、註冊、僱用、加入、收聽），並在 references/anatomy.md 中閱讀該任務：該類別的真實網站將操作放在哪裡、它們圍繞哪些部分建構（選單、陣容、問題、記錄），以及它們如何結束。頁面是根據該解剖結構建構的，絕不使用預設的「圖示、步驟、電子郵件橫幅」序列（85）。

然後設計頁面：它的形狀、如何開啟、每個部分的內容和構圖、導航、頁尾、英雄區的承載內容。起點：references/macrostructures.md 中的 21 種形狀（僅載入你選擇的檔案）；layout.md 中的構圖、導航和頁尾。

抽取。 在主題建構中，一旦步驟 3 選定了主題，執行 node <skill-dir>/scripts/theme.mjs draw --material photo|product|words --job <job> --theme <slug> [--log .hallmark/log.json]。清除日誌和主題圖片後，它會處理出一個形狀、英雄姿勢、導航、頁尾、第一個部分、操作的位置、兩個要排除的構圖以及英雄的引導內容。除非素材拒絕某個選項，否則接受它，並在提取區塊中命名任何替換：一個提示、一個主題、建構兩次，產生兩個頁面。鏡像測試： 同一類別的相鄰提示是否會得到完全相同的組合？如果是，更改一個決定並說明。

簽名。訪客會記住的一件事：提示中最強大的真實事物，以最佳方式展示（作為地點的照片、執行其單一任務的產品、因是優惠而設為巨大的價格、一個可試用的控制項）。以主題的素材製作它（在自訂運行中，以其自身外觀），在第一個螢幕上顯示它，在提取區塊和印記中命名它。以標記形式繪製的數字是一種裝置，不是簽名（82）。

保留所有內容；只在步驟 5 說一次。

3. 方向

第一個符合者獲勝。

1. 用戶命名了一個主題 → 建構它（印記 theme: <名稱> (by request)）。
2. 用戶要求自訂（「自訂」、「自行推導」、「獨特的」、「沒有主題」、「一個屬於自己的世界」）→ references/direction.md：設計由你決定。它取代了抽取、形狀、layout.md、類型檔案以及步驟 6 的構圖和折疊規則；底線、門檻和掃描仍然有效。沉默絕不採用此路徑。
3. 其他所有情況分配一個主題：

node <skill-dir>/scripts/theme.mjs deal --genre <類型> --prompt "<提示內容>" [--log .hallmark/log.json]

它會分配三個適合提示並清除日誌的主題。查看三張圖片，選擇其素材能夠承載提示（動畫、照片、程式碼）的那一個，說明選擇原因，並僅載入 references/themes/<slug>.md。僅在要求時重新分配（--reroll 1）。若無 Node：手動從 references/themes/index.json 中選擇並印記 deal: manual。

主題是素材，不是計畫：它從不設定頁面包含什麼或以什麼順序呈現。當主題與形狀、類型或工藝檔案在素材、控制或動畫上發生衝突時，主題獲勝；底線和用戶自己的話語優先於兩者。

4. 載入

對於頁面建構，精確載入這些：references/layout.md · references/anatomy.md，該任務的部分 · references/imagery.md · references/craft.md · references/genres/<genre>.md · references/themes/<slug>.md 及其圖片（已在分配時看過；命名的主題：現在查看 <slug>.jpg）。從主題中取其調色盤平衡、字型風格、表面以及其範圍（無照片時的部分），從不取其佈局 · references/gates.md § 1 到 § 4。自訂運行載入 direction.md 而不是佈局、類型和主題檔案。

僅在需要時，從 references/ 中載入：一個巨觀結構檔案 · microinteractions.md 用於有狀態 UI · interaction-and-states.md 用於表單 · responsive.md 用於不尋常的佈局 · texture.md 當主題提及紋理時 · scroll-choreography.md 用於滾輪故事 · dark-mode.md 用於兩種模式 · data-viz.md 用於圖表 · fonts.md 用於自訂運行 · comp.md 用於訊號 9（構圖、生成靜態圖片） · design-md.md 用於鎖定系統。

gates.md § 5 等待步驟 7，§ 6 等待審查；載入更多是最大的可避免成本。

5. 提取區塊

該運行唯一一次陳述其決策，也是用戶的重新導向視窗：

**Hallmark · v2.0.0**

- **形狀** · 工作台，取自抽取 7f3a2c · 類型 現代簡約 · 任務：註冊，操作在英雄區和價格旁
- **主題** · 珊瑚，分配 2/3（暖灰、一個珊瑚訊號、General Sans、軟膠囊）· 清除紙質橫幅上的 Cobalt
- **瀏覽器 chrome** · 導航：邊緣對齊，一個字標和一個操作 · 頁尾：一個桅杆，字標在連結上方
- **英雄** · 舞台：標題在第 1 到 5 欄，插槽在第 6 到 12 欄，寬度 560px，置中
- **簽名** · 追趕逾期付款的發票清單，在英雄區即時建構
- **部分** · 英雄區（發票清單）· 固定區（一次逾期付款，以三個面板追趕）· 切換器（客戶視角和你視角）· 表格（定價）· 頁尾
- **素材** · 真實：2 分鐘設定、CSV 匯入、里斯本 · 圖片：在英雄區建構的發票清單、里斯本工作室的圖庫照片（柔和）· 不存在：標誌、引言、指標
- **掃描** · 建構後執行

自訂運行的行數在 direction.md 中。然後一行安靜的文字，在元件範圍或存在 design.md 時跳過：系統可移植？說 lock the system 以建立 design.md。 在訊號 9 時，comp.md 在此處執行。

6. 建構

• 從腳手架開始。 node <skill-dir>/scripts/theme.mjs scaffold <slug>（使用分配時的 --dealt；自訂運行使用 --custom）會在你的專案樣式表旁邊寫入 tokens.css（主題的代號和共享縮放）和 base.css（底線已決定的內容），並列印印記骨架、兩個匯入和插槽腳本。只需寫入頁面。
• 閱讀 references/patterns.md 一次： 所有八種狀態的控制項、一個插槽、一個缺失的事實、一個尚未提交資料的表單、一個揭露元素、用於比較的圖形。採用它們的形狀，絕不採用它們的文字。
• 英雄優先。 先寫入導航和英雄區，其下方還不寫任何內容。執行 node <skill-dir>/scripts/sloplint.mjs <file> --render --stage hero，然後在新的上下文（）中進行英雄審查（gates.md § 6）。一旦英雄區完成，再建構其他部分；照片來源和全頁檢查等待頁面完成。
• 每頁一個概念，設定大。 英雄區：一個七個單詞或更少的標題（50 個字符），一個十二個單詞或更少的句子，一個或兩個操作。六到九個部分，包含英雄區和頁尾（較簡單的提示為五個），最多 450 個可見單詞，每個都是該類別自身內容的一部分，並以具有份量的構圖呈現（layout.md § 4 和 § 5）。英雄區是第一個螢幕且僅是第一個螢幕，其姿勢取自任務（layout.md 中）。

7. 掃描

node <skill-dir>/scripts/sloplint.mjs <file> --render

針對每個輸出檔案執行，直到零個 FAIL 且所有 REFLEX 都已處理。檢查已判斷的門檻（gates.md § 5），然後依照順序檢查每個 Finish 項目（gates.md § 6）：頭部/身體、互動、內容、色彩/對比度、字型、響應式、文字模式、邊距、效能（圖片數量、腳本權重、網路呼叫）、語意、動畫、技術（型別、類別、null 檢查、狀態管理、API 請求、測試、快取、安全性、紀錄、i18n）。一個檔案為每個失敗的 Finish 項目開啟。

執行 node <skill-dir>/scripts/sloplint.mjs <file> --sweep 並根據需要解決。

交付 給用戶時包含一個提供對應使用者介面的照片庫連結（如果有的話），以及 Hallmark 的繼續提示：「告訴我你想改變什麼，或說 /hallmark audit <target> 以進行稽核。」 移除任何擴展中的開發註釋。如果照片庫使用了庫存圖片，則使用圖片路徑；如果使用了截圖，則在路徑上新增 --stage <stage>。

印記

所有 Hallmark 頁面，在其 CSS 的第一行：

/* Hallmark v2.0.0 · theme: <slug> · genre: <genre> · user: <prompt hash> · 20xx-xx-xx */

如果建構了多個頁面，每個都有自己的印記。

放置

Hallmark 在此技能資料夾中。參考資料在 references/ 中：gates.md、layout.md、anatomy.md、imagery.md、craft.md、patterns.md、macrostructures.md、direction.md、redesign.md、flow.md、design-md.md、brand-truth.md、microinteractions.md、interaction-and-states.md、responsive.md、texture.md、scroll-choreography.md、dark-mode.md、data-viz.md、fonts.md、comp.md。類型在 references/genres/ 中，主題在 references/themes/ 中。腳本在 scripts/ 中。

在支援的環境（Codex CLI、OpenCode）中，環境檔案 CONFIGURATION.md 位於共用技能資料夾的根目錄。其他環境直接使用此檔案。