field-notes-editorial-template
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseField Notes Editorial Template
Field Notes 编辑模板
Produce a premium editorial data report in a single self-contained HTML file.
生成一个包含在单个独立HTML文件中的高端编辑数据报告。
Resource map
资源目录
text
field-notes-editorial-template/
├── SKILL.md
├── assets/
│ └── template.html
├── references/
│ └── checklist.md
└── example.htmltext
field-notes-editorial-template/
├── SKILL.md
├── assets/
│ └── template.html
├── references/
│ └── checklist.md
└── example.htmlWorkflow
工作流程
- Read active and map palette/typography to root CSS variables.
DESIGN.md - Copy to
assets/template.htmlas the working artifact.index.html - Keep the editorial frame language:
- paper-like background and subtle vignette
- serif display headlines plus clean sans-serif body copy
- rounded pastel metric / insight cards
- chart panel with legend and axis labels
- Keep interactions lightweight and presentation-safe:
- page view switcher (metrics / insights / retention)
- number count-up animation for key metrics
- chart line reveal animation
- Use honest placeholders (or neutral labels) where data is unknown.
— - Validate against before emitting.
references/checklist.md
- 读取当前的文件,将配色方案/字体映射到根CSS变量。
DESIGN.md - 复制到
assets/template.html作为工作文件。index.html - 保留编辑框架风格:
- 仿纸背景和微妙的暗角效果
- 衬线标题字体搭配简洁无衬线正文
- 圆角淡彩指标/洞察卡片
- 带有图例和坐标轴标签的图表面板
- 保持交互效果轻量化且适合展示:
- 页面视图切换器(指标/洞察/留存)
- 关键指标的数字计数动画
- 图表线条渐显动画
- 在数据未知的地方使用真实占位符(或中性标签)。
— - 输出前对照进行验证。
references/checklist.md
Output contract
输出规范
One short orientation sentence, then:
xml
<artifact identifier="field-notes-editorial" type="text/html" title="Field Notes Editorial Report">
<!doctype html>
<html>...</html>
</artifact>先写一句简短的说明,然后输出:
xml
<artifact identifier="field-notes-editorial" type="text/html" title="Field Notes Editorial Report">
<!doctype html>
<html>...</html>
</artifact>