上周五看到小互发了一篇关于Claude Code更新的小绿书，看到他的信息图比较好看，整体描述的信息也比较准确，所以就想自己也去做一套这个东西。
因为现在人们的注意力是非常宝贵的东西，你去发了一些长文，可能有你很多的思考或者是说你觉得不错的一些点忍不住想分享给大家的，可能写的文章花了很大的心思去写一篇内容，后来发现并没有什么人关注。没有正向反馈。所以一个好的能吸睛并且能让人阅读更愉悦的内容还是非常有帮助的，好的一方面是现在的AI的能力完全可以去解决我们这部分实际在工作中遇到的问题。
使用 BANANA SLIDERS
只需要两步
把你所有的长文内容变成一系列的信息图或者插图，把你的原文输入到我们的输入框里边就可以。
( 使用导入链接，但是我还没有测试使用链接导入的效果)
然后点击生成方案，等一会儿，一整套的信息图包括你发布小红书、小绿书的一些简介文案标签都会自动生成。
同样跟以前的应用一样，没有做图片的自动生成，因为如果用 gemini 的话，成本会比较高，一张几毛钱，然后你需要哪个可以自己去生成，我每一张卡片都可以独立用单独的风格生成或者任意重试重新生成，如果不满意的话都可以重新生成，然后也可以统一选择风格一键生成，应用会根据顺序自己一张一张把所有的图片都生成，生成完了以后你可以一键下载，包括所有的图片都下载下来，也可以导出基于原稿的所有内容的markdown文件
切换到营销文案里面，我们可以看到AI生成的完整的标题和正文的详情，包括推荐的tag。如果你觉得整体生成的效果不好，或者是说有删减，可以直接重新基于大纲生成，大纲其实就是你所有生成的那些卡片里边的内容就导出文档里的东西，它会提取你的标题和内容然后综合发给模型去生成。
或者是基于原文重新生成，就是你输入的时候的原文。基于原文重新生成可能内容会更加丰富。
内置十几种风格模板
{ value: '', label: '使用默认风格', emoji: '✨' },
{ value: 'minimal', label: '极简风格', emoji: '◻️' },
{ value: 'tech', label: '科技风格', emoji: '🔮' },
{ value: 'warm', label: '温暖风格', emoji: '💛' },
{ value: 'business', label: '商务风格', emoji: '💼' },
{ value: 'creative', label: '创意风格', emoji: '🎨' },
{ value: 'kawaii', label: '可爱风格', emoji: '🌸' },
{ value: 'mono', label: '黑白风格', emoji: '◐' },
{ value: 'film', label: '胶片风格', emoji: '📷' },
{ value: 'dodocotton', label: '棉麻风格', emoji: '☁️' },
{ value: 'watercolor', label: '水彩风格', emoji: '🎨' },
{ value: 'glass', label: '玻璃风格', emoji: '🫧' },
{ value: 'allie_brosh', label: 'Allie漫画', emoji: '😜' },
{ value: 'sarah_andersen', label: 'Sarah涂鸦', emoji: '💬' },
{ value: 'mattias_adolfsson', label: '繁复幻想', emoji: '🔮' },
{ value: 'george_barbier', label: '装饰艺术', emoji: '✨' },
{ value: 'ivan_bilibin', label: '古典绘本', emoji: '📖' },一些风格预览：
功能设置
为了保证图片输出的质量和效果，配置里只允许使用 Gemini 模型生成图片。其他的所有的prompt包括风格变量全部可以自定义。
（详细的核心信息图配置和风格变量的基础原始prompt见末）
添加了自定义图片长宽比的设置，不同的长宽比可以来生成不同的内容，比如说PPT的配图，然后社交媒体的配图或者是文章内容里面的插图都可以
构建过程和思考
这个工具在自媒体的使用过程当中解决一些什么样的问题？曾经有哪些类似的尝试？
有一些长文内容比较多，或者是说有一些中等信息量，但它不是新闻的属性，也不需要用长文去把它说的很细，那有一些东西就可以使用AI生成信息图这种方式来分享，它是比较合适的。
这是其中一个用法，另外就是你写了长文以后，你如果是专门去配图，一个一个去调prompt出图的话就会很麻烦。
现在AI信息很多，知识也很多，我们的思考会比较慢，然后输出文章会变得更慢
所以我现在的流程会有基本完备的SOP:
- 1. 四个自动化的信息采集工具和预处理推荐工具
- 2. 五六个类似的小工具可以解决特定场景的需求，比如说调整格式，生成指定类型的内容
- 3. 一个更大的变化就是我们写的时候会很慢，那我现在主要的输出方式就是直接用麦克风说，说的时候其实直接转换或者识别有很多问题，一个是本身内容的识别和噪音的处理，另外一个是其实人说的时候他是很没有逻辑的，还有很多的语气词之类的东西，所以如果想让说的效果更好，首先我们要习惯说的思路，然后就是工具要有对应的能力来支持你的说的内容的整合，甚至是自动优化。试过几个工具，包括闪电说，微软自带的这些，现在是用的AutoGLM基本上可以满足需求，很快我就可以把一篇文章说出来。
- 4. 内容来有了以后你需要处理发布的东西：包括标题，摘要，配图。其实现在缺的是自动配图工具。因为标题，摘要可以用AI处理。内容可以说出来，或者根据之前写的文章让AI有策略地编写输出有价值内容。但配图这一部分原来 InkFlow 只能用已有图配。之前尝试的工具对生成插图没有详细要求。现在这个工具是更优选择，包括宝玉老师的文章插图也是用这种风格生成的整体阅读体验和信息获取效率会更高
现在在探索一些更多的可以在实际应用中应用起来的工具，并尝试可能在某一节点使用一些AI流程的工具把它串起来，比如说用n8n，或者 vibe codingagent 等等，会慢慢的迭代,有兴趣的可以关注公众号的： 自媒体进化论
初始创建这些功能的时候，创建这个应用的时候怎么去想的，然后具体的实行步骤是什么？
有了这个想法去实践具体的应用就非常简单，因为整个应用的核心其实就是一个prompt。最近我做了很多应用，其实它的核心都是一个prompt。
几乎你可以总结出来的或者有方法处理的东西都可以通过prompt，或者说Agent来解决。而且通常它的结果是会出乎意料的。
然后核心是一个prompt，如果是我真的把它当作自己的生产工具去使用的话，一般我会做几个设置：
- • 数据的导入导出，如果你不使用付费token的话，比如说我就在AS Studio上，我就每天都有免费的名额，我要发布的内容直接在AS Studio生成就可以了。但是呢，我需要保存数据这个事情很重要，所以几乎我在Gemini来做的工具都会有数据的导入和导出。
- • 还需要设置prompt，因为prompt几乎就决定了整个应用它的上限是什么级别的，所以你在实际应用当中是要经常迭代prompt的，所以这个是需要可以灵活设置的。然后还有一个就是我们涉及到一些数据的话，如果用local storage它的容量是特别小的，那一般我都会直接要求模型使用indexdb。
- • BYOK（bring your own key）：如果我想让它当做一个稍微长期一点的项目或经常使用的来用的话，我还需要设置让它使用BYOK的方式，这样一是可以设使用更多的模型，另外一个就是可以方便我直接把这个应用分享出来，大家可以用自己的key去使用它。
- • 主要设置项和形态随时可调： 这里边其实包含了prompt 因为它包含你对这个内容构建的要求和产出。另外包括一些核心的设置，比如说你如果是做图片的话：长宽比、内容布局类型、风格等，这些都需要是可调。所以在prompt一般我都会配置变量 而且这些变量都可以直接通过设置去设置去修改，这样最大化地让这个应用更灵活。
我构建应用的流程现在基本是这样的：
- 1. Gemini快速原型确定应用的使用方法流程，用户体验和基本框架
- 2. cloud code 或 cursor 细化 处理数据，甚至是重构核心逻辑让它稳定的运行
这个工具做出来准备怎么用，后面是如何规划的？
做完了这个工具，我会发现它其实可以适用于很多场景，不限于是只生成AI行业的，你可以输入任意长内容，然后让它生成信息图，这个信息图可以帮助我们快速获取关键信息，也更抓眼球一点，因为它分割模板的视觉可以有更多变化，然后它也不只是竖屏的，包括横屏的，你生成一些PPT演讲稿或者是说一些封面等等都可以。
因为应用本身是用BYOK的设计方法，所以我会在调整完这个应用以后在GitHub发布出来，那现阶段大家可以直接去Ai Studio查看这个第一阶段的项目，也可以直接去用，它是免费开源的。
项目地址： https://ai.studio/apps/drive/1MJ9V1YWJOHxJ75u_r8VLm70edKddqJtL?fullscreenApplet=true
做过的类似工具：
小报新闻自动筛选、生成卡片、文案：一个是基于我们原来社群的小报，原来的新闻卡不喜欢了。又做了生成那个小报的信息卡片，也是一张一张的，但是它主要以新闻为主，生成的方式其实是内容组合到一起，然后用把这张卡片渲染成图片。我们可以把单独的新闻生成一张张卡片，然后筛选一天有多张新闻的卡片，自动生成标题和内容，这样我就可以去发小红书、小黑书、小绿书分享个大家(以前应该也都见过，那个丑蓝色的渐变的)
另外一个是叫小红纸，也是用 AI studio 来做的，这个用过几次，但现在看来它很快就要被淘汰了吧？主要的内容是生成小红书小绿书的。图文内容排版其中包含自动生成一部分的配图，但是在配图的生成方面的prompt根本就没有限制，只需要与内容关联就可以了，没有那么多的风格要求。内容方面基本上是用程序排版而不是整个使用AI生成
还有一个我甚至都记不起名字了，它就是给你一篇文章，然后有两个选项，第一是调整格式，比如看格式的缩进啊，或者是内容的标题啊引用啊选择不合适，它可以调整格式。另外一个是重做内容，这两个选项。
然后它的主要功能呢是它会根据你的长文的内容去按你的重点内容点找到指定的位置的信息，然后根据对应部分的内容会插入两到三张插图，也可以更多啊，根据内容长度来。
这个有时候我会用，比如说我写了一篇长文章的分享，但是它可能不是一些应用或者一些什么东西，我没有截图或者我不想去用截图或者自己处理图片的方式生成，你可以直接把它丢到应用里边儿，然后就获取几张跟内容相关联的截图，然后插到对应的位置就可以了。
Prompt
信息图的prompt
// ============================================================
// 信息图模式 Prompt 模板
// ============================================================
export const DEFAULT_INFOGRAPHIC_OUTLINE_PROMPT = `---
name: Infographic Outline Generator
version: 1.0
---
你是一位专业信息图架构师。
## 任务目标
基于用户输入内容，设计一个信息图的结构大纲。
## 核心要求
1. **全中文输出**：所有输出内容必须是中文，包括标题、章节名、要点、描述等。
- 英文专有名词必须采用"中文翻译（English Original）"格式
- 禁止出现纯英文的句子或段落
2. **卡片数量控制**：3-8 张卡片（根据内容复杂度）
3. **竖屏优化**：每张卡片适合竖屏展示
4. **信息密度**：每张卡片包含丰富但清晰的内容
5. **章节结构**：如果有明确的章节划分，按章节组织
## 输出格式
返回严格的 JSON 对象：
\`\`\`json
{
"title": "信息图标题",
"styleInstruction": "整体视觉风格描述",
"summary": "整体简介",
"tableOfContents": ["第1章：标题", "第2章：标题", ...],
"chapters": [
{
"chapterNumber": 1,
"chapterTitle": "章节标题",
"keyPoints": ["核心要点1", "核心要点2", "核心要点3"] }
]}
\`\`\`
## 输入内容
{userInput}`;
export const DEFAULT_INFOGRAPHIC_DETAIL_PROMPT = `---
name: Infographic Detail Generator
version: 1.0
---
你是一位专业信息图设计师。
## 任务目标
基于提供的大纲，为每个章节生成详细的信息图卡片内容。
## 核心要求
1. **全中文输出**：所有输出内容必须是中文，包括标题、章节名、要点、描述等。
- 英文专有名词必须采用"中文翻译（English Original）"格式
- 禁止出现纯英文的句子或段落
2. **高密度内容**：每张卡片包含丰富的信息
- 关键定义/命题（1-2条）
- 核心要点（3-7条，详细展开）
- 步骤/流程/公式（如适用）
- 结论句/注意事项（1-2条）
2. **竖屏布局**：
- 顶部：章节标题 + 核心句
- 中部：2-5个纵向卡片（定义/要点/步骤/数据）
- 底部：高亮"本章最关键一句"
3. **信息图范式**（选择最适合的一种）：
- 竖向流程图（机制/步骤）
- 纵向卡片堆叠（定义→要点→注意）
- 竖向时间线（阶段/演进）
- 竖向指标卡（数据/指标）
- 竖向对照卡（两列对比）
## 输出格式
返回严格的 JSON 对象：
\`\`\`json
{
"slides": [
{
"pageNumber": 1,
"narrativeGoal": "章节标题",
"keyContent": "详细内容（关键定义、核心要点、步骤/流程、结论）",
"visual": "信息图范式描述（如：竖向流程图，展示...）",
"layout": "顶部标题区（章节+核心句）+ 中部卡片区（3-5张纵向卡片）+ 底部高亮区（关键句）"
}
]}
\`\`\`
## 大纲信息
**标题**: {title}
**风格**: {styleInstruction}
**章节大纲**:
{outline_chapters}
请为每个章节生成详细的信息图卡片内容。`;
export const INFOGRAPHIC_STYLE_HINTS = `设计要求：信息图风格，高密度竖屏优化，数据驱动可视化。`;17种风格模板的prompt
// 内置风格模板
export const STYLE_TEMPLATES = {
default: DEFAULT_STYLE_VARIABLES,
minimal: `Design Aesthetic: 极简主义风格。大量留白，元素精简，追求"少即是多"的设计哲学。
Background Color: 纯白 #FFFFFF
Primary Font: 无衬线字体
Secondary Font: 同系列字体
Color Palette:
Primary Text Color: 纯黑 #000000
Primary Accent Color: 灰色 #888888
Visual Elements: 极简线条、几何形状、大量留白。拒绝任何冗余装饰。`,
tech: `Design Aesthetic: 科技感风格。赛博朋克与未来主义结合，强调数字化和科技感。
Background Color: 深蓝黑 #0A0A1A
Primary Font: 等宽字体或科技感无衬线字体
Secondary Font: 同系列字体
Color Palette:
Primary Text Color: 亮青蓝 #00F0FF
Primary Accent Color: 霓虹粉 #FF00AA
Visual Elements: 发光线条、网格背景、数据可视化元素、渐变效果。`,
warm: `Design Aesthetic: 温暖手绘风格。亲切、富有启发性，带有明显的手绘触感。
Background Color: 柔和米白色 #F9F7F2，带有轻微的纸张纹理
Primary Font: 圆润字体（如圆体、手札体）
Secondary Font: 同样的圆润字体
Color Palette:
Primary Text Color: 深炭灰 #333333
Primary Accent Color: 活力珊瑚橘 #FF6B6B 和 亮粉蓝 #4ECDC4
Visual Elements: 手绘波浪线、不规则圆形圈注、涂鸦箭头、带有阴影和纹理的2D矢量插画。`,
business: `Design Aesthetic: 商务专业风格。稳重大气，适合正式场合和商业展示。
Background Color: 浅灰 #F0F2F5
Primary Font: 经典无衬线字体（如 Arial、Roboto）
Secondary Font: 同系列字体
Color Palette:
Primary Text Color: 深灰 #1A1A1A
Primary Accent Color: 商务蓝 #0052CC
Visual Elements: 简洁的数据图表、时间轴、信息图表。避免过度装饰。`,
creative: `Design Aesthetic: 创意波普风格。大胆、鲜艳、富有活力，适合创意展示。
Background Color: 明黄 #FFD700 或 亮粉 #FF6B6B
Primary Font: 粗壮的无衬线字体
Secondary Font: 同系列字体
Color Palette:
Primary Text Color: 纯白 #FFFFFF
Primary Accent Color: 荧光绿 #39FF14
Visual Elements: 大胆的色块碰撞、动态构图、夸张的排版、街头艺术风格。`,
kawaii: `Design Aesthetic: Minimalist kawaii doodle illustration, whimsical hand-drawn digital art style. Clean organic textured outlines, soft pastel watercolor gradients, high-key lighting, airy and healing atmosphere. Floating decorative accents including tiny stars, sparkles, and simple hearts. Centered composition with generous negative space.
Background Color: Soft cream white #FDF8F3 with subtle grainy paper texture
Primary Font: Rounded cute font like Nunito or Quicksand, bold for headings
Secondary Font: Same rounded font family, lighter weight for body text
Color Palette:
Primary Text Color: Warm charcoal gray #4A4A4A (avoid pure black)
Primary Accent Color: Soft coral pink #FFB7B2, mint green #B5EAD7, lavender #E0BBE4
Visual Elements: Hand-drawn doodle style, organic brush strokes, pastel watercolor effects, cute kawaii characters with rounded features, floating decorative elements (stars, hearts, sparkles), gentle shadows, paper texture overlay. No harsh edges or realistic photos.`,
mono: `Design Aesthetic: Mono-tone minimalist aesthetic. Single color dominance with subtle variations. Clean, modern, and sophisticated. Focus on typography and spacing.
Background Color: Light beige #FAFAF9 or soft gray #F5F5F4
Primary Font: Clean sans-serif (Inter, Helvetica Neue, or system fonts)
Secondary Font: Same font family, lighter weight
Color Palette:
Primary Text Color: Dark gray #1C1917
Primary Accent Color: Single accent color #57534E (warm gray) or #0EA5E9 (muted blue)
Visual Elements: Minimal geometric shapes, single color blocks, subtle shadows. Lots of negative space. Clean typography hierarchy. No gradients, no multiple accent colors.`,
film: `Design Aesthetic: Film photography aesthetic. Nostalgic, warm, with authentic film grain texture. Evokes memories and emotional connection.
Background Color: Warm off-white #FFF9F5 or faded beige #F5F0EB
Primary Font: Elegant serif (Times New Roman, Georgia) or soft sans-serif
Secondary Font: Same font family
Color Palette:
Primary Text Color: Warm brown #5D4E46 or soft black #2C2826
Primary Accent Color: Sepia tones #C4A484, faded orange #E8DCC8
Visual Elements: Film grain texture overlay, light leaks, vintage photo borders, dust particles, soft focus areas. Warm color grading with subtle vignette. Nostalgic and authentic feel.`,
dodocotton: `Design Aesthetic: Dodocotton style. Soft, cute, and cozy. Like a warm embrace. Extremely friendly and approachable visual language.
Background Color: Warm cream #FFFBF7 or soft peach #FFF5F0
Primary Font: Rounded, friendly fonts (Nunito, Quicksand, or rounded sans-serif)
Secondary Font: Same rounded font family
Color Palette:
Primary Text Color: Soft brown #6B5B4F or warm gray #7A7270
Primary Accent Color: Peach #FFDAB9, soft orange #FFB347, mint #B5EAD7
Visual Elements: Rounded corners everywhere, soft cloud shapes, cute blob motifs, hand-drawn style icons, simple line drawings with rounded ends. Warm and inviting atmosphere. No sharp edges.`,
watercolor: `Design Aesthetic: Hand-painted watercolor illustration style. Artistic, fluid, and organic. Soft edges with subtle color bleeding.
Background Color: Natural white #FFFFFF or soft cream #FAF8F5 with paper texture
Primary Font: Elegant serif (Cormorant Garamond, Baskerville) or soft brush font
Secondary Font: Same elegant font family
Color Palette:
Primary Text Color: Deep ink blue #2E4A62 or soft black #3A3A3A
Primary Accent Color: Watercolor wash effects in soft blue #A8C6D8, rose #E8B4B8, sage green #B8D4BE
Visual Elements: Watercolor brushstrokes, irregular edges, paint bleeding effects, soft gradients, visible paper grain. Artistic and painterly. No hard outlines.`,
glass: `Design Aesthetic: Glassmorphism / frosted glass aesthetic. Modern, translucent, and dimensional. Popular in contemporary UI design.
Background Color: Soft gradient backgrounds (lavender to pink or blue to teal)
Primary Font: Clean modern sans-serif (SF Pro, Inter, Roboto)
Secondary Font: Same font family
Color Palette:
Primary Text Color: White #FFFFFF or very light gray #F8FAFC
Primary Accent Color: White translucent overlays, subtle rainbow gradients
Visual Elements: Frosted glass effect with background blur, white semi-transparent borders, subtle inner glow, floating elements with shadows. Modern and sophisticated. Multi-layered depth.`,
allie_brosh: `Design Aesthetic: Hyper-expressive "crude" digital art. Intentional low-fidelity MS-Paint aesthetic with raw, jagged lines. High emotional energy, chaotic yet focused on character expressions. Wide-eyed, triangle-shaped characters with iconic exaggerated poses.
Background Color: Bright, flat primary colors or stark white #FFFFFF
Primary Font: Comic-style hand-drawn font like "Patrick Hand" or "Indie Flower"
Secondary Font: Simple clean sans-serif for high readability
Color Palette:
Primary Text Color: Solid Black #000000
Primary Accent Color: Neon Pink #FF00FF, Bright Yellow #FFFF00, or Lime Green #00FF00
Visual Elements: Simple geometric shapes for bodies, "wiggly" outlines, vibrant and unblended colors, high-contrast emotional depictions, minimalist backgrounds to emphasize the character's internal monologue.`,
sarah_andersen: `Design Aesthetic: Hand-drawn ink comic style (Sarah's Scribbles). Whimsical, relatable, and slightly messy. High contrast black-and-white ink work with occasional soft gray washes or single-color highlights. Thick, deliberate brush strokes.
Background Color: Clean White #FFFFFF or very light sketchbook paper texture
Primary Font: Handwritten comic font like "Coming Soon" or "Sniglet"
Secondary Font: Compact sans-serif for technical details
Color Palette:
Primary Text Color: Deep Ink Black #1A1A1A
Primary Accent Color: Soft Sky Blue #AED9E0 or Muted Rose #F2C6DE
Visual Elements: Iconic "messy bun" character, ink hatching for shadows, expressive "dot" eyes, organic and slightly shaky borders, focus on relatability and awkward charm.`,
mattias_adolfsson: `Design Aesthetic: Detailed whimsical ink and watercolor illustration. "Horror vacui" (fear of empty space) style filled with intricate mechanical parts, weird characters, and baroque-modern machinery. Fine fountain pen lines with soft, vintage watercolor washes.
Background Color: Aged parchment or warm cream #F2E8D5
Primary Font: Classic serif with character like "EB Garamond" or "Playfair Display"
Secondary Font: Elegant, thin monospaced font for annotations
Color Palette:
Primary Text Color: Sepia Brown #3D2B1F
Primary Accent Color: Terracotta #C05746 or Muted Sage Green #8B9474
Visual Elements: Dense crowds of objects, clockwork details, steampunk elements, fine-line cross-hatching, watercolor bleeds, playful perspective distortions, imaginative hybrid creatures.`,
george_barbier: `Design Aesthetic: Art Deco "Pochoir" illustration style. Rhythmic, stylized, and opulent. Features clean, sweeping silhouettes, bold patterns, and a sense of refined French luxury. Flat color planes with sophisticated, high-fashion compositions.
Background Color: Pale gold or elegant champagne #F7E7CE
Primary Font: Art Deco display font like "Broadway" or "Market Deco"
Secondary Font: High-contrast serif like "Bodoni 72"
Color Palette:
Primary Text Color: Midnight Blue #191970 or Deep Emerald #043927
Primary Accent Color: Metallic Gold #D4AF37 or Velvet Red #8A0707
Visual Elements: Ornate geometric patterns, stylized flora and fauna, exotic costumes, rhythmic line work, symmetrical layouts, high-fashion editorial feel from the 1920s.`,
ivan_bilibin: `Design Aesthetic: Slavic Folklore "Golden Age" illustration. Strong, precise black outlines with flat, matte color fills. Highly decorative borders (frames) within the slide. Art Nouveau influence with a medieval, mystical atmosphere.
Background Color: Antique paper texture #E6D5B8
Primary Font: Ornate, strong serif like "Almendra" or "Luminari"
Secondary Font: Classic bookish serif like "Crimson Text"
Color Palette:
Primary Text Color: Iron Black #2B2B2B
Primary Accent Color: Deep Russet Red #912F1B or Forest Green #223026
Visual Elements: Intricate decorative frames/borders, flat perspective, nature-inspired patterns (pine cones, birds, berries), woodcut-like precision, epic and theatrical compositions.`
};