github-readme-visuals

GitHub README Visuals

Create a fast, trustworthy visual explanation of the product without replacing its factual README content.

Workflow

1. Inspect the repository before designing.

   • Read the README, product notes, local instructions, existing assets, and available screenshots.
   • For application repositories, prioritize real product screenshots as proof. Do not present generated UI as a real screen.
   • Identify the user journey a first-time visitor should understand in one glance.
   • Build a visual-claim ledger before writing hero copy: every product, pricing, privacy, credential, provider, and deployment claim must be supported by the README, source, or user-confirmed facts. Omit ambiguous claims instead of guessing.

2. Establish visual direction.

   • When Creative Production is available, use its style intake before generating a new direction. Use moodboard-explorer when the user asks for multiple visual territories or concept options.
   • If the user does not choose a direction, use a restrained default: one original hero, product-led composition, readable hierarchy, and a palette derived from the repository's existing UI or brand assets.
   • Directly inspect every supplied reference before production. Record its canvas ratio, major spatial split, dominant visual, screenshot count, overlap, rotation, off-canvas clipping, shadows, typography blocks, and decorative motifs.
   • When the user explicitly requests a layout or style match, preserve the reference's composition grammar and visual hierarchy while replacing its UI, logo, copy, branding, and assets with material from the target repository.
   • Measure repeated screenshot frames instead of estimating them independently. If the reference uses equal-size frames, define one canonical width and aspect ratio for every screenshot; create hierarchy through position, overlap, off-canvas clipping, rotation, contrast, and z-order rather than arbitrary scaling.
   • When the brief says one-to-one, exact, or fully replicated, create a pixel geometry table before editing. Record canvas size; each screenshot's four corners, frame width and height, rotation, off-canvas clipping, and z-order; distances between adjacent frames; and each decorative shape's orientation and anchor point.
   • Derive CSS positions from measured corners and rotation. Do not substitute a visually similar arrangement or independently eyeball each frame.
   • Do not start final production from a moodboard or verbal summary alone when an exact reference image is available.