Web Image
用前端渲染生成图片 —— 不依赖模型的多模态能力，任何能写 HTML/CSS 的模型 (DeepSeek / Claude / Kimi / GPT 等) 都能用。 当用户要「生成/做/画一张图」且属于以下任意一种时使用：头像、图标、公众号封面、 OG 分享图、Banner/横幅、小红书封面、知识卡片、金句卡、代码片段图、数据卡、 功能发布图、对比图、步骤图、视频封面/缩略图、幻灯片单页、活动海报、名片、 二维码卡、配图、题图、缩略图、poster、cover、thumbnail、banner、avatar。 也用于：批量出多个尺寸/多平台的同一张图；把一段文字/数据/代码变成图； 给文章配图；做一套风格统一的系列图。 支持指定视觉风格，共 32 套：手绘/涂鸦/白板、黑板、水彩、拼贴/剪贴、博物图鉴、 瑞士国际主义、杂志编辑部、报纸、工程蓝图、档案手稿/打字机、包豪斯、装饰艺术 Art Deco、 双色印刷 Riso、粗野主义、孟菲斯、美漫波普、像素 8-bit、千禧 Y2K、蒸汽波、霓虹赛博朋克、 街头海报/喷漆、日式侘寂、中式水墨、国潮/新中式、终端 CLI、极光渐变、玻璃拟态、 奢侈品黑金、极简产品、电影海报、复古未来 70s、极简线条。 用户没指定时主动报 3~4 个候选让他选；说了库里没有的风格就按四步法拆成 token。 产出一个可预览的画板工作台页面，多种画幅并排展
Install
npx skills add whyubel1eve/web-image-skill --skill web-imagegit clone --depth 1 https://github.com/whyubel1eve/web-image-skill.git /tmp/web-image-skill
mkdir -p ~/.claude/skills
cp -r /tmp/web-image-skill/. ~/.claude/skills/web-imagePersonal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.
From the SKILL.md
# web-image · 用网页生成图片
**核心**：浏览器就是渲染引擎。用 HTML/CSS 精确描述画面，导出成真实像素的 PNG。
结果可复现、可微调、可版本管理，而且不需要模型有生图能力。
> 下文的 `$SKILL` 指本 skill 所在目录。Claude Code 下是 `~/.claude/skills/web-image`；
> 装在别处就替换成实际路径（也可以先 `export SKILL=<路径>` 再照抄命令）。
## 流程
### 1. 定尺寸
问清楚**发到哪**（公众号？小红书？X？做封面还是头像？），然后查 `references/formats.md` 取预设像素。
用户没说就默认 `og` 1200×630；说"多个平台"就并排出多张画板，不要做"通用图"。
### 2. 选场景配方
在 `references/scenes.md` 找对应场景，照它的**画面结构**和**文案字数上限**来。
文案先压到额度内，再排版——这一步决定了成图好不好看。
### 3. 定风格（这一步决定成图是"设计"还是"模板"）
**用户指定了风格** —— 在 `references/styles.md` 里按 slug 或别名对号入座，
照抄它的 token 和**签名手法**。签名手法是这套风格的辨识度所在，色值只是入场券，不能只换颜色。
每套还标了「常用画幅」——用户没指定尺寸时优先按它来，风格和画幅是配套的。
**用户没指定** —— 不要默认套一个，也不要报全表。从 `styles.md` 末尾的「推荐话术」里
挑 3~4 个跟他内容气质最近的，一句话一个报出去让他选。比如做技术内容就报
「工程蓝图 / 终端 / 瑞士国际主义 / 粗野主义」，做生活方式就报
「日式侘寂 / 杂志编辑部 / 档案手稿 / 中式水墨」。用户说"你看着办"再自己定。
**用户描述了一个库里没有的风格**（"像 A24 电影海报"、"我们品牌是这样的"）——
按 `styles.md` 末尾的四步法把参照物拆成 token：取 4 个色 / 定字体反差 / 找签名手法 / 定留白比例。
选定后照 `references/design.md` 实现：中文排版、构图、高级感技法、纹理配方都在那里，
最后对照文末的「AI 味清单」自查。
### 4. 生成工作台页面
```bash
mkdir -p out && cp $SKILL/assets/{studio.css,studio.js,export.js} out/
```
以 `assets/studio.html` 为骨架写 `out/index.html`：`:root` 里放主题变量，每张图一个 `.wi-card`。
**画板契约（不要改）**：
```html
<section class="wi-card" id="cover" data-w="1200" data-h="630" data-file="og-cover">
<div class="wi-head">
<span class="wi-name">OG 分享图</span>
<span class="wi-use">用于: 微信/Slack 链接预览</span>
</div>
<div class="wi-frame"><div class="board og">…画面…</div></div>
</section>
```Details
- Skill name
web-image- Repository
- whyubel1eve/web-image-skill
- License
- MIT
- Repo updated
- 21 August 2026
FAQ
What does the Web Image skill do?
用前端渲染生成图片 —— 不依赖模型的多模态能力，任何能写 HTML/CSS 的模型 (DeepSeek / Claude / Kimi / GPT 等) 都能用。 当用户要「生成/做/画一张图」且属于以下任意一种时使用：头像、图标、公众号封面、 OG 分享图、Banner/横幅、小红书封面、知识卡片、金句卡、代码片段图、数据卡、 功能发布图、对比图、步骤图、视频封面/缩略图、幻灯片单页、活动海报、名片、 二维码卡、配图、题图、缩略图、poster、cover、thumbnail、banner、avatar。 也用于：批量出多个尺寸/多平台的同一张图；把一段文字/数据/代码变成图； 给文章配图；做一套风格统一的系列图。 支持指定视觉风格，共 32 套：手绘/涂鸦/白板、黑板、水彩、拼贴/剪贴、博物图鉴、 瑞士国际主义、杂志编辑部、报纸、工程蓝图、档案手稿/打字机、包豪斯、装饰艺术 Art Deco、 双色印刷 Riso、粗野主义、孟菲斯、美漫波普、像素 8-bit、千禧 Y2K、蒸汽波、霓虹赛博朋克、 街头海报/喷漆、日式侘寂、中式水墨、国潮/新中式、终端 CLI、极光渐变、玻璃拟态、 奢侈品黑金、极简产品、电影海报、复古未来 70s、极简线条。 用户没指定时主动报 3~4 个候选让他选；说了库里没有的风格就按四步法拆成 token。 产出一个可预览的画板工作台页面，多种画幅并排展
How do I install the Web Image skill?
skills CLI (Claude Code, Cursor, Codex and more): npx skills add whyubel1eve/web-image-skill --skill web-image. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.
Is Web Image popular?
It lives in whyubel1eve/web-image-skill, which has 38 GitHub stars and 4 forks.
Related skills
Autopunk Media Skills
40ur-grue/autopunk-media-skills
394 production-tested Claude skills for media professionals — TV, journalism, YouTube, podcasts, screenwriting, newsletters, PR, and more
Nano Banana Image Skill
37Emily2040/nano-banana-image-skill
Model-aware image prompting for Nano Banana Pro and Nano Banana 2. Covers generation, editing, continuity, text-in-image, style routing, and structured JSON output.
Game Sensitivity Coach
40DenisSergeevitch/game-sensitivity-coach
Discover a gamer's mouse settings, transfer sensitivity between games, and refine aim from passive gameplay video and mouse logs. Use for mouse sensitivity calibration, scoped or ADS tuning, cm/360 conversion, or applying and restoring game sensitivity settings. The agent handles settings discovery, image review, and evidence logging; the gamer plays normally.
Midi Generation
37tubone24/midi-agent-skill
Generate MIDI files with GM instruments and music theory. Use when creating music, composing melodies, or generating MIDI files.
AI Avatar Video
36creatify-ai/ai-avatar-video
Complete AI avatar and talking-head video toolkit. Includes script writing for talking-head content, persona selection frameworks, multi-scene composition, voice/audio best practices, green screen techniques, and UGC-style authenticity guides. Integrates with Creatify API for AI Avatar v1/v2, Aurora, Text-to-Speech, Custom Avatars, and Voice Cloning. Use when: "avatar video", "talking head", "AI spokesperson", "lip sync", "UGC video", "Aurora", "text to speech", "voice clone", "AI presenter", "lipsync", "custom avatar", "green screen avatar", "AI narrator", "spokesperson video", "script for av
Youtube Learn
33dotanminh/youtube-learn-skill
Phân tích video (YouTube, LinkedIn, Facebook, X, TikTok) theo hướng Belief Archaeology, kết hợp Multimodal phân tích hình ảnh và thế giới quan của người nói.
Browse the most popular Claude skills, all images, video & audio skills, or write your own with the skills generator.