html-anything 团队 OKR 追踪 Skill 模板深度解析：从 SKILL.md 规格到 Dashboard 落地实现

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-anythingAgentic HTML 编辑器内置的team-okrs技能模板为线索完整拆解一个 OKR 追踪 Dashboard 模板的定义方式SKILL.md frontmatter 与布局规格、加载与解析链路loader.ts / API 路由以及真实渲染实现example.html。读完你既能复刻出一个可直接落地的 OKR 追踪页面也能掌握为一个 Skill 模板编写 SKILL.md 并接入模板市场的完整方法论。一、模板本质一份写给 AI 的页面蓝图在 html-anything 中一个 Skill 模板 一个目录目录内包含可选的SKILL.md、example.html、example.md。其中SKILL.md是写给本地 AI Agent 的结构化提示词——它不包含具体数据只定义可用版面 / 风格 / 组件库由 Agent 在生成 HTML 时结合用户输入内容动态套用。team-okrs模板就是这一机制的典型样本其核心定位在 SKILL.md 中一句话概括【意图】OKR 追踪页, 一眼看出进度。目标读者是产品团队把一个季度的目标Objectives、关键结果Key Results及其进度状态浓缩到一屏之内让管理者无需翻页即可评估季度健康度。模板的 frontmatter 还标注了适配形态category: dashboard—— 属于仪表盘类模板scenario: product—— 面向产品/业务场景aspect_hint: 桌面 1440—— 提示生成时优先按 1440px 宽桌面布局设计。二、SKILL.md 的 frontmatter 字段详解team-okrs/SKILL.md头部是标准的 YAML 风格 frontmatter完整字段如下--- name: team-okrs zh_name: 团队 OKR 追踪 en_name: Team OKRs emoji: description: 季度 banner 3 个目标 KR 进度条 owner 状态 pill category: dashboard scenario: product aspect_hint: 桌面 1440 tags: [okr, objectives, key results, 目标] ---这些字段并非仅供人类阅读而是被 loader.ts 的parseFrontmatter逐一解析并映射为模板注册表元数据。结合fmToMetaloader.ts#L160-L194可以看清每个字段的实际作用与默认值字段作用缺省时的行为来自源码name模板 id同时是目录名skills/team-okrs目录名即 idzh_name/en_name中英文显示名模板选择器Template Picker中展示回退为name或 idfm.zh_name ?? fm.name ?? idemoji列表中的图标缺省为✨description一句话概括模板产出形态缺省为空字符串category模板分类缺省为otherscenario场景标签用于筛选 chips缺省为marketingaspect_hint目标宽高比 / 布局取向提示缺省为空字符串tags检索关键词支持中英文混合如目标缺省为空数组featured/recommended可选数字越小排名越靠前用于置顶推荐位不设置则按常规排序注意parseFrontmatter是零依赖实现仅支持扁平结构字符串可带引号、整数、以及tags: [a, b]这种单行数组字面量。若数组值引号包裹解析时会自动剥离引号并过滤空项。三、模板正文四段式布局规格SKILL.md的正文部分---之后是模板的灵魂它用简洁的层级列表定义了 OKR 追踪页必须包含的四大布局要素【模板: Team OKRs】 【意图】OKR 追踪页, 一眼看出进度。 【布局】 - Quarter banner (Q? 主题) - 3 个 objectives 列, 每个含一组 KR - 每个 KR 一条进度条 数值 owner avatar 状态 pill - 右侧 this quarter at a glance 摘要逐条展开Quarter banner页面顶部的季度横幅必须包含季度编号Q4、年度FY25与季度主题用于第一时间建立时间上下文。3 个 objectives 列核心信息区每一列是一个 Objective内部承载一组 Key ResultsKR。KR 行每条 KR 需要同时呈现四种信息——进度条可视化完成度、数值百分比或 x of y、owner avatar负责人头像、状态 pillOn track / At risk / Off track 三态标签。右侧摘要栏this quarter at a glance侧边栏聚合全局统计进行中的目标数、绿色 KR 数、剩余天数、风险评级以及 Top movers 与 Blockers 等管理视角信息。这套规格刻意保持组件级而非像素级正是为了给 Agent 留出排版自由度数字如3 个 objectives是短示例下的参考下限而非硬性上限——这一点在 shared.ts 的全局设计指令中被反复强调输出数量完全由用户内容的实际长度和信息结构决定不许总结、压缩、丢弃信息。四、落地实现example.html 逐段拆解规格写好后模板还需要一个预渲染示例。team-okrs/example.htmlexample.html就是一个可直接双击打开、约 200 行的自包含单文件示例它把上面的四段式规格翻译成了真实界面。下面按结构拆解。4.1 设计令牌CSS 变量:root中定义了完整的色彩令牌与字体栈这是1 个主色 2 个中性色 至多 1 个强调色设计准则的实践:root { --bg: #f5f6f9; --paper: #ffffff; --ink: #161924; --muted: #5d6678; --line: #e3e6ee; --accent: #2c4ee8; --accent-soft: #eaeefe; --positive: #1f8a5a; --warn: #b58522; --danger: #b13b3b; --display: Inter, -apple-system, ...; --body: -apple-system, ...; --mono: ui-monospace, SFMono-Regular, Menlo, monospace; }三态语义色--positive/--warn/--danger直接对应状态 pill 的三档on-track / at-risk / off-track整个页面的健康度编码由此统一。4.2 页面骨架主区 侧栏.app { display: grid; grid-template-columns: 1fr 320px; min-height: 100vh; }两列网格左侧 1fr 为主内容区季度 banner objectives右侧固定 320px 为摘要栏。同时在media (max-width: 1080px)中断点下退化为单列侧栏移至下方、KR 行改为单列保证窄屏可用。4.3 季度横幅div classquarter-banner div h1Q4 FY25 · Northwind/h1 div classmeta14 October → 31 December 2025 · Owner Devon Park · 3 objectives · 9 key results/div /div div classqb-progress div classnum42%/div div classlabelQuarter through · 47% time elapsed/div /div /div深色渐变横幅承载季度身份信息右侧用大字号56px展示季度已过百分比与时间已消耗百分比的对照——这是 OKR 页面最关键的节奏信号之一时间过半而进度未过半往往意味着风险。4.4 Objective 卡片与三态 Pill每个 Objective 渲染为一张卡片头部含目标序号、目标名称、owner头像 姓名与状态 pill.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-family: var(--mono); ... } .pill.on-track { background: rgba(31,138,90,0.12); color: var(--positive); } .pill.at-risk { background: rgba(181,133,34,0.12); color: var(--warn); } .pill.off-track{ background: rgba(177,59,59,0.12); color: var(--danger); }pill 使用同色系 12% 透明底 语义色文字配合 6px 圆点background: currentColor形成颜色即状态的强编码色弱用户也能通过文字On track / At risk / Off track区分。4.5 KR 行进度条 数值 负责人.kr { display: grid; grid-template-columns: 1fr 200px 110px; gap: 18px; padding: 16px 26px; border-top: 1px solid var(--line); align-items: center; } .kr-fill { background: linear-gradient(90deg, var(--accent), #6e85ff); } .kr-fill.warn { background: linear-gradient(90deg, var(--warn), #f1b13a); } .kr-fill.danger { background: linear-gradient(90deg, var(--danger), #d8625e); }每条 KR 是三列网格KR 名称strong mono 小字备注、8px 圆角进度条、右侧百分比/计数。进度条颜色随健康度切换三档渐变与 pill 语义严格对应。示例中既有百分比型 KRReach SOC 2 Type II readiness · 88%也有计数型 KRClose 3 of 3 stalled enterprise deals · 2 of 3说明数值形态应该由数据本身决定模板不锁死格式。4.6 右侧摘要栏侧栏聚合了三类管理信息This quarter at a glanceObjectives on track 1 of 3、Key results green 4 of 9、Days remaining 53 of 78、Risk score Medium——全局状态一屏可读Top movers (this week)本周变化最大的三条 KR33%/9 pp/−2.4%用增量符号着色Blockers风险卡片红底红边列出离线项及其决策诉求Decision needed Friday。摘要栏让一眼看出进度从口号变成了可操作的管理动作哪里在涨、哪里在跌、哪里需要拍板。五、加载链路SKILL.md 如何变成 UI 列表理解了模板内容之后还需要知道它在项目里如何被读取、序列化并最终展示在模板选择器中。完整链路如下5.1 磁盘加载服务端loader.ts 的loadSkillFromDir负责从src/lib/templates/skills/id/目录读取SKILL.md并同步探测同目录下的example.md/example.htmlconst raw safeRead(path.join(dir, SKILL.md)); const { fm, body } parseFrontmatter(raw); const exampleMd safeRead(path.join(dir, example.md)); const exampleHtml safeRead(path.join(dir, example.html)); const meta fmToMeta(id, fm, !!exampleHtml, !!exampleMd); return { ...meta, body, exampleMd, exampleHtml };listSkills()则遍历整个 skills 目录配合 id 合法性校验isValidBundledId并把用户通过 marketplace 安装的技能来自~/.html-anything/skills/命名空间前缀pkg-owner__repo--id合并进同一注册表详见 registry.ts。开发环境下metaCache被绕过isDev判断因此新增一个 skill 目录无需重启next dev即可被扫描到生产环境则缓存元数据安装/卸载后调用invalidateSkillsCache()失效。5.2 API 暴露GET /api/templates返回全部模板元数据SkillMeta[]响应头Cache-Control: public, max-age5用于短时去重GET /api/templates/:id/example返回单个 skill 的示例 JSON 包contenthtml 元数据让模板选择器点 Preview 时一次请求拿全内容与 HTML避免两次往返。5.3 客户端消费客户端 hookuseTemplates()维护模块级缓存 进行中请求去重in-flight promise dedupe并用generation单调计数器解决慢请求晚到覆盖新列表的竞态refreshTemplates()在安装/卸载后立即刷新列表让模板选择器无需整页刷新即可切换新注册表。5.4 CLI 侧的同构实现命令行工具cli也内置了一份几乎同构的加载器skills-loader.ts差异在于接受skillsDir参数而非硬编码process.cwd()。这说明SKILL.md 的 frontmatter 格式是整个项目的共享协议Web 端与 CLI 端共用同一套解析语义。六、提示词组装SKILL.md 正文如何参与生成当用户选中team-okrs模板并提交内容后模板正文并不会单独进入模型而是与全局设计指令、用户内容拼接成最终提示词。核心实现在 shared.tsexport function assemblePrompt(opts: { body: string; content: string; format: string }): string { return ${SHARED_DESIGN_DIRECTIVES} ${opts.body.trim()} 【输入格式】: ${opts.format} 【用户内容】: ${opts.content} ; }三段式结构SHARED_DESIGN_DIRECTIVESshared.ts#L6-L38所有技能共享的硬性规则——输出自包含单文件 HTML、禁止调用文件系统工具、Tailwind v3 Play Google Fonts 经 CDN 引入、排版中文Noto Sans SC/ 英文Inter、8px 基线网格、对比度 ≥ 4.5 等。其中内容驱动数量是最优先指令模板只提供版式池产出多少 section/卡片完全由用户内容长度决定。模板正文即team-okrs的四段式布局规格在此刻被注入作为版式约束。用户内容 输入格式真实数据尾巴确保必须使用用户提供的真实数据不许 lorem ipsum。所以team-okrs的3 个 objectives会被正确理解为最低参考而非硬上限如果用户提交了 5 个目标的数据Agent 必须输出 5 个 Objective 卡片否则即视为严重错误见 shared.ts#L12 对 12k 字符只输出 4-6 页的批评。七、场景体系与新增模板指南team-okrs的scenario: product对应 scenarios.ts 中 12 个规范场景键之一marketing / engineering / operations / product / design / finance / sales / hr / personal / education / creator / video。场景键的作用驱动模板选择器顶部的筛选 chips客户端与校验端共用该常量模块SCENARIO_ORDER控制场景排序未知场景键不会导致加载失败只会落入末尾的 other 桶并显示原始 idscenarios.ts#L51-L53。若要在本项目贡献一个类似team-okrs的新模板最小步骤只需三步无需改动任何 TS 代码新建目录next/src/lib/templates/skills/your-skill/写入SKILL.mdfrontmatter 参考本文第二节字段表正文按【意图】【布局】结构描述版面要素可选同目录添加example.html预渲染预览与example.md示例输入内容——存在与否会被listSkills自动探测并显示在模板选择器的 Preview 中。八、小结一份模板的完整价值闭环回顾team-okrs这个 16 行的SKILL.md它在 html-anything 中串联起了一条完整链路定义frontmatter 元数据分类、场景、标签、宽高比让模板可检索、可筛选、可排序规格四段式布局指令定义了 OKR 追踪页的信息架构banner → objectives → KR 行 → 侧栏摘要示例example.html给出了可直接运行的状态编码方案三态色、渐变进度条、pill、mover/blocker 聚合装载loader.ts 零依赖解析 API 路由 客户端 hook 把它变成模板选择器里的一个可预览卡片执行assemblePrompt把正文注入全局设计指令与用户数据让 Agent 产出内容驱动、数据真实、单文件可双击打开的成品页面。对于想要快速搭建团队 OKR 追踪页的开发者最直接的做法是把 example.html 作为起点替换季度横幅的文案与日期、按三态语义维护各 KR 的进度与 pill 状态、更新侧栏的统计与 blocker 文案一个生产可用的 OKR 追踪页即告完成。赞分享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点击查看免费下载相关推荐GPT Academic 源码分析插件两阶段 LLM 流水线快速解析任意语言项目架构GPT Academic 源码分析插件两阶段 LLM 流水线快速解析任意语言项目架构 GPT Academic 的源码分析插件能够自动遍历一个陌生项目的全部源AI 应用人工智能AI AgentAI 写作媒体生成html-anything 杂志风海报 Skill 深度解析从 SKILL.md 规范到 Newspaper Editorial 版式的落地实现html anything 杂志风海报 Skill 深度解析从 SKILL.md 规范到 Newspaper Editorial 版式的落地实现 这篇技术指南AI 应用人工智能AI AgentAI 写作媒体生成html-anything 技能模板实战用 SKILL.md 生成 FlowAI 团队管理 Dashboardhtml anything 技能模板实战用 SKILL.md 生成 FlowAI 团队管理 Dashboard 导读 本文以 html anything 仓库AI 应用人工智能AI AgentAI 写作媒体生成上一篇Librum性能基准测试建立应用性能的参考标准下一篇一键安装 OpenCVMILQ 热门脚本 install-opencv.sh 完整拆解与使用教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考