Imagen
sanjay3290/ai-skills
Generate images using Google Gemini's image generation capabilities.
Explore UI and visual design with image generation, then iterate the real implementation against the user-selected concept.
Install Design With Images
$ npx skills add dzhng/skills --skill design-with-images -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install dzhng/skills design-with-images --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/dzhng/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/visual/design-with-images .claude/skills/design-with-images && rm -rf skills-srcUse ~/.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/
Install the "design-with-images" agent skill from https://github.com/dzhng/skills/tree/main/skills/visual/design-with-images into .claude/skills/design-with-images/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-with-images", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/dzhng/skills/tree/main/skills/visual/design-with-imagesType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add dzhng/skills --skill design-with-images -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install dzhng/skills design-with-images --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/dzhng/skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/visual/design-with-images .agents/skills/design-with-images && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "design-with-images" agent skill from https://github.com/dzhng/skills/tree/main/skills/visual/design-with-images into .agents/skills/design-with-images/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-with-images", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add dzhng/skills --skill design-with-images -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install dzhng/skills design-with-images --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/dzhng/skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/visual/design-with-images .cursor/skills/design-with-images && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "design-with-images" agent skill from https://github.com/dzhng/skills/tree/main/skills/visual/design-with-images into .cursor/skills/design-with-images/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-with-images", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/dzhng/skills.git --path skills/visual/design-with-images--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add dzhng/skills --skill design-with-images -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install dzhng/skills design-with-images --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/dzhng/skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/visual/design-with-images .gemini/skills/design-with-images && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "design-with-images" agent skill from https://github.com/dzhng/skills/tree/main/skills/visual/design-with-images into .gemini/skills/design-with-images/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-with-images", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install dzhng/skills design-with-imagesInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add dzhng/skills --skill design-with-images -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/dzhng/skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/visual/design-with-images .github/skills/design-with-images && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "design-with-images" agent skill from https://github.com/dzhng/skills/tree/main/skills/visual/design-with-images into .github/skills/design-with-images/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-with-images", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add dzhng/skills --skill design-with-images -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install dzhng/skills design-with-images --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/dzhng/skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/visual/design-with-images .opencode/skills/design-with-images && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "design-with-images" agent skill from https://github.com/dzhng/skills/tree/main/skills/visual/design-with-images into .opencode/skills/design-with-images/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-with-images", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
design-with-images- GitHub stars
- 1k
- Token cost
- ~1.1k tokens
- SKILL.md length
- 542 words
- Files
- 1
- Skills in repo
- 27
- Repo updated
- First seen
- Licence
- MIT
At a glance
Explore UI and visual design with image generation, then iterate the real implementation against the user-selected concept.
- Works in 6 steps: Frame the decision. Read the relevant… → Generate alternatives. Use the available… → Freeze the chosen target. Use an… → …
- Brainstorming visual directions
- SKILL.md covers Workflow and Rules
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Design With Images is an agent skill from dzhng/skills. Explore UI and visual design with image generation, then iterate the real implementation against the user-selected concept. Use when brainstorming visual directions, offering mockup variants, or implementing an approved generated design; do not stop at the mockups or the first code approximation.
Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Media & Creative, covering Image generation, UI design and Brainstorming. The repository describes itself as: Reusable AI agent skills for software factories: explore ideas, write specs, implement, review, and run autonomous research. Works with Claude Code, Codex, and other… The licence is MIT.
When your agent uses it
- Brainstorming visual directions
- Offering mockup variants
- Implementing an approved generated design
- Do not stop at the mockups
Example prompts
- “/design-with-images”
Workflow steps
6 steps, taken from the first numbered list in SKILL.md.
- Frame the decision. Read the relevant design skill and capture the actual
- Generate alternatives. Use the available image-generation skill/tool with
- Freeze the chosen target. Use an existing approval or delegated design discretion; otherwise obtain
- Implement the design. Use the project's real components and visual
- Compare and iterate. Capture the real implementation at comparable scale,
- Verify and hand over. Check the real design in its relevant states and
What it can do on your machine
Read from SKILL.md and the folder at commit d513228. 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
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
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
Design With Images loads about 1.1k tokens when it runs. Until then it costs about 79 tokens; SKILL.md has 542 words of instructions outside code blocks.
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); files beside SKILL.md are not scanned.
SKILL.md
The full file from dzhng/skills at commit d513228, republished under its MIT licence (© dzhng). 542 words, ~1,121 tokens.
Download SKILL.mdSave it as
.claude/skills/design-with-images/SKILL.md (or your agent's skills folder).- name
- design-with-images
- description
- Explore UI and visual design with image generation, then iterate the real implementation against the user-selected concept. Use when brainstorming visual directions, offering mockup variants, or implementing an approved generated design; do not stop at the mockups or the first code approximation.
Design With Images
The deliverable is the working design, visibly matched to the approved reference. Image generation explores the target; real screenshots prove the implementation. For an exploration-only request, deliver the options and wait for a selection.
Workflow
- Frame the decision. Read the relevant design skill and capture the actual surface. Pin what may change and what must stay: content, framing, palette, interactions and surrounding UI. Keep the original capture.
- Generate alternatives. Use the available image-generation skill/tool with that capture as a reference. Produce a small, labelled set of distinct visual directions. Show them as concepts, never as screenshots of implemented code.
- Freeze the chosen target. Use an existing approval or delegated design discretion; otherwise obtain the user's selection. Preserve the selected image, prompt and provenance in the project's reference area. Name its visible requirements: spacing and padding, silhouette, typography, opacity, edge softness, hierarchy and placement. Do not substitute the prompt's requested properties for what the selected image actually shows. Before coding, complete the reference measurements in Reference Landmarks.
- Implement the design. Use the project's real components and visual primitives. A generated mockup is not source code, and easy CSS is not evidence of fidelity. Preserve intended relationships when implementation constraints require a different mechanism. Label generated text errors or invented details as artifacts; do not ship them merely to match pixels.
- Compare and iterate. Capture the real implementation at comparable scale, framing and state. Run compare-screenshots against the approved concept, with full context and tight crops of the changed features. Complete its boundary/overlap checks: compare each side of the effect and any foreground it crosses, not just overall softness and spacing. Keep the per-feature pass/fix/uncertain record through handover. A before/after code screenshot comparison is supplementary; it proves change, not fidelity to the selected design. List the material mismatches, fix them in code, recapture and compare again. Continue until each intended feature matches or the user explicitly revises the target. Passing functional tests, a lower distance score, or "close enough" from memory is not a stopping condition. Disclose constraints as soon as they emerge.
- Verify and hand over. Check the real design in its relevant states and sizes, including crowded and low-contrast cases. Use screenshot-critique for an unprimed review; show the approved reference beside the actual result, clearly labelled, using preview-shots where available. Resolve material feedback through the same comparison loop before claiming completion or publishing. Stabilize this visual gate before running expensive closeout suites; use focused checks while the design is still changing. Preserve existing authorization; do not invent another approval gate when the selected design and shipping action are already approved.
Show full SKILL.md (103 more words)Show less
Rules
- Keep concept, previous implementation and current implementation distinct. Never replace the approved reference with the latest code screenshot.
- Keep actual-size captures as primary evidence. Label derived alignments; never change application scale or crop away defects to improve agreement.
- Judge generated references by their intended design features, not literal equality of re-rendered text or scenery. Document such exclusions explicitly; they are not permission to excuse different padding, shapes or hierarchy.
- A selected concept is a requirement, not inspiration to reinterpret silently. If it cannot be implemented faithfully, show the specific conflict and seek a revised target rather than presenting an approximation as finished.
© dzhng, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in skills/visual/design-with-images of dzhng/skills.
Open the folder on GitHubat commit d513228
Used in 1 other repository
We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders. This page covers the copy in dzhng/skills, which our catalogue first saw on October 7, 2026.
Compare with similar skills
Design With Images 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Design With Images this skilldzhng/skills | 1k | — | ~1.1k | Automated safety check: Pass | MIT | |
| Imagensanjay3290/ai-skills | 432 | 6 repos | ~657 | Automated safety check: Pass | Apache-2.0 | |
| Rare Style Explorervibeshotclub/vsc-skills | 876 | — | ~1.6k | Automated safety check: Pass | None | |
| Imagegennexus-research-lab/nexus | 151 | — | ~600 | Automated safety check: Pass | Apache-2.0 | |
| Neta Creativenetaart/neta-skills | 662 | — | ~1.7k | Automated safety check: Pass | MIT | |
| Sf Diagram NanobananaproJaganpro/sf-skills | 424 | — | ~1.6k | Automated safety check: Pass | MIT |
Similar skills
Rare Style Explorer
vibeshotclub/vsc-skills
Generate and refine AIGC image prompts by combining rare, prompt-ready visual sub-style tags from a bundled 620-entry style library.
Imagegen
nexus-research-lab/nexus
Generate or edit raster images when the task benefits from AI-created bitmap visuals such as photos, illustrations, textures, sprites, mockups, UI mockups, product shots, or transparent-background…
Neta Creative
netaart/neta-skills
Neta API creative skill — generate images, videos, songs, and MVs, and deconstruct creative ideas from existing works.
Sf Diagram Nanobananapro
Jaganpro/sf-skills
AI-powered image generation for Salesforce visuals via Nano Banana Pro.
Cursor Image Generation
tmcfarlane/oh-my-cursor
Generate and iterate images in Cursor using the built-in image model and strong prompts.
More from dzhng/skills
All 27 skills in this repoCompare Screenshots
dzhng/skills
Compare screenshots against the intended design, distinguishing approved references from historical baselines.
Claude
dzhng/skills
Use Claude Code as an independent claude -p subagent when the user explicitly asks for Claude, wants a second-agent opinion from Claude, or asks to delegate a well-scoped task to Claude.
Refactor Clean
dzhng/skills
Refactor cleanly instead of layering sediment. An agent skill from dzhng/skills.
Write Skills
dzhng/skills
Create or revise agent skills. An agent skill from dzhng/skills.
Codex
dzhng/skills
Use the local Codex CLI as an independent second agent. An agent skill from dzhng/skills.
Audit Agents
dzhng/skills
Audit or rewrite AGENTS.md so it holds only lasting principles.
Related
Categories
Questions about Design With Images
What does Design With Images do?
Explore UI and visual design with image generation, then iterate the real implementation against the user-selected concept. Design With Images is an agent skill from dzhng/skills. Explore UI and visual design with image generation, then iterate the real implementation against the user-selected concept.
When should I use Design With Images?
Design With Images fits situations like: brainstorming visual directions; offering mockup variants; implementing an approved generated design; do not stop at the mockups.
How do I install Design With Images in Claude Code?
Run `npx skills add dzhng/skills --skill design-with-images -a claude-code`. Or copy the skill folder (skills/visual/design-with-images in dzhng/skills) into .claude/skills/design-with-images in your project. Claude Code loads it when a task matches its description.
How do I install Design With Images in Codex?
Run `npx skills add dzhng/skills --skill design-with-images -a codex`. Or copy the skill folder (skills/visual/design-with-images in dzhng/skills) into .agents/skills/design-with-images in your project. Codex loads it when a task matches its description.
Can I use Design With Images 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 dzhng/skills --skill design-with-images -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/design-with-images, .gemini/skills/design-with-images, .github/skills/design-with-images and .opencode/skills/design-with-images in your project.
What does Design With Images need to run?
SKILL.md names no scripts, command-line tools or credentials: Design With Images is instructions for the agent only.
Does Design With Images access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Design With Images 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. Review the folder before installing.
What licence does Design With Images use?
Design With Images 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 Design With Images use?
About 1.1k tokens (SKILL.md is roughly 4.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Design With Images?
Skills that share tags, products or a category with Design With Images: Imagen (sanjay3290/ai-skills, 432 stars), Rare Style Explorer (vibeshotclub/vsc-skills, 876 stars), Imagegen (nexus-research-lab/nexus, 151 stars) and Neta Creative (netaart/neta-skills, 662 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Design With Images?
dzhng (a GitHub user) maintains it in dzhng/skills, which has 1,022 GitHub stars. The repository holds 27 skills in this directory. The repository was last updated on October 5, 2026.
Source: dzhng/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.