免费

工坊大字

暖色链接预览卡,超大标题绕着你自己的工坊照片或手绘工具静物走。每行一张 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 按不同需求制作,它只有安装好的技能,没看过预览。

预览
预览
新需求,由另一个 Agent 制作
新需求,由另一个 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`。如果机器上没有中文衬线字体,渲染会停下来并告诉你该装什么。

用在这些流程里

相似技能