Code As Images

Use this skill when the image should be designed as a code artifact instead of treated like a screenshot or handed entirely to an image model.

When To Use

Use this skill for:

1. Product-focused hero images where the UI should look intentional and controllable.
2. Dashboard, app, terminal, IDE, chart, or browser-frame visuals.
3. Social cards, docs visuals, or landing-page illustrations built from HTML/CSS/JS or React.
4. Before-and-after UI comparisons, feature callouts, and flow diagrams that need sharp layout fidelity.
5. Mixed compositions such as a generated background plus a coded product foreground.

Do not use this skill for photography-first assets, natural scenes, or illustrations that are not improved by code-driven layout control.

Core Rule

For product visuals, prefer code-as-image over asking an image model to invent the product.