From dowsure-social-card
把 Dowsure(豆沙包) 的文章 / 飞书文档做成「DowInsights 风格」小红书图文卡片组(3:4),并精准导出成可编辑的 Figma 画板。两套视觉系统:Editorial 杂志(M01–M16,16 配方) × Swiss 数据(S01–S12,12 配方),Dowsure 品牌玫红
How this skill is triggered — by the user, by Claude, or both
Slash command
/dowsure-social-card:dowsure-social-cardThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
把一篇 Dowsure 对外稿件(飞书文档 / 文章 / DowInsights 洞察)转成**小红书图文卡片组(3:4)**,再**精准导出成可编辑的 Figma 画板**。
LICENSENOTICEREADME.mdagents/openai.yamlassets/dowsure-logo.svgassets/example/example-deck.htmlassets/example/example-layout.jsonassets/magazine-bg-webgl.jsassets/screenshot-backgrounds/style-a/dune.webpassets/screenshot-backgrounds/style-a/forest-ink.webpassets/screenshot-backgrounds/style-a/indigo-porcelain.webpassets/screenshot-backgrounds/style-a/kraft-paper.webpassets/screenshot-backgrounds/style-a/monocle-classic.webpassets/screenshot-backgrounds/style-b/ikb-dot-gradient.webpassets/screenshot-backgrounds/style-b/lemon-green-dot-shadow.webpassets/screenshot-backgrounds/style-b/lemon-grid.webpassets/screenshot-backgrounds/style-b/safety-orange-halftone.webpassets/scripts/check-orphans.cjsassets/scripts/figma-export.cjsassets/scripts/gen-figma-text.cjs把一篇 Dowsure 对外稿件(飞书文档 / 文章 / DowInsights 洞察)转成小红书图文卡片组(3:4),再精准导出成可编辑的 Figma 画板。
这是 guizang-social-card-skill(AGPL-3.0)的全量 fork:guizang 的整套排版大脑——两套视觉系统、28 个基础配方、组件/字号体系、11 类小红书品类路由、截图处理、图上叠字、肖像填充、地图组件、标题压缩、WeChat 封面对、QA 验证器——都已 fork 进来,原样保留。在此之上叠加 Dowsure 品牌皮肤(玫红锁定、白底干净背景、每卡 logo、TJ 排版偏好、深色撞色变体、Figma 精准导出管线、飞书取稿工作流)。
铁律:100% 克隆 guizang,绝不删 guizang 内容;Dowsure 全靠叠加。 guizang 原模板 / 原 10 主题 / 15 references / 11 品类都保留作存档与下钻库,需要时直接查;也绝不改上游 guizang skill 本体。
用:Dowsure / 豆沙包 对外图文、DowInsights 行业洞察、FastPay / 跨商贷等产品科普、把飞书稿转 Dowsure 小红书卡 + Figma。
不用:纯文案写作(用 dowsure-write-xhs / dowsure-writer);横版 PPT(用 guizang-ppt-skill);非 Dowsure 品牌的通用卡片 / 裸"生成小红书卡片"(用 guizang-social-card-skill)。
一组卡只用一套系统,不混搭(除非 TJ 明确要 hybrid)。底层配方来自 guizang references/layout-recipes.md,已品牌化。
| 系统 | 气质 | 选它当… | 配方 |
|---|---|---|---|
| Editorial 杂志 × 水墨 | 叙事 / 洞察 / 慢、手作、有呼吸 | 行业洞察、商业评论、来历随笔、引语换气、DowInsights 常规图文 | M01–M16(16 种) + Dowsure 精选 R1–R10 |
| Swiss International | 数据 / 产品 / 方法论、工程化、决断 | FastPay / 跨商贷数据卡、KPI、对比矩阵、流程、参数榜单、强秩序信息 | S01–S12(12 种) |
references/card-recipes.md(速查)与 references/layout-recipes.md(全量 + 每条最小密度)。| 主题 | 切换 | 系统 | 明暗 | 用途 |
|---|---|---|---|---|
dowsure | <html data-theme="dowsure"> | Editorial | 亮(白底) | 默认主力,常规图文 |
dowsure-dark | <html data-theme="dowsure-dark"> | Editorial | 暗(黑底) | 封面 key art、强冲击 hero、暗调配图 |
dowsure-swiss | <html data-accent="dowsure"> | Swiss | 亮(白底) | 数据 / 对比 / 流程 / 榜单 |
dowsure-swiss-dark | <html data-accent="dowsure-dark"> | Swiss | 暗(黑底) | 黑×玫红撞色封面、数据 hero |
#F40064 是唯一高饱和锚色,4 主题共用。黑×粉撞色是封面设计方向(落在两个 dark 主题上),需要时并行出 3–4 变体让 TJ 挑。references/theme-presets.md。assets/template-dowsure-editorial.html 成项目 index.html(品牌玫红 / 白底 / logo / 页脚 / dowsure 主题都已接好)。assets/template-dowsure-swiss.html。assets/template-editorial-card.html / template-swiss-card.html 保留作 100% 克隆存档与参考,不删不改。全量 fork,下面这些原样可用,遇到对应场景直接读对应 reference:
category-cookbook.md(含能力圈,超纲品类要先如实告知 TJ)。screenshot-treatment.md。image-overlay.md。portrait-fill.md。map-component.md。title-shortener.md + layout-recipes.md 的 WeChat 段。production-workflow.md。Dowsure 升级(先看这 3 个):
references/brand-system.md — 核心铁律总纲。品牌 token、干净背景系统(无细胞纹)、排版规则、TJ 排版偏好(标题 y178、120px 标语、每卡 logo、金句 3px 竖条、硬指标优先、千位符、禁孤行)、Dowsure 业务事实。references/card-recipes.md — Dowsure 10 种成品配方(R1–R10)速查。references/figma-pipeline.md — HTML → Figma 完整管线(figma-export → gen-figma-text → 建帧 → 传底图 → 注入文字 → 贴 logo),含所有踩坑点,覆盖两套模板。guizang fork(15 个,按需下钻):
platform-specs.md(比例 / 出图尺寸 / 命名,默认 3:4)· style-system.md(Editorial / Swiss 视觉规则)· theme-presets.md(主题 token)· layout-recipes.md(M01–M16 + S01–S12 + R1–R10 全量配方)· components.md(字号体系 / 中文标题分级 / 最小可读 / Swiss card-fill 互斥)· background-systems.md(背景层)· content-planning.md(封面钩子 / 拆页 / 文案压缩)· production-workflow.md(渲染 / 配图)· portrait-fill.md · image-overlay.md · screenshot-treatment.md · map-component.md · title-shortener.md · category-cookbook.md · qa-checklist.md(交付前检查)。*.feishu.cn 或 doubao.com 的 /wiki/、/docx/)→ 用 lark-doc skill:lark-cli docs +fetch --api-version v2 --doc "<url>" --doc-format markdown。~/Desktop 常被 TCC 锁死("Operation not permitted")。让 TJ 把图拖进项目目录(Documents 下)再处理。card-recipes.md(Editorial 优先 R1–R10)/ layout-recipes.md 选每页配方,交错节奏(封面 / 数据 / 边注 / 引语 / 账本 / 对比 / 收尾),别张张「标题+卡片」。🔴 CHECKPOINT · 🛑 STOP:把页面计划(用哪套系统 + 共 N 张 + 每张「配方 + 一句话主旨」)发给 TJ,等确认或调整后再搭 HTML。别跳过——白烤十几张卡再返工最贵。
assets/template-dowsure-editorial.html;Swiss → 复制 assets/template-dowsure-swiss.html,成项目里的 index.html。模板已接好品牌 CSS(玫红 / 干净背景 / logo / 页脚 / 默认 dowsure 主题)。<!-- POSTERS_HERE --> 后的占位卡,替换成每页一个 <section class="poster ...">,骨架取自选定配方。别用错系统的 class(Editorial = serif + ledger/marginalia;Swiss = Inter + card-fill/matrix)。<html> 切 data-theme="dowsure-dark";Swiss 切 data-accent="dowsure-dark"。brand-system.md 的 token / 背景 / 排版规则 + 7 条 TJ 偏好(标题 y178、引语 120px、每卡 logo、金句 42px+3px 竖条、硬指标优先、页码全卡、千位符)。assets/scripts/render.cjs 拷进项目,改 TARGETS 为本次卡片 id,node render.cjs 出图到 output/。node validate-social-deck.mjs <dir> 自查(0 FAIL;它查溢出 / 页脚碰撞 / Swiss 粗体 / 最小字号 / 4 横带密度 / .h-xl 行数 / figure 默认边距)。逐张目检:背景干净、玫红到位、无溢出、吃满画布。照 references/figma-pipeline.md 全流程:figma-export.cjs(抽几何 + 渲染干净底图,文章图烤入、logo 隐藏、竖条 border-left:0)→ gen-figma-text.cjs(生成分块构建代码 <50k)→ 先加载 figma:figma-use → create_new_file 不用!进固定文件 → 建命名帧 → upload_assets 传底图 → 分块 use_figma 注入文字(NONE→resize→HEIGHT、字体映射)→ createNodeFromSvg 贴 logo。脚本风格无关,两套模板通用;Editorial 已用 FDE 13 卡验证,首组 Swiss 重点抽检文字定位。
摘自
references/figma-pipeline.md的实战踩坑,常见故障先按这张表救。
| 触发条件 | 一线修复 | 仍失败兜底 |
|---|---|---|
use_figma 报错 | 原子失败=整段没执行、无副作用;读错误 → 只改出错那处 → 重试 | 别盲目重跑;把出错 chunk 拆更小(每块 <50k 字符)再注入 |
| 文字注入后换行 / 位置乱 | 走 textAutoResize 流程:NONE → resize(w,h) → HEIGHT;字体按映射表 loadFontAsync 全预加载 | Noto Serif SC 在 Figma 无斜体 → 斜体一律映射 Medium 正体 |
| 底图残留旧元素(圆点 / 旧分隔线 / 竖条) | 改过 HTML 必须重跑 figma-export.cjs 再重传该底图(重传=替换,非叠加) | 整帧删重建:先 findAllWithCriteria 收进数组、循环结束再 remove,别边遍历边删 |
upload_assets 底图没贴上 | submitUrl 10 分钟过期 → 拿到尽快 curl -F "file=@bg/<id>.png" "<submitUrl>",带 nodeId 自动设填充 | 链接过期就重跑 upload_assets 拿新 submitUrl |
取本地图报 Operation not permitted | macOS TCC 锁了 ~/Desktop → 让 TJ 把图拖进项目目录(Documents 下)再处理 | 改用原生数据视觉,不强求嵌图 |
| 渲染 0 FAIL 但目检溢出 / 没吃满画布 | 回 brand-system.md 调 y 位 / 字号;3:4 必须吃满 ≥75% | 砍该卡信息量,或拆成两张 |
#F40064(玫红)。墨色中性近黑 #15171c,纸面纯白 #ffffff(TJ 要白底,别用灰);hero 柔光在右上角。大标题(h-display / h-xl / pullquote)全部用玫红。 Swiss 唯一高饱和锚色也是玫红。$1,000 万)。软指标(测算 / 估算)能砍就砍,只留硬事实。
7b. 中文标点全角:引号一律全角弯引号 “…” / ‘…’,绝不用英文直引号 " / ';省略号 ……、破折号 ——。只有 HTML 属性(class="…"/alt="…")与代码保留直引号。改完文案后 Figma 文字节点也要同步换弯引号(节点内交替配对)。详见 brand-system.md 第 5 节。font-size+font-weight("the larger the lighter" 是铁律)。assets/scripts/check-orphans.cjs 复检至清零;Figma 文字节点也要同步改 characters。6XD1W72t7OegPTiyEClwGT("DowInsights · FDE · 小红书卡片组"),不要每次 create_new_file;新一组卡在该文件里新建一个 page 再建帧。#F40064。Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
npx claudepluginhub suntuanjiehhh/dowsure-social-card --plugin dowsure-social-card