Stacks Documentation
SkillsChangelog
TeamSponsorsPartnersPostcardwareAwesome StacksContributing

Image to code

Copy page
Copy page as Markdown for LLMs
View as Markdown
View this page as plain text
Open in ChatGPT
Copy content and open ChatGPT
Open in Claude
Copy content and open Claude
Open in Perplexity
Search with Perplexity AI
On this page 3

stacks-image-to-code · Design · model-invoked

An image-first pipeline for a visually important page: generate design reference images, analyse them deeply, then implement to match in stx and ts-css. Use it when the visual bar matters more than the speed of the first draft.

Inside the skill

The sections an agent reads once the skill loads.

  • CORE DIRECTIVE: IMAGE-FIRST WEBSITE DESIGN TO CODE
    1. ACTIVE BASELINE CONFIGURATION
    1. MANDATORY IMAGE-FIRST RULE
    1. GENERATE ENOUGH IMAGES RULE
    1. SECTION IMAGE RULE
    1. DO NOT CROP OLD IMAGES RULE
    1. FRESH RE-GENERATION RULE
    1. OPTIONAL DETAIL / EXTRACTION IMAGE RULE
    1. CLEAN ANALYSIS STANDARD
    1. DEEP IMAGE ANALYSIS REQUIREMENT
    1. IMAGE-FIRST WORKFLOW
    1. WHEN TO TRIGGER IMAGE GENERATION FIRST
    1. THE STACKS IMPLEMENTATION TARGET
    1. WEBSITE REFERENCE RULE
    1. HERO MINIMALISM RULES
    1. RESPONSIVE FIRST-VIEW RULE
    1. ANTI-NESTED-BOX RULE
    1. REDUCE MICRO-UI CLUTTER RULE
    1. EXTRACTION RULES (text, typography, spacing, components, color)
    1. DESIGN-TO-CODE COPY DISCIPLINE
    1. ANTI-DRIFT IMPLEMENTATION RULE
    1. MISSING DETAIL RESOLUTION
    1. ANTI-AI-SLOP RULES
    1. SECTION RHYTHM AND SPACING DISCIPLINE
    1. DEFAULT SECTION PACKS
    1. MULTI-IMAGE CONSISTENCY RULE
    1. FINAL PRE-FLIGHT CHECK
    1. RESPONSE BEHAVIOR
    1. FINAL GOAL

Using it

This one is model-invoked. Your agent reaches for it on its own when the task matches, and you can also call it by name:

/stacks-image-to-code

Source: stacks-image-to-code/SKILL.md. Shadow it for one project with app/Skills/stacks-image-to-code/SKILL.md, then re-run buddy setup:ai. See Writing your own.