miantiao-me trmnl-paper-takumi
概览
把 TSX / JSX + Tailwind 风格布局 渲染成 800x480 图片，再包一层最小 TRMNL markup。
默认视觉定调不是彩色 Web UI 截图，而是 适合电子墨水屏的黑白工业海报：高对比、排版驱动、像素友好、长时间静态显示也成立。
默认路线：
- 写或改一个 Takumi scene（
.tsx） - 本地渲染成
webp/png/jpeg - 把图片放到 LaraPaper 可访问的 URL
- 用
wrap_image_markup.py生成最小 Blade markup（默认优先加image-dither） - 必要时交给
trmnl-paper-screen推送
何时使用
优先用这个 skill：
- 海报式单屏
- 像素风 / pixelated 主视觉
- 截图式、插画式、封面式布局
- 更适合“先渲染成图片，再包进 TRMNL” 的内容
改用 trmnl-paper-blade：
- KPI、列表、表格、rich text、item、table、progress 为主
- 需要直接复用
<x-trmnl::...>组件 - 需要后续长期编辑局部模块，而不是替换整张图
当前 skill 边界
Takumi 上游官方能力比当前 skill 更多，例如原始 HTML、measure()、renderAnimation()、raw frames、ImageResponse、emoji 路线等。
当前 trmnl-paper-takumi 只封装最常用的子集：
.tsxscene → 本地静态图- persistent images（
--image key=path） - 可选 Google Fonts 动态加载
- 外部图片 URL → 最小 TRMNL wrapper
需要更完整的上游边界时，先读 references/takumi-basics.md 与 references/api_reference.md。
设计定调
- 默认优先 白底黑字；灰阶只保留极少量辅助层，不靠多级透明度建立层级
- 每屏只保留 一个 绝对主焦点，其余信息降到次级 / 三级
- 层级主要靠 字号、字重、留白、位置，不要靠阴影、渐变、玻璃效果
- 构图优先 非对称、贴边、留白；避免所有元素均匀铺满画布
- 像素风素材必须整数缩放，并显式写
imageRendering: "pixelated" - 不要为 TRMNL 假想 hover、动画、弹簧动效或复杂交互态
- 可以吸收 Nothing references 里的 极简、排版驱动、工业感、数据即视觉、等宽标签、分段进度条、dot-grid 纹理；不要直接照搬它的 dark mode token、复杂灰阶和交互控件语言
具体规则、反例与审查清单，读 references/design-rules.md。
工作流
- 判断是否适合 image-first 路线
- 选择或新建 scene：优先从
assets/templates/复制 - 运行
scripts/render_scene.tsx生成图片 - 按
references/design-rules.md肉眼检查构图、黑白层级、留白、可读性 - 把图片上传到可访问 URL
- 运行
scripts/wrap_image_markup.py生成最小 wrapper（默认优先启用image-dither） - 用
trmnl-paper-blade/scripts/validate_markup.py校验结构 - 需要推送时，交给
trmnl-paper-screen
生成规则
- 画布默认
800x480 - 根节点始终显式写宽高
- Takumi v1 默认
display: inline；需要容器布局时显式写display: "flex"/tw="flex" - 布局优先
tw；精确像素控制优先style - 像素图放大时显式写
imageRendering: "pixelated" - 尽量用整数尺寸、整数间距
- 默认输出
webp - 只有在 scene 导出
googleFonts或显式传--google-font时，才远程加载 Google Fonts - wrapper 只负责放一张图片，不要在这里重建复杂 TRMNL 结构
- wrapper 默认优先启用
image-dither，因为远端 1-bit / e-paper 渲染经常会吃掉灰阶、细字和细线 - 只有在你已经确认原图是纯黑白硬边块面，且实机复查证明不加更好时，才改用
--no-dither
可用脚本
scripts/render_scene.tsx：渲染 scene 到本地图片scripts/wrap_image_markup.py：生成最小 TRMNL wrapper
建议阅读顺序
references/takumi-basics.md：Takumi 能力边界、字体、图片、Google Fontsreferences/design-rules.md：电子墨水屏设计定调、Nothing 风格取舍、审查清单references/render-workflow.md：从 scene 到 wrapper 的整条链路references/trmnl-wrapper.md：最小 TRMNL 包装规则references/examples.md：常用命令示例references/api_reference.md：Node API 速查