Frontend Reference Image Generation

Create readable visual references that communicate one coherent web design system. This skill produces images and art direction; use image-to-code when implementation is also requested.

Brief and Routing

Use the user's product, audience, content, conversion goal, brand constraints, viewport, and chosen visual style. Do not replace an explicit aesthetic with another named style or combine conflicting style rules.

If the request is under-specified, infer low-risk details and ask only about decisions that materially change the composition or brand.

Decide the Image Set

Generate the smallest set that shows every distinct composition at implementation-readable scale.

• A compact page may need one full-page composition.
• A long or varied page may need separate images for sections.
• Dense or interactive elements may need focused detail views.

Do not enforce one image per section when a combined view remains clear. Do not compress many sections into an unreadable contact sheet. Read references/section-system.md for complex page sets.