New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Concept To Image

by Mathews-Tom in Mathews-Tom/armory

Turn concepts into static HTML visuals exported as PNG or SVG files via HTML/CSS/SVG.

MITAuto-check passedFrontend & Design

Install Concept To Image

skills CLI
$ npx skills add Mathews-Tom/armory --skill concept-to-image -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install Mathews-Tom/armory concept-to-image --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/Mathews-Tom/armory.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/concept-to-image .claude/skills/concept-to-image && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
concept-to-image
GitHub stars
329
Token cost
~2.6k tokens
SKILL.md length
1,086 words
Files
5 (incl. scripts, references, assets)
Skills in repo
80
Repo updated
First seen
Licence
MIT

At a glance

Turn concepts into static HTML visuals exported as PNG or SVG files via HTML/CSS/SVG.

  • Works in 4 steps: Interpret the concept → Design the HTML → Present and iterate → …
  • : create an image of
  • SKILL.md covers Reference Files, Why HTML as intermediate, Workflow and Step 1: Interpret the concept, plus 8 more sections
  • Runs Python scripts from its folder; calls python3, npx and pip

What it does

Concept To Image is an agent skill from Mathews-Tom/armory. Turn concepts into static HTML visuals exported as PNG or SVG files via HTML/CSS/SVG. Triggers on: "create an image of", "export as PNG", "save as SVG", "concept to image", "screenshot this HTML". NOT for interactive HTML, use static-web-artifacts-builder.

Its SKILL.md is about 2.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 8 other files, including scripts, reference files and assets (for example `evals/cases.yaml`, `references/design-guide.md` and `scripts/render_to_image.py`).

It sits in Frontend & Design, covering HTML artifacts. The repository describes itself as: Curated, production-grade skills for AI coding agents. Battle-tested workflows for developers who use AI seriously. The licence is MIT.

When your agent uses it

  • : create an image of
  • Concept to image
  • Screenshot this HTML

Example prompts

  • “create an image of”
  • “export as PNG”
  • “save as SVG”
  • “/concept-to-image”

Requirements

  • Python 3
  • Node.js

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. Interpret the concept
  2. Design the HTML
  3. Present and iterate
  4. Export to image

What it can do on your machine

Read from SKILL.md and the folder at commit 4594fb7. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/ (Python), which the agent can run.

    Shell commands in SKILL.md call:

    • python3
    • npx
    • pip
    • playwright

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx and pip, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Concept To Image loads about 2.6k tokens when it runs, and up to ~5k if it reads all its reference files. Until then it costs about 68 tokens; SKILL.md has 1,086 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~68
When it runs · the whole SKILL.md, loaded when a task matches
~2.6k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from Mathews-Tom/armory at commit 4594fb7, republished under its MIT licence (© Mathews-Tom). 1,086 words, ~2,634 tokens.

Download SKILL.mdSave it as .claude/skills/concept-to-image/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.
name
concept-to-image
description
Turn concepts into static HTML visuals exported as PNG or SVG files via HTML/CSS/SVG. Triggers on: "create an image of", "export as PNG", "save as SVG", "concept to image", "screenshot this HTML". NOT for interactive HTML, use static-web-artifacts-builder.
metadata.version
1.2.1
metadata.category
business
metadata.tags
image-generation, html-to-png, svg, visual-design
metadata.difficulty
intermediate

Concept to Image

Creates polished visuals from concepts using HTML/CSS/SVG as a refineable intermediate, then exports to PNG or SVG.

Reference Files

FilePurpose
references/design-guide.mdDesign patterns, anti-patterns, color palettes, typography choices, layout examples
scripts/render_to_image.pyPlaywright-based export script — takes HTML in, PNG or SVG out
assets/template.htmlBase HTML template with .canvas container and CSS custom properties pre-configured

Why HTML as intermediate

HTML is the refineable layer between idea and image. Unlike direct canvas rendering, the user can see the HTML artifact, request changes ("make the title bigger", "swap the colors", "add a third column"), and only export once satisfied. This makes the workflow iterative and controllable.

Workflow

text
Concept → HTML artifact (view + refine) → PNG or SVG export
  1. Interpret the user's concept — determine what kind of visual best fits (diagram, infographic, card, chart, etc.)
  2. Design a self-contained HTML file using inline CSS and inline SVG — zero external dependencies
  3. Present the HTML as an artifact so the user can preview and request refinements
  4. Iterate on the HTML based on user feedback (colors, layout, content, sizing)
  5. Export to PNG and/or SVG when the user is satisfied, using scripts/render_to_image.py

Step 1: Interpret the concept

Determine the best visual format:

User intentVisual formatApproach
Explain a process/flowFlowchart or pipeline diagramSVG paths + boxes
Compare itemsSide-by-side or matrixCSS Grid
Show hierarchyTree or layered diagramNested containers + SVG connectors
Present dataChart or infographicSVG shapes + data labels
Social/marketing graphicCard or posterTypography-forward HTML/CSS
Icon, logo, badgeCompact symbolPure SVG
Educational conceptAnnotated diagramSVG + positioned labels

Step 2: Design the HTML

Read references/design-guide.md for detailed design patterns and anti-patterns.

Core rules:

  • Single file, self-contained: All CSS inline in <style>, all graphics as inline <svg>. No external resources.
  • Fixed viewport: Set explicit width and height on the root container matching the intended export size. This is critical — Playwright screenshots the element at this exact size.
  • Anti-AI-slop: Avoid centered-everything layouts, purple gradients, uniform rounded corners, and Inter/system font defaults. See design guide for alternatives.
  • SVG-first for shapes: Use inline SVG for icons, connectors, shapes, and any element that should scale cleanly. CSS for layout and typography.
  • Color with intention: 3-4 hues max + neutrals. Define as CSS custom properties. Every color encodes meaning.
  • Start from the template: Use assets/template.html as the base structure.
Sizing guidelines
Use caseRecommended size
Social media graphic1200×630
Infographic (portrait)800×1200
Presentation slide1920×1080
Square post1080×1080
Icon/badge256×256 or 512×512
Wide diagram1600×900

Set the .canvas container to the chosen size. The export script captures this element.

Step 3: Present and iterate

Present the HTML file to the user. They'll see it rendered as an artifact. Common refinement requests:

  • Color/theme changes → update CSS custom properties
  • Layout adjustments → modify grid/flexbox
  • Content changes → edit text/SVG elements
  • Size changes → update .canvas dimensions

Each iteration is a quick HTML edit, not a full re-render. This is the key advantage over direct image generation.

Step 4: Export to image

Once the user is satisfied, run the export script:

bash
python3 scripts/render_to_image.py <input.html> <output.png|.svg> [--width 1200] [--height 630] [--scale 2] [--selector ".canvas"]
Parameters
ParamDefaultDescription
input(required)Path to HTML file
output(required)Output path. Extension determines format (.png or .svg)
--widthautoViewport width (overrides HTML-defined size)
--heightautoViewport height (overrides HTML-defined size)
--scale2Device scale factor for PNG (2 = retina quality)
--selector.canvasCSS selector for the element to capture
--full-pagefalseCapture the full page instead of a specific element
PNG export

Uses Playwright to launch headless Chromium and screenshot the .canvas element at the specified scale factor. Scale 2 produces retina-quality output (e.g., 1200×630 CSS pixels → 2400×1260 PNG ≈ 3.02 MP).

Opus 4.7 feedback loop: Retina-scale exports (e.g., 2400×1260) fit within Opus 4.7's ~3.75 MP vision ceiling, so you can feed the rendered PNG back to the model for iterate-by-critique loops without downsampling. Under Opus 4.6 these outputs would have been downscaled on ingestion.

Show full SKILL.md (456 more words)Show less
SVG export

Two strategies, chosen automatically:

  1. SVG-native content: If the .canvas element contains a single root <svg>, extracts it directly as a clean SVG file. This produces a true vector SVG.
  2. HTML-based content: If the content is CSS/HTML-heavy, falls back to PNG export with a note that true SVG requires SVG-native design. The script will warn and suggest redesigning with SVG elements if vector output is needed.
Delivering the output

Present the output file to the user. Always deliver both the HTML (for future editing) and the image (final output).

Error Handling

ErrorCauseResolution
playwright not foundPlaywright package not installedRun npx playwright install chromium or pip install playwright && playwright install chromium
Browser launch failureHeadless Chromium fails to startVerify --headless mode is supported; check available memory (Chromium needs ~200 MB)
.canvas selector not foundHTML does not contain an element matching .canvasVerify assets/template.html was used as the base; check the root container has class="canvas"
Render timeoutComplex HTML takes too long to render before screenshotIncrease the timeout via --timeout flag in the script, or simplify the HTML (reduce DOM depth, inline fewer SVGs)
SVG export falls back to PNG.canvas element contains HTML/CSS content, not a root SVGSee SVG export section; redesign with a single root <svg> if vector output is required

Limitations

  • Playwright + Chromium required — the export script cannot run without a working Chromium installation.
  • macOS and Linux only for headless browser export. Windows Subsystem for Linux works; native Windows Playwright may require separate setup.
  • SVG export is best-effort — complex HTML/CSS layouts fall back to PNG. True vector SVG requires a single root <svg> as the .canvas child.
  • Max viewport 4096×4096 — Chromium refuses screenshots larger than this. Use --scale to achieve higher effective resolution within this limit.
  • No animation support — exported images are static snapshots. CSS animations and JavaScript-driven transitions are frozen at their initial state.

Output Example

After a successful export, the script prints the output path and file stats:

text
Exported: concept-diagram.png
  Size:       2400 × 1260 px  (2× scale from 1200 × 630 canvas)
  File size:  ~180 KB
  Format:     PNG (RGBA)

Filename pattern follows whatever was passed as the output argument. Typical file sizes:

  • Simple diagrams (text + shapes): 80–200 KB
  • Dense infographics with gradients: 300–600 KB
  • Full 1920×1080 at 2× scale: 500 KB–1.5 MB

Design anti-patterns to avoid

These produce generic "AI-generated" looking output:

  • Centered everything with equal spacing
  • Purple/blue gradient backgrounds
  • Uniform border-radius on all elements
  • Generic icon libraries (use custom inline SVG)
  • System font stack without typographic intention
  • Drop shadows on everything
  • Low information density (too much whitespace)

Font handling

Since this environment has limited font access, use web-safe font stacks with intentional fallbacks:

  • Technical/mono: 'Courier New', 'Consolas', monospace
  • Clean sans: 'Helvetica Neue', 'Arial', sans-serif
  • Editorial serif: 'Georgia', 'Times New Roman', serif
  • Display: Use SVG text with custom paths for display typography when needed

© Mathews-Tom, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 4 other files (scripts, references, assets) in skills/concept-to-image of Mathews-Tom/armory.

  • SKILL.md
  • assets/template.html
  • evals/cases.yaml
  • references/design-guide.md
  • scripts/render_to_image.py

Open the folder on GitHubat commit 4594fb7

Compare with similar skills

Concept To Image next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Concept To Image compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Concept To Image this skillMathews-Tom/armory329—~2.6kAutomated safety check: PassMIT
LobeHub Interactive Prototypelobehub/lobehub83k—~1.6kAutomated safety check: PassCustom licence
Paperclip Pagepaperclipai/paperclip99k—~1kAutomated safety check: PassMIT
Openkb Deck NeonVectifyAI/OpenKB4.8k1 repos~4.3kAutomated safety check: PassApache-2.0
Webhome Homepage Builderwebhtv/webhtv1.7k—~3.8kAutomated safety check: PassGPL-3.0
Solo Artifactssolo-agent/solo698—~961Automated safety check: PassMIT

Similar skills

  • LobeHub Interactive Prototype

    lobehub/lobehub

    Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.

    83k GitHub stars~1.6k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Paperclip Page

    paperclipai/paperclip

    Publish static HTML pages and asset folders to the Paperclip S3/CloudFront page host.

    99k GitHub stars~1k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Openkb Deck Neon

    VectifyAI/OpenKB

    A skill your agent uses when the user asks the openkb chat to make a deck / slide presentation / PPT / slides / 演示稿 / 幻灯片 from their compiled KB content AND wants a dark, high-tech, neon / glow /…

    4.8k GitHub starsUsed in 1 repo~4.3k tokens
    Frontend & DesignAuto-check passed

  • Webhome Homepage Builder

    webhtv/webhtv

    Build, review, debug, reverse-engineer data sources for, and package FongMi/WebHome custom homepage single-file HTML.

    1.7k GitHub stars~3.8k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Solo Artifacts

    solo-agent/solo

    A skill your agent uses when a Solo task or thread should become an interactive, reviewable, self-contained HTML artifact for progress/status, review/decision, or comparison/leaderboard work inside…

    698 GitHub stars~961 tokensUpdated 27 days ago
    Frontend & DesignAuto-check passed

  • HTML

    plannotator/effective-html

    Create or redesign self-contained single-file HTML artifacts with a visual direction shaped by the user's brief, project, and subject.

    3.6k GitHub stars~1.6k tokensUpdated 25 days ago
    Frontend & DesignAuto-check passed

More from Mathews-Tom/armory

All 80 skills in this repo

  • Architecture Reviewer

    Mathews-Tom/armory

    Architecture reviews across 7 dimensions (structural, scalability, enterprise readiness, performance, security, ops, data) with scored reports.

    329 GitHub stars~4.6k tokensUpdated 4 days ago
    Auto-check passed

  • Watch

    Mathews-Tom/armory

    A skill your agent uses when analyzing an existing video URL or local recording: "watch this video", "analyze youtube video", "summarize this video", "youtube transcript", "find this moment", "what…

    329 GitHub stars~2.8k tokensUpdated 4 days ago
    Auto-check passed

  • Code Refiner

    Mathews-Tom/armory

    Deep code simplification and refactoring preserving behavior across Python, Go, TypeScript, Rust.

    329 GitHub stars~3.1k tokensUpdated 4 days ago
    Auto-check passed

  • Concept To Video

    Mathews-Tom/armory

    Turn concepts into animated explainer videos using Manim (Python) with MP4/GIF output, audio overlay, multi-scene composition.

    329 GitHub stars~4.9k tokensUpdated 4 days ago
    Auto-check passed

  • Decision Map

    Mathews-Tom/armory

    Maps the unresolved architecture, policy, and scope decisions that must be answered before planning can start: one durable decision ticket per question on the issue tracker, typed and blocker-linked…

    329 GitHub stars~2.7k tokensUpdated 4 days ago
    Auto-check passed

  • Handoff

    Mathews-Tom/armory

    Produces and refreshes .docs/handoff.md, a 200-line session-continuity runbook for coding agents.

    329 GitHub stars~1.7k tokensUpdated 4 days ago
    Auto-check passed

Categories

Questions about Concept To Image

What does Concept To Image do?

Turn concepts into static HTML visuals exported as PNG or SVG files via HTML/CSS/SVG. Concept To Image is an agent skill from Mathews-Tom/armory. Turn concepts into static HTML visuals exported as PNG or SVG files via HTML/CSS/SVG.

When should I use Concept To Image?

Concept To Image fits situations like: : create an image of; concept to image; screenshot this HTML.

How do I install Concept To Image in Claude Code?

Run `npx skills add Mathews-Tom/armory --skill concept-to-image -a claude-code`. Or copy the skill folder (skills/concept-to-image in Mathews-Tom/armory) into .claude/skills/concept-to-image in your project. Claude Code loads it when a task matches its description.

How do I install Concept To Image in Codex?

Run `npx skills add Mathews-Tom/armory --skill concept-to-image -a codex`. Or copy the skill folder (skills/concept-to-image in Mathews-Tom/armory) into .agents/skills/concept-to-image in your project. Codex loads it when a task matches its description.

Can I use Concept To Image in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Mathews-Tom/armory --skill concept-to-image -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/concept-to-image, .gemini/skills/concept-to-image, .github/skills/concept-to-image and .opencode/skills/concept-to-image in your project.

What does Concept To Image need to run?

Going by SKILL.md and its folder, Concept To Image needs Python for the scripts in its folder and the command-line tools its instructions call (python3, npx, pip and playwright). Our summary lists: Python 3; Node.js.

Does Concept To Image access the network?

SKILL.md contains no URLs. Its commands use npx and pip, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Concept To Image safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Concept To Image use?

Concept To Image is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Concept To Image use?

About 2.6k tokens (SKILL.md is roughly 11k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 2.4k tokens, read only when the agent opens those files.

What are the alternatives to Concept To Image?

Skills that share tags, products or a category with Concept To Image: LobeHub Interactive Prototype (lobehub/lobehub, 83k stars), Paperclip Page (paperclipai/paperclip, 99k stars), Openkb Deck Neon (VectifyAI/OpenKB, 4.8k stars) and Webhome Homepage Builder (webhtv/webhtv, 1.7k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Concept To Image?

Mathews-Tom (a GitHub user) maintains it in Mathews-Tom/armory, which has 329 GitHub stars. The repository holds 80 skills in this directory. The repository was last updated on October 6, 2026.

Source: Mathews-Tom/armory on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.