让 AI 自己读懂你的代码库，再也不用手调 OG 图了

每次给网站加 OG 图，我都干一件事——打开 Figma，复制粘贴，调颜色，导出，上传。累死。

今天发现一个 Claude Code Skill，能让 AI 自己读懂你的代码库、品牌风格，然后自动生成配套的 OG 图。og-image-creator，来自开发者 chongdashu。

它凭什么不一样

大多数 OG 图生成工具是「模板 + 占位符」逻辑——你告诉它文字，它塞进一个固定卡片。

og-image-creator 的思路正好反过来：先读懂你的项目，再生成对应风格的图。

它会：
– 分析你的代码结构，判断用的什么框架（Next.js、Astro、React Router）
– 自动提取 Logo、配色方案、字体
– 理解每个页面的用途，分类处理：落地页、文章页、产品页、文档页各有各的视觉策略
– 用 Playwright 把 React 组件直接渲染成 OG 图

也就是说，你不用手动描述「我需要一个商务风蓝底白字卡片」，它自己从代码里就学会了。

工作流长什么样

整个流程分三个阶段：

1. 发现 & 分析
用脚本自动扫描项目结构，提取路由、颜色、字体、Logo 文件，同时按框架特征分类页面类型。

2. 设计策略
给不同页面匹配不同布局。落地页：大字、最小化信息；文章页：标题 + 日期 + 作者；产品页：产品名 + 核心卖点；文档页：结构清晰、分区明确。

所有图统一 1200×630 标准尺寸，用实际品牌色而非模板色。

3. 生成 & 验证
用 Playwright 渲染组件并截图，自动输出到 public/og/ 目录，同时更新页面 metadata。生成完成后调用 OG 预览工具验证效果。

用起来有多简单

装好之后，在 Claude Code 里说一句：

create og images for my project

就完事了。剩下的全是 AI 自己推导。

安装命令：

npx skills add https://github.com/chongdashu/cc-skills --skill og-image-creator

或者在 Claude Code 里直接：

/plugin install og-image-creator@chongdashu/cc-skills

谁适合用它

独立开发者 / 设计师：做产品落地页不用再切工具，直接在代码环境里出图。

内容团队：博客、文档站每次发新文章，OG 图自动跟上，不用 Designer 排队。

全栈团队：一套品牌资产搞定所有路由的 OG 图，维护成本极低。

小提醒

这个 Skill 依赖 Playwright 确保渲染环境正常。另外它最适合已经有品牌风格定义（配色、字体）的项目——从零开始的新项目，建议先把基础样式搭好再跑它，效果会更接近预期。

GitHub 链接：https://github.com/chongdashu/cc-skills

GitHub: https://github.com/chongdashu/cc-skills