agentleFS
Sign inStart free
wedabrowedabro/bro-skills/.agents/skills/image-to-code/SKILL.md

image-to-code

Skill3 starsChanged 45 days agoMITView on GitHub

Build or reconstruct a visually important website through an image-first workflow: generate or inspect section references, analyze them, then implement matching responsive code. Use when the user supplies a website image to reproduce or explicitly wants a visual-first web build. Do not use for ordinary frontend edits, image-only deliverables, mobile apps, or brand boards.

We split this skill into the rules it gives an agent

12 rules. 0 are common, 9 are distinctive, and 3 are very specific to this project.

  • 0

    Common

    Most of the 80 edited versions we read keep these.

  • 9

    Distinctive

    This author's own choices. Worth a look.

  • 3

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Treat the design image as an implementation specification, then ship working code that matches its hierarchy, rhythm, assets, and …

    line 8
  2. Distinctive:

    Use this skill as the single orchestrator for image-first web implementation.

    line 12
  3. Very specific:

    Use design-taste-frontend instead for normal code-first frontend work.

    line 14
  4. Very specific:

    Use imagegen-frontend-web alone when the user wants images but no code.

    line 15
  5. Distinctive:

    Verify responsive behavior, interactions, reduced motion, accessibility, and build/tests.

    line 25
  6. Distinctive:

    Do not crop old images to manufacture missing section references.

    line 29
  7. Distinctive:

    Keep the hero readable and visible on a small laptop.

    line 30
  8. Distinctive:

    Avoid nested cards, micro-UI clutter, fake screenshots, and placeholder rectangles.

    line 32
  9. Distinctive:

    Use real/generated assets at the correct aspect ratio and preserve focal points responsively.

    line 33
  10. Distinctive:

    Do not claim fidelity without inspecting the rendered result at representative desktop and mobile sizes.

    line 36
  11. Distinctive:

    Read only the relevant section of references/full-guide.md:

    line 40
  12. Very specific:

    Use rg -n "<heading>" references/full-guide.md.

    line 50

“Common” is measured: kept by at least 6 in 10 of the 80 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Image to Code

Treat the design image as an implementation specification, then ship working code that matches its hierarchy, rhythm, assets, and responsive intent.

Precedence

  • Use this skill as the single orchestrator for image-first web implementation.
  • Invoke image generation as an internal step when references are missing; do not independently run a second competing web-design workflow.
  • Use design-taste-frontend instead for normal code-first frontend work.
  • Use imagegen-frontend-web alone when the user wants images but no code.

Workflow

  1. Inspect the repository, runtime, existing design system, routes, assets, and supplied images.
  2. Determine the section list and identify which sections lack a readable reference.
  3. Generate fresh, standalone section images only where needed. Prefer large section-specific references over a tiny full-page board.
  4. Analyze each reference for layout, type, spacing, color, surfaces, imagery, components, and responsive behavior.
  5. Implement with the existing stack, matching the reference before introducing stylistic reinterpretation.
  6. Compare the rendered page against the reference and correct the largest visual deltas first.
  7. Verify responsive behavior, interactions, reduced motion, accessibility, and build/tests.

Non-negotiables

  • Do not crop old images to manufacture missing section references.
  • Keep the hero readable and visible on a small laptop; do not let decorative art bury copy or CTAs.
  • Recreate hierarchy and spacing, not just colors and border radii.
  • Avoid nested cards, micro-UI clutter, fake screenshots, and placeholder rectangles.
  • Use real/generated assets at the correct aspect ratio and preserve focal points responsively.
  • Extract repeated values into existing tokens or a small coherent token set; avoid one-off magic values everywhere.
  • Preserve functionality and project conventions while improving visual fidelity.
  • Do not claim fidelity without inspecting the rendered result at representative desktop and mobile sizes.

Detailed reference

Read only the relevant section of references/full-guide.md:

  • Deciding when to generate references: search MANDATORY IMAGE-FIRST RULE or WHEN TO TRIGGER.
  • Section-image strategy: search CODEX-SPECIFIC SECTION IMAGE or SECTION IMAGE GENERATION.
  • Visual analysis: search DEEP IMAGE ANALYSIS REQUIREMENT.
  • Hero, responsive first view, and box reduction: search the corresponding heading.
  • Extracting text, type, spacing, components, and color: search EXTRACTION RULE.
  • Fidelity and missing details: search ANTI-DRIFT or MISSING DETAIL RESOLUTION.
  • Final verification: search CLARITY CHECK.

Use rg -n "<heading>" references/full-guide.md; read the full guide only for a large, ambiguous reconstruction requiring the complete protocol.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free