尧图网站建设 
Hallmark 输出预览块完全解读6 个 bullet 如何在 5 秒内看懂 AI 计划【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmarkHallmark是一个面向 Claude Code、Cursor、Codex 等 AI 编码助手的反“AI 味”Anti-AI-slop设计技能。它每次生成页面前都会先输出一个输出预览块Preview Block6 行简洁的 bullet把页面的结构、主题、章节、动效和质量分一次性交代清楚。读懂它你只需 5 秒就能判断 AI 的设计计划是否符合预期——不对一句话纠正对直接放行。什么是输出预览块AI 动手写代码前的“5 秒 TL;DR”Hallmark 的设计流程共 7 步预览块出现在第 5 步——写任何一行代码之前。官方原话很直白这是给用户的 TL;DR让你能在 AI 写出 500 行不匹配的 CSS 之前先喊停、改方向。一个真实的预览块长这样来自 Bento Grid 示例**Hallmark · v1.0.0** - **Macrostructure** · Bento Grid - **Theme** · Linen (cool slate paper · steel-blue accent · geometric sans) - **Enrichment** · E1 Clipped-Edge Demo Video, Tier-A CSS-art trace waterfall - **Sections** · Hero · 6-tile Bento (stat · sparkline · quote · code · integrations · spotlight) · Index Footer - **Motion** · counter · pricing-lift · CSS marquee on integrations strip - **Slop test** · 69 / 69 ✓ - **Diversification** · differs from Plain on paper hue (light-cool vs pure-white) accent (indigo vs ink-blue)6 个必选 bullet 1 个可选 bullet外加一行斜体的可选 CTA。下面逐条拆解。完整规范见 skills/hallmark/SKILL.md#L400-L436。逐条拆解6 个 bullet 各自告诉你什么#Bullet一句话说明1Macrostructure页面“骨架”选了 21 种宏观结构中的哪一种2Theme22 种主题之一附一行色板速写3Enrichment首屏要不要图用什么“档次”的图4Sections按 DOM 顺序列出全部章节名5Motion动效原语清单硬性少于 3 个6Slop test69 道“AI 味”检查门的得分1. Macrostructure先选骨架再谈皮相Hallmark 最核心的差异化是结构多样而非换色。预览块第一行告诉你它从 21 种命名宏观结构中挑了哪一个——Bento Grid、Long Document、Manifesto、Stat-Led……每种结构是一整套打包的页面形状标题位置、正文组织、分隔线语言、按钮语气、图片处理。同一份需求选 Long Document 得到的是杂志长文选 Bento Grid 得到的是 SaaS 仪表盘。这一行决定了页面的“骨相”值得最先看。索引见 skills/hallmark/references/macrostructures.md。2. Theme一行字速读整套配色目录里有 22 个命名主题Specimen、Linen、Terminal、Midnight、Quiet……。预览块里会给出主题名 一行色板摘要纸面色带 · 强调色 · 展示字体风格例如Linen (cool slate paper · steel-blue accent · geometric sans)。如果需求里有明确品牌色或复杂氛围描述Hallmark 会走 custom 分支这一行会换成完整描述custom (vibe: archival warmth… · paper oklch(94% 0.020 65) · accent oklch(58% 0.16 35) terracotta · Fraunces italic Source Serif 4)。看到 oklch 数值不用慌——它只是色板你只需判断气质对不对。3. Enrichment首屏要不要“加料”大多数页面其实不需要图——最强的首屏常常是纯排印的。这一行会写none (typography only)或写清楚增强原型 层级例如E1 Clipped-Edge Demo Video, Tier-A CSS-art mockup。Hallmark 的增强层级是固定的纯文字 → Tier A 纯 CSS 画 → Tier B 手绘 SVG → Tier C 生成静帧 → Tier D 素材库 →Lottie 兜底。看到Tier-E Lottie基本可以问一句CSS 做不出来吗4. Sections用一行字预览整页目录所有章节名按 DOM 顺序用·连接例如Hero · Logos · Stats · Features · Testimonials · Pricing · FAQ · CTA · Footer。这是最快的“内容体检”发现多了个你没要的 Testimonials或者漏了 Pricing当场指出即可。5. Motion动效预算永远小于 3这一行列出要用的微交互原语counter · pricing-lift · pulse-once并受一条硬规则约束每页不超过 3 个动效。Hallmark 的理念是“动效先砍再加”——删掉一个动画如果不丢失信息就删掉它。看到none — typography only是常态不是偷懒。6. Slop test69 道检查门的质量凭证最后一行是质量分69 / 69 ✓表示全部通过否则是N / 69 — fails: 门编号。这 69 道“slop 门”逐项检查 AI 味痕迹编造的数据、重画的假浏览器窗口、模板感排版等。注意这一行是跑完测试才写的AI 不允许先写一个漂亮的 69/69 再补作业。门清单见 skills/hallmark/references/slop-test.md。隐藏第 7 行Diversification 与一行 CTA项目跑过一次 Hallmark 之后预览块会多出一行Diversification说明本次选择在“纸面色带 / 字体风格 / 强调色”三个轴上如何区别于上一次——这是防模板化的记忆机制记录在.hallmark/log.json。bullet 之后还有一行斜体 CTASystem portable? Saylock the systemto extract this builds tokens voice into adesign.md.意思是满意的话可以把这套设计系统固化成可携带的design.md供后续页面复用。组件级构建和已锁定design.md的项目不会出现这一行。看懂之后3 种常见反应方向不对→ 直接指出要改哪条 bullet例如“Theme 换成 Terminal”。AI 会先更新计划再继续构建。全部符合→ 不用回复等它进入第 6 步 Build 即可。Slop test 有失败门→ 正常流程是修好失败项后重新输出预览块并更新 Slop test 行。官方明确“预览块是持久摘要如果它撒谎就不该交付”所以最终拿到的才是可信版本。更多真实样例在哪里看四个完整预览块范例Long Document / Bento Grid / Manifesto / Customskills/hallmark/references/preview-examples.md9 个可复制的完整 brief每个都标注了 Hallmark 选了什么结构 主题docs/recipes.md实际生成的测试页面与截图site/_tests/、docs/screenshots/下次 AI 在写代码前甩出这 6 行 bullet 时别急着说“继续”——花 5 秒扫一遍一次纠正的成本远低于一次返工。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Hallmark 输出预览块完全解读：6 个 bullet 如何在 5 秒内看懂 AI 计划
Hallmark 输出预览块完全解读6 个 bullet 如何在 5 秒内看懂 AI 计划【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmarkHallmark是一个面向 Claude Code、Cursor、Codex 等 AI 编码助手的反“AI 味”Anti-AI-slop设计技能。它每次生成页面前都会先输出一个输出预览块Preview Block6 行简洁的 bullet把页面的结构、主题、章节、动效和质量分一次性交代清楚。读懂它你只需 5 秒就能判断 AI 的设计计划是否符合预期——不对一句话纠正对直接放行。什么是输出预览块AI 动手写代码前的“5 秒 TL;DR”Hallmark 的设计流程共 7 步预览块出现在第 5 步——写任何一行代码之前。官方原话很直白这是给用户的 TL;DR让你能在 AI 写出 500 行不匹配的 CSS 之前先喊停、改方向。一个真实的预览块长这样来自 Bento Grid 示例**Hallmark · v1.0.0** - **Macrostructure** · Bento Grid - **Theme** · Linen (cool slate paper · steel-blue accent · geometric sans) - **Enrichment** · E1 Clipped-Edge Demo Video, Tier-A CSS-art trace waterfall - **Sections** · Hero · 6-tile Bento (stat · sparkline · quote · code · integrations · spotlight) · Index Footer - **Motion** · counter · pricing-lift · CSS marquee on integrations strip - **Slop test** · 69 / 69 ✓ - **Diversification** · differs from Plain on paper hue (light-cool vs pure-white) accent (indigo vs ink-blue)6 个必选 bullet 1 个可选 bullet外加一行斜体的可选 CTA。下面逐条拆解。完整规范见 skills/hallmark/SKILL.md#L400-L436。逐条拆解6 个 bullet 各自告诉你什么#Bullet一句话说明1Macrostructure页面“骨架”选了 21 种宏观结构中的哪一种2Theme22 种主题之一附一行色板速写3Enrichment首屏要不要图用什么“档次”的图4Sections按 DOM 顺序列出全部章节名5Motion动效原语清单硬性少于 3 个6Slop test69 道“AI 味”检查门的得分1. Macrostructure先选骨架再谈皮相Hallmark 最核心的差异化是结构多样而非换色。预览块第一行告诉你它从 21 种命名宏观结构中挑了哪一个——Bento Grid、Long Document、Manifesto、Stat-Led……每种结构是一整套打包的页面形状标题位置、正文组织、分隔线语言、按钮语气、图片处理。同一份需求选 Long Document 得到的是杂志长文选 Bento Grid 得到的是 SaaS 仪表盘。这一行决定了页面的“骨相”值得最先看。索引见 skills/hallmark/references/macrostructures.md。2. Theme一行字速读整套配色目录里有 22 个命名主题Specimen、Linen、Terminal、Midnight、Quiet……。预览块里会给出主题名 一行色板摘要纸面色带 · 强调色 · 展示字体风格例如Linen (cool slate paper · steel-blue accent · geometric sans)。如果需求里有明确品牌色或复杂氛围描述Hallmark 会走 custom 分支这一行会换成完整描述custom (vibe: archival warmth… · paper oklch(94% 0.020 65) · accent oklch(58% 0.16 35) terracotta · Fraunces italic Source Serif 4)。看到 oklch 数值不用慌——它只是色板你只需判断气质对不对。3. Enrichment首屏要不要“加料”大多数页面其实不需要图——最强的首屏常常是纯排印的。这一行会写none (typography only)或写清楚增强原型 层级例如E1 Clipped-Edge Demo Video, Tier-A CSS-art mockup。Hallmark 的增强层级是固定的纯文字 → Tier A 纯 CSS 画 → Tier B 手绘 SVG → Tier C 生成静帧 → Tier D 素材库 →Lottie 兜底。看到Tier-E Lottie基本可以问一句CSS 做不出来吗4. Sections用一行字预览整页目录所有章节名按 DOM 顺序用·连接例如Hero · Logos · Stats · Features · Testimonials · Pricing · FAQ · CTA · Footer。这是最快的“内容体检”发现多了个你没要的 Testimonials或者漏了 Pricing当场指出即可。5. Motion动效预算永远小于 3这一行列出要用的微交互原语counter · pricing-lift · pulse-once并受一条硬规则约束每页不超过 3 个动效。Hallmark 的理念是“动效先砍再加”——删掉一个动画如果不丢失信息就删掉它。看到none — typography only是常态不是偷懒。6. Slop test69 道检查门的质量凭证最后一行是质量分69 / 69 ✓表示全部通过否则是N / 69 — fails: 门编号。这 69 道“slop 门”逐项检查 AI 味痕迹编造的数据、重画的假浏览器窗口、模板感排版等。注意这一行是跑完测试才写的AI 不允许先写一个漂亮的 69/69 再补作业。门清单见 skills/hallmark/references/slop-test.md。隐藏第 7 行Diversification 与一行 CTA项目跑过一次 Hallmark 之后预览块会多出一行Diversification说明本次选择在“纸面色带 / 字体风格 / 强调色”三个轴上如何区别于上一次——这是防模板化的记忆机制记录在.hallmark/log.json。bullet 之后还有一行斜体 CTASystem portable? Saylock the systemto extract this builds tokens voice into adesign.md.意思是满意的话可以把这套设计系统固化成可携带的design.md供后续页面复用。组件级构建和已锁定design.md的项目不会出现这一行。看懂之后3 种常见反应方向不对→ 直接指出要改哪条 bullet例如“Theme 换成 Terminal”。AI 会先更新计划再继续构建。全部符合→ 不用回复等它进入第 6 步 Build 即可。Slop test 有失败门→ 正常流程是修好失败项后重新输出预览块并更新 Slop test 行。官方明确“预览块是持久摘要如果它撒谎就不该交付”所以最终拿到的才是可信版本。更多真实样例在哪里看四个完整预览块范例Long Document / Bento Grid / Manifesto / Customskills/hallmark/references/preview-examples.md9 个可复制的完整 brief每个都标注了 Hallmark 选了什么结构 主题docs/recipes.md实际生成的测试页面与截图site/_tests/、docs/screenshots/下次 AI 在写代码前甩出这 6 行 bullet 时别急着说“继续”——花 5 秒扫一遍一次纠正的成本远低于一次返工。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考