Illustrated Gallery

Illustrated Gallery

This is an art-direction and image-prompting guide, not a ready-made website. It ships no images, brand, page markup, or fixed asset list. Create the visual language and artwork for the user's project; never import a previous project's pictures or content simply because it used this skill.

Start with the project

Identify the audience, primary task, actual content, and requested scope. Respect existing integration requirements. When the user rejects the current UI, inspect only what is needed to preserve data and behavior, not to reuse its appearance.

Choose a visual direction using direction examples. These are starting points, not presets or a closed menu. Palette, medium, subjects, composition, density, and motion can vary independently. State the chosen direction briefly and proceed; do not turn routine design choices into an approval interview.

Keep the useful qualities of a gallery: considered composition, strong type hierarchy, expressive artwork, and enough quiet space to read. Blue botanicals, serif headlines, floating cards, dark backgrounds, and carousels are optional, not requirements. Let the subject and user task determine their use.

Design the whole page

Before implementing, give every requested section a purpose and layout. A complete redesign includes navigation, the main content, search and filters if present, onboarding, supporting sections, empty states, and the footer. Changing a hero image while leaving the rest of the rejected UI intact is not a complete redesign.

Carry a coherent palette, typographic scale, spacing, and visual motifs through the page, while varying composition to suit each section. A directory may need a category index and readable resource rows; a portfolio may need large project images. Do not impose portfolio cards or a studio contact form on unrelated tasks. Preserve collected content and useful behavior when reorganizing an existing site.

Do not decorate every row with an unrelated generated image. Put artwork where it helps explain a concept or orient the reader; use typography and layout for dense information. Do not invent project screenshots, ratings, test results, or endorsements.

Generate original artwork

Use user-provided project assets where appropriate, otherwise use an available image-generation tool. Follow its documented workflow. Choose image count and aspect ratios from the actual layout, never from a fixed sample collection.

For each asset, write a prompt covering:

• Role and meaning: its page section and the project idea it should express.
• Subject: a concrete scene or visual metaphor relevant to that idea.
• Medium: illustration, collage, material study, photography, or another chosen treatment.
• Palette and light: how it belongs to this page's visual direction.
• Composition: focal point, text-safe areas, framing, and likely mobile crop.
• Constraints: no baked-in UI text, invented logos, or misleading product depictions.

Write actual project-specific prompts, not unfilled templates. Across a set, keep shared medium, material, or lighting coherent while changing subjects and framing. A style reference guides composition and treatment; it is not an asset to deliver unless the user explicitly requests that particular image.

Inspect generated images before integrating them. Adjust composition or regenerate if a subject conflicts with text, a mobile crop loses the focal point, or the result has misleading labels. Describe conceptual artwork as artwork, not a real product screenshot or measurement. Store final images in the target project, never in this skill; record the generation prompts and asset sources in the project's existing source notes when available.

If suitable images or the generation capability are unavailable, report the missing asset and continue independent layout work. Ask for the needed asset or an alternative; do not silently substitute old sample images or claim the design is complete.