Borrowing it
Nothing to install: this file belongs to dzhng/duet-agent. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/dzhng/duet-agent/main/.agents/skills/design-with-images/SKILL.mdgit clone --depth 1 https://github.com/dzhng/duet-agentWrote 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/dzhng/duet-agent/design-with-images)<a href="https://agentmods.dev/skills/dzhng/duet-agent/design-with-images"><img src="https://agentmods.dev/badge/skills/dzhng/duet-agent/design-with-images/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/dzhng/duet-agent/design-with-images"><img src="https://agentmods.dev/badge/skills/dzhng/duet-agent/design-with-images.svg" alt="Reviewed on agentmods" width="80" 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.00055 | $0.00880 |
| Opus 5.5 | $0.00022 | $0.00352 |
| Sonnet 5.5 | $0.00011 | $0.00176 |
| Haiku 4.5 | $0.00006 | $0.00088 |
Grade A, and why
design-with-images 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 25d 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 — 66 lines — stays where its author put it; the contents beside it link to each section on GitHub.
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.
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.
- 25d ago First seen · 66 lines · 55 tokens per session scan A 240db26c17a8
design-with-images is a skill published in the GitHub repository dzhng/duet-agent (52 stars, last pushed 7d ago), licensed Apache-2.0. It adds 55 tokens to every session and 880 once invoked, about $0.0002 per session on Opus 5.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-10-03.
Other skills, from other repositories
harness-creator
Build, audit, and improve harnesses that make AI coding agents reliable: AGENTS.md/CLAUDE.md instruction files, feature/state tracking, verification gates, scope boundaries, session handoff, memory persistence, context budgets, tool-permission safety, and multi-agent coordination. Use this whenever a coding agent is…
web-design
Penguin visual language for generated web pages and app UIs — GitHub-style simplicity with a single blue accent, light and pure-black dark themes, design tokens, component and chat-interface recipes, plus an opt-in warm paper editorial theme.
a2ui
Make a reply easier to read and act on with rich blocks inside ordinary Markdown — a choice the user picks from, a form that collects several answers, a procedure as steps with warnings in place, a callout, a Mermaid diagram, a weather card, a live clock or countdown, a dashboard of gauges for a quota, a budget or a…
bento-slides
Create and edit Bento presentations — self-contained .bento.html decks whose document is JSON. Use whenever the user wants a slide deck or presentation: from scratch, from source material, or by improving an existing file.
imagegen
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 cutouts. Use when the result should be an image asset rather than repo-native SVG, HTML/CSS, or canvas.
ui-ux-pro-max
UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design…