Component Playground 拆解Hallmark 让代码成为页面主内容的预览页【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark打开任何一个组件库官网你都会发现没有大 Banner、没有营销文案只有可运行的预览 一段可复制的代码交替排列。这种结构在 Hallmark 的 21 种宏结构中有一个正式名字Component Playground组件游乐场。Hallmark 是一个为 Claude Code、Cursor、Codex 打造的拒绝 AI 味设计技能design skill而这种代码即内容的预览页正是它最擅长自动生成的页面形态之一。本文带你一次看懂Component Playground 是什么、它背后的 5 条设计规则、什么时候该用它以及如何一句话让 AI 帮你写出来。一、Component Playground 是什么宏结构Hallmark 写页面不靠感觉。它动手前会先从 21 种命名好的页面结构宏结构里挑一个再按那张指纹生成整页。第 21 号就是 Component Playground官方定义一句话交互式代码 预览块就是页面的主内容。每一块预览一个组件并展示如何复制粘贴走人。它的完整指纹定义在 21-component-playground.md拆开就是 5 个要素要素规则标题直接用分类标签Buttons、Forms、Cards、Layouts正文预览块 代码块交替排列常带 Tab 切换框架React / Vue / …分隔分类色带 示例之间的水平线按钮每个代码块都有 Copy 按钮复制成功时静默不弹任何提示图片没有——预览本身就是图片注意最后一条Component Playground 是 Hallmark 宏结构里少数明确写着 Image: none 的结构。跑起来的组件就是视觉素材这正是代码成为页面主内容的含义。二、预览页背后的 5 条设计规则 从这份定义里可以提炼出任何代码即内容页面都该遵守的 5 条规则1. 预览在前代码在后先让读者看到组件长什么样、能点能动再给代码。顺序反过来先代码后效果是文档站不是 Playground。2. 复制按钮要静默成功复制成功不需要 Toast、不需要动画庆祝。文件原文写得很直白Copy button on every code block (silent success)。少打扰是工具页的基本修养。3. 用分类标签当标题不用 Our Awesome Components 这种营销式大标题直接Buttons/Forms/Cards。标签即导航扫一眼就知道页面有什么。4. Tab 切换框架不跳转页面React、Vue、Svelte 的写法用页内 Tab 切换读者的心流不断。5. 不加任何装饰无 Hero 插画、无渐变大图、无滚动动效文件里明确写了Reveal: none。Playground 是工具不是舞台——装饰会稀释这块代码能不能用这个核心信息。三、什么时候该用 Component Playground官方给出的适用与禁用场景非常干脆✅适合设计系统、组件库、代码片段站、框架文档Reach for it for design systems, component libraries, code-snippet sites, framework documentation❌不适合营销页Avoid for marketing pages. Playground is utility, not pitch.参考标杆shadcn/ui、Tailwind UI、Once UI、MUI demos、Framer Motion examples。反过来说如果你要做的是让访客掏钱的落地页应该用 Hallmark 的其他宏结构比如 Stat-Led大数字开场或 Workbench产品截图主导。比如下面这张 SaaS 页就是典型的营销页形态——有主张、有 CTA、有社会证明和 Playground 的工具气质正好相反四、开场文案用真实示例代替空口承诺宏结构文件特意附了 3 条 Component Playground 的开场样例要求你模仿的是一种具体性tangibleTry it inline. Then take it home.—— 两个短命令句Every example is editable. Every output is real.—— 声明 证据成对出现Fromnpm installto your first chart in eight lines.—— 点名步骤数给出可验证的承诺规律只有一条开场就落到一个能动手的真实例子上而不是喊口号。这也是它区别于普通营销 Hero 的文案指纹。五、如何让 Hallmark 帮你写出预览页 ⚡1. 一行命令安装技能npx skills add nutlope/hallmark也可以克隆仓库后手动复制 SKILL.md 和 references/ 到对应目录git clone https://gitcode.com/GitHub_Trending/hal/hallmark2. 写一个工具气质的 brief直接在 Claude Code / Cursor / Codex 里描述需求例如Build a component library site for my design system: buttons, inputs, cards — each with a live preview, copyable code with a Copy button, and framework tabs. Audience: frontend developers. Tone: technical.如果 brief 含糊Hallmark 会先问三个问题Audience / Use case / Tone你回复一句 go ahead 它就自己推断并公开说明推断结果不会闷头猜。3. 读取 CSS 里的指纹印章生成后CSS 文件第一行必有一行印章注释/* Hallmark · macrostructure: Component Playground · ... */。它的作用是让下一次运行自动换一个不同的宏结构——同一个项目里连续两页不会用同一种形状。这套轮换规则定义在 macrostructures.md完整的 21 种结构索引也在这里。4. 交付前过 69 道AI 味检查页面交付前Hallmark 会跑一遍 69 道门的 slop-test反 AI 味检查任何一门没过就返工重写。规则全集在 slop-test.md。它不止检查视觉还包括不能编造 47% 转化率 这类虚构数据、移动端 320/375/414/768px 四种宽度必须全部可用等。六、写在最后Component Playground 是 Hallmark 21 种宏结构里最反营销的一种没有大图、没有口号、没有动效代码和预览本身就是内容。它教给我们的不只是组件库官网长什么样而是一种判断力当页面的目的是让人把代码带走而不是让人掏钱时一切装饰都应该让位给可运行、可复制的真实示例。即使不用 Hallmark这 5 条规则也值得直接抄进你的组件站。 延伸阅读21-component-playground.md — Component Playground 宏结构完整定义macrostructures.md — 21 种宏结构索引与轮换规则recipes.md — 8 个可直接粘贴的示例 briefsite/_tests/README.md — Hallmark 生成的 8 个测试页说明【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Component Playground 拆解：Hallmark 让代码成为页面主内容的预览页
Component Playground 拆解Hallmark 让代码成为页面主内容的预览页【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark打开任何一个组件库官网你都会发现没有大 Banner、没有营销文案只有可运行的预览 一段可复制的代码交替排列。这种结构在 Hallmark 的 21 种宏结构中有一个正式名字Component Playground组件游乐场。Hallmark 是一个为 Claude Code、Cursor、Codex 打造的拒绝 AI 味设计技能design skill而这种代码即内容的预览页正是它最擅长自动生成的页面形态之一。本文带你一次看懂Component Playground 是什么、它背后的 5 条设计规则、什么时候该用它以及如何一句话让 AI 帮你写出来。一、Component Playground 是什么宏结构Hallmark 写页面不靠感觉。它动手前会先从 21 种命名好的页面结构宏结构里挑一个再按那张指纹生成整页。第 21 号就是 Component Playground官方定义一句话交互式代码 预览块就是页面的主内容。每一块预览一个组件并展示如何复制粘贴走人。它的完整指纹定义在 21-component-playground.md拆开就是 5 个要素要素规则标题直接用分类标签Buttons、Forms、Cards、Layouts正文预览块 代码块交替排列常带 Tab 切换框架React / Vue / …分隔分类色带 示例之间的水平线按钮每个代码块都有 Copy 按钮复制成功时静默不弹任何提示图片没有——预览本身就是图片注意最后一条Component Playground 是 Hallmark 宏结构里少数明确写着 Image: none 的结构。跑起来的组件就是视觉素材这正是代码成为页面主内容的含义。二、预览页背后的 5 条设计规则 从这份定义里可以提炼出任何代码即内容页面都该遵守的 5 条规则1. 预览在前代码在后先让读者看到组件长什么样、能点能动再给代码。顺序反过来先代码后效果是文档站不是 Playground。2. 复制按钮要静默成功复制成功不需要 Toast、不需要动画庆祝。文件原文写得很直白Copy button on every code block (silent success)。少打扰是工具页的基本修养。3. 用分类标签当标题不用 Our Awesome Components 这种营销式大标题直接Buttons/Forms/Cards。标签即导航扫一眼就知道页面有什么。4. Tab 切换框架不跳转页面React、Vue、Svelte 的写法用页内 Tab 切换读者的心流不断。5. 不加任何装饰无 Hero 插画、无渐变大图、无滚动动效文件里明确写了Reveal: none。Playground 是工具不是舞台——装饰会稀释这块代码能不能用这个核心信息。三、什么时候该用 Component Playground官方给出的适用与禁用场景非常干脆✅适合设计系统、组件库、代码片段站、框架文档Reach for it for design systems, component libraries, code-snippet sites, framework documentation❌不适合营销页Avoid for marketing pages. Playground is utility, not pitch.参考标杆shadcn/ui、Tailwind UI、Once UI、MUI demos、Framer Motion examples。反过来说如果你要做的是让访客掏钱的落地页应该用 Hallmark 的其他宏结构比如 Stat-Led大数字开场或 Workbench产品截图主导。比如下面这张 SaaS 页就是典型的营销页形态——有主张、有 CTA、有社会证明和 Playground 的工具气质正好相反四、开场文案用真实示例代替空口承诺宏结构文件特意附了 3 条 Component Playground 的开场样例要求你模仿的是一种具体性tangibleTry it inline. Then take it home.—— 两个短命令句Every example is editable. Every output is real.—— 声明 证据成对出现Fromnpm installto your first chart in eight lines.—— 点名步骤数给出可验证的承诺规律只有一条开场就落到一个能动手的真实例子上而不是喊口号。这也是它区别于普通营销 Hero 的文案指纹。五、如何让 Hallmark 帮你写出预览页 ⚡1. 一行命令安装技能npx skills add nutlope/hallmark也可以克隆仓库后手动复制 SKILL.md 和 references/ 到对应目录git clone https://gitcode.com/GitHub_Trending/hal/hallmark2. 写一个工具气质的 brief直接在 Claude Code / Cursor / Codex 里描述需求例如Build a component library site for my design system: buttons, inputs, cards — each with a live preview, copyable code with a Copy button, and framework tabs. Audience: frontend developers. Tone: technical.如果 brief 含糊Hallmark 会先问三个问题Audience / Use case / Tone你回复一句 go ahead 它就自己推断并公开说明推断结果不会闷头猜。3. 读取 CSS 里的指纹印章生成后CSS 文件第一行必有一行印章注释/* Hallmark · macrostructure: Component Playground · ... */。它的作用是让下一次运行自动换一个不同的宏结构——同一个项目里连续两页不会用同一种形状。这套轮换规则定义在 macrostructures.md完整的 21 种结构索引也在这里。4. 交付前过 69 道AI 味检查页面交付前Hallmark 会跑一遍 69 道门的 slop-test反 AI 味检查任何一门没过就返工重写。规则全集在 slop-test.md。它不止检查视觉还包括不能编造 47% 转化率 这类虚构数据、移动端 320/375/414/768px 四种宽度必须全部可用等。六、写在最后Component Playground 是 Hallmark 21 种宏结构里最反营销的一种没有大图、没有口号、没有动效代码和预览本身就是内容。它教给我们的不只是组件库官网长什么样而是一种判断力当页面的目的是让人把代码带走而不是让人掏钱时一切装饰都应该让位给可运行、可复制的真实示例。即使不用 Hallmark这 5 条规则也值得直接抄进你的组件站。 延伸阅读21-component-playground.md — Component Playground 宏结构完整定义macrostructures.md — 21 种宏结构索引与轮换规则recipes.md — 8 个可直接粘贴的示例 briefsite/_tests/README.md — Hallmark 生成的 8 个测试页说明【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考