SuperAPI AI 工具集

create-apple-notes-mockup

前端与建站

查看项目

更新于 10-15 21:54

技能介绍

用途:把一份 JSON 笔记规格渲染成像素级还原的 Apple Notes(iPhone 浅色模式)截图,输出 HTML + PNG,原生尺寸 1180×2556(DPR 2)。它是确定性、不调用 LLM 的渲染器,可被 create-apple-notes-video-ad 逐帧驱动以伪造打字动画,也可单独用于广告、社交帖子和分镜中的“自我备忘”画面。编排智能体负责文案,本工具负责保真度(状态栏、智能标点、光标、自动更正下划线、工具栏、键盘外观)。

主要能力:标题加粗显示;正文支持 paragraph、image、checklist、divider 块;自动应用智能标点(' → '、" → "、... → …、-- → –、--- → —);cursor 可置于标题或末段末尾;autocorrect_underline 按精确大小写为词加黄色下划线;status_bar 可设时间、电量、低电量红色、专注图标(不渲染灵动岛);show_keyboard 叠加 iOS QWERTY 与格式工具栏;with_iphone_frame 加暗色边框。

使用方式:先安装依赖 cd create-apple-notes-mockup && npm install && npx playwright install chromium。然后运行 node render.js --note examples/mid.json,可用 --with-keyboard、--with-iphone-frame、--no-frame、--output、--name、--out-html、--out-png、--viewport、--dpr 等参数。输出到 <output>/<YYYY-MM-DD>-<slug>/,含 index.html、screenshot.png、spec.json。

适用场景:广告、社交帖子、视频场景或产品模型中的假 Apple Notes 截图;驱动打字动画的连续帧;分镜中的静态“自我备忘”画面。渲染 iMessage 请改用 create-imessage-mockup。

限制:不内嵌 LLM,需编排方提供符合 schema 的 JSON;字体回退可能导致换行或字重偏差;远程图片 URL 可能被拦截,建议用本地路径;自动更正下划线区分大小写;空段落依赖 CSS 边距占位;黄色需为 #FFCC00。资料未提供收费、价格与平台信息。