要点
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
image-to-code (moved)
This skill now lives in its own repository, with the other image-generation skills: https://github.com/Leonxlnx/imagegen-skills
The install name did not change:
npx skills add https://github.com/Leonxlnx/imagegen-skills --skill "image-to-code"
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