okr-to-html

OKR to HTML

Export structured OKR Markdown as interactive HTML (bottom Tabs switch O1/O2/O3, styles follow assets/template.html ).

Workflow

1. According to theinput formatbelow, organize the user's text or Markdown (can be written to a temporary .md）
2. Run the generation script and specify the output path:

python3 scripts/build.py path/to/okr.md -o path/to/output.html

1. Open the output HTML in a browser; verify that O and KR weights are complete
2. Do notmanually edit assets/template.html the style logic inside to fudge data; content only goes through the input file

From stdin:

python3 scripts/build.py -o /tmp/okr.html <<'EOF'
...
EOF

Reference sample:references/demo.md(1-7 KR compatibility stress test).

Input format (Markdown only)

Optional YAML front matter

Field	Meaning
title	<title> and default page name
heading	Main title (paired with accent to highlight one word)
accent	Wrap in heading <span class="accent">
subtitle	Subtitle

When there is no frontmatter, # 主标题 and > 副标题 can be used instead.

Objective format

---
title: OKR 兼容 Demo | O1–O3
heading: 团队成长 OKR 演示
accent: OKR
subtitle: 1~3 条 KR 写法示例
---

## O1 · 专注
季度只做一件事，做到极致

- **核心产品**月活突破 **50 万** | 100%

## O2 · 健康
守护团队可持续的节奏

- 关键服务 **99.9%** 可用 | 60%
- 人均加班时长低于 **10 小时/月** | 40%

## O3 · 招聘
补齐关键岗位的人才缺口

- 资深前端到岗 **2 人** | 40%
- 算法工程师到岗 **1 人** | 35%
- 实习生转正率 **≥ 60%** | 25%

Rules

• ## O{n} · {底部 Tab 文案}, separators supported · / . / -
• Under the headingfirst line non-list = O description on the card (single line)
• Each KR starts with - , line ends with | 40% or | 权重 40%
• KR text supports **粗体**
• Each O must have a description and at least one KR
• The sum of all KR weights is recommended to be 100% (not enforced by the script)

Output conventions

• Single-file HTML, no external dependencies
• The first card is active by default; keyboard 1~9 and arrow keys switch
• Styles, layout, and weight nameplates follow the template;only replacetitle, subtitle, cards, and Tab text

Troubleshooting

Symptom	Handling
KR 行缺少权重	Add at the end of each line | NN%
未解析到任何 Objective	Check ## O1 · format
O{n} 缺少目标描述	Add a line with the goal description under the heading
Style is wrong after generation	Compare whether assets/template.html was accidentally modified

Agent notes

• When the user provides natural-language OKRs, first convert them to compliant Markdown, then run the script
• The output path is specified by the user; if not specified, use the 输入名.html same directory
• When visual fine-tuning is needed, modify assets/template.html, and update references/demo.md and the script placeholders in sync