SuperAPI AI 工具集

create-apple-notes-mockup

设计与创作

查看项目

更新于 10-15 21:54

技能介绍

用途:将 JSON 笔记规格转换为像素级逼真的 Apple Notes(iPhone 浅色模式)截图,输出原生 1180×2556、DPR 2 的 HTML 与 PNG,适合广告、社交贴文、视频场景或产品模型中的一次性笔记本画面。该渲染器不嵌入 LLM,由编排代理负责文案,本工具负责还原度(状态栏、智能标点、光标、纠错下划线、工具栏、键盘边框)。

主要能力:支持 title 粗体标题;body 块含 paragraph(自动智能标点)、image(相对路径按规格文件目录解析并内联为 data URI)、checklist(勾选为黄色实心圆加删除线,未选为灰色描边圆)、divider;cursor 可选 title/end/null;autocorrect_underline 按精确大小写匹配加黄色下划线;status_bar 可设 time、battery_pct、battery_low、show_focus_glyph;show_keyboard 与 keyboard_state 可叠加 iOS QWERTY 与格式工具栏;with_iphone_frame 添加深色边框。

用法:运行 node render.js --note examples/mid.json;可用 --with-keyboard、--with-iphone-frame、--no-frame、--output <dir>、--name <slug>、--out-html/--out-png、--viewport WxH、--dpr N。默认输出到 ./apple-notes-mockup-exports/<日期>-<slug>/,含 index.html、screenshot.png、spec.json。首次使用需在技能目录执行 npm install 与 npx playwright install chromium。

限制:不渲染 Dynamic Island;官网未提供收费、平台或效果信息,暂未提供。远程图片 URL 可能被拦截,建议用本地路径。字体回退可能导致换行偏差,可微调 .note-body 字号或内边距。纠错下划线默认区分大小写。黄色需保持 #FFCC00。