LifeOS HTML Skill 实战解析用确定性渲染器把会话产出蒸馏为自包含 HTML Artifact【免费下载链接】LifeOS⛰️ The Life Operating System — an intent engineering platform that moves you from your current state to your ideal state, in life and work.项目地址: https://gitcode.com/GitHub_Trending/pe/LifeOS导读LifeOS 的 HTML 技能位于 LifeOS/install/skills/HTML/SKILL.md解决一个具体问题把模型会话刚刚产出的分析、研究、红队报告、计划等内容一键变成一份设计精良、完全自包含、可发布为 Artifact的 HTML 文件。其核心是一套确定性分工模型只负责把会话内容蒸馏为类型化的 content JSON 并挑选一种设计寄存器register而 Tools/Render.ts 独占所有布局、排版与配色决策。读完本文你将掌握该技能的内容 JSON Schema、dossier/ledger双寄存器机制、Render 工作流的完整调用契约以及它在 Artifact-CSP 约束下的五项工程教训。一、技能定位与触发边界技能 frontmatterSKILL.md第 1–5 行给出了明确的触发契约这是所有 LifeOS 技能共用的路由机制命名、frontmatter、渐进式披露规范可参考 CreateSkill/SKILL.md触发词USE WHEN/HTML、HTML artifact、render this as HTML、make this an HTML page、artifact of this analysis、designed HTML output明确不适用NOT FOR部署型网站或 Web 应用应直接搭建项目、Web UI 设计系统用 Webdesign 技能、静态图片或图表用 Art 技能、以及撰写底层分析本身先跑分析再用 /HTML 渲染它。技能的职责一句话概括把会话刚产出的任何内容变成一个自包含、有设计感的 HTML 文件并发布为 Artifact。1.1 目录结构与安装形态在仓库中该技能由三个文件构成文件作用SKILL.md技能路由入口触发词、工作流路由表、快速参考、Gotchas、示例Workflows/Render.mdRender 工作流充分性检查、工具契约、发布与验证双腿Tools/Render.ts确定性渲染器读入 content JSON register输出单文件 HTML安装到用户环境后路径为~/.claude/skills/HTML/命令示例中即使用该形态。注意整个技能树遵循 CreateSkill 的扁平结构约定SKILL.md只做路由与要点完整 SOP 放在Workflows/可执行脚本放在Tools/。1.2 Voice Notification 双通道执行任何工作流前必须先发送两条通知这是 LifeOS 全部技能的强制约定curl -s -X POST http://localhost:31337/notify \ -H Content-Type: application/json \ -d {message: Running the Render workflow in the HTML skill to build a designed HTML artifact} \ /dev/null 21 同时输出文本通知Running **Render** in **HTML**...。这是 LifeOS 语音/文本提醒体系的统一接入点与 CreateSkill、Interceptor 等技能的模式完全一致。二、核心架构模型与渲染器的确定性分工HTML 技能的设计哲学SKILL.md第 9 行可以概括为一条铁律模型的唯一职责是把会话输出蒸馏为类型化 content JSON 并挑选设计寄存器Render.ts 拥有所有布局、排版、配色决策。这条边界带来三个直接收益输出可复现同一个 content JSON 同一寄存器永远渲染出同一份 HTML不存在这次好看下次难看的模型抖动提示词成本低模型不需要理解 CSS只需把内容正确归类到 Block 类型易于演进想改样式只需改 Render.ts 一处所有历史工作流自动受益。源码开头的注释Render.ts第 3–19 行把这一意图写得非常明确Takes a typed content JSON a design register name, emits ONE self-contained HTML file: inline CSS, optional font-face>interface Doc { title: string; // 页面 报头标题accentLastWord 为真时末词渲染为强调色 eyebrow?: string; // 眉题小号等宽大写文本 subtitle?: string; // 副标题 accentLastWord?: boolean; // 默认 true summary?: { label?: string; html: string }; // 顶部摘要块slab sections: Section[]; // 章节数组 footer?: string; // 页脚备注 numberedSections?: boolean; // 默认 true —— 章节编号以真实文本渲染 } interface Section { title: string; intro?: string; blocks: Block[] }其中blocks是七种可判别联合discriminated union类型每种对应一种渲染形态renderBlock实现见Render.ts第 167–201 行Block 类型字段渲染形态对应 CSS 类prosehtml正文段落最多 62ch 宽.prosecallouthtml强调提示框左边框使用 accent2.calloutgrouplabel,detail?时代/类别分隔标记等宽大写.groupquoteid?,badge?,quote?,text?,note?,source?证据条目编号 徽章 引言/正文/备注/来源.exlistitems: { lead, text }[]粗体引导语列表仅当内容是真正的序列时才编号ul.leadcutstamp,quote,note删除线引言 旋转印章用于披露被否决的内容.cuttableheaders: string[],rows: string[][]数据表响应式横向滚动包裹.tablewrap3.1 关键字段语义徽章Badgequote的badge是自由文本如VERIFIED、REPORTED、FACT由寄存器的badgeSolid数组决定是实心填充还是描边轮廓渲染Render.ts第 176–178 行编号Numbering所有章节编号、证据条目编号都是真实 DOM 文本由渲染器生成章节号01、02……用String(i1).padStart(2,0)补零见Render.ts第 212 行绝不使用 CSS counters——这是下文的头号 Gotcha 的规避方案强调尾词title的最后一个词默认以强调色渲染span classacc见Render.ts第 203–207 行accentLastWord: false可关闭。四、双设计寄存器dossier 与 ledger寄存器是设计模板的载体定义在Render.ts第 61–86 行的REGISTERS常量中。每个寄存器由 CSS 变量颜色体系、三段字体栈display/body/mono、可嵌入字体与实心徽章列表构成。4.1 dossier 寄存器证据卷宗风面向证据文件、红队、调查、主张测试项值背景--ink#0d1712深墨绿面板--panel#121f17分隔线--line#26382c前景--fg#f2ede2米白次要--dim#c6c0b1强调--accent#f58220橙色辅助--accent2#7d9fc4危险--danger#d0654a展示字体栈Anton, Arial Narrow, Avenir Next Condensed, sans-serif压缩大标题 打字机感正文字体栈Avenir Next, Helvetica Neue, system-ui, sans-serif等宽字体栈Courier New, monospace嵌入字体Anton-Regular.ttf从本地字体目录查找命中即 base64 嵌入实心徽章VERIFIED4.2 ledger 寄存器账册报表风面向报告、财务、计划、对比、指标项值背景--ink#101623深藏青面板--panel#161e30分隔线--line#2a3550前景--fg#dce6f2次要--dim#9fb0c8强调--accent#d9a441金色辅助--accent2#6fbf9f危险--danger#c96f6f展示字体栈Iowan Old Style, Palatino, Georgia, serif古典衬线正文字体栈Avenir Next, Helvetica Neue, system-ui, sans-serif等宽字体栈SF Mono, Menlo, Courier New, monospace嵌入字体无依赖系统栈实心徽章VERIFIED、CONFIRMED4.3 寄存器使用规则工作流Render.md第 39–45 行给出明确的选型表内容类型寄存器证据文件、红队、调查、主张测试dossier报告、计划、对比、指标、财务ledger本周上一个 Artifact 用了同一个寄存器选另一个最后一条规则很有工程味道在它们之间交替使用避免连续产出视觉趋同convergeSKILL.md第 38 行。新增视觉风格的正确姿势是在 Render.ts 中扩展新寄存器而不是为一次性需求手写样式one-off CSS这样后续每次运行都能复用。4.4 字体嵌入机制fontFaceRender.ts第 96–110 行实现了零外部请求的字体方案在FONT_DIRS~/Library/Fonts、/Library/Fonts、/System/Library/Fonts/Supplemental第 88 行中按序查找寄存器的字体文件命中第一个存在的文件即读取为 base64 生成font-facedata URI.otf声明为opentype其余按truetypefont-display: swap保证加载不阻塞找不到则静默降级到系统字体栈。五、Render 工作流完整实战Workflows/Render.md 定义了从会话产出到已发布、已验证的 HTML Artifact的完整路径。5.1 Step 0 —— 充分性检查第 16–18 行渲染前先确认有实质内容可渲染如果会话尚未产出任何可渲染输出没有分析、研究或成果应直接说明并询问要渲染什么绝不虚构内容。若存在多个候选输出必须明确标记选择了哪一个⚠️ Rendering X, not Y; redirect if wrong.再继续。5.2 Ideal State第 20–24 行一个自包含 HTML 文件渲染会话的真实产出——内容真实、逐字引用保持逐字、来源保留、验证标志保留由 Render.ts 从 content JSON 渲染不手写一次性 CSS如果内容确实超出既有 Block 类型应扩展 Render.ts新 Block 类型或新寄存器让后续运行受益发布为 Artifact 并在交出 URL 前完成像素级验证。5.3 工具契约第 26–35 行bun ~/.claude/skills/HTML/Tools/Render.ts --schema # 打印 content JSON 结构 示例 bun ~/.claude/skills/HTML/Tools/Render.ts --registers # 列出可用寄存器 bun ~/.claude/skills/HTML/Tools/Render.ts \ --json content.json \ --register dossier|ledger \ --out artifact.html5.4 发布 验证双腿第 47–53 行先加载artifact-design技能任何 Artifact 发布前的强制前置再用 Artifact 工具发布渲染好的文件复用同一文件路径即可更新既有 Artifact 的 URL交出 URL 前双腿都要验证发布腿Artifact 工具的list动作能看到该 Artifact渲染腿本地起服务bunx serve打开 HTML 文件用 Interceptor 技能的规范截图路径捕获并查看像素——因为 Artifact URL 在任何未登录属主账号的浏览器会话中会 404详见 Gotchas交出 Artifact URL 时附一行内容描述。六、CLI 手册参数、默认值与校验逻辑Render.ts 是一个标准的 Bun 可执行脚本shebang#!/usr/bin/env bunCLI 解析逻辑在第 255–289 行参数默认值行为--schema—打印EXAMPLE文档 JSON含七种 Block 的示例用法后退出第 261–263 行--registers—逐行打印寄存器名dossier、ledger后退出第 265–267 行--json path必填读取 content JSON缺失时打印 Usage 并以 exit 2 退出第 273–275 行--register namedossier按名字查REGISTERS未知寄存器打印可用列表并以 exit 2 退出第 277–281 行--out pathartifact.html输出文件路径内容校验第 282–286 行JSON 至少需要{ title, sections[] }否则报错提示用--schema查看示例。渲染成功后第 287–289 行打印产物信息artifact.html (NKB, registerdossier, fontsAnton|system)——其中fonts段会报告实际嵌入的字体族无嵌入时为system可用于确认字体嵌入是否生效。七、GotchasArtifact 渲染的五个工程教训SKILL.md第 41–47 行的 Gotchas 区块是全技能信息密度最高的部分全部来自真实踩坑记录其中第一条的发现日期标注为 2026-07-11。这五条对任何做 Artifact/CSP 安全 HTML 输出的开发者都有直接参考价值7.1 伪元素生成内容会在 DOM 渲染截图管线中消失CSS 伪元素生成的内容counters、::before标签在浏览器里正常渲染但从 DOM 渲染的截图中消失且对文本提取不可见。因此 Render.ts 把所有编号和标签都输出为真实 DOM 文本。绝不向寄存器中添加 CSS counters。这条教训在仓库内得到了第二处独立佐证Interceptor 技能的 Gotchas 区块记录了一模一样的观察LifeOS/install/skills/Interceptor/SKILL.mdDOM-render screenshots drop CSS pseudo-element generated content.::before/::aftercontent — CSS counters especially — renders in the live browser but vanishes from the default DOM-render capture, so a page can look broken in the screenshot while fine on screen.也就是说这不是 HTML 技能独有的怪癖而是该截图技术路线的系统性行为——HTML 技能选择从源头规避。7.2 Artifact 阻断一切外部请求Artifact 环境会静默拦截外部资源一个 Google Fonts 的link会悄悄失败页面回退到系统字体栈。正确做法是 contenteditable="false">【免费下载链接】LifeOS⛰️ The Life Operating System — an intent engineering platform that moves you from your current state to your ideal state, in life and work.项目地址: https://gitcode.com/GitHub_Trending/pe/LifeOS创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 LifeOS HTML Skill 实战解析：用确定性渲染器把会话产出蒸馏为自包含 HTML Artifact
LifeOS HTML Skill 实战解析用确定性渲染器把会话产出蒸馏为自包含 HTML Artifact【免费下载链接】LifeOS⛰️ The Life Operating System — an intent engineering platform that moves you from your current state to your ideal state, in life and work.项目地址: https://gitcode.com/GitHub_Trending/pe/LifeOS导读LifeOS 的 HTML 技能位于 LifeOS/install/skills/HTML/SKILL.md解决一个具体问题把模型会话刚刚产出的分析、研究、红队报告、计划等内容一键变成一份设计精良、完全自包含、可发布为 Artifact的 HTML 文件。其核心是一套确定性分工模型只负责把会话内容蒸馏为类型化的 content JSON 并挑选一种设计寄存器register而 Tools/Render.ts 独占所有布局、排版与配色决策。读完本文你将掌握该技能的内容 JSON Schema、dossier/ledger双寄存器机制、Render 工作流的完整调用契约以及它在 Artifact-CSP 约束下的五项工程教训。一、技能定位与触发边界技能 frontmatterSKILL.md第 1–5 行给出了明确的触发契约这是所有 LifeOS 技能共用的路由机制命名、frontmatter、渐进式披露规范可参考 CreateSkill/SKILL.md触发词USE WHEN/HTML、HTML artifact、render this as HTML、make this an HTML page、artifact of this analysis、designed HTML output明确不适用NOT FOR部署型网站或 Web 应用应直接搭建项目、Web UI 设计系统用 Webdesign 技能、静态图片或图表用 Art 技能、以及撰写底层分析本身先跑分析再用 /HTML 渲染它。技能的职责一句话概括把会话刚产出的任何内容变成一个自包含、有设计感的 HTML 文件并发布为 Artifact。1.1 目录结构与安装形态在仓库中该技能由三个文件构成文件作用SKILL.md技能路由入口触发词、工作流路由表、快速参考、Gotchas、示例Workflows/Render.mdRender 工作流充分性检查、工具契约、发布与验证双腿Tools/Render.ts确定性渲染器读入 content JSON register输出单文件 HTML安装到用户环境后路径为~/.claude/skills/HTML/命令示例中即使用该形态。注意整个技能树遵循 CreateSkill 的扁平结构约定SKILL.md只做路由与要点完整 SOP 放在Workflows/可执行脚本放在Tools/。1.2 Voice Notification 双通道执行任何工作流前必须先发送两条通知这是 LifeOS 全部技能的强制约定curl -s -X POST http://localhost:31337/notify \ -H Content-Type: application/json \ -d {message: Running the Render workflow in the HTML skill to build a designed HTML artifact} \ /dev/null 21 同时输出文本通知Running **Render** in **HTML**...。这是 LifeOS 语音/文本提醒体系的统一接入点与 CreateSkill、Interceptor 等技能的模式完全一致。二、核心架构模型与渲染器的确定性分工HTML 技能的设计哲学SKILL.md第 9 行可以概括为一条铁律模型的唯一职责是把会话输出蒸馏为类型化 content JSON 并挑选设计寄存器Render.ts 拥有所有布局、排版、配色决策。这条边界带来三个直接收益输出可复现同一个 content JSON 同一寄存器永远渲染出同一份 HTML不存在这次好看下次难看的模型抖动提示词成本低模型不需要理解 CSS只需把内容正确归类到 Block 类型易于演进想改样式只需改 Render.ts 一处所有历史工作流自动受益。源码开头的注释Render.ts第 3–19 行把这一意图写得非常明确Takes a typed content JSON a design register name, emits ONE self-contained HTML file: inline CSS, optional font-face>interface Doc { title: string; // 页面 报头标题accentLastWord 为真时末词渲染为强调色 eyebrow?: string; // 眉题小号等宽大写文本 subtitle?: string; // 副标题 accentLastWord?: boolean; // 默认 true summary?: { label?: string; html: string }; // 顶部摘要块slab sections: Section[]; // 章节数组 footer?: string; // 页脚备注 numberedSections?: boolean; // 默认 true —— 章节编号以真实文本渲染 } interface Section { title: string; intro?: string; blocks: Block[] }其中blocks是七种可判别联合discriminated union类型每种对应一种渲染形态renderBlock实现见Render.ts第 167–201 行Block 类型字段渲染形态对应 CSS 类prosehtml正文段落最多 62ch 宽.prosecallouthtml强调提示框左边框使用 accent2.calloutgrouplabel,detail?时代/类别分隔标记等宽大写.groupquoteid?,badge?,quote?,text?,note?,source?证据条目编号 徽章 引言/正文/备注/来源.exlistitems: { lead, text }[]粗体引导语列表仅当内容是真正的序列时才编号ul.leadcutstamp,quote,note删除线引言 旋转印章用于披露被否决的内容.cuttableheaders: string[],rows: string[][]数据表响应式横向滚动包裹.tablewrap3.1 关键字段语义徽章Badgequote的badge是自由文本如VERIFIED、REPORTED、FACT由寄存器的badgeSolid数组决定是实心填充还是描边轮廓渲染Render.ts第 176–178 行编号Numbering所有章节编号、证据条目编号都是真实 DOM 文本由渲染器生成章节号01、02……用String(i1).padStart(2,0)补零见Render.ts第 212 行绝不使用 CSS counters——这是下文的头号 Gotcha 的规避方案强调尾词title的最后一个词默认以强调色渲染span classacc见Render.ts第 203–207 行accentLastWord: false可关闭。四、双设计寄存器dossier 与 ledger寄存器是设计模板的载体定义在Render.ts第 61–86 行的REGISTERS常量中。每个寄存器由 CSS 变量颜色体系、三段字体栈display/body/mono、可嵌入字体与实心徽章列表构成。4.1 dossier 寄存器证据卷宗风面向证据文件、红队、调查、主张测试项值背景--ink#0d1712深墨绿面板--panel#121f17分隔线--line#26382c前景--fg#f2ede2米白次要--dim#c6c0b1强调--accent#f58220橙色辅助--accent2#7d9fc4危险--danger#d0654a展示字体栈Anton, Arial Narrow, Avenir Next Condensed, sans-serif压缩大标题 打字机感正文字体栈Avenir Next, Helvetica Neue, system-ui, sans-serif等宽字体栈Courier New, monospace嵌入字体Anton-Regular.ttf从本地字体目录查找命中即 base64 嵌入实心徽章VERIFIED4.2 ledger 寄存器账册报表风面向报告、财务、计划、对比、指标项值背景--ink#101623深藏青面板--panel#161e30分隔线--line#2a3550前景--fg#dce6f2次要--dim#9fb0c8强调--accent#d9a441金色辅助--accent2#6fbf9f危险--danger#c96f6f展示字体栈Iowan Old Style, Palatino, Georgia, serif古典衬线正文字体栈Avenir Next, Helvetica Neue, system-ui, sans-serif等宽字体栈SF Mono, Menlo, Courier New, monospace嵌入字体无依赖系统栈实心徽章VERIFIED、CONFIRMED4.3 寄存器使用规则工作流Render.md第 39–45 行给出明确的选型表内容类型寄存器证据文件、红队、调查、主张测试dossier报告、计划、对比、指标、财务ledger本周上一个 Artifact 用了同一个寄存器选另一个最后一条规则很有工程味道在它们之间交替使用避免连续产出视觉趋同convergeSKILL.md第 38 行。新增视觉风格的正确姿势是在 Render.ts 中扩展新寄存器而不是为一次性需求手写样式one-off CSS这样后续每次运行都能复用。4.4 字体嵌入机制fontFaceRender.ts第 96–110 行实现了零外部请求的字体方案在FONT_DIRS~/Library/Fonts、/Library/Fonts、/System/Library/Fonts/Supplemental第 88 行中按序查找寄存器的字体文件命中第一个存在的文件即读取为 base64 生成font-facedata URI.otf声明为opentype其余按truetypefont-display: swap保证加载不阻塞找不到则静默降级到系统字体栈。五、Render 工作流完整实战Workflows/Render.md 定义了从会话产出到已发布、已验证的 HTML Artifact的完整路径。5.1 Step 0 —— 充分性检查第 16–18 行渲染前先确认有实质内容可渲染如果会话尚未产出任何可渲染输出没有分析、研究或成果应直接说明并询问要渲染什么绝不虚构内容。若存在多个候选输出必须明确标记选择了哪一个⚠️ Rendering X, not Y; redirect if wrong.再继续。5.2 Ideal State第 20–24 行一个自包含 HTML 文件渲染会话的真实产出——内容真实、逐字引用保持逐字、来源保留、验证标志保留由 Render.ts 从 content JSON 渲染不手写一次性 CSS如果内容确实超出既有 Block 类型应扩展 Render.ts新 Block 类型或新寄存器让后续运行受益发布为 Artifact 并在交出 URL 前完成像素级验证。5.3 工具契约第 26–35 行bun ~/.claude/skills/HTML/Tools/Render.ts --schema # 打印 content JSON 结构 示例 bun ~/.claude/skills/HTML/Tools/Render.ts --registers # 列出可用寄存器 bun ~/.claude/skills/HTML/Tools/Render.ts \ --json content.json \ --register dossier|ledger \ --out artifact.html5.4 发布 验证双腿第 47–53 行先加载artifact-design技能任何 Artifact 发布前的强制前置再用 Artifact 工具发布渲染好的文件复用同一文件路径即可更新既有 Artifact 的 URL交出 URL 前双腿都要验证发布腿Artifact 工具的list动作能看到该 Artifact渲染腿本地起服务bunx serve打开 HTML 文件用 Interceptor 技能的规范截图路径捕获并查看像素——因为 Artifact URL 在任何未登录属主账号的浏览器会话中会 404详见 Gotchas交出 Artifact URL 时附一行内容描述。六、CLI 手册参数、默认值与校验逻辑Render.ts 是一个标准的 Bun 可执行脚本shebang#!/usr/bin/env bunCLI 解析逻辑在第 255–289 行参数默认值行为--schema—打印EXAMPLE文档 JSON含七种 Block 的示例用法后退出第 261–263 行--registers—逐行打印寄存器名dossier、ledger后退出第 265–267 行--json path必填读取 content JSON缺失时打印 Usage 并以 exit 2 退出第 273–275 行--register namedossier按名字查REGISTERS未知寄存器打印可用列表并以 exit 2 退出第 277–281 行--out pathartifact.html输出文件路径内容校验第 282–286 行JSON 至少需要{ title, sections[] }否则报错提示用--schema查看示例。渲染成功后第 287–289 行打印产物信息artifact.html (NKB, registerdossier, fontsAnton|system)——其中fonts段会报告实际嵌入的字体族无嵌入时为system可用于确认字体嵌入是否生效。七、GotchasArtifact 渲染的五个工程教训SKILL.md第 41–47 行的 Gotchas 区块是全技能信息密度最高的部分全部来自真实踩坑记录其中第一条的发现日期标注为 2026-07-11。这五条对任何做 Artifact/CSP 安全 HTML 输出的开发者都有直接参考价值7.1 伪元素生成内容会在 DOM 渲染截图管线中消失CSS 伪元素生成的内容counters、::before标签在浏览器里正常渲染但从 DOM 渲染的截图中消失且对文本提取不可见。因此 Render.ts 把所有编号和标签都输出为真实 DOM 文本。绝不向寄存器中添加 CSS counters。这条教训在仓库内得到了第二处独立佐证Interceptor 技能的 Gotchas 区块记录了一模一样的观察LifeOS/install/skills/Interceptor/SKILL.mdDOM-render screenshots drop CSS pseudo-element generated content.::before/::aftercontent — CSS counters especially — renders in the live browser but vanishes from the default DOM-render capture, so a page can look broken in the screenshot while fine on screen.也就是说这不是 HTML 技能独有的怪癖而是该截图技术路线的系统性行为——HTML 技能选择从源头规避。7.2 Artifact 阻断一切外部请求Artifact 环境会静默拦截外部资源一个 Google Fonts 的link会悄悄失败页面回退到系统字体栈。正确做法是 contenteditable="false">【免费下载链接】LifeOS⛰️ The Life Operating System — an intent engineering platform that moves you from your current state to your ideal state, in life and work.项目地址: https://gitcode.com/GitHub_Trending/pe/LifeOS创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考