Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add aAAaqwq/AGI-Super-Team --skill code-to-imagegit clone --depth 1 https://github.com/aAAaqwq/AGI-Super-TeamWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/aaaaqwq/agi-super-team/code-to-image)<a href="https://agentmods.dev/skills/aaaaqwq/agi-super-team/code-to-image"><img src="https://agentmods.dev/badge/skills/aaaaqwq/agi-super-team/code-to-image.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00141 | $0.03039 |
| Opus 5 | $0.00071 | $0.01520 |
| Sonnet 5 | $0.00028 | $0.00608 |
| Haiku 4.5 | $0.00014 | $0.00304 |
Grade A, and why
code-to-image scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 272 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Code-to-Image · 代码生图
将前端设计代码渲染为高清图片——免费、无限分辨率、完全可控。
核心理念
HTML/CSS/JS/Canvas 设计稿 ──→ Playwright 无头渲染 ──→ 高清 PNG
↑ ↑ ↑
设计层 渲染层 输出层
frontend-design render.py 任意分辨率
canvas-design @1x/@2x/@4x PNG/JPEG/WebP
frontend-design-ultimate 全平台兼容 100%中文准确
为什么这个方案最强
| Code-to-Image 🆓 | AI API 生图 💰 | |
|---|---|---|
| 费用 | $0 永久免费 | $0.02-0.10/张 |
| 分辨率 | 任意 (4K/8K/16K) | 通常 ≤2K |
| 中文文字 | 100% 准确 | 经常乱码/糊掉 |
| 品牌一致性 | 代码保证 | 每次随机 |
| 批量生成 | 无限，改参数即可 | API 限流 |
| 可复现性 | Git 版本管理 | 不可复现 |
| 灵活性 | HTML/CSS/JS/Canvas/SVG | 纯提示词 |
| 本地运行 | ✅ 无需网络 | ❌ 需API |
前置依赖
pip install playwright && playwright install chromium
默认风格：Editorial 杂志风
Daniel 选定，所有封面默认此风格。
特征：衬线体(Noto Serif SC) · 米白底(#faf8f5) · 红色强调(#dc2626) · 左侧8px彩条 适用：公众号封面 · 知乎头图 · 知识星球 · 内容型产品
# 基于模板快速生成
cp ~/.openclaw/skills/code-to-image/templates/editorial.html cover.html
# 编辑 cover.html 中的标题、副标题、数据
# 渲染
python3 ~/.openclaw/skills/code-to-image/render.py cover.html -o output.png -w 1080 --height 1440 --scale 2
顶尖风格模板库（15款）
| # | 风格 | 审美来源 | 主色调 | 感觉 | 适合 |
|---|---|---|---|---|---|
| 1 | Editorial ✅默认 | 财新/三联 | 米白+红黑 | 权威深度 | 公众号/知乎 |
| 2 | Monocle | FT Weekend | 三文鱼粉+棕 | 精致知识分子 | 经济/商业 |
| 3 | Art Deco | 1920s Gatsby | 金+藏蓝 | 奢华权威 | 重大事件 |
| 4 | Zen 侘寂 | 日本美学 | 纸白+柿子红 | 禅意克制 | 深度思考 |
| 5 | Blueprint | 工程图纸 | 深蓝+Cyan | 技术精密 | 硬核科技 |
| 6 | Swiss | 瑞士国际主义 | 白+青蓝几何 | 干净高端 | 品牌/官网 |
| 7 | Kinfolk | 慢生活杂志 | 暖棕+奶油 | 自然呼吸 | 人文/生活 |
| 8 | Cinematic | A24电影 | 黑+胶片颗粒 | 电影级氛围 | 重磅专题 |
| 9 | Hermès | 爱马仕 | 橙+奶油白 | 极致克制 | 高端品牌 |
| 10 | MIT Tech Review | MIT科技评论 | 白+红顶条 | 学术权威 | 科技分析 |
| 11 | WIRED | WIRED杂志 | 黑+霓虹黄 | 前卫科技 | 科技媒体 |
| 12 | Paper & Ink | 文学期刊 | 暖奶油+深红 | 印刷厚重 | 长文/文学 |
| 13 | Dark Botanical | 当代画廊 | 黑+粉金赤陶 | 优雅艺术 | 高端品牌 |
| 14 | Notebook | Moleskine | 灰底+彩标签 | 触感手工 | 知识/工具 |
| 15 | Apple | Apple.com | 灰白+蓝 | 极致简洁 | 品牌/产品 |
What ships with it
16 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- render.py 4.5 KB runs code
- templates/apple.html 2.2 KB
- templates/art-deco.html 3.5 KB
- templates/blueprint.html 3.3 KB
- templates/cinematic.html 3.0 KB
- templates/dark-botanical.html 2.8 KB
- templates/editorial.html 2.8 KB
- templates/hermes.html 2.1 KB
- templates/kinfolk.html 2.2 KB
- templates/mit-tech-review.html 2.6 KB
- templates/monocle.html 2.2 KB
- templates/notebook.html 3.0 KB
- templates/paper-ink.html 3.1 KB
- templates/swiss.html 3.3 KB
- templates/wired.html 3.2 KB
- templates/zen.html 3.4 KB
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 2d ago First seen · 272 lines · 141 tokens per session scan A 20ea099cff9d
code-to-image is a skill published in the GitHub repository aAAaqwq/AGI-Super-Team (91 stars, last pushed 3d ago), licensed MIT. It adds 141 tokens to every session and 3,039 once invoked, about $0.0007 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-05.
Other skills, from other repositories
fidelity-gate
Build a UI against a frozen visual reference without drift - an inventory extracted before any code, a relics list, and a gate that MEASURES computed styles on a fixture carrying the reference's own data. Use when a mockup, design spec or screenshot is the contract.
html-canvas
Build rich, polished SINGLE-FILE HTML deliverables — explainers, reference pages, concept/architecture visualizations, use-case kits, multi-section documents — with a light/dark theme toggle, a DE/EN language toggle, tasteful animations, and DESIGN.md-driven tokens, all offline with zero dependencies. Use whenever the…
threejs
Build immersive 3D web experiences with Three.js - WebGL/WebGPU library for scenes, cameras, geometries, materials, lights, animations, loaders, post-processing, shaders (including node-based TSL), compute, physics, VR/XR, and advanced rendering. Use when creating 3D visualizations, games, interactive graphics, data…
image-taste-frontend
Elite frontend image-direction skill for generating premium, artistic, implementation-friendly website design references. Uses combinatorial variation to avoid repetitive AI aesthetics, enforces cinematic hero minimalism, strong hierarchy, generous spacing, image-led composition, and anti-slop visual discipline. For…
designing-responsive-experiences
Use when designing responsive experiences within ux lifecycle boundaries, especially when does the artifact make the owned decision for designing responsive experiences explicit and bounded?.
designing-interaction-contracts
Use when specify complete user-system behavior across states, errors, latency, permissions, recovery, and accessibility, especially when is every asynchronous action observable and recoverable?.