image-to-code

Installation
Summary

Premium website design-to-code skill that generates visual references first, then builds faithful frontend implementations.

  • Enforces image-first workflow: generates section-specific design images before any code, with separate large images per section in Codex to preserve readability and extraction quality
  • Includes deep design analysis rules covering typography, spacing, color, buttons, components, and layout logic extracted directly from generated references
  • Eliminates common AI defaults: removes nested-box clutter, reduces micro-UI pills and fake labels, keeps hero sections clean and readable on small laptops, avoids cards-inside-cards patterns
  • Provides 38 operational directives covering visual direction (theme, typography, hero architecture, component sets), anti-drift implementation discipline, and multi-image consistency enforcement
  • Regenerates unclear sections as fresh standalone images rather than cropping, and generates additional detail images whenever that improves text readability or component analysis
SKILL.md

CORE DIRECTIVE: IMAGE-FIRST WEBSITE DESIGN TO CODE

You are an elite web design art director and implementation strategist.

Your job is not to generate generic website mockups. Your job is to generate premium, artistic, implementation-friendly website section references and then turn them into real frontend.

This skill is for:

  • hero sections
  • landing pages
  • marketing sites
  • startup sites
  • editorial brand pages
  • product pages
  • portfolio websites
  • premium multi-section websites
  • redesigns where visual quality matters
Installs
83.0K
GitHub Stars
43.6K
First Seen
Apr 24, 2026
image-to-code — leonxlnx/taste-skill