wonderblok
Get early access

UNIVERSE

Don't collect screenshots. Start from a pattern that works.

Universe is a library of design patterns and user flows built on best practice. Add your brand and the toppings you need, and your agent draws real, editable screens on your design system.

Open UniverseSee pricing
  • 96 apps
  • 640 flows
  • 9.8k UI elements
  • Brands are made up. Flows are not.

HOW IT WORKS

A pattern, your toppings, your screens.

Pick the job. Universe supplies the structure that already works, you supply the brand, and your agent draws the result as frames in your file.

Pattern

Onboarding / Permission priming

5 screens · iOS and Android

  1. 01Show value before you ask for anything.
  2. 02One permission per screen.
  3. 03Say why before the system prompt.
  4. 04Always offer a way forward after a no.

Your toppings

6 set

Brand identity

Kopi Senja kit

Platform

iOS

Voice

Warm, short

Languages

EN · ID

Every state

empty · loading · error · denied

Accessibility

AA contrast · 44 px targets

Your onboarding, on your brand

Drawn by your agent

4 best practices kept

Denied state added

0 off-system values

WHY IT HELPS

What a folder of screenshots can't give you.

References show you what others shipped. A pattern shows you what to build, and it arrives already shaped to your product.

  • No blank canvas

    Start from the structure that already works for onboarding, sign in, checkout, paywalls and empty states. You decide what to change, not what to invent.

  • On your brand from the first frame

    Colors, type and components come from your design system, so there is nothing to retype and nothing to recolor.

  • Every state, not only the happy path

    Empty, loading, error and denied states are part of the pattern. They arrive with the screens, not in a later round of fixes.

  • Your agent builds on structure

    Your agent reads the pattern over MCP instead of guessing, and the result is checked against it before you see it.

HOW IT DIFFERS

Not another reference library.

Mobbin, Refero and Appllama show you what other apps look like. 21st.dev gives you components to paste into code. Universe gives you the pattern to build, on your own design system.

What
Screenshot librariesMobbin · Refero · Appllama
Component registries21st.dev
Wonderblok UniversePatterns on your system
What you getScreens and flows from real shipped appsReact and Tailwind components from a community registryPatterns and flows as editable frames, with their components and tokens
Built forResearch and inspirationWriting front-end codeDesigning the whole app with your agent
Your brandYou translate what you seeFollows Tailwind and shadcn conventionsMapped to your tokens and components when you add it
StatesWhatever the app happened to shipPer componentEmpty, loading, error and denied states added to the pattern
Agent accessSearch and fetch references over MCPGenerate a component from a prompt over MCPYour agent reads the pattern and builds it in your file
Where it landsYour notes and collectionsYour codebaseYour .wonderblok file, on your device

Based on each product's public pages and documentation, November 2026. Products change, so check theirs for current details: Mobbin, Refero, Appllama, 21st.dev.

Universe is part of Pro.

Browse the library with a free account. Adding patterns and flows to your files comes with Pro.

Open UniverseSee pricing