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 Gekkos-tech/agency-os --skill image-to-codegit clone --depth 1 https://github.com/Gekkos-tech/agency-osWrote 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/gekkos-tech/agency-os/image-to-code)<a href="https://agentmods.dev/skills/gekkos-tech/agency-os/image-to-code"><img src="https://agentmods.dev/badge/skills/gekkos-tech/agency-os/image-to-code/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/gekkos-tech/agency-os/image-to-code"><img src="https://agentmods.dev/badge/skills/gekkos-tech/agency-os/image-to-code.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.00160 | $0.01504 |
| Opus 5 | $0.00080 | $0.00752 |
| Sonnet 5 | $0.00032 | $0.00301 |
| Haiku 4.5 | $0.00016 | $0.00150 |
Grade A, and why
image-to-code 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 9d 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 — 71 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Image to Code — Faithful Website Implementation
Turn design images into a website that someone could mistake for the images. The design image is the contract: you are a builder, not a co-designer. Deviations are bugs.
Phase 0 — Ensure images exist
- If the user provided design images: collect them, confirm which image maps to which page/section, and proceed to Phase 1.
- If no images exist and the task is visually important: generate them FIRST using the art direction rules of the imagegen-web skill (one horizontal image per section, shared style-token block, composition variety). Get the user's nod on the images, then implement. Never design-in-code from imagination when the workflow calls for image-first.
- If images cover only some sections, generate the missing ones in the same style tokens — do not freestyle the gaps.
Phase 1 — Deep analysis pass (before writing any code)
Analyze EVERY image and write the findings down (a short structured note per image). Do not skim-and-code; misread proportions compound across sections.
Per image, record:
- Layout grid — columns and split ratios ("hero: 12-col, text spans 5, visual spans 7"), container width (full-bleed vs boxed), alignment (left/center).
- Spacing rhythm — estimate the base unit (usually 4/8px) and the big numbers: section vertical padding (typically 80–160px on desktop comps), gaps between cards, internal card padding. Note whether the design is airy or compact and keep that ratio.
- Exact palette — extract actual hex values from the image (eyedropper or pixel inspection, not guesses): background, surface, primary text, secondary text, accent, border tones. Build the token list once for the whole set; sections must share it.
- Type scale — count distinct sizes; measure headline-to-body ratio roughly ("hero headline ≈ 4× body"). Note weight, case, letter-spacing feel, line-height (tight display vs airy body). Choose the closest real font (e.g. Inter/Geist for grotesque, a serif for editorial) — name it in your notes.
- Component inventory — enumerate every element in the image: nav items, buttons (count them! and their variants), badges, cards, icons, images, dividers, footer columns. This inventory is the build checklist — nothing added, nothing dropped.
- Effects — radii, shadows (subtle or none?), gradients, borders, image treatments (rounded? full-bleed?), hover affordances implied.
What ships with it
1 file 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.
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.
- 9d ago First seen · 71 lines · 160 tokens per session scan A 0eed638dfdc5
image-to-code is a skill published in the GitHub repository Gekkos-tech/agency-os (5 stars, last pushed 1mo ago), licensed MIT. It adds 160 tokens to every session and 1,504 once invoked, about $0.0008 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-08-31.
Other skills, from other repositories
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
build-for-good-ux
Use when building, reviewing, or improving user-facing UI, frontend components, pages, forms, flows, loading states, error handling, empty states, success feedback, graceful degradation, familiar layouts, or choice-heavy interfaces.
web-design-director
Skill "web-design-director" from guia-matthieu/clawfu-skills, covering web design director, when to use this skill, methodology foundation, what claude does vs what you decide and what this skill does.
website-finishing-director
Run a structured 5-pass finishing audit on any website before launch — scoring visual polish, technical foundation, UX completeness, content quality, and cross-device readiness on 100 points. Use when: Pre-launch - Final validation before going live; Post-redesign - Verify nothing broke during the overhaul; Client…
alex-style
Use when building or styling any web UI — landing pages, hero sections, dashboards, components, marketing sites — or when the user asks for beautiful, animated, or polished design, UI animations, animated backgrounds, gradients, icons, smooth scrolling, or design inspiration. Also use before reaching for the web to…
image-first-frontend
Generate a polished frontend reference screenshot through a configurable GPT-image-2-compatible generations endpoint, save and show versioned previews inside the project, revise selected previews through a configurable /images/edits endpoint, and reproduce only the user-approved design as functional frontend code with…