SuperAPI AI 工具集

guizang-page-skill

写作与研究

查看项目

更新于 10-31 17:36

技能介绍

归藏 Page(guizang-page-skill)由歸藏创建与维护,用途是把 Markdown 文档排版为设计克制、内容优先的单文件 HTML 页面。

【核心架构】 Markdown 原文经模型逐行扫描生成 annotations.json(升格标注),再由 render.mjs 确定性渲染为 output.html。原文在流程中全量保留,标注本身只有数百 token。

【两种风格】 杂志风(Magazine):以 Monocle 与复印件美学为锚点,特征是衬线标题、米白纸色、墨色为主(默认墨水经典)、交叉线纹理、微圆角。瑞士风(Swiss):以 Helvetica Forever 为锚点,特征是无衬线极细体、冷灰底、单一锚点色(默认克莱因蓝)、卡片语言、直角、网格点阵。两种风格与 PPT、图文卡片技能共用一套主题配色(杂志风 6 套、瑞士风 4 套),记录在 references/themes.md。

【两种模式】 忠实模式:原文全量保留,仅少量升格,约 10-20 条标注。解释模式:在原文保留基础上插入解释性组件并做语言过滤,按篇幅约每千字 3-5 个解释组件。

【适用与不适用】 适合文档排版、文章展示、知识笔记可视化、PRD 格式化、读书笔记整理,以及双语文档的单语渲染。不适合 PPT 演示(应用 guizang-ppt-skill)、社交媒体卡片(应用 guizang-social-card-skill)和微信公众号排版(本技能已移除公众号导出,应使用 wechat-formatter)。

【使用流程】 第一步确认需求:选择风格(杂志风/瑞士风)、模式(忠实/解释)、主语言(zh/en)、配图需求与配色。第二步分析文档生成 annotations.json:模型逐行扫描原文,识别可升格模式,例如“术语:解释”结构升格为 def-card、独立加粗观点句升格为 pullquote、有序步骤升格为 process、连续并列案例升格为 gallery、约束规则列表升格为 checklist、社交引导语归为 drop;解释模式还可额外标注 figure(Unsplash 配图)、embed(SVG 信息图)、aside(实践提示卡)、summary-card(速查网格)。annotations.json 包含 meta(标题、作者、日期、阅读时间、标签、副标题、头图、语言)与 upgrades 数组,line 字段为原始 Markdown 的 1-based 行号。第三步运行渲染脚本:node scripts/render.mjs <input.md> <annotations.json> <output.html> --style swiss|magazine [--theme <id>] [--brand "#hex"] [--embed]。--theme 指定初始配色,--brand 用用户品牌色生成受约束主题,--embed 将字体子集化内置以实现离线查看(首次使用需在技能目录 npm install)。脚本自动完成行匹配、未标注行的默认 prose 渲染、内联 CSS、单文件 HTML 生成、TOC 侧边栏与 scroll spy。第四步在浏览器打开验证标题层级、组件位置、双语过滤、图片与 TOC 导航。第五步按需导出 PDF 或长图:node scripts/export.mjs output.html --pdf output.pdf,或 --png output.png --width 1440,可加 --color 与 --font 指定配色字体;依赖 Chrome 与 puppeteer-core,首次需 npm install,Chrome 路径可用 CHROME_PATH 指定。导出时脚本会处理懒加载图片、等待字体就绪并隐藏设置按钮与目录;长图高度上限约为 16000 像素,超限会自动降倍率并提示。

【自动渲染元素】 渲染器无需标注即可处理 Markdown 表格、HTML 表格、代码块、chart 代码块(纯 HTML/CSS 条形图)、图片、引用块、列表与脚注,并对表格做数字列右对齐、等宽数字与表注等增强。

【已知限制】 升格应做组件替换而非删改重写;瑞士风应靠背景色与间距分隔而少用分割线;单语文档不应设置 meta.lang,否则会过滤掉非目标语言段落;highlight 行号须精确对应加粗行;embed 的 SVG 必须纯内联且建议使用 currentColor 与 CSS 变量以跟随主题;hero_image 只能用照片或视频帧,不得使用图表、表格、榜单或文字截图。页面内不提供导出按钮,PDF 与长图由模型执行导出脚本;--embed 只内置字体,本地图片仍需随 HTML 一并交付;微信排版不在本技能范围内。