feature-image

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Generate a branded social media image for announcing a feature or update. The image is built as an HTML page styled to match the project's brand, then screenshotted with Playwright.

生成用于官宣功能或更新的品牌化社交媒体图片。图片会先构建为匹配项目品牌风格的HTML页面，再通过Playwright截图生成。

Phase 1: Ensure Playwright is Available

阶段1：确保Playwright可用

bash

npx playwright --version 2>/dev/null || (echo "Installing Playwright..." && npx playwright install chromium)

If installation fails, inform the user and suggest

npm install -D playwright && npx playwright install chromium

bash

npx playwright --version 2>/dev/null || (echo "Installing Playwright..." && npx playwright install chromium)

如果安装失败，告知用户并建议执行

npm install -D playwright && npx playwright install chromium

。

Phase 2: Understand What Changed (Git-Aware)

阶段2：了解变更内容（Git感知能力）

Analyze the recent git history to understand what feature/update to announce:

Check recent commits:
bash
```
git log --oneline -20
```

Check current diff (staged + unstaged):

bash

git diff HEAD --stat
git diff HEAD -- '*.tsx' '*.jsx' '*.vue' '*.svelte' '*.html' '*.css' '*.scss' '*.rb' '*.erb'

Check recent branch name (often describes the feature):
bash
```
git branch --show-current
```
Synthesize what the feature/update is from this context.
Present findings to user with
```
AskUserQuestion
```
:
- Header: "Feature"
- Question: "Based on recent changes, it looks like you're working on [X]. What should this announcement be about?"
- Options:
  - "[Auto-detected feature description]" - Use what was detected
  - "Something else" - Let user describe it
- If
```
$1
```
  was provided as an argument, use that instead of asking.

分析近期git历史，明确要官宣的功能/更新内容：

查看近期提交记录：
bash
```
git log --oneline -20
```

查看当前diff（暂存+未暂存）：

bash

git diff HEAD --stat
git diff HEAD -- '*.tsx' '*.jsx' '*.vue' '*.svelte' '*.html' '*.css' '*.scss' '*.rb' '*.erb'

查看当前分支名（通常会描述功能内容）：
bash
```
git branch --show-current
```
综合分析上下文，总结功能/更新的内容。
通过
AskUserQuestion
向用户确认分析结果：
- 标题："功能"
- 问题："根据近期变更，你似乎正在开发[X]。本次官宣的内容是什么？"
- 选项：
  - "[自动检测到的功能描述]" - 使用检测到的内容
  - "其他内容" - 由用户自行描述
- 如果传入了
```
$1
```
  参数，则直接使用该参数，不再询问用户。

Phase 3: Auto-Generate Announcement Text

阶段3：自动生成官宣文案

Generate text elements for the image:

Headline: A punchy, short headline (3-8 words) about the feature
Tagline: A one-sentence supporting description
Badge/Label: Optional category label (e.g., "New Feature", "Update", "Improvement")

Present these to the user with

AskUserQuestion

Header: "Copy"
Question: "Here's the text I'd put on the image. Want to adjust anything?"
Options:
- "Looks good" - Use as-is
- "Edit headline" - User provides custom headline
- "Edit everything" - User provides all text
- "No text overlay" - Generate image without text

生成图片上的文字元素：

标题：简洁有力的短标题（3-8个词），概括功能核心
副标题：一句话补充说明功能价值
徽章/标签：可选分类标签（例如"New Feature"、"Update"、"Improvement"）

通过

AskUserQuestion

向用户确认文案：

标题："文案"
问题："以下是我为图片生成的文案，需要调整吗？"
选项：
- "没问题" - 直接使用
- "编辑标题" - 用户自定义标题
- "编辑全部内容" - 用户提供所有文案
- "不添加文字" - 生成无文字覆盖的图片

Phase 4: Choose Platform & Size

阶段4：选择发布平台与尺寸

Use

AskUserQuestion

Header: "Platform"
Question: "What platform is this image for?"
Options:
- "Twitter/X (1200x675)" - Standard Twitter card size
- "LinkedIn (1200x627)" - LinkedIn share image
- "Instagram (1080x1080)" - Square format
- "Open Graph (1200x630)" - Universal social preview

Store the chosen width and height for the Playwright viewport.

使用

AskUserQuestion

询问：

标题："平台"
问题："这张图片用于哪个平台？"
选项：
- "Twitter/X (1200x675)" - 标准Twitter卡片尺寸
- "LinkedIn (1200x627)" - LinkedIn分享图尺寸
- "Instagram (1080x1080)" - 正方形格式
- "Open Graph (1200x630)" - 通用社交预览尺寸

存储选中的宽度和高度，用于Playwright视口配置。

Phase 5: Choose Visual Style

阶段5：选择视觉风格

Use

AskUserQuestion

Header: "Style"
Question: "What visual style should the image use?"
Options:
- "Stylized mockup (Recommended)" - Simplified, polished recreation of UI elements using the app's actual components and CSS. Recognizable but not pixel-perfect.
- "Screenshot + overlay" - Takes a real screenshot of the running app and adds branded text overlays, gradients, and annotations.
- "Abstract/illustrative" - Uses brand colors and typography to create a geometric or gradient design that suggests the feature without replicating specific UI.

使用

AskUserQuestion

询问：

标题："风格"
问题："图片应该使用哪种视觉风格？"
选项：
- "风格化 mockup（推荐）" - 使用应用实际组件和CSS，简化复刻UI元素，辨识度高但不需要像素级精准
- "截图+叠加层" - 对运行中的应用进行真实截图，添加品牌化文字覆盖层、渐变和标注
- "抽象/插画风格" - 使用品牌色和排版创建几何或渐变设计，无需复刻具体UI就能体现功能特征

Style: Stylized Mockup

风格：风格化Mockup

This is the most involved style. The goal is to create a representation of the UI that feels like the app without being a literal screenshot.

Find relevant UI components related to the feature:
- Search for component files that match the feature (e.g., if the feature is "dark mode", find theme toggle components)
- Read the component markup to understand the UI structure
- Note key visual elements: buttons, cards, inputs, tables, navigation items
Extract visual patterns from components:
- Border radius values
- Shadow styles
- Specific layout patterns (sidebar + main, card grids, etc.)
- Icon usage
- Interactive element styles (buttons, toggles, inputs)
Build a simplified HTML mockup that:
- Shows the key UI elements of the feature in a stylized, editorial layout
- Uses the actual brand colors, fonts, and border-radius from the codebase
- Adds subtle visual polish (soft shadows, slight gradients, generous whitespace)
- Frames the UI in a "browser window" or "device frame" if appropriate
- Is NOT a full working page -- it's a curated, art-directed composition

这是最复杂的风格，目标是创建和应用感知一致的UI表现，不需要是字面意义的截图。

查找和功能相关的UI组件：
- 搜索匹配功能的组件文件（例如功能是“深色模式”，就查找主题切换组件）
- 读取组件标记，了解UI结构
- 记录核心视觉元素：按钮、卡片、输入框、表格、导航项
从组件中提取视觉模式：
- 圆角数值
- 阴影样式
- 特定布局模式（侧边栏+主内容、卡片网格等）
- 图标使用
- 交互元素样式（按钮、开关、输入框）
构建简化的HTML mockup，满足以下要求：
- 以风格化的编辑布局展示功能的核心UI元素
- 使用代码库中真实的品牌色、字体和圆角
- 添加精细的视觉优化（柔和阴影、轻微渐变、充足留白）
- 合适的话将UI放在“浏览器窗口”或“设备框”中
- 不需要是完整可运行的页面——它是经过策划的艺术化组合

Style: Screenshot + Overlay

风格：截图+叠加层

Ask the user for the URL of the running app (suggest common localhost URLs)
Navigate to the relevant page with Playwright
Take a base screenshot
Create an HTML overlay page that:
- Embeds the screenshot as a background image
- Adds a gradient overlay (using brand colors) for text readability
- Places headline and tagline text on top
- Adds a badge/label if applicable
Screenshot the overlay page

向用户询问运行中应用的URL（建议常用的localhost地址）
通过Playwright导航到对应页面
截取基础截图
创建HTML叠加层页面：
- 将截图嵌入为背景图
- 添加渐变叠加层（使用品牌色）提升文字可读性
- 放置标题和副标题文字
- 按需添加徽章/标签
对叠加层页面截图

Style: Abstract/Illustrative

风格：抽象/插画风格

Build an HTML page with:

A gradient or geometric background using brand colors
The project logo (if found in
```
/public
```
,
```
/assets
```
, or
```
/src/assets
```
)
Large, bold headline text using the project's font
Supporting tagline
Abstract shapes, lines, or patterns that evoke the feature category
Clean, modern aesthetic with generous whitespace

构建HTML页面，包含以下元素：

使用品牌色的渐变或几何背景
项目logo（如果在
```
/public
```
、
```
/assets
```
或
```
/src/assets
```
中找到）
使用项目字体的粗体大标题
辅助副标题
呼应功能分类的抽象形状、线条或图案
干净现代的美学风格，搭配充足留白

Phase 6: Deep Brand Analysis

阶段6：深度品牌分析

This is the most important phase. Spend real time here. The generated image must feel like it was made by the same team that built the product -- not a generic template with brand colors swapped in. The goal is to internalize the brand's visual identity so deeply that the image is indistinguishable from something the design team would produce.

这是最重要的阶段，需要花足够的时间处理。生成的图片必须看起来和产品团队出品的一致，而不是换了品牌色的通用模板。目标是深度内化品牌的视觉识别，让生成的图片和设计团队产出的内容没有区别。

6.1: Study Existing Marketing Materials First

6.1：首先研究现有营销物料

Before looking at config files, study how the brand actually presents itself. These are your primary references:

Landing pages and marketing pages -- search for:
- ```
pages/index
```
  ,
```
app/page
```
  ,
```
pages/home
```
  ,
```
components/landing/
```
  ,
```
components/marketing/
```
  ,
```
components/hero
```
- Any files with
```
landing
```
  ,
```
marketing
```
  ,
```
home
```
  ,
```
hero
```
  ,
```
cta
```
  in the name
- Read these files thoroughly. Note the exact tone, layout patterns, how they compose text + visuals, gradient directions, decorative elements, background treatments
Existing social/OG images -- search for:
- ```
og-image
```
  ,
```
social
```
  ,
```
share
```
  ,
```
twitter
```
  ,
```
preview
```
  in
```
/public
```
  or
```
/assets
```
- Any existing announcement or marketing images in the repo
- These are your strongest reference for what the brand considers "on-brand" for social
Blog or changelog pages -- search for:
- ```
blog
```
  ,
```
changelog
```
  ,
```
updates
```
  ,
```
announcements
```
  in page/route files
- These show how the brand communicates updates -- mirror this tone and style
Email templates -- search for:
- ```
email
```
  ,
```
mailer
```
  ,
```
newsletter
```
  templates
- These reveal another facet of the brand's visual language
README and docs -- check for badges, banner images, or styled headers that reveal brand personality

在查看配置文件前，先研究品牌的实际呈现方式，这些是你的核心参考：

落地页和营销页面——搜索以下内容：
- ```
pages/index
```
  、
```
app/page
```
  、
```
pages/home
```
  、
```
components/landing/
```
  、
```
components/marketing/
```
  、
```
components/hero
```
- 名称中包含
```
landing
```
  、
```
marketing
```
  、
```
home
```
  、
```
hero
```
  、
```
cta
```
  的文件
- 仔细阅读这些文件，记录准确的调性、布局模式、文字+视觉的组合方式、渐变方向、装饰元素、背景处理方式
现有社交/OG图片——搜索以下内容：
- ```
/public
```
  或
```
/assets
```
  中包含
```
og-image
```
  、
```
social
```
  、
```
share
```
  、
```
twitter
```
  、
```
preview
```
  的内容
- 仓库中任何现有官宣或营销图片
- 这些是判断品牌“符合风格”的社交内容的最强参考
博客或更新日志页面——搜索以下内容：
- 页面/路由文件中包含
```
blog
```
  、
```
changelog
```
  、
```
updates
```
  、
```
announcements
```
  的内容
- 这些展示了品牌对外沟通更新的方式——要镜像这种调性和风格
邮件模板——搜索以下内容：
- ```
email
```
  、
```
mailer
```
  、
```
newsletter
```
  模板
- 这些能展现品牌视觉语言的另一个维度
README和文档——查看能体现品牌个性的徽章、横幅图片或样式化标题

6.2: Color Palette

6.2：配色方案

Extract the full color system, not just primary/secondary:

Tailwind config (
```
tailwind.config.js
```
,
```
tailwind.config.ts
```
):
- Read the entire
```
theme.extend.colors
```
  block
- Note the full palette: primary, secondary, accent, neutral, success, warning, error
- Pay attention to color relationships -- how does the brand pair colors?
CSS custom properties (search for
```
:root
```
in global CSS files):
- Look for
```
--primary
```
  ,
```
--brand
```
  ,
```
--accent
```
  ,
```
--background
```
  ,
```
--foreground
```
  ,
```
--muted
```
  ,
```
--card
```
  or similar
- Extract HSL/RGB/hex values
- Note if there are separate light/dark mode palettes
Design token files (search for
```
tokens
```
,
```
theme
```
,
```
design-system
```
in filenames):
- Extract color definitions and semantic mappings
Actual usage in marketing components:
- Read hero sections, CTA buttons, feature cards, pricing tables
- Note which colors are used for backgrounds vs. text vs. accents vs. borders
- Look for gradient definitions -- exact stops, directions, and where they're used
- Find the brand's "signature" color combinations (e.g., dark bg + bright accent, soft pastels, bold primaries)

提取完整的色彩系统，不只是主色/辅助色：

Tailwind配置（
```
tailwind.config.js
```
、
```
tailwind.config.ts
```
）：
- 读取完整的
```
theme.extend.colors
```
  块
- 记录完整调色板：主色、辅助色、强调色、中性色、成功色、警告色、错误色
- 关注色彩的搭配关系——品牌是怎么组合颜色的？
CSS自定义属性（在全局CSS文件中搜索
```
:root
```
）：
- 查找
```
--primary
```
  、
```
--brand
```
  、
```
--accent
```
  、
```
--background
```
  、
```
--foreground
```
  、
```
--muted
```
  、
```
--card
```
  或类似变量
- 提取HSL/RGB/十六进制数值
- 记录是否有独立的浅色/深色模式调色板
设计令牌文件（搜索文件名中包含
```
tokens
```
、
```
theme
```
、
```
design-system
```
的内容）：
- 提取颜色定义和语义映射
营销组件中的实际使用情况：
- 读取英雄区、CTA按钮、功能卡片、定价表
- 记录背景、文字、强调色、边框分别使用哪些颜色
- 查找渐变定义——准确的色标、方向和使用场景
- 找到品牌的“标志性”配色组合（例如深色背景+亮强调色、柔和马卡龙色、大胆主色）

6.3: Typography

6.3：排版

Font imports (search for
```
@import
```
with font URLs,
```
@font-face
```
, or Google Fonts links)
Tailwind fontFamily config
CSS font-family declarations on body/headings
Package.json for font packages (e.g.,
```
@fontsource/*
```
,
```
next/font
```
)
Actual heading styles -- read marketing page headings to see:
- Font weight (bold? black? medium?)
- Letter spacing (tight? normal? wide?)
- Text transform (uppercase? normal?)
- Line height
- How headlines are sized relative to body text

For the image, use the detected font. If it's a Google Font, include the

<link>

tag in the HTML. If it's a local/custom font, fall back to a similar system font or Google Font alternative.

字体引入（搜索带字体URL的
```
@import
```
、
```
@font-face
```
或者Google Fonts链接）
Tailwind fontFamily配置
body/标题上的CSS font-family声明
package.json中的字体包（例如
```
@fontsource/*
```
、
```
next/font
```
）
实际标题样式——阅读营销页面标题，查看：
- 字重（粗体？极粗？中等？）
- 字间距（紧凑？正常？宽松？）
- 文本转换（大写？正常？）
- 行高
- 标题和正文的相对大小比例

图片使用检测到的字体，如果是Google Fonts，就在HTML中引入

<link>

标签；如果是本地/自定义字体，回退为类似的系统字体或Google Fonts替代方案。

6.4: Logo & Assets

6.4：Logo与资源

Search for logo files:

public/logo*, public/images/logo*, src/assets/logo*, assets/logo*
public/*.svg (check for logo-like SVGs)
public/brand*, src/assets/brand*

If a logo is found, embed it in the image (inline SVG or base64-encoded).

Also look for:

Icon libraries or custom icon sets used in the app
Illustration styles (line art? filled? duotone?)
Background patterns or textures
Decorative elements (dots, grids, blobs, rings)

搜索logo文件：

public/logo*, public/images/logo*, src/assets/logo*, assets/logo*
public/*.svg (check for logo-like SVGs)
public/brand*, src/assets/brand*

如果找到logo，就嵌入到图片中（内联SVG或者base64编码）。

同时查找：

应用中使用的图标库或自定义图标集
插画风格（线稿？填充？双色调？）
背景图案或纹理
装饰元素（圆点、网格、不规则图形、圆环）

6.5: Visual Language & Patterns

6.5：视觉语言与模式

Go beyond basic config -- study the visual personality of the brand:

Border radius: Is the app rounded (
```
rounded-xl
```
,
```
rounded-2xl
```
) or sharp (
```
rounded-none
```
,
```
rounded-sm
```
)? Use the exact same radii.
Shadows: Soft/elevated or flat? What shadow values are used? (e.g.,
```
shadow-lg
```
vs
```
shadow-sm
```
vs no shadow)
Dark mode: Is dark mode the default or primary theme? What's the background color?
Gradients: Are gradients used prominently? What direction, what colors, where?
Glass/blur effects: Any
```
backdrop-blur
```
usage? Translucent cards?
Borders: Are borders used for separation or are things borderless? What color/opacity?
Spacing rhythm: Is the design dense and compact or airy with lots of whitespace?
Decorative elements: Does the brand use background grids, dot patterns, glow effects, noise textures, gradient orbs?
Animation style: While animation won't appear in the image, the feel of a brand that uses smooth spring animations vs. no animations tells you about its personality

不只是基础配置——研究品牌的视觉“个性”：

圆角：应用是偏圆润（
```
rounded-xl
```
、
```
rounded-2xl
```
）还是偏锐利（
```
rounded-none
```
、
```
rounded-sm
```
）？使用完全一致的圆角数值。
阴影：柔和/有悬浮感还是扁平？使用的阴影数值是多少？（例如
```
shadow-lg
```
vs
```
shadow-sm
```
vs 无阴影）
深色模式：深色模式是默认还是主主题？背景色是什么？
渐变：是否大量使用渐变？方向、颜色、使用场景是什么？
玻璃/模糊效果：有没有使用
```
backdrop-blur
```
？半透明卡片？
边框：用边框做分隔还是无边界设计？颜色/透明度是多少？
间距节奏：设计是密集紧凑还是松散多留白？
装饰元素：品牌是否使用背景网格、圆点图案、发光效果、噪点纹理、渐变球体？
动画风格：虽然动画不会出现在图片中，但使用流畅弹簧动画 vs 无动画的品牌，个性差异很大，可以作为参考。

6.6: Synthesize a Brand Brief

6.6：合成品牌简报

Before building the image, write a short internal summary of the brand's visual identity:

"This brand uses [dark/light] backgrounds with [color] accents. Typography is [font] at [weight], [tight/normal] letter spacing. The aesthetic is [minimal/bold/playful/corporate]. Key visual motifs include [gradients/glass/sharp corners/etc]. Marketing pages use [layout pattern] with [decorative elements]."

Use this brief as your guide for every design decision in the image. Every element should pass the test: "Would this look at home on their landing page?"

在构建图片前，写一份简短的内部品牌视觉识别总结：

"这个品牌使用[深色/浅色]背景搭配[颜色]强调色。排版使用[字体]，字重[数值]，字间距[紧凑/正常]。美学风格是[极简/大胆/活泼/商务]。核心视觉元素包括[渐变/玻璃效果/锐利边角等]。营销页面使用[布局模式]搭配[装饰元素]。"

用这份简报指导图片的所有设计决策，每个元素都要通过测试：“这个元素放在他们的落地页上协调吗？”

Phase 7: Build the HTML Image Page

阶段7：构建HTML图片页面

Create a self-contained HTML file at

/tmp/feature-image-page.html

that:

Is exactly the chosen dimensions (viewport-sized, no scroll)
Embeds all styles inline (no external CSS dependencies)
Includes fonts via Google Fonts link (or similar CDN)
Uses the detected brand colors, fonts, and visual patterns
Contains the chosen text overlay (headline, tagline, badge)
Matches the chosen visual style (mockup, screenshot+overlay, or abstract)

在

/tmp/feature-image-page.html

创建自包含的HTML文件，满足以下要求：

尺寸完全匹配选中的规格（视口大小，无滚动）
所有样式内联嵌入（无外部CSS依赖）
通过Google Fonts链接引入字体（或类似CDN）
使用检测到的品牌色、字体和视觉模式
包含选中的文字覆盖层（标题、副标题、徽章）
匹配选中的视觉风格（mockup、截图+叠加层、抽象风格）

HTML Structure Template

HTML结构模板

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link href="https://fonts.googleapis.com/css2?family=[DETECTED_FONT]&display=swap" rel="stylesheet">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html, body {
      width: [WIDTH]px;
      height: [HEIGHT]px;
      overflow: hidden;
      font-family: '[DETECTED_FONT]', system-ui, sans-serif;
    }
    body {
      background: [BRAND_GRADIENT_OR_COLOR];
      color: [TEXT_COLOR];
      display: flex;
      /* Layout depends on style choice */
    }
    /* ... style-specific CSS ... */
  </style>
</head>
<body>
  <!-- Content depends on style choice -->
</body>
</html>

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link href="https://fonts.googleapis.com/css2?family=[DETECTED_FONT]&display=swap" rel="stylesheet">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html, body {
      width: [WIDTH]px;
      height: [HEIGHT]px;
      overflow: hidden;
      font-family: '[DETECTED_FONT]', system-ui, sans-serif;
    }
    body {
      background: [BRAND_GRADIENT_OR_COLOR];
      color: [TEXT_COLOR];
      display: flex;
      /* Layout depends on style choice */
    }
    /* ... style-specific CSS ... */
  </style>
</head>
<body>
  <!-- Content depends on style choice -->
</body>
</html>

Design Quality Guidelines

设计质量准则

The image should look like it was designed by a professional. Follow these principles:

Hierarchy: Headline is the largest element. Tagline supports it. Badge is small.
Contrast: Text must be easily readable against the background.
Alignment: Use a clear grid. Left-align or center consistently.
Polish: Subtle shadows, smooth gradients, refined typography (letter-spacing, line-height).
Restraint: Don't use more than 2-3 colors. Don't use more than 2 font weights.

图片看起来要像专业设计师出品，遵循以下原则：

层级：标题是最大的元素，副标题作为辅助，徽章最小。
对比度：文字在背景上必须清晰易读。
对齐：使用清晰的网格，统一左对齐或居中对齐。
质感：柔和的阴影、平滑的渐变、精致的排版（字间距、行高）。
克制：不要使用超过2-3种颜色，不要使用超过2种字重。

Space Usage (CRITICAL)

空间使用（关键要求）

These images will be viewed at small sizes in social feeds, timeline cards, and link previews. Every pixel matters. Dead space is wasted space.

Mandatory rules:

Fill the canvas. Content should use 85-95% of the available area. Padding should be tight -- 40-60px max on a 1200px-wide image, not 100+.
Make text BIG. Headlines should be 48-72px minimum (at 1x). If the headline is short (3-4 words), go even bigger -- 80-100px. The text needs to be readable at thumbnail size (~400px wide). If you squint at the image and can't read the headline, it's too small.
No empty centers. If the layout has a headline on top and a UI mockup on the bottom, don't leave a big gap in the middle. Stack elements tightly or fill the space with supporting content.
UI mockups should be large. If showing a stylized UI element, it should take up at least 50-60% of the image area. Don't render a tiny card floating in a sea of background gradient.
Edge-to-edge when appropriate. UI mockups can bleed off the edges of the canvas -- this looks more dynamic and uses space better than centering everything with margins.
Badge/label text should be 14-18px, not smaller. It needs to be visible.
Test at thumbnail size. Before finalizing, mentally shrink the image to 400px wide. Can you still read the headline? Can you tell what the UI shows? If not, make things bigger.

Common mistakes to avoid:

A small headline centered in the middle of a large background -- scale it up, push it to a corner or edge
A UI mockup that's 30% of the canvas surrounded by gradient -- make it dominant
Excessive padding that makes content feel like it's floating in space
Tagline text at 14-16px -- bump it to 20-24px minimum
Using the same spacing between all elements instead of grouping related items tightly

这些图片会在社交信息流、时间线卡片、链接预览中以小尺寸展示，每一个像素都很重要，空白就是浪费空间。

强制规则：

填满画布。 内容要占用85-95%的可用区域，内边距要紧凑——1200px宽的图片最多留40-60px内边距，不要超过100px。
文字要足够大。 标题最小要48-72px（1倍分辨率下），如果标题很短（3-4个词），可以更大——80-100px。文字在缩略图尺寸（~400px宽）下必须可读，如果眯眼看图片看不清标题，说明太小了。
中心不要留空。 如果布局是顶部标题底部UI mockup，中间不要留大段空白，元素要紧凑堆叠，或者用辅助内容填满空间。
UI mockup要足够大。 如果展示风格化UI元素，至少要占用50-60%的图片区域，不要渲染一个小卡片浮在大片渐变背景上。
合适的情况下可以边到边展示。 UI mockup可以延伸出画布边缘——比所有内容都居中加边距看起来更有活力，空间利用也更好。
徽章/标签文字要14-18px，不要更小，必须能看清。
缩略图尺寸测试。 最终确定前，在脑海里把图片缩小到400px宽，还能看清标题吗？能知道UI展示的是什么吗？如果不行，就把元素放大。

要避免的常见错误：

小标题居中放在大背景中央——放大，放到角落或边缘
UI mockup只占30%画布，周围都是渐变——让它成为主导元素
过多内边距让内容看起来像浮在空中
副标题只有14-16px——至少调到20-24px
所有元素间距都一样，不把相关元素紧凑组合

Phase 8: Screenshot with Playwright

阶段8：用Playwright截图

Create and run a Node.js script:

javascript

import { chromium } from 'playwright';
import { readFileSync } from 'fs';

async function capture() {
  const browser = await chromium.launch();
  const context = await browser.newContext({
    viewport: { width: [WIDTH], height: [HEIGHT] },
    deviceScaleFactor: 2, // Retina quality
  });
  const page = await context.newPage();

  // Load the HTML file
  const html = readFileSync('/tmp/feature-image-page.html', 'utf-8');
  await page.setContent(html, { waitUntil: 'networkidle' });

  // Wait for fonts to load
  await page.waitForTimeout(1000);

  await page.screenshot({
    path: './feature-image.png',
    type: 'png',
  });

  await browser.close();
  console.log('Saved: ./feature-image.png');
}

capture().catch(console.error);

Save the script to

/tmp/feature-image-capture.mjs

, run it, then clean up:

bash

node /tmp/feature-image-capture.mjs && rm /tmp/feature-image-capture.mjs /tmp/feature-image-page.html

创建并运行Node.js脚本：

javascript

import { chromium } from 'playwright';
import { readFileSync } from 'fs';

async function capture() {
  const browser = await chromium.launch();
  const context = await browser.newContext({
    viewport: { width: [WIDTH], height: [HEIGHT] },
    deviceScaleFactor: 2, // Retina quality
  });
  const page = await context.newPage();

  // Load the HTML file
  const html = readFileSync('/tmp/feature-image-page.html', 'utf-8');
  await page.setContent(html, { waitUntil: 'networkidle' });

  // Wait for fonts to load
  await page.waitForTimeout(1000);

  await page.screenshot({
    path: './feature-image.png',
    type: 'png',
  });

  await browser.close();
  console.log('Saved: ./feature-image.png');
}

capture().catch(console.error);

将脚本保存到

/tmp/feature-image-capture.mjs

，运行后清理临时文件：

bash

node /tmp/feature-image-capture.mjs && rm /tmp/feature-image-capture.mjs /tmp/feature-image-page.html

Phase 9: Verify & Present

阶段9：验证与展示

Check the file exists and has reasonable size:

bash

ls -la ./feature-image.png
sips -g pixelWidth -g pixelHeight ./feature-image.png 2>/dev/null || file ./feature-image.png

Read the image using the Read tool to show it to the user.
Ask if adjustments are needed with
```
AskUserQuestion
```
:
- Header: "Result"
- Question: "Here's your feature image. What do you think?"
- Options:
  - "Looks great" - Done
  - "Adjust colors" - Tweak the color palette
  - "Adjust text" - Change headline/tagline
  - "Try different style" - Switch to another visual style
- If adjustments are needed, go back to the relevant phase and regenerate.

Output summary:

Generated: ./feature-image.png
Size: [W]x[H] @ 2x ([actual_W]x[actual_H] pixels)
Platform: [chosen platform]
Style: [chosen style]

检查文件存在且大小合理：

bash

ls -la ./feature-image.png
sips -g pixelWidth -g pixelHeight ./feature-image.png 2>/dev/null || file ./feature-image.png

使用Read工具读取图片，展示给用户。
通过
AskUserQuestion
询问是否需要调整：
- 标题："结果"
- 问题："这是你的功能宣传图，你觉得怎么样？"
- 选项：
  - "很棒" - 完成
  - "调整颜色" - 修改调色板
  - "调整文字" - 修改标题/副标题
  - "尝试其他风格" - 切换到其他视觉风格
- 如果需要调整，回到对应阶段重新生成。

输出总结：

Generated: ./feature-image.png
Size: [W]x[H] @ 2x ([actual_W]x[actual_H] pixels)
Platform: [chosen platform]
Style: [chosen style]

Error Handling

错误处理

Playwright not found after install attempt: Suggest manual installation with
```
npm install -D playwright && npx playwright install chromium
```
No git history: Skip git analysis, ask user directly what the feature is
No brand colors found: Fall back to a clean, neutral palette (dark background, white text, blue accent)
No fonts detected: Fall back to Inter (Google Font) as a safe, modern default
Screenshot fails: Check if the HTML file was created correctly, try with a simpler layout
Font not loading in screenshot: Increase the wait timeout, or fall back to system fonts

尝试安装后仍找不到Playwright：建议手动安装，执行
```
npm install -D playwright && npx playwright install chromium
```
无git历史：跳过git分析，直接询问用户功能内容
未找到品牌色：回退为干净的中性调色板（深色背景、白色文字、蓝色强调色）
未检测到字体：回退为Inter（Google Font）作为安全的现代默认字体
截图失败：检查HTML文件是否正确创建，尝试用更简单的布局
截图中字体未加载：增加等待超时时间，或者回退为系统字体

Tips for Best Results

最佳效果提示

Run this skill from within the project directory so brand detection works
If the app has a running dev server, the "Screenshot + overlay" style will produce the most authentic results
For abstract style, the skill works well even without UI components to reference
The generated image is 2x resolution (retina) -- it will look sharp on all screens

在项目目录内运行这个skill，品牌检测才能正常工作
如果应用有正在运行的开发服务器，“截图+叠加层”风格能生成最真实的效果
抽象风格即使没有UI组件作为参考也能很好地工作
生成的图片是2倍分辨率（视网膜级）——在所有屏幕上都很清晰