
免费
工坊大字
暖色链接预览卡,超大标题绕着你自己的工坊照片或手绘工具静物走。每行一张 PNG,全部由脚本生成。
安装
把“工坊大字”技能安装到 ~/.claude/skills/oversize-og。 下载下面每个文件,保存到这个文件夹: https://skilllift.pages.dev/packs/oversize-og/SKILL.zh.md → SKILL.md https://skilllift.pages.dev/packs/oversize-og/references/style.md → references/style.md https://skilllift.pages.dev/packs/oversize-og/assets/engine.html → assets/engine.html https://skilllift.pages.dev/packs/oversize-og/scripts/render.mjs → scripts/render.mjs https://skilllift.pages.dev/packs/oversize-og/scripts/check.mjs → scripts/check.mjs 然后读一遍 SKILL.md,告诉我它是做什么的,并提醒我开一个新会话。
解压到 ~/.claude/skills
同一个技能,不同的需求
左边是预览。右边由另一个 Agent 按不同需求制作,它只有安装好的技能,没看过预览。
这是按虚构需求做的一次测试。系统字体不同时,字形可能略有差异。
用脚本生成暖色、带手作纪实感的链接预览图,不用图像模型。超大标题绕着画面主体一级一级走开:主体可以是用户自己的工坊照片(代码调暖色,文字下方的局部压暗按实测对比度决定),也可以是代码画的工作台工具静物。输入一个名称加一个标题,或一份 CSV、JSON 列表,每行输出一张 1200x630 的 PNG,外加一张 1600x900 的副本。当有人要为手艺人、学校、工作室或小产品做 Open Graph 图、链接预览图、社交分享卡,并且想要超大字和手作感时使用;有人点名要这个风格时也用。
交付前必须通过
- 在最终文件夹上运行
node scripts/check.mjs退出码为 0,--approved指向确认过的文字。 - 我看过 600 宽的总览图,也至少看过一张原尺寸卡片。
- 文字确实绕着主体走,主体确实在
focus所说的位置。 - 所有文字都是用户确认过的,每张卡只用一种语言。
- 虚构、示例或测试内容都带有
notice。 - 没有使用真实品牌的样子或标志,照片是用户自己的。
- 推断的文字和假设都已在交付时列出。
阅读完整 SKILL.md
--- name: oversize-og description: 用脚本生成暖色、带手作纪实感的链接预览图,不用图像模型。超大标题绕着画面主体一级一级走开:主体可以是用户自己的工坊照片(代码调暖色,文字下方的局部压暗按实测对比度决定),也可以是代码画的工作台工具静物。输入一个名称加一个标题,或一份 CSV、JSON 列表,每行输出一张 1200x630 的 PNG,外加一张 1600x900 的副本。当有人要为手艺人、学校、工作室或小产品做 Open Graph 图、链接预览图、社交分享卡,并且想要超大字和手作感时使用;有人点名要这个风格时也用。 version: 1.0.0 --- # 工坊大字 样式都在 `assets/engine.html` 里。你只提供文字,有照片的话再加上照片。不要改引擎:引擎一旦被改动,`scripts/check.mjs` 就判卡片不合格。只有想看具体参数时才需要读 `references/style.md`。 ## 需要问的内容 需求里没给的,一次性在一条消息里问完。 | 字段 | 含义 | 上限 | 需求信息太少时 | |---|---|---|---| | `name` 必填 | 公司或产品名,小字放在角上,只用文字 | 32 个拉丁字符或 16 个汉字 | 照用户写的原样用。真实卡片绝不编名字 | | `title` 必填 | 标题,超大字。用 `|` 指定换行,每段就是一行。要显示竖线本身,写 `\|` | 64 个拉丁字符或 26 个汉字。汉字 6 到 14 个、英文 3 到 8 个词效果最好 | 用用户自己的句子,可以删短。实在没有就把 `name` 重复一遍当标题,并在交付时列为推断内容。用户没说过的话不要写 | | `notice` 选填 | 小标签,放在一块底板上,用来标明虚构、示例、草稿、测试 | 44 个拉丁字符或 22 个汉字,只有一行,语言要和标题一致 | 真实且已确认的卡片留空。公司是虚构的,必须写 `虚构示例`。标题还没确认,写 `草稿,尚未确认` | | `photo` 选填 | 用户自己的作品或工坊照片,铺满全卡。本地 .jpg、.png 或 .webp,宽度至少 1200 像素,不能是网址,路径相对于列表文件 | 每行一张 | 留空,就用手绘静物。不要去网上找照片,用户不能担保来源的照片也不要用 | | `focus` 选填 | 主体的位置。可写 `right`、`left`、`centre`、`auto`;有照片时可写 `x,y,rx,ry`,单位只有一种,都是相对照片本身的比例:`x`、`rx` 相对照片宽度,`y`、`ry` 相对照片高度。`x,y` 是椭圆的中心,`rx,ry` 是半径。椭圆要包住整个主体,包括椅脚、把手 | `rx`、`ry` 先从 0.3 或更小开始。椭圆对当前裁切来说太大时,渲染脚本会缩小它,并打印这张照片的上限,同样是相对照片的比例 | 打开照片看一眼,按主体位置给数字。没有照片就留空。`auto` 只是按细节猜测,出图后一定要看 | | `seed` 选填 | 决定静物、摆放和颗粒。种子和输入都相同,像素就完全相同 | 40 个字符 | 留空,会用文件名当种子。想换一种摆放时才改 | | `colors` 选填 | 2 到 4 个 `#RRGGBB`,顺序是:底色、字色、强调色、第二强调色。底色和字色要对比强烈。照片很亮时两者可能对调,文字会变深 | 2 到 4 个,不能更多 | 留空就用默认暖色,并在交付时列为假设。不要去猜某个品牌的颜色 | | `file` 选填 | 输出文件名。不安全的字符会被清理,重名会自动加编号 | 60 个字符 | 留空,由名称和标题生成 | 上限不计空格。 检查脚本的分行规则:任何 `|` 换行都允许,两行等长也没问题,中英文都一样。只有三行或更多自动分行、而且长度相同时才算不合格(文字像放在方框里),用一个自然的 `|` 换行就能解决。最后一行只有一个五个字母以内的单词,或者只有一个词、长度不到最长一行的三分之一,算落单。默认分行会换用小一档字号来避开。 主体边距:裁切位置会自动滑动,让焦点椭圆离卡片每条边至少 16 像素(按 1200 宽计)。照片本身没有余量时检查会失败,这时移动 `focus` 或换一张照片。 列表用带表头的 CSV,或由对象组成的 JSON 数组。引号、连续两个引号、引号内换行、字节顺序标记和空行都能处理。 ## 必须拒绝 - 不接受别人的标志,也不接受用任何标志替代文字名称。字段里出现 `logo`,引擎会直接报错。 - 如果用户点名要某家真实公司或品牌的样子,拒绝这一部分,改用本包自己的样式和用户自己的名称。任何名单都不可能列全,脚本查不出来,必须由你自己判断。把品牌特征描述得很细、其实在仿某个可辨认品牌的请求,以及冒充他人发布的卡片,同样拒绝。 - 示例文字里不要出现或模仿真实公司。用编造的名字,并加上 `notice`。 ## 步骤 1. 如果没有 `playwright`,先安装一次:`npm install playwright`,再 `npx playwright install chromium`。如果它装在别处,把 `NODE_PATH` 指向那个 `node_modules`。 2. 按上表写好列表文件。只用用户确认过的文字。 3. 先用小尺寸试一行,每次只渲染一张: `node scripts/render.mjs --in list.csv --out cards --row 1 --draft` 4. 看这张草图,调整 `title` 的换行、`focus` 或 `seed`,直到满意。 5. 全部渲染:`node scripts/render.mjs --in list.csv --out cards`。单张也可以:`--name "..." --title "..." --notice "..." --photo a.jpg --focus right --out cards`。某一行失败会报告出来,其他行照常渲染,退出码不为零。 6. 检查,并把确认过的文字作为依据: `node scripts/check.mjs cards --approved list.csv --sheet cards-600.png` 报告的问题全部修好,再跑一遍。虚构或示例卡片加上 `--require-notice`。检查脚本在本文件夹里运行,文件改了名也能查,因为每张 PNG 都带着自己的版面记录。PNG 压缩工具会删掉这份记录,所以要先检查、后压缩。 7. 打开 `cards-600.png`,里面是 600 宽下的所有卡片;再至少打开一张原尺寸的卡片。脚本判断不了审美。某一行读着别扭,就用 `|` 调整换行。 笔记本电脑上每行约 1 秒(包含两种尺寸),检查每张不到一秒。多人共用的机器上请加 `nice -n 10`。一次只跑一个渲染,并在前台等它结束。不要启动脱离终端的进程,不要运行全机范围的结束进程命令,也不要运行图像模型。 ## 缺信息时怎么办 - 需求太少:复述用户给的事实,什么都不编,并列出每一条由你推断的文字。用户没给的客户、数字、奖项、日期、价格一律不写。 - 没人能回答:按上表的规则继续做,并在交付时列出你的假设。 - 想要更长或更短:标题会自动逐级缩小字号。放不下时会报错,这时删短标题,或者把主体范围调小。 - 没有真实链接:这是图片,不需要链接。 - 单字落单或换行不好:用 `|`。不要修改 PNG,改过像素的卡片过不了检查。 ## 交付物 - 每行一张 1200x630 的 `名称.png` 和一张 1600x900 的 `名称-16x9.png`,外加记录文件、字号档位和分行结果的 `manifest.json`。 ## 交付前检查 - [ ] 在最终文件夹上运行 `node scripts/check.mjs` 退出码为 0,`--approved` 指向确认过的文字。 - [ ] 我看过 600 宽的总览图,也至少看过一张原尺寸卡片。 - [ ] 文字确实绕着主体走,主体确实在 `focus` 所说的位置。 - [ ] 所有文字都是用户确认过的,每张卡只用一种语言。 - [ ] 虚构、示例或测试内容都带有 `notice`。 - [ ] 没有使用真实品牌的样子或标志,照片是用户自己的。 - [ ] 推断的文字和假设都已在交付时列出。 ## 不适用的情况 - 用户想要安静、偏商务的卡片,或者一长句话必须用小字。 - 照片没有清晰的主体,或者满画面都很杂,没有放字的地方。 - 用户想在卡片上放标志,或者要真实品牌的样子。 ## 运行要求 Node.js 22 或更高版本,以及带 Chromium 的 Playwright。检查脚本只需要 Node。全程不联网,渲染时会拦截所有网络请求。字体用系统字体栈,备选字体见 `references/style.md`。如果机器上没有中文衬线字体,渲染会停下来并告诉你该装什么。



