visual-content
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseContent: Visual Content
内容：视觉内容
Guides visual content planning and creation across website, social media, email, and other channels. Images are needed not just for websites—social posts, infographics, and repurposed content all require visuals. Visual-first planning in content calendars improves engagement; cross-channel consistency and repurposing maximize ROI.
When invoking: On first use, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.
指导跨网站、社交媒体、电子邮件及其他渠道的视觉内容规划与创建工作。图片并非仅适用于网站——社交帖子、信息图以及复用内容都需要视觉素材。在内容日历中采用视觉优先的规划方式能提升用户参与度；跨渠道的一致性与内容复用则能最大化投资回报率。
调用时机：首次使用时，如有必要，先以1-2句话说明本技能的覆盖范围及其重要性，再提供核心输出内容。后续使用或用户要求跳过介绍时，直接输出核心内容。
Scope
适用范围
- When to use images: By content type and format
- Specs by context: Website vs social vs email
- Platform image specs: X, LinkedIn, Pinterest, Instagram, Facebook, YouTube
- Repurposing: One visual → multiple formats and channels
- Visual-first planning: Content calendar with image planning
- 图片使用场景：按内容类型与格式划分
- 场景化规格：网站、社交平台、电子邮件的不同要求
- 平台图片规格：X、LinkedIn、Pinterest、Instagram、Facebook、YouTube
- 内容复用：单一视觉素材适配多格式与多渠道
- 视觉优先规划：融入图片规划的内容日历
Initial Assessment
初始评估
Check for product marketing context first: If or exists, read Section 12 (Visual Identity) for brand consistency.
.claude/product-marketing-context.md.cursor/product-marketing-context.mdIdentify:
- Context: Article, social post, infographic, email, landing page
- Channels: Which platforms will use this visual
- Repurposing: Will this visual be adapted for other formats?
优先检查产品营销上下文：若存在或文件，请阅读第12节（视觉标识）以确保品牌一致性。
.claude/product-marketing-context.md.cursor/product-marketing-context.md明确以下信息：
- 内容场景：文章、社交帖子、信息图、电子邮件、着陆页
- 投放渠道：视觉素材将用于哪些平台
- 复用需求：该视觉素材是否需要适配其他格式？
1. When to Use Images
1. 图片使用场景
| Content Type | Visual Need | Notes |
|---|---|---|
| Article / Blog | Hero image, in-article images, screenshots | See image-optimization for web (alt, WebP, LCP) |
| Social post | Single image, carousel, or link preview | Platform-specific specs below |
| Infographic | Primary format; data visualization | Repurpose to social (cropped), blog (full) |
| Case study | Customer photo, results chart, logo | Repurpose to LinkedIn carousel, blog |
| Product update | Screenshot, feature graphic | Changelog, email, social |
| Header image, inline graphics | Keep lightweight; many clients block images | |
| Landing page | Hero, trust badges, screenshots | See hero-generator, image-optimization |
| 内容类型 | 视觉需求 | 说明 |
|---|---|---|
| 文章/博客 | 首图、文中配图、截图 | 参考image-optimization技能进行网页端优化（替代文本、WebP格式、LCP优化） |
| 社交帖子 | 单图、轮播图或链接预览图 | 详见下方平台专属规格 |
| 信息图 | 核心呈现形式；数据可视化 | 可复用为社交平台裁剪版、博客完整版 |
| 案例研究 | 客户照片、成果图表、品牌标识 | 可复用为LinkedIn轮播图、博客素材 |
| 产品更新 | 功能截图、特性图 | 用于更新日志、电子邮件、社交平台 |
| 电子邮件 | 头部图片、嵌入式图形 | 保持轻量化；多数邮件客户端会拦截图片 |
| 着陆页 | 首图、信任徽章、截图 | 参考hero-generator、image-optimization技能 |
2. Website vs Social vs Email
2. 网站、社交平台与电子邮件的差异
| Context | Priority | Skill |
|---|---|---|
| Website | Alt text, WebP, LCP, responsive, lazy loading | image-optimization |
| Social posts | Platform dimensions, aspect ratio, file size | Platform skills (X, LinkedIn, Pinterest, etc.) |
| OG / Twitter Cards | 1200×630, 1200×675 for link previews | open-graph, twitter-cards |
| Inline-friendly; avoid heavy images; alt for blocked | email-marketing |
| 场景 | 优先级 | 关联技能 |
|---|---|---|
| 网站 | 替代文本、WebP格式、LCP优化、响应式、懒加载 | image-optimization |
| 社交帖子 | 平台尺寸、宽高比、文件大小 | 平台专属技能（X、LinkedIn、Pinterest等） |
| OG/Twitter卡片 | 1200×630（通用）、1200×675（链接预览） | open-graph、twitter-cards |
| 电子邮件 | 适配嵌入式展示；避免大尺寸图片；添加替代文本应对拦截 | email-marketing |
3. Platform Image Specs (Social)
3. 社交平台图片规格
| Platform | Post Image | Stories / Reels | Profile | Notes |
|---|---|---|---|---|
| X (Twitter) | 1200×675 (16:9), 800×800 | — | 400×400 | See twitter-x-posts |
| 1200×627, 1200×1200; carousel up to 20 | — | 400×400 | See linkedin-posts; vertical preferred on mobile | |
| 1000×1500 (2:3) | — | 165×165 | Alt text ~25% more impressions; see pinterest-posts | |
| 1080×1350 (4:5), 1080×1080 | 1080×1920 (9:16) | 320×320 | 4:5 outperforms square on feed | |
| 1200×630, 1080×1080 | 1080×1920 | 320×320 | ||
| YouTube | Thumbnail 1280×720 | — | 800×800 |
General: 1080px width works across most platforms; vertical (4:5, 9:16) outperforms square on mobile-first feeds. Keep critical elements (logo, text) in safe center—platforms may crop.
| 平台 | 帖子配图 | 快拍/短视频封面 | 头像 | 说明 |
|---|---|---|---|---|
| X (Twitter) | 1200×675（16:9）、800×800 | — | 400×400 | 参考twitter-x-posts技能 |
| 1200×627、1200×1200；轮播图最多20张 | — | 400×400 | 参考linkedin-posts技能；移动端优先竖版格式 | |
| 1000×1500（2:3） | — | 165×165 | 添加替代文本可提升约25%曝光量；参考pinterest-posts技能 | |
| 1080×1350（4:5）、1080×1080 | 1080×1920（9:16） | 320×320 | 4:5格式在动态流中的表现优于正方形 | |
| 1200×630、1080×1080 | 1080×1920 | 320×320 | ||
| YouTube | 缩略图1280×720 | — | 800×800 |
通用规则：1080px宽度适配多数平台；竖版格式（4:5、9:16）在移动端优先的动态流中表现更优。将关键元素（品牌标识、文字）放置在安全居中区域——平台可能会对图片进行裁剪。
4. Visual Repurposing
4. 视觉内容复用
Principle: One core visual → multiple crops/formats → multiple channels.
| Core Visual | Adaptations | Channels |
|---|---|---|
| Infographic | Full (blog), cropped sections (Instagram, LinkedIn carousel), square (X) | Blog, LinkedIn, Instagram, X |
| Case study graphic | Hero (blog), single slide (LinkedIn), story (Instagram) | Blog, LinkedIn, Instagram |
| Product screenshot | Hero (landing), post (X, LinkedIn), email header | Website, social, email |
| Quote graphic | Square (X, LinkedIn), 4:5 (Instagram) | X, LinkedIn, Instagram |
Workflow: Design at largest needed size; export platform-specific crops. Use consistent colors, fonts, logo placement (see brand-visual-generator).
核心原则：单一核心视觉素材 → 多尺寸/多格式适配 → 多渠道投放
| 核心视觉素材 | 适配形式 | 投放渠道 |
|---|---|---|
| 信息图 | 完整版（博客）、裁剪分段版（Instagram、LinkedIn轮播图）、正方形版（X） | 博客、LinkedIn、Instagram、X |
| 案例研究图表 | 首图（博客）、单页版（LinkedIn）、快拍版（Instagram） | 博客、LinkedIn、Instagram |
| 产品截图 | 首图（着陆页）、帖子配图（X、LinkedIn）、邮件头部图 | 网站、社交平台、电子邮件 |
| 语录图 | 正方形版（X、LinkedIn）、4:5版（Instagram） | X、LinkedIn、Instagram |
工作流程：按所需最大尺寸设计素材；导出适配各平台的裁剪版本。使用统一的色彩、字体、品牌标识放置位置（参考brand-visual-generator技能）。
5. Visual-First Content Planning
5. 视觉优先的内容规划
- Plan images in content calendar: Don't add visuals as afterthought; visuals drive engagement
- Batch by theme: Create visuals for a topic cluster or campaign together for consistency
- Repurposing column: In calendar, note which core piece becomes which visual format for which channel
- Asset library: Organize by campaign/theme; tag for reuse
- 在内容日历中规划图片：不要将视觉素材作为事后补充；视觉内容是提升用户参与度的关键
- 按主题批量创作：为主题集群或营销活动批量创建视觉素材，确保一致性
- 复用规划列：在日历中注明核心素材将适配为哪些视觉格式、投放至哪些渠道
- 素材库管理：按营销活动/主题分类整理；添加标签便于复用
6. Format-Specific Notes
6. 格式专属说明
Infographics
信息图
- Dimensions: 800–1200px width; height varies by content
- Export: PNG for web; PDF for download
- Repurpose: Slice into 3–5 slides for LinkedIn carousel; single stat for X/Instagram
- 尺寸：宽度800–1200px；高度随内容调整
- 导出格式：网页端用PNG；下载版用PDF
- 复用方式：切割为3–5页作为LinkedIn轮播图；提取单个数据点作为X/Instagram素材
Social Post Images
社交帖子配图
- Text overlay: Keep minimal; many platforms deprecate text-heavy images
- Branding: Logo in corner; consistent with brand-visual-generator
- Alt text: Add for LinkedIn, Pinterest, X (accessibility + Pinterest SEO)
- 文字叠加：尽量精简；多数平台会降低文字密集型图片的曝光量
- 品牌标识：放置在角落；与brand-visual-generator技能保持一致
- 替代文本：为LinkedIn、Pinterest、X添加替代文本（兼顾无障碍访问与Pinterest SEO）
Article / Blog Images
文章/博客配图
- Hero: Often LCP candidate; optimize per image-optimization
- In-article: Support narrative; alt text descriptive
- Screenshots: Annotate when helpful; keep file size low
- 首图：通常是LCP核心元素；按image-optimization技能要求优化
- 文中配图：辅助叙事；替代文本需具备描述性
- 截图：必要时添加标注；控制文件大小
Output Format
输出格式
- Visual plan (what images for what content)
- Specs by context (platform dimensions, format)
- Repurposing map (one visual → multiple outputs)
- References to platform skills and image-optimization
- 视觉规划方案（对应内容所需的图片类型）
- 场景化规格（平台尺寸、格式要求）
- 复用映射表（单一视觉素材的多渠道适配方案）
- 关联技能参考（平台专属技能与image-optimization技能）
Related Skills
关联技能
Content & Strategy
内容与策略
- content-marketing: Content types, formats, repurposing; visual content is part of content mix
- content-strategy: SEO topic clusters; article visuals
- copywriting: Copy pairs with visuals; headlines for image posts
- content-marketing：内容类型、格式、复用；视觉内容是内容矩阵的一部分
- content-strategy：SEO主题集群；文章配图规划
- copywriting：文案与视觉素材搭配；配图帖子的标题创作
Platform (Image Specs)
平台（图片规格）
- twitter-x-posts: X post image specs
- linkedin-posts: LinkedIn image specs
- pinterest-posts: Pinterest Pin dimensions, alt text
- reddit-posts: Reddit image post context
- twitter-x-posts：X平台帖子配图规格
- linkedin-posts：LinkedIn平台帖子配图规格
- pinterest-posts：Pinterest平台Pin图尺寸、替代文本要求
- reddit-posts：Reddit平台帖子配图场景
Website & SEO
网站与SEO
- image-optimization: Web images (alt, WebP, LCP, responsive)
- open-graph, twitter-cards: Link preview images
- hero-generator: Hero section visuals
- image-optimization：网页图片优化（替代文本、WebP格式、LCP优化、响应式）
- open-graph, twitter-cards：链接预览图片设置
- hero-generator：首图区域视觉素材生成
Other
其他
- brand-visual-generator: Typography, colors, imagery tone; visual consistency
- video-marketing: Video thumbnails; video as visual format
- customer-stories-page-generator: Case study visuals
- brand-visual-generator：字体、色彩、视觉风格；品牌一致性保障
- video-marketing：视频缩略图；视频作为视觉呈现形式
- customer-stories-page-generator：案例研究视觉素材