field-notes-editorial-template

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Field 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.html
text
field-notes-editorial-template/
├── SKILL.md
├── assets/
│   └── template.html
├── references/
│   └── checklist.md
└── example.html

Workflow

工作流程

  1. Read active
    DESIGN.md
    and map palette/typography to root CSS variables.
  2. Copy
    assets/template.html
    to
    index.html
    as the working artifact.
  3. 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
  4. Keep interactions lightweight and presentation-safe:
    • page view switcher (metrics / insights / retention)
    • number count-up animation for key metrics
    • chart line reveal animation
  5. Use honest placeholders (
    or neutral labels) where data is unknown.
  6. Validate against
    references/checklist.md
    before emitting.
  1. 读取当前的
    DESIGN.md
    文件,将配色方案/字体映射到根CSS变量。
  2. 复制
    assets/template.html
    index.html
    作为工作文件。
  3. 保留编辑框架风格:
    • 仿纸背景和微妙的暗角效果
    • 衬线标题字体搭配简洁无衬线正文
    • 圆角淡彩指标/洞察卡片
    • 带有图例和坐标轴标签的图表面板
  4. 保持交互效果轻量化且适合展示:
    • 页面视图切换器(指标/洞察/留存)
    • 关键指标的数字计数动画
    • 图表线条渐显动画
  5. 在数据未知的地方使用真实占位符(
    或中性标签)。
  6. 输出前对照
    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>