huashu-xhs-image

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

小红书配图工作流

Xiaohongshu Image Workflow

⚠️ 核心原则：先提案，后生成

⚠️ Core Principle: Propose first, generate later

绝对不能跳过设计提案直接出图。 正确流程：

理解内容 → 设计提案（2-3个方向）→ 用户选择 → 生成 → 预览确认 → 上传

Never skip the design proposal to generate images directly. Correct process:

Understand content → Design proposal (2-3 directions) → User selection → Generate → Preview confirmation → Upload

花叔设计审美画像

Uncle Hua Design Aesthetic Profile

喜欢的

Preferences

质感和温度 — 纸张褶皱、手写笔触、印章、胶带等有机元素
手绘/书法字体 — 笔记感、个人分享场景尤其适合
文字撑满画面 — 小红书是手机竖屏，文字要大到一眼看清
核心元素强化 — 关键数字/关键词做视觉hero（放大3倍、变色、加装饰）
结构清晰 — 主标题 > 副标题 > 列表，层次分明
暖色调 — 奶油色、暖橙、暖金表现好

Texture and warmth — Organic elements such as paper wrinkles, handwritten strokes, seals, tapes, etc.
Handwritten/calligraphy fonts — Especially suitable for note-style, personal sharing scenarios
Text fills the screen — Xiaohongshu is for mobile vertical screens, text should be large enough to be seen at a glance
Core element enhancement — Key numbers/keywords as visual heroes (enlarge 3 times, change color, add decoration)
Clear structure — Main title > Subtitle > List, distinct hierarchy
Warm tones — Cream color, warm orange, warm gold perform well

不喜欢的

Dislikes

HTML截图 — 太平面、像PPT模板、没有灵魂（仅精确数据表格兜底）
赛博霓虹/深蓝底 — #0D1117等深蓝色底属于审美禁区
署名/水印 — 封面图不出现「花生」「花叔」「@花生」
过度留白 — 宁可满一点，不要空荡荡

HTML screenshots — Too flat, like PPT templates, no soul (only fallback for precise data tables)
Cyber neon/dark blue background — Dark blue backgrounds such as #0D1117 are aesthetic forbidden areas
Signature/watermark — Cover images should not have "花生", "花叔", "@花生"
Excessive white space — Better to be full than empty

验证过的好风格

Proven Good Styles

风格	表现	适用
手绘笔记（暖色纸张+书法字+手绘图标）	⭐⭐⭐⭐⭐	教程、干货、个人分享
暗金海报（深色底+金色大字）	⭐⭐⭐⭐	产品发布、震撼标题（需搭配好内容）
极简信息图（浅底+大数字+简洁层次）	⭐⭐⭐⭐	数据驱动、对比

Style	Performance	Applicable Scenarios
Handwritten notes (warm paper + calligraphy + hand-drawn icons)	⭐⭐⭐⭐⭐	Tutorials, dry content, personal sharing
Dark gold poster (dark background + large gold text)	⭐⭐⭐⭐	Product releases, shocking titles (needs matching good content)
Minimalist infographic (light background + large numbers + simple hierarchy)	⭐⭐⭐⭐	Data-driven content, comparison

核心参数

Core Parameters

参数	值
标准尺寸	1080 x 1440 px (3:4)
AI 生成分辨率	`--resolution 2K`
AI Prompt 长宽比声明	`3:4 portrait aspect ratio, 1080x1440 pixels`
HTML viewport（兜底用）	`--viewport-size=1080,1440`

Parameter	Value
Standard size	1080 x 1440 px (3:4)
AI generation resolution	`--resolution 2K`
AI Prompt aspect ratio statement	`3:4 portrait aspect ratio, 1080x1440 pixels`
HTML viewport (for fallback)	`--viewport-size=1080,1440`

Step 1: 理解内容

Step 1: Understand the Content

读取用户提供的内容，快速提炼：

主题：这篇讲什么？
核心关键词：哪些词/数字需要做视觉hero？
情绪/调性：悬念？干货？温暖？震撼？
图片数量和类型：单封面 / 轮播套图 / 信息图？

不需要向用户展示分析结果，直接进入Step 2。

Read the content provided by the user, quickly extract:

Theme: What is this content about?
Core keywords: Which words/numbers need to be made into visual heroes?
Mood/tone: Suspense? Dry content? Warm? Shocking?
Number and type of images: Single cover / Carousel set / Infographic?

No need to show the analysis results to the user, go directly to Step 2.

Step 2: 设计提案 ✅ 必须等用户选择

Step 2: Design Proposal ✅ Must wait for user selection

这是整个流程最关键的一步。禁止跳过。

This is the most critical step of the entire process. Skipping is prohibited.

提案格式

Proposal Format

向用户展示 2-3个设计方向，每个方向包含：

undefined

Show 2-3 design directions to the user, each direction includes:

undefined

方向A：[风格名]

Direction A: [Style Name]

视觉风格：[一句话描述画面感，如"暖色笔记本纸张+毛笔书法大字+手绘小图标"]
色彩：[底色 + 主色 + 强调色]
文案布局：[哪些文字放大做hero、哪些做副标题、整体排列方式]
情绪：[用户看到后的第一感受]

undefined

Visual style: [One sentence describing the visual sense, e.g. "warm notebook paper + brush calligraphy large text + hand-drawn small icons"]
Color: [Background color + main color + accent color]
Copy layout: [Which text to enlarge as hero, which as subtitle, overall arrangement]
Mood: [First impression of users after seeing it]

undefined

提案原则

Proposal Principles

每个方向要有明确差异（风格、情绪、色彩至少有一个完全不同）
标注推荐（基于内容特征说明为什么推荐某个方向）
文案要具体（不是"标题放大"，而是「"28"做200px的hero元素，橙色强调」）
不要超过3个方向（选择太多反而难选）

Each direction has clear differences (at least one of style, mood, color is completely different)
Mark recommendations (explain why a direction is recommended based on content characteristics)
Copy should be specific (not "enlarge the title", but "the number '28' is a 200px hero element, emphasized with orange")
No more than 3 directions (too many choices make selection harder)

提案示例

Proposal Example

方向A：手绘笔记风（推荐）

视觉风格：奶油色方格纸底 + 毛笔书法大标题 + 手绘科技小图标

色彩：底色#FDF6EC + 主色#D97706（暖橙）+ 强调圈线

文案布局：「阿里C4楼」「来了一群广东人」撑满上半区做hero，「AI开源冠军」橙色高亮做视觉锚点，右下角「千问APP」印章

情绪：亲切、真实、像朋友分享内幕

方向B：暗金揭秘风

视觉风格：深色磨砂底 + 金色大字 + 徽章装饰

色彩：底色#1A1A1A + 主色#E2B714（金）+ 白色辅助

文案布局：「全球AI开源冠军」金色巨字撑满画面，上方「大厂内幕」金色徽章，下方副标题白色

情绪：震撼、内幕、有分量感

等用户选择后才进入 Step 3。 用户可能会：

直接选一个 → 进入生成
要求混合/调整 → 修改方向后再确认
都不满意 → 追问偏好后重新提案

Direction A: Handwritten note style (Recommended)

Visual style: Cream checkered paper background + brush calligraphy main title + hand-drawn technology small icons

Color: Background #FDF6EC + main color #D97706 (warm orange) + accent circle lines

Copy layout: "Alibaba C4 Building" and "A group of Cantonese people came" fill the upper half as hero, "AI Open Source Champion" is highlighted in orange as visual anchor, "Qianwen APP" seal at the bottom right corner

Mood: Friendly, real, like a friend sharing inside information

Direction B: Dark gold reveal style

Visual style: Dark frosted background + large gold text + badge decoration

Color: Background #1A1A1A + main color #E2B714 (gold) + white auxiliary

Copy layout: "Global AI Open Source Champion" giant gold text fills the screen, "Big Factory Inside Information" gold badge at the top, subtitle in white at the bottom

Mood: Shocking, inside information, sense of weight

Only enter Step 3 after the user makes a selection. Users may:

Select one directly → Enter generation
Request mixing/adjustment → Modify the direction and confirm again
Not satisfied with any → Ask for preferences and re-propose

Step 3: 生成图片

Step 3: Generate Images

构建 Prompt

Build Prompt

基于用户选择的方向，构建完整prompt。

Prompt 模板：

Create a [style] cover for a Xiaohongshu post. 3:4 portrait aspect ratio, 1080x1440 pixels, high quality rendering.

VISUAL STYLE: [从提案中的视觉风格描述展开]
COLOR PALETTE: [具体色彩描述]
TYPOGRAPHY: text fills most of the canvas, oversized bold typography, clear visual hierarchy.

TEXT TO RENDER:
- [主标题 — hero元素，视觉dominant]
- [副标题]
- [其他文字元素]

The word/number "[核心关键词]" is visually dominant, 3x larger than other text, with decorative emphasis.

IMPORTANT: Do NOT include any personal signature, watermark, or author name like "花生" or "花叔".

[1-2句画面情绪描述]

花叔偏好 Prompt 关键词（按需加入）：

文字大 →

text fills most of the canvas, oversized bold typography

核心强化 →

the word/number "XX" is visually dominant, 3x larger than other text, with decorative emphasis

手写体 →

handwritten style Chinese text / brush calligraphy lettering

纸张质感 →

warm cream paper texture with subtle grid lines, notebook page feel

结构清晰 →

clear visual hierarchy with distinct heading, subheading, and list levels

无署名 →

Do NOT include any personal signature, watermark, or author name

Based on the direction selected by the user, build a complete prompt.

Prompt Template:

Create a [style] cover for a Xiaohongshu post. 3:4 portrait aspect ratio, 1080x1440 pixels, high quality rendering.

VISUAL STYLE: [Expand from the visual style description in the proposal]
COLOR PALETTE: [Specific color description]
TYPOGRAPHY: text fills most of the canvas, oversized bold typography, clear visual hierarchy.

TEXT TO RENDER:
- [Main title — hero element, visually dominant]
- [Subtitle]
- [Other text elements]

The word/number "[core keyword]" is visually dominant, 3x larger than other text, with decorative emphasis.

IMPORTANT: Do NOT include any personal signature, watermark, or author name like "花生" or "花叔".

[1-2 sentences describing the mood of the image]

Uncle Hua preferred prompt keywords (add as needed):

Large text →

text fills most of the canvas, oversized bold typography

Core enhancement →

the word/number "XX" is visually dominant, 3x larger than other text, with decorative emphasis

Handwritten style →

handwritten style Chinese text / brush calligraphy lettering

Paper texture →

warm cream paper texture with subtle grid lines, notebook page feel

Clear structure →

clear visual hierarchy with distinct heading, subheading, and list levels

No signature →

Do NOT include any personal signature, watermark, or author name

两条生成路径（每次都出）

Two generation paths (output both every time)

路径	工具	优势	劣势	成本
AI生成	Gemini nano-banana-pro	质感好、有温度、视觉丰富	中文可能渲染错误	有API费用
HTML截图	Playwright	文字100%精确、零成本、可批量	偏平面、缺少质感	免费

每次两条路径都出，方便用户对比选择。 HTML零成本，可以每个方向多出几种变体（配色/布局），给用户更多选择空间。AI路径每个方向出1张即可。

Path	Tool	Advantages	Disadvantages	Cost
AI Generation	Gemini nano-banana-pro	Good texture, warm, rich visual	Chinese may be rendered incorrectly	API fee required
HTML Screenshot	Playwright	100% accurate text, zero cost, batch available	Relatively flat, lack of texture	Free

Output both paths every time for users to compare and choose. HTML is zero cost, you can generate more variants (color/layout) for each direction to give users more choices. Only 1 image per direction for AI path is enough.

文件组织规范（必遵守）

File organization specification (must comply)

多版本生成时，所有相关文件（png + html源文件）放在同一个子文件夹内：

文章所在目录/
├── 文章.md
└── [文章简称]-小红书配图/          ← 子文件夹
    ├── A-笔记风-AI.png
    ├── A1-笔记风-HTML-暖色.png
    ├── A1-笔记风-HTML-暖色.html
    ├── B-报纸风-AI.png
    └── ...

命名规则：

[方向字母][变体序号]-[风格中文名]-[路径AI/HTML]-[变体描述].png

方向字母：A/B/C（对应设计提案的方向）
AI路径无序号：
```
A-笔记风-AI.png
```

HTML变体带序号：

A1-笔记风-HTML-暖色.png

、

A2-笔记风-HTML-绿色.png

文件夹名用文章关键词：
```
[关键词]-小红书配图/
```

When generating multiple versions, all related files (png + html source files) are placed in the same subfolder:

Article directory/
├── article.md
└── [article abbreviation]-xiaohongshu-images/          ← Subfolder
    ├── A-note-style-AI.png
    ├── A1-note-style-HTML-warm.png
    ├── A1-note-style-HTML-warm.html
    ├── B-newspaper-style-AI.png
    └── ...

Naming convention:

[direction letter][variant number]-[Chinese style name]-[path AI/HTML]-[variant description].png

Direction letter: A/B/C (corresponding to the design proposal direction)
No serial number for AI path:
```
A-note-style-AI.png
```

HTML variants with serial number:

A1-note-style-HTML-warm.png

A2-note-style-HTML-green.png

Folder name uses article keywords:
```
[keyword]-xiaohongshu-images/
```

AI生成命令

AI generation command

bash

export $(grep GEMINI_API_KEY ~/.claude/.env) && \
uv run /Users/alchain/Documents/写作/.claude/skills/xhs-image/scripts/generate_image.py \
  --prompt "[完整prompt]" \
  --filename "[方向]-[风格]-AI.png" \
  --resolution 2K

生成后移动到配图子文件夹内。套图可并行生成（

run_in_background=true

）。

bash

export $(grep GEMINI_API_KEY ~/.claude/.env) && \
uv run /Users/alchain/Documents/写作/.claude/skills/xhs-image/scripts/generate_image.py \
  --prompt "[full prompt]" \
  --filename "[direction]-[style]-AI.png" \
  --resolution 2K

Move to the image subfolder after generation. Carousel images can be generated in parallel (

run_in_background=true

Step 4: 预览确认

Step 4: Preview Confirmation

浏览器预览（必做）

Browser preview (must do)

生成完成后，用

open

命令打开所有图片，方便用户并排对比：

bash

open "[图片路径1]" "[图片路径2]" "[图片路径3]"

After generation, open all images with the

open

command for users to compare side by side:

bash

open "[image path 1]" "[image path 2]" "[image path 3]"

内联预览

Inline preview

同时用 Read 工具在终端中展示生成结果。

基础检查项：

中文文字渲染正确吗？
比例是3:4竖版吗？
风格符合选定方向吗？
没有出现署名/水印吗？

At the same time, use the Read tool to display the generated results in the terminal.

Basic check items:

Is Chinese text rendered correctly?
Is the ratio 3:4 vertical?
Does the style match the selected direction?
Are there no signatures/watermarks?

设计审查（必做）

Design review (must do)

对每张图从两个维度评分（10分制），并给出优化方向：

维度	评判标准
设计评分	视觉层次、排版、色彩搭配、质感、创意
小红书吸引力	信息流中是否抢眼、文字是否够大、信息密度、情绪传达、是否引发好奇

审查输出格式：

每张图：综合评分 + 1句核心评价 + 1条优化方向
最后给出总结排名表，标注推荐
用户可自行决定是否采纳优化建议

用户反馈处理：

满意 → Step 5 上传
文字有误 → 该张改用HTML兜底渲染
风格不对 → 调整prompt重新生成
大改方向 → 回到Step 2重新提案

Score each image from two dimensions (10-point scale), and give optimization directions:

Dimension	Evaluation Criteria
Design Score	Visual hierarchy, typography, color matching, texture, creativity
Xiaohongshu Attractiveness	Whether it is eye-catching in the information flow, whether the text is large enough, information density, emotional transmission, whether it arouses curiosity

Review output format:

Each image: Comprehensive score + 1 core comment + 1 optimization direction
Finally give a summary ranking table, mark recommendations
Users can decide whether to adopt optimization suggestions by themselves

User feedback handling:

Satisfied → Step 5 Upload
Text error → Use HTML fallback to render this image
Wrong style → Adjust prompt and regenerate
Major direction change → Go back to Step 2 to re-propose

Step 5: 上传图床

Step 5: Upload to Image Hosting

bash

python3 /Users/alchain/Documents/写作/tools/upload_image.py "[图片路径]"

返回 ImgBB 永久链接。

bash

python3 /Users/alchain/Documents/写作/tools/upload_image.py "[image path]"

Return ImgBB permanent link.

HTML截图路径（AI文字渲染失败、精确数据表格、或用户要求对比时使用）

HTML Screenshot Path (used when AI text rendering fails, for precise data tables, or when users request comparison)

bash

npx playwright screenshot "file:///path/to/card.html" output.png \
  --viewport-size=1080,1440 --wait-for-timeout=1000

HTML模板要求：

画布：
```
width: 1080px; height: 1440px
```

字体：

font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif

安全区：上下各 80px、左右各 60px

bash

npx playwright screenshot "file:///path/to/card.html" output.png \
  --viewport-size=1080,1440 --wait-for-timeout=1000

HTML template requirements:

Canvas:
```
width: 1080px; height: 1440px
```

Font:

font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif

Safe area: 80px top and bottom, 60px left and right

快速参考

Quick Reference

中文文字渲染限制（AI路径）

Chinese text rendering limits (AI path)

主标题 ≤ 7 字
副标题 ≤ 15 字
正文每行 ≤ 20 字
必须逐张验证

Main title ≤ 7 characters
Subtitle ≤ 15 characters
Body text per line ≤ 20 characters
Must be verified one by one

花叔科技账号配色

Uncle Hua Technology Account Color Matching

方案名	底色	主色	强调色	适用
暖灰专业	#F5F0EB	#D97706	#4A90D9	AI工具、分享
极简专业	#F5F5F5	#4A90D9	#FF6B35	教程、对比
暗夜金	#1A1A2E	#E2B714	#FFFFFF	产品发布
终端绿	#1A1A1A	#00FF41	#888888	编程相关

Scheme Name	Background Color	Main Color	Accent Color	Applicable Scenarios
Warm Gray Professional	#F5F0EB	#D97706	#4A90D9	AI tools, sharing
Minimalist Professional	#F5F5F5	#4A90D9	#FF6B35	Tutorials, comparison
Dark Night Gold	#1A1A2E	#E2B714	#FFFFFF	Product release
Terminal Green	#1A1A1A	#00FF41	#888888	Programming related

Golden Rules

标题大、粗、醒目（占画面 30-50%）
核心数字/关键词做视觉强化（放大、变色、加装饰）
封面信息量大 → 引发好奇
套图风格统一
竖版 3:4，充分利用屏幕空间
不加署名/水印

Title is large, bold, eye-catching (occupies 30-50% of the screen)
Core numbers/keywords are visually enhanced (enlarge, change color, add decoration)
Cover has large amount of information → arouse curiosity
Carousel images have unified style
Vertical 3:4, make full use of screen space
No signature/watermark

Related Skills

Skill	作用
`wechat-image`	公众号配图（姊妹 skill）
`image-to-slides`	PPT 配图（风格库来源）

Skill	Function
`wechat-image`	Official Account supporting images (sister skill)
`image-to-slides`	PPT supporting images (style library source)

参考文件

Reference Files

```
references/style-gallery.md
```
— 完整风格库与 prompt 模板
```
references/design-guidelines.md
```
— 小红书平台设计规范

花叔出品 | AI Native Coder · 独立开发者公众号「花叔」| 30万+粉丝 | AI工具与效率提升代表作：小猫补光灯（AppStore付费榜Top1）·《一本书玩转DeepSeek》

```
references/style-gallery.md
```
— Complete style library and prompt template
```
references/design-guidelines.md
```
— Xiaohongshu platform design specifications

Produced by Uncle Hua | AI Native Coder · Independent Developer Official Account「花叔」| 300k+ followers | AI tools and efficiency improvement Representative works: 小猫补光灯 (Top 1 in AppStore paid list) · 《一本书玩转DeepSeek》

huashu-xhs-image

Original

Translation

小红书配图工作流

Xiaohongshu Image Workflow

⚠️ 核心原则：先提案，后生成

⚠️ Core Principle: Propose first, generate later

花叔设计审美画像

Uncle Hua Design Aesthetic Profile

喜欢的

Preferences

不喜欢的

Dislikes

验证过的好风格

Proven Good Styles

核心参数

Core Parameters

Step 1: 理解内容

Step 1: Understand the Content

Step 2: 设计提案 ✅ 必须等用户选择

Step 2: Design Proposal ✅ Must wait for user selection

提案格式

Proposal Format

方向A：[风格名]

Direction A: [Style Name]

提案原则

Proposal Principles

提案示例

Proposal Example

Step 3: 生成图片

Step 3: Generate Images

构建 Prompt

Build Prompt

两条生成路径（每次都出）

Two generation paths (output both every time)

文件组织规范（必遵守）

File organization specification (must comply)

AI生成命令

AI generation command

Step 4: 预览确认

Step 4: Preview Confirmation

浏览器预览（必做）

Browser preview (must do)

内联预览

Inline preview

设计审查（必做）

Design review (must do)

Step 5: 上传图床

Step 5: Upload to Image Hosting

HTML截图路径（AI文字渲染失败、精确数据表格、或用户要求对比时使用）

HTML Screenshot Path (used when AI text rendering fails, for precise data tables, or when users request comparison)

快速参考

Quick Reference

中文文字渲染限制（AI路径）

Chinese text rendering limits (AI path)

花叔科技账号配色

Uncle Hua Technology Account Color Matching

Golden Rules

Golden Rules

相关 Skills

Related Skills

参考文件

Reference Files