工程线稿社交图片

一份产品资料，生成八张工程图纸风格图片。

图片社交图片工程美学八种尺寸

可下载试用

已提供完整测试包，可替换自己的品牌、内容和行动链接。正式质量验收仍在进行。

和工程线稿网页、发布片及路演稿共用 content.json 的图片套件。米白图纸、钴蓝线条、图纸编号、尺寸标注和审批章，延续到链接预览、横屏与方形动态、竖屏封面、GitHub 及三张 Product Hunt 展示图。可以加入带替代文本和裁切焦点的真实截图，也可以只用资料绘图。本地构建会测量每个文本框，导出八张 PNG 和一页总览。

预览形式: PNG · HTML
配色: #f1eee5#2a44c9#1e1e1e

使用指南

请解压我提供的 blueprint-social.zip，读取 blueprint-social/SKILL.md。将完整文件夹安装到当前 Agent 的项目级 Skill 目录，保留脚本、参考说明、示例、字体及许可。使用我的工程线稿网页、发布片与路演稿共用的 content.json，在 social.screens 中添加本地截图、替代文本与裁切焦点，然后运行 node scripts/build.mjs <input.json> <outdir>。需要 Node.js 22+ 和已安装的 Chrome 或 Chromium，无需 npm 依赖或网络素材。交付八张 PNG 与 contact.html，修复文字溢出并列出所有占位内容。此包为测试版。

动效细节

八张 PNG、可编辑 HTML 和图片总览
真实截图、替代文本与焦点裁切
文字测量、安全区与本地离线导出

适合用来做

在动态和链接预览中保持统一的产品发布
配合工程线稿网页、发布片与路演稿

创作提示示例

下载并解压 Skill 后，让 Agent 读取 SKILL.md，再提供你的产品资料。下面的提示可用作开始。

使用 blueprint-social Skill，用我已有的工程线稿 content.json生成全部八张社交图片。保留已确认文案和真实数字，为我的截图设置替代文本与裁切焦点。测量每个文本框，导出 PNG 和 contact.html，列出占位内容，并检查 OG 图片在 600 像素宽时是否清楚。