Reference to pixel-art website assets

The process

1. 1

   Define the composition and separate artwork from interface

   Impeccable

   Choose the page layout first. Mark the artwork regions and reserve quiet space for live headings and buttons. Keep the approved reference alongside each asset prompt.

2. 2

   Generate each asset from its reference

   Built-in image generation

   Generate the hero, CRT mark, project illustration, and Vibe thumbnail separately. Remove webpage headings, navigation, and buttons from the artwork. Request native transparency for the mark and a wide crop for the hero. Save the complete prompt and actual output dimensions.

   Settings

   Record requested size and aspect ratio, actual output dimensions, transparency, and any crop used on the page. Record the model version if the tool exposes it; do not guess.

   Inputs & references

   The approved page image and a separate reference crop for each illustration. Keep reference images with the result.

3. 3

   Check the artwork in the actual page

   Next.js · browser preview · Impeccable

   Place the assets behind real HTML text and controls. Check the hero crop, contrast, and image loading at desktop and phone sizes. Review the CRT mark on light and dark backgrounds. Compare the result with the approved direction, revise material differences, and retain the exact prompts alongside the final files.