Six detailed starting points across difficulty tiers. Adapt one to your product, run it with your model, then inspect and refine the result.
A sign-in page, dark, orange accent. Inter, 8pt grid. Email + password fields with focus state. Sign-in button + "Forgot password" link + secondary "Sign up" CTA. Bind colors to brand tokens.
Pricing card with three tiers (Free / Pro / Team). Highlight Pro with accent border + "Most popular" badge. Each tier: name, price, 5 feature bullets, CTA. Inter, 12px radius.
Treasury dashboard, dark theme. NAV hero card ($1.284B + 12.4% delta) with a sparkline chart bound to brand/primary. 4-row holdings table with hot-state row highlight. 7D / 30D / YTD time toggle. Light + Dark mode variants generated together.
Wellness app home screen, 375×812. Tuesday header. Glass-card step counter (8,420 / 10k, 84% progress bar). Two tiles below: sleep + calories burned. Bottom tabbar with 4 icons, first one active in accent color.
B2B SaaS marketing landing: hero with two CTAs, logo cloud, 3-up feature grid with icons, pricing (3 tiers, highlight Pro), FAQ accordion, footer with 4 link columns. Light + Dark variants. Use brand variables (primary, text/default, surface). Inter, 8pt grid.
Bootstrap a design system. Pages: Foundations (color/type/space tokens), Components (buttons, inputs, cards, alerts, navigation, breadcrumbs), Patterns (forms, lists, modals), Templates (login, dashboard, settings). Use Sections to group. Component descriptions in the assets panel.
Add reusable guidance for color tokens, typography, spacing, component patterns, and visual principles. Genable can include that context in the agent loop so the model has fewer reasons to fall back to generic defaults.
Open a PR with your prompt + result and we'll add it. Submissions live at /examples as a community gallery.