企业官网建设流程全解析

• AI 应用
• 人工智能
• AI Agent
• AI 写作
• 媒体生成

导读

social-reddit-card是 html-anything 项目内置的 75+ 个「Skill 模板」之一，用于把一段故事、提问或段子渲染成高度拟真的 Reddit 帖子卡片（含投票栏、评论数、Awards），主要服务于视频叠加与社媒故事分享场景。阅读本文你将掌握：该 Skill 的完整模板规范（画布、配色、卡片结构、字体与交互状态）、Frontmatter 元数据如何被项目加载器解析、内置示例（example.md→example.html）的逐段对应关系，以及它在 html-anything 中从「模板选择」到「Agent 生成」的完整调用链路，可直接照搬到自己的单文件 HTML 项目或自建模板中。

一、模板定位：html-anything 的 Skill 体系中的一张「卡片」

html-anything 以「文件夹即模板」的方式组织内置模板：每个模板对应next/src/lib/templates/skills/<id>/下的一个文件夹，内含SKILL.md（Frontmatter + 提示词正文），可选的example.md（示例输入）与example.html（预渲染预览）。social-reddit-card即位于 skills/social-reddit-card/，其分类信息如下：

• 名称：Reddit 帖子卡（zh_name）/ Reddit Post Card（en_name）
• 意图：把一段故事 / 提问 / 段子渲染成 Reddit 帖子卡片，用于视频叠加、社媒故事分享
• 类目：card（卡片类），scenario为marketing（营销场景）
• 标签：["reddit", "social", "card", "overlay", "story"]，覆盖了视频叠加与故事分享两个核心用途
• 画布提示：1280×720（视频叠加）或800×600（单卡分享）

该模板在加载器 loader.ts 中属于「内置模板」（bundled id 必须符合/^[a-z0-9][a-z0-9-]*$/的 kebab-case 规则），与通过市场安装、以pkg-<owner>__<repo>--<originalId>命名空间命名的用户模板区分开。

二、Frontmatter 元数据：一个 SKILL.md 如何被解析成「可选模板」

SKILL.md的第一部分是 YAML 风格的 Frontmatter，项目用零依赖的解析器（parseFrontmatter，见 loader.ts）读取，逐行匹配key: value结构，支持字符串（可带引号）、整数（featured/recommended）与单行数组（tags）。解析后通过fmToMeta（loader.ts）映射为模板选择器使用的SkillMeta：

值得注意的是，listSkills()返回给浏览器的元数据刻意排除了SKILL.md正文（见 loader.ts 的注释：「Body is excluded so we can return the entire registry in one cheap fetch without shipping prompt text to the browser」），正文只会在 Agent 真正执行生成时被服务端读取，这对保持/api/templates接口轻量很有价值。

三、画布与配色：为「视频叠加」与「单卡分享」设计的两种模式

模板规范明确规定了两套画布与配色，example.html实际采用了其中的「暗色 + 720px 宽」组合：

画布尺寸

• 1280×720：视频叠加（宽屏，留白较少）
• 800×600：单卡分享（社交媒体竖屏故事场景）
• 背景：透明，或暗色#0b1416（视频叠加推荐深色底，避免与视频画面冲突）

卡片外框

• 圆角16px（实现中为rounded-2xl）
• Light 模式：背景#ffffff，边框1px solid #edeff1
• Dark 模式（视频叠加推荐）：背景#1a1a1b，边框1px solid #343536

在 example.html 中可以看到这套规范的具体落地：外层页面用radial-gradient(circle at 30% 20%, #1a2026 0%, #050507 80%)营造深色舞台，卡片本体style="background:#1a1a1b;border:1px solid #343536;box-shadow:0 30px 60px -20px rgba(0,0,0,0.6)"，是标准的「视频叠加深色卡片」形态。

文本配色细节

• Light：主文本#1c1c1c，次级文本#7c7c7c
• Dark：主文本#d7dadc，次级文本#818384，边框#343536

四、卡片结构详解：vote rail + 主体区 + Snoo logo

规范将卡片拆成四个部分，与示例实现逐一对齐：

1. 左侧 vote rail（投票栏）

宽度40-56px，示例中为w-12（48px）并带有比主区略深的分隔背景#161617与右边框，构成「rails」的视觉分区。结构自上而下：

• 上箭头 ▲（16px，#878a8c，hover 变橙#ff4500）——示例用内联 SVG 实现：<path d="M12 4l8 10h-5v6h-6v-6H4z"/>
• 票数（Inter，17px，weight 700，居中）：颜色规则为0 = 灰#878a8c/ 正 = 橙#ff4500/ 负 = 蓝#7193ff；大数字使用 Reddit 风格的12.3k缩写格式（示例票数为12.3k，渲染为橙色加粗text-[15px] font-bold）
• 下箭头 ▼（hover 变蓝#7193ff）——示例 SVG：<path d="M12 20l-8-10h5V4h6v6h5z"/>

2. 主体区（meta row + 标题 + 内容 + action row）

• 顶部 meta row：子版块图标（CSS 圆形 + 字母，示例为r/圆标配橙色背景）+r/subreddit粗体 +· Posted by u/username · 3h小字灰色。示例完整呈现为「r/programming· Posted by u/code_quality_guy · 4h ago」，并在右侧附加了一个TIL标签（#272729底、大写字母间距）。
• 标题：Inter / IBM Plex Sans，22-28px，weight 500，暗色文本；标题点击区可加微妙背景 hover。示例为text-[22px] font-medium。
• 内容：16px 正文，或引用块，或 1 张图（用 CSS 渐变占位，严禁外链图片）。示例用两段text-[15px] leading-relaxed段落承载故事正文。
• 底部 action row：💬1.2k Comments· 🏆 Awards · ⤴️ Share · ⋯ 图标。示例中 Comments、Awards、Share 三个按钮均由内联 SVG + 文字构成（评论气泡、奖杯、分享箭头），hover 时文字变亮并出现#272729圆角底，最右侧是⋯省略号按钮（ml-auto推至右端）。

3. 右上角 Reddit Snoo logo

卡片顶部右上角放置 Reddit 吉祥物 Snoo 的内联 SVG，橙色#ff4500。规范强调「icon 一律内联 SVG」，包括上下箭头、评论气泡、奖杯，保证单文件 HTML 在沙箱预览中不依赖任何外部资源。

五、字体规范

• 主字体：IBM Plex Sans，fallback 到Inter，weight 覆盖400 / 500 / 700
• 数字：与主字体一致（保证票数12.3k的观感统一）
• 中文：Noto Sans SC

示例头部通过 Google Fonts 一次性加载了这三者：IBM+Plex+Sans:wght@400;500;600;700与Noto+Sans+SC:wght@400;500;700，font-family链为'IBM Plex Sans','Noto Sans SC',system-ui,sans-serif。

六、硬性约束：单文件、内联资源、忠于用户输入

SKILL.md正文末尾明确了三条不可妥协的规则，这也是 Agent 生成时必须遵守的「红线」：

1. 严禁外链图片：图片占位一律用 CSS 渐变 + 描述文本实现（示例未使用图片，完全靠排版与配色完成「内容感」）。
2. 必须使用用户提供的内容：subreddit、username、票数等「元数据」允许自动生成合理值，但正文内容必须来自用户输入，不得编造。示例example.md中的故事（「TIL my code reviewer asks LLMs to roast my PRs before approving」）与 HTML 中的标题、正文完全一致，票数12.3k、评论1.2k、Awards7则是在example.md尾部显式给出的。
3. 单文件 HTML：所有 icon（上下箭头、评论气泡、奖杯、分享箭头）均为内联 SVG，整体输出为一个自包含 HTML 文件。

七、实战示例：example.md 与 example.html 的逐段对应

仓库为该 Skill 配套了示例输入 example.md 与预渲染输出 example.html：

输入侧（example.md）模拟 Agent 拿到的「用户素材」：

## TIL my code reviewer asks LLMs to roast my PRs before approving So I started doing this thing where I run my diff through Claude with the prompt "be brutally honest, find anything that would embarrass me at code review". ... Posted in r/programming by u/code_quality_guy · 4h ago Upvotes: 12.3k · Comments: 1.2k · Awards: 7

输出侧（example.html）逐项映射：

example.md与example.html的存在，让模板在template-picker中具备「悬停即预览」与「一键载入示例」能力——loader.ts的loadSkillFromDir会同时读入三者，/api/templates/:id/example路由（example/route.ts）把它们打包成一个 JSON 返回，前端fetchTemplateExample直接拿到content + html，无需两次往返。

八、运行机制：SKILL 正文如何驱动 Agent 生成

SKILL.md的正文（Frontmatter 之后的部分，即本文第三至六节所讲的模板规范）才是真正「喂给 Agent」的提示词主体。调用链如下：

1. 用户在模板选择器（template-picker.tsx）中选中该模板；
2. 前端调用/api/convert，携带templateId与用户内容（convert/route.ts）；
3. 服务端loadSkill(templateId)读取SKILL.md，assemblePrompt({ body: skill.body, content, format })将模板正文与用户内容拼装为完整提示词；
4. invokeAgent调用本地 Agent CLI（Claude Code / Cursor / Codex 等，由 agents-detect.ts 探测、agents-invoke.ts 执行），以 SSE 流式返回生成的 HTML；
5. 若已有历史 HTML，buildEditPrompt会走「最小化差异编辑」路径，要求 Agent 保留设计、仅按内容差异修改——这与模板「必须用用户提供的内容」的约束互为呼应，防止创意漂移与数据捏造。

因此，对「Reddit 帖子卡」这类 Skill 而言，SKILL.md既是设计规范文档，也是 Agent 的执行指令：它把排版细节（圆角、字号、色值、hover 状态）全部写成可执行的自然语言规则，让任何支持文件读写与 HTML 输出的本地 Agent 都能稳定复现同样的视觉结果。

九、在自己的项目或新模板中复用这套规范

• 照搬实现：直接参考 example.html（约 55 行），替换标题、正文与元数据即可，内联 SVG 与 Tailwind 类均可原样保留。
• 新增模板：在next/src/lib/templates/skills/下新建文件夹，写入带 Frontmatter 的SKILL.md（至少包含name、zh_name、en_name、emoji、description、category、scenario、aspect_hint、tags），可选附带example.md与example.html。无需改动任何 TypeScript 代码——listSkills()每次会重新扫描磁盘，开发环境下新文件夹即时可见，生产环境也仅需重启一次（见 loader.ts 的注释与metaCache逻辑）。
• 关键设计取舍：模板正文不随/api/templates下发（保持接口轻量），而是在/api/convert时按需读取；示例资源通过example_*系列 Frontmatter 字段标注，由 loader.ts 的fmToMeta组装为SkillExampleMeta。理解这套约定，有助于你贡献的新模板与现有选择器、预览、安装机制无缝衔接。

• AI 应用
• 人工智能
• AI Agent
• AI 写作
• 媒体生成