# 社交卡片智能体技能

> 从各种内容来源生成视觉效果惊艳的社交卡片，适用于小红书轮播和微信封面配对。利用编辑或瑞士设计体系，为您的文章和帖子创建引人入胜的视觉内容。

- Canonical: https://nanoskill.ai/zh/skills/social-card-generation
- Markdown: https://nanoskill.ai/zh/skills/social-card-generation.md
- Author: op7418
- Published: 2026-06-01T07:18:11.391Z
- Updated: 2026-07-21T18:32:43.637Z
- Language: zh-CN
- Source type: github
- Popularity signal: 2219

## Sources

- https://github.com/op7418/guizang-social-card-skill

## Install

```shell
npx skills add https://github.com/op7418/guizang-social-card-skill/blob/main/README.en.md
```

## About

归藏社交卡片技能是一项高级智能体能力，旨在简化小红书和微信等平台的社交卡片生成。它使用户能够将各种内容（从文章、产品笔记到截图和照片）转化为精美、平台优化的视觉作品。通过提供独特的编辑和瑞士国际设计体系，该技能确保无论您的目标是叙事故事还是数据驱动的解释，您的社交卡片都将既引人入胜又美学一致，随时吸引观众的注意力。

该技能因其结构化的工作流而脱颖而出，提供了28种布局骨架和10种主题预设，用于指导内容呈现。它自动化从流行平台获取图片，并包含一个基于Playwright的健壮验证器，通过检测常见布局问题来保持视觉质量。输出以单文件HTML形式交付，直接渲染为PNG，使其与Claude Code和Codex等编码智能体环境高度兼容。

用户可以利用归藏社交卡片技能应对多种场景，例如从长篇文章创建多卡片的小红书轮播，设计视觉和谐的微信21:9封面图和1:1分享卡配对，或者从截图生成清晰的教程视觉内容。其设计原则优先考虑克制、结构化和以用户为中心的图像处理，确保专业且有影响力的社交媒体内容，无需广泛的设计专业知识。

## Key features

- **双重视觉系统**: 在编辑风格（适合故事叙述，如《Monocle》、《Kinfolk》）和瑞士国际风格（适合数据和结构，网格优先，锐利细线）之间进行选择，以匹配内容的基调。
- **多种画布尺寸**: 支持小红书 3:4（1080x1440）、微信 21:9（2100x900）和微信 1:1（1080x1080），实现多样化的社交媒体展示。
- **丰富的布局框架**: 可使用 28 个预设计的布局框架（16 个编辑风格，12 个瑞士风格），包括以图片为主的封面、KPI 塔和水平条形图，快速构建内容结构。
- **自动图像采集**: 自动从 Unsplash、Pexels、Flickr CC、Wallhaven 或直接搜索获取图像，并下载到本地，同时自动生成 SOURCES.md 文件。
- **布局验证器**: 包含基于 Playwright 的验证器，可检测溢出、类型上限违规、密度间隙和页脚碰撞，确保高质量社交卡片生成。

## Use cases

- **创建小红书轮播图**: 将长篇文章、产品评测或旅行指南转化为引人入胜的多卡片轮播图，适用于小红书，可使用编辑风格或瑞士风格设计。
- **设计微信封面图对**: 从任何内容源生成视觉一致的 21:9 主图和 1:1 分享卡片，用于微信朋友圈和视频号。
- **制作教程视觉内容**: 将截图教程、游戏攻略或工具使用指南转换为结构化的社交卡片，包含美化后的截图和清晰的布局。
- **总结数据和评测**: 使用瑞士风格的布局，结合图表和矩阵，呈现产品评测、数据回顾或年度总结内容，实现清晰传达。

## Result preview

探索由该技能驱动的专业社交媒体轮播。

![A minimalist horizontal bar chart titled 'Top Use Cases by Enterprise Adoption.' The chart presents six enterprise applications of AI agents ranked by adoption rate. Each category is displayed with a blue progress bar against a light gray background track, with percentage values aligned on the right side. The highest adoption category is Intelligent Customer Support at 82%, followed by Automated Data Processing at 74%, Code Development and Review at 68%, Marketing Content Generation at 61%, Supply Chain Planning at 47%, and Legal Document Review at 39%. The bars use varying shades of blue to visually distinguish the categories while maintaining a cohesive design. The layout emphasizes comparative adoption levels across business functions, highlighting customer support and data processing as the most widely adopted AI agent use cases in enterprise environments. The overall design features clean typography, ample whitespace, and a professional business-report aesthetic suitable for executive presentations, technology trend reports, and AI adoption studies.](https://file.nanoskill.ai/social-card-outcome1.png)

![A clean, executive-style industry transformation overview slide titled 'Industries Being Transformed.' The layout presents four major sectors where AI agents are driving measurable business impact, arranged in a structured table-like format with horizontal dividers between rows. Each industry category appears in bold black text on the left, followed by representative AI agent applications in the center, and a highlighted blue percentage growth figure on the far right. The industries featured include Healthcare, Financial Services, Manufacturing, and Retail & eCommerce. Healthcare highlights clinical decision support, patient triage, and radiology reading assistance, showing a 32% impact metric. Financial Services focuses on fraud detection, automated reporting, and compliance monitoring, with the highest displayed value of 41%. Manufacturing showcases predictive maintenance, supply chain optimization, and quality control, associated with a 28% increase. Retail and eCommerce emphasizes personalized shopping experiences, dynamic pricing, and inventory automation, showing a 36% impact figure. The design uses a minimalist business-report aesthetic with a light gray background, bold typography, generous whitespace, subtle divider lines, and bright blue percentage indicators that draw attention to performance improvements. The slide communicates how AI agents are transforming operational workflows across multiple industries and is suitable for executive presentations, consulting reports, digital transformation strategies, and enterprise AI adoption studies.](https://file.nanoskill.ai/social-card-outcome2.png)

![A professional executive presentation slide titled 'What to Watch For,' highlighting three critical risks and implementation challenges organizations should consider when deploying AI agents at scale. The slide uses a minimalist consulting-style layout with a light gray background and three horizontally stacked warning cards featuring orange accent borders and caution icons. The first section, 'Security & Privacy,' warns that AI agents with system-level access create new attack surfaces and increase cybersecurity exposure. It notes that 72% of enterprises identify data governance as a primary concern and recommends least-privilege access controls, audit trails, and strong security frameworks from the start. The second section, 'Integration Complexity,' explains that legacy systems remain the largest deployment obstacle. It emphasizes that modern enterprises operate hundreds of interconnected applications, requiring robust APIs, workflow orchestration, fallback mechanisms, and resilient system integration to prevent fragile automation failures. The third section, 'Trust & Oversight,' addresses the risks of black-box decision making. It highlights the need for human-in-the-loop review processes, explainability layers, transparent governance, accountability structures, and escalation procedures to ensure responsible AI deployment and maintain user confidence. The visual design follows a modern enterprise-report aesthetic with bold section headings, soft neutral panels, orange warning indicators, generous whitespace, and clear information hierarchy. The slide communicates strategic risk management considerations for AI agent adoption and is suitable for board presentations, technology strategy reports, digital transformation roadmaps, enterprise AI governance discussions, and executive briefings.](https://file.nanoskill.ai/sociai-card-outcome3.png)

![A premium executive presentation closing slide titled 'The Agent Era Starts Now,' designed in a modern consulting-report style with a bold deep-blue background, minimalist typography, and strong visual hierarchy. At the top-left, a small section label reading 'WHAT COMES NEXT' introduces the concluding chapter, accompanied by a subtle orange accent line that serves as a visual anchor and brand motif. The center-left features a large, bold headline stating 'The Agent Era Starts Now,' emphasizing urgency, transformation, and the beginning of a new technological era driven by autonomous AI agents. Beneath the headline, a concise strategic statement explains that organizations that move first—guided by clear strategy, governance, responsible oversight, and human-centered design—will shape how work is performed over the coming decade. The message frames AI agents not merely as tools, but as a foundational shift in business operations, productivity, and organizational structure. The slide functions as a call-to-action and executive conclusion, encouraging decision-makers to prepare for widespread AI agent adoption. It communicates themes of innovation leadership, competitive advantage, digital transformation, future-of-work strategy, and responsible AI implementation. The visual design uses extensive whitespace, high-contrast white typography, subtle gray supporting text, and a restrained orange accent to create a polished, enterprise-grade aesthetic. The overall appearance resembles a strategy consulting presentation, boardroom briefing, technology foresight report, or executive keynote deck focused on the future impact of AI agents and autonomous systems.](https://file.nanoskill.ai/social-card-outcome4.png)

## Result walkthrough

### 安装

将社交卡片生成技能添加到您的AI智能体中。

![A screenshot showing the installation and verification process of the 'guizang-social-card-skill' for an AI agent environment. At the top, a dark blue command banner displays an NPX installation command pointing to a GitHub repository containing the skill. Below, a gray chat-style response panel explains that the installation initially paused because the command requested interactive agent selection. The system reruns the installation using a '-y' flag to bypass prompts and successfully installs the skill for the Hermes Agent environment. The response confirms that the skill has been installed and symbolically linked under the Hermes skills directory. A summary section explains that the skill generates Guizang-style social media card image sets for multiple platforms, including Xiaohongshu or RedNote carousel posts, WeChat Official Account cover image pairs, social cards, article covers, and platform thumbnails. Additional details mention built-in layout recipes, design systems, platform specifications, theme presets, and HTML templates such as Editorial Magazine and Swiss International styles. The interface uses a clean conversational layout with highlighted code snippets, numbered installation steps, bullet-point feature lists, and clear confirmation messages describing the skill's capabilities and readiness for use.](https://file.nanoskill.ai/social-card-install.png)

### 描述内容

提供您希望转化为社交媒体卡片的内容、主题或关键信息。

![A screenshot of an AI-powered social media content design workflow. The upper section contains a large dark blue prompt panel describing a role as an award-winning Social Media Content Designer and Visual Storytelling Director. The prompt requests the creation of a premium social media card series titled 'The Future of AI Agents,' focused on how AI agents will transform productivity, business operations, and everyday work. Detailed requirements specify a carousel-style content format with cover cards, key insights, examples, data highlights, and actionable takeaways. The instructions emphasize clean and modern visual design, strong information hierarchy, platform optimization for Xiaohongshu, LinkedIn, X, and WeChat, concise copywriting, and highly shareable layouts. Additional directives include critiquing the initial content structure, improving readability and engagement, refining storytelling flow, and producing a publication-ready social card series. The final deliverable is described as a visually striking PDF with editorial-style layouts, colorful content sections, infographics, and swipe-friendly designs. Beneath the prompt, a gray response panel shows the AI beginning its workflow by loading the social card skill, reviewing its capabilities, loading reference materials, and accessing template and production workflow resources before generating the final content package. The interface uses a chat-style layout with rounded panels, white text on a dark blue background, and structured formatting to present a professional content design brief.](https://file.nanoskill.ai/social-card-task.png)

### 生成社交卡片

创建视觉吸引力强、平台优化的卡片设计，具有清晰的信息层级、强大的叙事流程和适合发布的布局。

![A professional report cover page titled 'The Future of AI Agents.' The design features a deep royal blue background with a clean, minimalist editorial style. At the top left, small uppercase text reads 'SPECIAL REPORT • 2026,' accompanied by a short orange accent line that serves as a visual divider. The main headline, 'The Future of AI Agents,' appears in large bold white typography positioned on the left side of the page, creating strong visual hierarchy and emphasis. Below the title, a descriptive subtitle explains the report’s focus: how autonomous AI agents will transform productivity, reshape business operations, and redefine the way people work every day. The layout uses generous whitespace, modern sans-serif typography, and a limited color palette of blue, white, and orange, giving the cover a sophisticated corporate-report aesthetic. The overall design communicates themes of technology, innovation, business transformation, automation, and the future of work.](https://file.nanoskill.ai/social-card-outcome.png)

## Skill definition

一个适用于 Claude Code、Codex 及类似编程智能体环境的智能体技能。它可以从文章、文案、屏幕截图、产品笔记、字幕或照片中生成 **小红书/Rednote 轮播图** 和 **微信 21:9 + 1:1 封面对**。

两种视觉体系共享一个工作流：

- **编辑风格**。受 *Monocle* / *Kinfolk* / *Cereal* 启发的克制排版。最适合讲故事、生活方式、旅行、阅读、电影和个人观察。
- **瑞士国际风格**。网格优先，单一锚定色，锐利细线，极致字体对比。最适合产品评测、数据、框架、教程和 AI 工具。

> [guizang-ppt-skill](https://github.com/op7418/guizang-ppt-skill) 的姊妹项目。共享视觉语言，独立维护。PPT 解决“横向滑动演讲”；本项目解决“静态信息流图片”。

![Guizang Social Card Skill 预览](https://file.nanoskill.ai/d370abcc-1fc4-4de1-903a-09020a6556ce.png)

## 30 秒快速开始

```bash
npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill
```

或将其粘贴到具有 shell 访问权限的 AI 智能体：

```text
为我安装 guizang-social-card-skill。将 https://github.com/op7418/guizang-social-card-skill 克隆到 ~/.claude/skills/guizang-social-card-skill，然后验证 SKILL.md、assets/ 和 references/ 是否存在。
```

如果你已经安装，请使用以下命令更新：

```text
为我更新 guizang-social-card-skill。进入 ~/.claude/skills/guizang-social-card-skill，运行 git pull，然后告诉我最新的提交信息。
```

然后向你的智能体提问：

```text
用这篇文章为我制作一个瑞士风格的小红书轮播图，5 张卡片，IKB 蓝色。
```

其他有用的提示：

```text
用这篇产品评测为我制作一个 3:4 的小红书套图，使用编辑风格的标题。
将这篇文章转换为微信封面对：21:9 主图 + 1:1 分享卡，视觉统一。
我有 3 张露营照片——为我制作一个以图片为主导的小红书轮播图。
将这份游戏攻略文案转换为小红书套图；从 Wallhaven 获取一些游戏美术素材。
```

## 你将获得

- 🖋 **两种视觉体系**：编辑风格营造氛围和叙事，瑞士风格强调事实和结构，共享一个工作流
- 📐 **3 种画布尺寸**：`.poster.xhs` 1080×1440（小红书 3:4）、`.poster.wide` 2100×900（微信 21:9）、`.poster.square` 1080×1080（微信 1:1）
- 🧩 **28 种布局骨架**：16 种编辑风格（`M01-M16`，包括图片主导封面、管道、前后对比）+ 12 种瑞士风格（`S01-S12`，包括 KPI 塔、水平条形图、矩阵加主图）
- 🎨 **10 种主题预设**：6 种编辑风格（墨色经典、靛蓝瓷器、森林墨色、牛皮纸、沙丘、**午夜墨色**暗色）+ 4 种瑞士锚定色（IKB 克莱因蓝、柠檬黄、柠檬绿、安全橙）
- 🖼 **图片来源工作流**：首先使用用户图片；否则按以下顺序获取：Unsplash → Pexels → Flickr CC → Wallhaven → 直接搜索，下载到本地并自动生成 `SOURCES.md`
- 🌫 **WebGL 墨流背景**：编辑风格的主页可以附带实时墨流动画；可以在低功耗设备或截图模式下禁用
- 🪧 **图片叠加与人脸安全**：全幅图片必须带有蒙版；文字放置区域必须避开主体。硬性规则参见 `references/image-overlay.md`
- 🧰 **截图美化素材**：9 种真实纹理 WebP 背景（5 种编辑风格 / 4 种瑞士风格），搭配 `.frame-shot` / `.device-browser` / `.device-phone` 工具
- 🗺 **地图组件**：MapLibre + OSM 实时瓦片，支持多点标记 + 连接线，专为旅行指南设计
- ✅ **验证器**：`validate-social-deck.mjs` 自动检测溢出、字体上限违规、4 频段密度空缺和页脚冲突
- 📄 **单文件 HTML + Playwright 渲染**：无需前端构建流水线；直接运行 `node render.mjs` 输出 PNG

## 适用 / 不适用

**✅ 适用**：小红书轮播图 / 微信封面对 / 朋友圈封面 / 视频号封面 / 文章配图 / 教程页面 / 数据回顾 / 旅行指南 / 产品评测 / 截图解说

**❌ 不适用**：横向滑动文稿（使用 [guizang-ppt-skill](https://github.com/op7418/guizang-ppt-skill)） / 长视频生成 / 纯照片修图 / 无排版的纯文本编辑

## 11 种小红书内容分类

按“能力圈”分级——参见 [`references/category-cookbook.md`](./references/category-cookbook.md)：

**端到端强项**（文案 / 结构 / 图片均在范围内）：

- 旅行、职业、推荐（需指定子类别）

**文案与结构强，图片依赖用户或来源素材：**

- 游戏、电影、美食（食谱导向）、美妆（教程导向）、健身、家居、时尚（精选穿搭）

**明确超出范围**（不会强行适配）：

- OOTD 实拍 / 梦幻核 / 胶片模拟调色 / 真实皮肤测试美妆——任何严重依赖摄影或后期处理的题材

## 常见场景

| 任务 | 推荐流程 |
|------|----------|
| 长文章 → 小红书轮播图 | 提取核心要点；编辑风格用于叙事节奏，瑞士风格用于数据分解 |
| 产品评测 / 工具总结 | 瑞士风格 + IKB 蓝色，优先使用 `S09 KPI 塔` / `S10 水平条形图` |
| 旅行 / 生活方式 | 编辑风格 + 午夜墨色或沙丘，`M16 图片主导封面` 用于全幅主图 |
| 微信封面对 | 将同一内容渲染两次：`.poster.wide` 21:9 + `.poster.square` 1:1，视觉统一 |
| 截图教程 / 工具演示 | `.frame-shot` + `.device-browser`，优先使用瑞士网格基座 |
| 游戏攻略 / 电影回顾 | 编辑风格 + 午夜墨色，从 Wallhaven 获取游戏美术用于全幅主图 |
| 数据回顾 / 年度总结 | 瑞士风格 + 柠檬黄或安全橙，矩阵 + 账本组合 |

## 为什么选择单文件 HTML 转 PNG

- **智能体友好**：HTML + CSS 是文本——智能体可以直接编写、阅读、编辑和验证
- **布局精确**：CSS Grid + 严格的字体 / 边距 / 网格规则远超 Markdown 的布局能力
- **开放图片来源**：接入 Unsplash / Pexels / Wallhaven / Mapbox / OSM / 任何网络资源
- **可验证质量**：`validate-social-deck.mjs` 运行 Playwright DOM 测量，而非猜测
- **简单交付**：直接输出 `output/*.png`——无需部署，无需导出工具

## 平台支持

| 平台 | 状态 | 说明 |
|----------|--------|-------|
| Claude Code | 支持 | 原生 Skill 工作流，理想用于生成和迭代卡片 |
| Codex | 支持 | 适合长文卡片生成、图片来源和视觉质量检查 |
| Cursor / 其他本地智能体 | 可用 | 需要文件系统读写 + shell 执行能力 |
| 纯聊天机器人 | 不推荐 | 没有文件系统和渲染流水线，无法可靠交付图片 |

## 安装

### 方式一：一行安装（推荐）

```bash
npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill
```

### 方式二：将此内容粘贴到 AI 智能体

> 为我安装 `guizang-social-card-skill` Claude Code 技能。步骤：
>
> 1. 确保 `~/.claude/skills/` 存在（如果不存在则创建）
> 2. 运行 `git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill`
> 3. 验证：`ls ~/.claude/skills/guizang-social-card-skill/` 应显示 `SKILL.md`、`assets/`、`references/`
> 4. 完成后告诉我。之后，诸如“给我做一个小红书轮播图”之类的话将触发此技能。

将上方代码块粘贴到 Claude Code / Cursor / 任何具有 shell 访问权限的 AI 智能体中。

### 方式三：手动 CLI

```bash
git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill
```

### 如何触发

安装后，Claude Code 会自动检测到此技能。触发短语：

- “给我做一个小红书 / Rednote 轮播图”
- “给我做小红书卡片”
- “做一个微信 21:9 主图 + 1:1 分享卡”
- “生成社交卡片 / 杂志风格社交卡片”
- “把这篇文章做成教程轮播图”
- “做一个瑞士风格的小红书评测 / IKB 风格卡片”

## 工作流

此技能是一个结构化的工作流。智能体将执行 7 个步骤：

1. **接收** — 捕获 4 项内容：目标平台 / 风格 / 源内容 / 用户图片。当没有图片时，一次性提供 A/B/C 选项（自己拍摄 / AI 生成 / 在线来源）；不再重复提议
2. **风格与主题** — 选择编辑风格或瑞士风格，然后从 10 种主题预设中挑选。不允许自定义十六进制颜色值
3. **布局选择** — 从 28 种布局骨架中选择 / 粘贴 / 调整文案。16 种编辑风格 / 12 种瑞士风格
4. **素材准备** — 获取图片（Unsplash / Pexels / Flickr CC / Wallhaven / 直接搜索），下载到本地并写入 `SOURCES.md`；询问是否注明来源
5. **合成与渲染** — 复制种子模板 → 替换 `<!-- POSTERS_HERE -->` → `node render.mjs`
6. **交付与审查** — 首先展示 PNG，询问“你自己查看一下，还是需要我运行验证器？”——不会自动验证
7. **迭代** — 应用用户反馈，微调内联样式或更换布局 / 图片，重新渲染

完整规范见 [`SKILL.md`](./SKILL.md)。详细信息参见对应的 `references/*.md`。

## 验证器

```bash
node validate-social-deck.mjs path/to/task-dir
```

基于 Playwright 真实渲染测量的 6 条规则，而非静态扫描：

- **R1** 溢出 — 任何超出 `.poster` 的部分立即失败
- **R2** 字体上限 — `.h-xl` / `.h-display` 的大小和粗细组合超过种子定义
- **R3** 页脚冲突 — 内容挤入底部页脚 / 页码
- **R4** 4 频段密度 — 1440 高的画布分割为 4 个水平频段；每个频段必须包含内容或有明确的留白理由
- **R5** 框架溢出 — `.frame-img` / `.frame-shot` 的子元素溢出框架
- **R6** 瑞士身份 — 瑞士模板中内联 `font-weight >= 700` 会警告（违反“越大越细”原则）

`SKILL.md` 第 7 步明确说明**验证器不会自动运行**——等待用户先查看图片，每轮可节省数十秒。

## 主题预设

从 [`references/theme-presets.md`](./references/theme-presets.md) 中选择。**不允许自定义十六进制颜色值**——保护美学比选择的自由更重要。

### 编辑风格（6 种）

| 主题 | 色调 | 最适合 |
|-------|-------|----------|
| 🖋 **墨色经典** | `#0a0a0b` / `#f1efea` | 通用默认，商业话题，不确定时使用 |
| 🌊 **靛蓝瓷器** | `#0a1f3d` / `#f1f3f5` | 科技、研究、AI、技术写作 |
| 🌿 **森林墨色** | `#1a2e1f` / `#f5f1e8` | 自然、可持续、户外、非虚构 |
| 🍂 **牛皮纸** | `#2a1e13` / `#eedfc7` | 怀旧、人文、阅读、文学 |
| 🌙 **沙丘** | `#1f1a14` / `#f0e6d2` | 艺术、设计、创意、时尚 |
| ⚫ **午夜墨色** | `#0e0d0c` / `#ece2cf` / `#d4a04a` | 游戏主视觉 / 夜景 / 电影封面 / 黑神话·艾尔登法环风格暗黑主题 |

### 瑞士风格（4 种）

| 主题 | 锚定色 | 最适合 |
|-------|--------|----------|
| 🔵 **IKB 克莱因蓝** | `#002FA7` | 通用默认，商业发布，AI 产品，框架 |
| 🟡 **柠檬黄** | `#FFD500` | 青春，体育，零售，消费，Y2K |
| 🟢 **柠檬绿** | `#C5E803` | 生态，健康，Z 世代，绿色品牌 |
| 🟠 **安全橙** | `#FF6B35` | 警告，新闻，工业，活力主题 |

要切换主题，只需替换种子模板中的 `<section class="poster" data-theme="...">` 属性；所有 CSS 通过 `var(--...)` 解析。

## 目录

```
guizang-social-card-skill/
├── SKILL.md                              ← 主技能文件：7 步工作流
├── README.md                             ← 中文 README
├── README.en.md                          ← 本文件
├── HANDOFF.md                            ← 交接文档：事实 + 版本历史
├── PRODUCT.md                            ← 产品文档：思路 + 决策 + 路线图
├── validate-social-deck.mjs              ← Playwright 布局验证器
├── assets/
│   ├── template-editorial-card.html      ← 编辑风格种子模板（6 主题 / 3 画布）
│   ├── template-swiss-card.html          ← 瑞士风格种子模板（4 强调色 / 3 画布）
│   ├── magazine-bg-webgl.js              ← WebGL 墨流背景
│   └── screenshot-backgrounds/           ← 9 种截图舞台背景（WebP）
│       ├── style-a/                      ←   5 种编辑风格
│       └── style-b/                      ←   4 种瑞士风格
└── references/
    ├── platform-specs.md                 ← 平台 × 分辨率 × 命名
    ├── style-system.md                   ← 两种风格的硬性规则和反模式
    ├── theme-presets.md                  ← 全部 10 种调色板详情
    ├── layout-recipes.md                 ← 28 种布局骨架（M01-M16 + S01-S12）
    ├── components.md                     ← 字体 / 卡片 / 间距 / 图标
    ├── background-systems.md             ← 墨流 / 网格 / 纸张层
    ├── portrait-fill.md                  ← 3:4 画板的留白策略
    ├── content-planning.md               ← 钩子 / 分页 / 文案压缩
    ├── category-cookbook.md              ← 11 种小红书内容分类路由表
    ├── image-overlay.md                  ← 全幅图片蒙版 + 人脸安全规则
    ├── screenshot-treatment.md           ← `.frame-shot` 工具 + 截图美化
    ├── map-component.md                  ← `.map-block` MapLibre 地图
    ├── title-shortener.md                ← 1:1 封面的短标题策略
    ├── production-workflow.md            ← Playwright 渲染流水线
    └── qa-checklist.md                   ← 质量检查清单
```

## 核心设计原则

1. **克制胜过喧哗** — 克制的调色板在饱和的信息流中更显眼
2. **结构胜过装饰** — 字体 / 对比 / 网格承载层次，而非阴影或卡片
3. **布局先于自由** — 先选择，后调整；不可在 28 种骨架之外发明页面
4. **用户图片优先** — 在接收阶段，一次性给出 A/B/C 选项；不要重复提议自己拍摄
5. **蒙版 + 避开** — 全幅图片始终带有蒙版；文字放置区域必须避开主体（人脸 / 产品 / 文本密集区域）
6. **越大越细** — 瑞士风格 `.h-xl` 字号增大 → 字重必须减小。编辑风格遵循相同规则
7. **不自动验证** — 让用户先看看，然后在验证前询问；每轮可节省数十秒
8. **技能是产品，不是提示词** — 拥有 PRODUCT.md、版本号、更新日志、能力边界
9. **本地测试不纳入版本控制** — 所有演示 / 冒烟测试存放在 `local-tests/` 下，已写入 gitignore

## 视觉参考

- *Monocle* / *Kinfolk* / *Cereal* 杂志的排版和字母间距
- 马西莫·维涅里 / Helvetica 永恒 / 瑞士国际印刷风格网格体系
- Apartamento / The Gentlewoman 的图片与文字比例和人物肖像
- 小红书 / Rednote 上“克制赢得信息流”的案例
- 归藏的社交卡片实践

## 路线图

- 针对长编辑风格内容中字体上限边缘情况的更多冒烟测试
- 更多瑞士风格数据布局（额外的图表骨架）
- 图片生成后：主动询问是否进行局部修改 / 重新生成整个图片
- 更多分类的推荐布局包（目前 11 种中有 7 种是端到端强项）
- 适用于 Marketplace 的 WorkBuddy 版本

## 贡献

Bug、布局问题、新布局请求——欢迎提交 Issue 和 PR。修改的优先级：

- 编辑种子模板时，同时更新 `references/components.md` 的对应表（大小 / 间距 / 字重）
- 添加布局时，将完整配方添加到 `references/layout-recipes.md`（文案上限 + 最小密度）
- 添加主题颜色时，同时更新种子模板的 `[data-theme="..."]` 块 + `references/theme-presets.md`
- 添加瑞士风格规则时，同时更新 `validate-social-deck.mjs` 中的对应规则
- 你遇到的错误记录到 `references/qa-checklist.md`
- 测试和演示存放在 `local-tests/`——不要污染技能根目录

## 许可证

AGPL-3.0 © 2026 [op7418](https://github.com/op7418)

本项目采用 **GNU AGPL-3.0** 许可证。要点：

1. **需要署名** — 保留版权声明
2. **衍生作品必须开源** — 任何修改版本、分支或再分发必须在 AGPL-3.0（或兼容许可证）下发布，并提供完整源代码
3. **网络使用即分发** — 即使你只将修改版本作为 SaaS / 网络服务运行而不分发代码，也必须发布源代码（这是 AGPL 比 GPL 更严格的原因）
4. **禁止闭源、专有或仅付费分发**

完整条款参见 [`LICENSE`](./LICENSE)。

## FAQ

### 什么是归藏社交卡片技能？

归藏社交卡片技能是一项适用于 Claude Code、Codex 等类似编程智能体环境的技能，能够从文章、笔记或照片等多种内容输入生成小红书轮播图和微信封面图，并使用独特的视觉设计系统。

### 我可以使用哪些类型的内容来生成社交卡片？

您可以使用文章、文案、截图、产品笔记、字幕或照片作为源内容来生成社交卡片。该技能能适应各种输入，生成视觉吸引力强的输出。

### 生成社交卡片时，有哪两种可视系统可用？

该技能提供两种视觉系统：“编辑风格”适用于故事叙述、生活方式和叙事内容，“瑞士国际风格”适用于产品评测、数据、框架和教程，以网格优先为特征。

### 我可以为社交卡片使用自定义颜色吗？

不可以，不支持自定义十六进制值。该技能提供 10 种主题预设（6 种编辑风格，4 种瑞士风格），以保持视觉一致性和质量。您可以通过更新种子模板上的 data-theme 属性来切换主题。

### 如何安装归藏社交卡片技能？

您可以通过使用 \`npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill\` 或者将仓库克隆到智能体的技能目录中来安装它。

### 该技能支持英文内容吗？

是的，该技能支持英文内容。编辑风格（Playfair Display + Noto Serif）和瑞士风格（Inter + Helvetica）的字体均覆盖中文和英文，且布局框架与语言无关。