AI 应用人工智能AI AgentAI 写作媒体生成【免费下载链接】html-anything✨ The agentic HTML editor — your local AI agent writes the HTML, you ship it. 75 Skills × 9 Surfaces (magazine · deck · poster · XHS / tweet · prototype · data report · Hyperframes) ️ Sandboxed preview · 1-click to WeChat / X / Zhihu / HTML / PNG Zero API key — Claude Code / Cursor / Codex / Gemini / Copilot / OpenCode / Qwen / Aider.项目地址https://gitcode.com/gh_mirrors/ht/html-anything点击查看免费下载导读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.mdFrontmatter 提示词正文可选的example.md示例输入与example.html预渲染预览。social-reddit-card即位于 skills/social-reddit-card/其分类信息如下名称Reddit 帖子卡zh_name/ Reddit Post Carden_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。解析后通过fmToMetaloader.ts映射为模板选择器使用的SkillMetaFrontmatter 字段映射目标在本模板中的取值与含义name/zh_name/en_name模板 ID 与多语言显示名中文「Reddit 帖子卡」英文「Reddit Post Card」emoji选择器中的图标description选择器列表中的简介「拟真 Reddit 帖子卡 上下投票 评论数适合视频叠加 / 故事分享」category分类cardscenario场景分组picker 中的 filter chipsmarketingaspect_hint画布宽高提示显示在选择器按钮与预览弹层上1280×720 或 800×600featured/recommended排序权重数值越小越靠前无值则排到9999之后featured: 42tags搜索词与名称、描述、场景等一起参与matchesQuery匹配reddit / social / card / overlay / storyexample_*系列示例的展示信息SkillExampleMetaexample_id、example_name、example_format: markdown、example_tagline、example_desc等值得注意的是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-2xlLight 模式背景#ffffff边框1px solid #edeff1Dark 模式视频叠加推荐背景#1a1a1b边框1px solid #343536在 example.html 中可以看到这套规范的具体落地外层页面用radial-gradient(circle at 30% 20%, #1a2026 0%, #050507 80%)营造深色舞台卡片本体stylebackground:#1a1a1b;border:1px solid #343536;box-shadow:0 30px 60px -20px rgba(0,0,0,0.6)是标准的「视频叠加深色卡片」形态。文本配色细节Light主文本#1c1c1c次级文本#7c7c7cDark主文本#d7dadc次级文本#818384边框#343536四、卡片结构详解vote rail 主体区 Snoo logo规范将卡片拆成四个部分与示例实现逐一对齐1. 左侧 vote rail投票栏宽度40-56px示例中为w-1248px并带有比主区略深的分隔背景#161617与右边框构成「rails」的视觉分区。结构自上而下上箭头 ▲16px#878a8chover 变橙#ff4500——示例用内联 SVG 实现path dM12 4l8 10h-5v6h-6v-6H4z/票数Inter17pxweight 700居中颜色规则为0 灰#878a8c/ 正 橙#ff4500/ 负 蓝#7193ff大数字使用 Reddit 风格的12.3k缩写格式示例票数为12.3k渲染为橙色加粗text-[15px] font-bold下箭头 ▼hover 变蓝#7193ff——示例 SVGpath dM12 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 Sans22-28pxweight 500暗色文本标题点击区可加微妙背景 hover。示例为text-[22px] font-medium。内容16px 正文或引用块或 1 张图用 CSS 渐变占位严禁外链图片。示例用两段text-[15px] leading-relaxed段落承载故事正文。底部 action row1.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 Sansfallback 到Interweight 覆盖400 / 500 / 700数字与主字体一致保证票数12.3k的观感统一中文Noto Sans SC示例头部通过 Google Fonts 一次性加载了这三者IBMPlexSans:wght400;500;600;700与NotoSansSC:wght400;500;700font-family链为IBM Plex Sans,Noto Sans SC,system-ui,sans-serif。六、硬性约束单文件、内联资源、忠于用户输入SKILL.md正文末尾明确了三条不可妥协的规则这也是 Agent 生成时必须遵守的「红线」严禁外链图片图片占位一律用 CSS 渐变 描述文本实现示例未使用图片完全靠排版与配色完成「内容感」。必须使用用户提供的内容subreddit、username、票数等「元数据」允许自动生成合理值但正文内容必须来自用户输入不得编造。示例example.md中的故事「TIL my code reviewer asks LLMs to roast my PRs before approving」与 HTML 中的标题、正文完全一致票数12.3k、评论1.2k、Awards7则是在example.md尾部显式给出的。单文件 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.html标题行## TIL ...h1标题text-[22px] font-mediummeta 区加TIL角标故事正文两段两个p段落第二段拆出「Productivity up, ego down. 10/10 would recommend.」r/programming橙色圆标r/ 粗体r/programmingu/code_quality_guy · 4h agometa 行小字Posted by u/code_quality_guy · 4h ago12.3k/1.2k/7vote rail 橙色票数、Comments 按钮1.2k、Awards 按钮7example.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」的提示词主体。调用链如下用户在模板选择器template-picker.tsx中选中该模板前端调用/api/convert携带templateId与用户内容convert/route.ts服务端loadSkill(templateId)读取SKILL.mdassemblePrompt({ body: skill.body, content, format })将模板正文与用户内容拼装为完整提示词invokeAgent调用本地 Agent CLIClaude Code / Cursor / Codex 等由 agents-detect.ts 探测、agents-invoke.ts 执行以 SSE 流式返回生成的 HTML若已有历史 HTMLbuildEditPrompt会走「最小化差异编辑」路径要求 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 AgentAI 写作媒体生成【免费下载链接】html-anything✨ The agentic HTML editor — your local AI agent writes the HTML, you ship it. 75 Skills × 9 Surfaces (magazine · deck · poster · XHS / tweet · prototype · data report · Hyperframes) ️ Sandboxed preview · 1-click to WeChat / X / Zhihu / HTML / PNG Zero API key — Claude Code / Cursor / Codex / Gemini / Copilot / OpenCode / Qwen / Aider.项目地址https://gitcode.com/gh_mirrors/ht/html-anything点击查看免费下载相关推荐html-anything「Reddit 帖子卡」Skill 详解从故事到拟真帖子卡片的单文件 HTML 渲染指南html anything「Reddit 帖子卡」Skill 详解从故事到拟真帖子卡片的单文件 HTML 渲染指南 导读 social reddit cardAI 应用人工智能AI AgentAI 写作媒体生成HTML-Anything「X 帖子卡」Skill 详解用 AI 一键生成拟真 X/Twitter 推文卡片HTML Anything「X 帖子卡」Skill 详解用 AI 一键生成拟真 X/Twitter 推文卡片 本文以 html anything 内置 SkiAI 应用人工智能AI AgentAI 写作媒体生成html-anything 模板实战用 social-spotify-card 生成 Spotify 正在播放卡html anything 模板实战用 social spotify card 生成 Spotify 正在播放卡 本篇技术指南围绕 html anythingAI 应用人工智能AI AgentAI 写作媒体生成上一篇从零开始掌握智能合约测试符号执行工具终极指南 下一篇Bento与消息代理集成RabbitMQ、Kafka与NATS对比创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考