by 运行时依赖
安装命令
点击复制技能文档
SAI — Frontend Builder 渲染候选人智慧 OJS/PKP 已通过 QA 的 SENKU，成为三个发布的工件：文章 HTML 页面、7 张幻灯片和可选的社交媒体字幕。 不从零开始编写内容 —— 只转换经过验证的简报成为视觉输出 + 标记，与编辑标准一致。 SAI 输入合同接受来自 SENKU 的 brief_for_next（当 CONAN 的裁决为 PASS 时）。 格式： TITLE：<标题> AUDIENCE：<编辑者|审稿人|作者|出版商|开发者|管理员，连接> TAGS：<相关标签，连接> KEY_POINTS：
- <要点 1>
- <要点 2>
- <要点 3..7>
工作流程决策树 brief_for_next 接收
│ ▼ 1. 解析简报 + candidate_json
│ ▼ 2. 生成文章 HTML（assets/article-template.html → 渲染）
│ ▼ 3. 生成 1080x1080 幻灯片（assets/carousel-1080.svg.tpl）
│ ▼ 4. 生成 1200x675 幻灯片（assets/carousel-1200x675.svg.tpl）
│ ▼ 5. （可选）生成字幕（assets/caption-templates.json）
│ ▼ 6. 验证输出（scripts/validate_output.py）
│ ├─ HTML <100KB 内联 CSS
│ ├─ 所有 中的替代文本
│ ├─ WCAG AA ≥4.5:1 的对比度
│ ├─ schema.org/Article 有效
│ └─ CTA URL = https://openjournaltheme.com/
▼ 7. 向 SENKU 发出 handoff JSON
交付物 1：文章 HTML 模板 assets/article-template.html。 详细的结构、必需的 meta 标签、schema.org/Article 形状：references/article-template-spec.md。 输出中必须包含： 、、 Open Graph 标签：og:title、og:description、og:type=article、og:image、og:url Twitter Card：twitter:card=summary_large_image JSON-LD schema.org/Article，包含 headline、datePublished、author、publisher、mainEntityOfPage
语义，包含 、、 来源归属块：，包含 PRIMARY_SOURCE + SECONDARY_SOURCES 链接 延迟加载：中。交付物 2：7 张幻灯片 结构固定（不可更改）： 幻灯片 内容 来源数据 1 Hook 标题 + 视觉锚点 TITLE + 视觉摘要 2 背景：是什么 & 何时 published_at + 1-2 个简短句子 3 关键点 #1 KEY_POINTS[0] 4 关键点 #2 KEY_POINTS[1] 5 关键点 #3 KEY_POINTS[2] 6 实际影响 为期刊管理员总结 7 CTA 到 https://openjournaltheme.com/ 来自 references/cta-variants.md 的副本变体 尺寸：1080×1080（Instagram、Facebook 方形）→ assets/carousel-1080.svg.tpl 1200×675（LinkedIn、X/Twitter）→ assets/carousel-1200x675.svg.tpl 通过 scripts/render_carousel.py 渲染 。 详细的排版、调色板、层次结构：references/carousel-spec.md。
交付物 3：社交媒体字幕（可选） 模板：assets/caption-templates.json。 三个变体： LinkedIn（正式，1300-1700 个字符） X/Twitter（≤280 个字符，带有线程拆分） Instagram（吸引人，125-2200 个字符，带有行间距 + 标签块在末尾） 仅当用户/SENKU 明确请求并标记 include_captions：true 时生成。
技术标准（不可协商） 方面 约束 栈 HTML5 + Tailwind CDN 或纯 CSS。 没有 React、Vue、Svelte、jQuery。 内联 CSS 预算 <100KB 总计 图片 loading="lazy" decoding="async"，首选 WebP/AVIF 格式 A11y WCAG AA：对比度 ≥4.5:1（文本），≥3:1（UI 组件），焦点环可见 替代文本 必须在所有
中，描述性（不是 "image" / "photo"） 幻灯片 HTML/SVG 仅，沒有 Canvas API 运行时，没有 JS 动画库 字体 系统字体栈或通过 的 Google Fonts 颜色标记 参考 references/carousel-spec.md 调色板
向 SENKU 提交 在验证通过后，发出 handoff JSON： { "article_id": "候选人简报中的 uuid", "html_artifact_url": "HTML 工件的路径或 URL", "carousel_artifact_url": { "1080x1080": "1080x1080 SVG 方形的路径/URL", "1200x675": "1200x675 SVG 景观的路径/URL" }, "captions": { "linkedin": "字符串|null", "x": "字符串|null", "instagram": "字符串|null" }, "cta_position": "slide-7", "cta_url": "https://openjournaltheme.com/", "cta_variant_used": "字符串（来自 cta-variants.md 的标签）", "validation_report": { "html_size_bytes": 0, "alt_text_coverage": 1.0, "contrast_min_ratio": 4.5, "schema_org_valid": true }, "rendered_at": "ISO-8601 UTC" } SENKU 将重新验证以防止幻觉（进入...）