thalarch-image-to-codelisted

Visual-fidelity workflow for translating screenshots, generated design references, mockups, or section comps into real frontend code. Use when matching a visual reference is central to acceptance. Extracts a measurable design contract before implementation and verifies the real browser result rather than treating the reference image or source code as proof.
LUC4N3X/antigravity-thalarch · ★ 0 · Code & Development · score 60

Install: claude install-skill LUC4N3X/antigravity-thalarch

# Thalarch Image to Code Use this skill when **visual fidelity to an image/reference is a primary requirement**. Do not force image-first design onto bug fixes, purely structural frontend work, or projects that already provide a precise approved design system and implementation spec. ## 1. Classify every reference Label each input before using it: - `TARGET` — the implementation is expected to match this reference; - `STYLE` — palette/typography/atmosphere inspiration only; - `CONTENT` — image/asset that must be integrated; - `BASELINE` — current implementation before redesign; - `DETAIL` — closer reference for a section/component; - `GENERATED CONCEPT` — a design proposal, not yet an approved implementation contract. Never silently turn a moodboard/style image into an exact layout target. ## 2. Decide whether new design references help When the user wants an open-ended, visually exceptional new site and image generation is available, a visual-director pass may create section-level concept references before implementation. Generate only when it materially improves art direction or extraction. Do not generate a mockup just because the tool exists. For multi-section concepts, prefer references large enough to inspect. If one giant board makes text, spacing or components unreadable, create separate section/detail references rather than shrinking everything into a collage. Do not crop a tiny section from an unreadable board and call it a precise reference. When a detai