Back to library

About

A library of 92 structural prompts for vibe coders. Each one describes the layout of a UI section — not the visual style.

How to use it

  1. 1

    Find the layout you want.

    Browse the sidebar by category, or search by name.

  2. 2

    Copy the prompt.

    Click "Copy prompt" on any card.

  3. 3

    Paste it into your AI tool with a screenshot of the look you want.

    Each prompt ends with "match the visual style, colors, typography, and overall aesthetic of the UI shown in my screenshot." Attach a reference image and the AI will combine the structure with your aesthetic.

Why structure matters

Most AI generations fail because the prompt is too vague about shape. A three-tier pricing card, a bento grid, and a comparison table all "show pricing" — but they're different layouts. Naming the structure up front gives the model a skeleton to dress up in your style.

Keyboard shortcuts