Patterns
A curated library of production-ready UI templates.
tl;dr Patterns are pre-defined section templates. Your AI can search for patterns like "hero" or "pricing," then combine them with your taste model to generate styled, production-ready UI instantly.
What are patterns?
Patterns are reusable templates for common web sections. Instead of describing every detail of a hero section or pricing table, your AI can:
- Search for a pattern that matches your needs
- Apply your taste model's principles and components
- Generate detailed, model-tuned UI with no additional prompting required
In other words, our patterns handle the structure; your taste model makes them personal.
| Pattern Provides | Taste Model Provides |
|---|---|
| Section structure | Color palette |
| Content placeholders | Typography scale |
| Responsive layout | Spacing system |
| Component arrangement | Component styling |
The same "hero" pattern looks completely different with different taste models.
- With Melt: Soft grays, hot pink accents, rounded pill shapes
- With Term: Neon green on black, monospace type, terminal glow
- With Clod: Warm beige paper, clay tones, calm editorial serif
- With June: Bold geometric fills, thick black borders, chunky and playful
Using patterns
To use patterns, simply describe what you want to build. Your AI will search the pattern catalog, find relevant templates, and combine them with your active taste model.
For a landing page, you might ask for:
- A hero section with headline and CTA
- A features section with 3 cards
- A pricing section with 3 tiers
- A footer with links
Your AI will handle finding the right patterns and applying your model consistently.
Our pattern library includes...
Navigation
Headers, footers, and nav components.
Hero sections
Eye-catching introductions with headlines, subheadlines, and CTAs.
Variants include: Centered hero with CTA, Split hero with image, Hero with background gradient, Hero with feature highlights
Features sections
Showcase product capabilities with cards or lists.
Variants include: 3-column feature cards, Feature list with icons, Alternating feature rows, Feature grid with images
Pricing sections
Display pricing tiers and plans.
Variants include: 3-tier pricing table, Comparison pricing grid, Simple pricing cards, Enterprise pricing with custom CTA
CTA sections
Drive conversions with compelling calls to action.
Variants include: Centered CTA banner, CTA with email capture, Split CTA with image, Minimal text CTA
Other patterns
- Testimonials - Customer quotes and social proof
- FAQ - Frequently asked questions
- Team - Team member profiles
- Stats - Metrics and numbers
- Logos - Partner/client logo strips
- Contact - Contact forms and info
Common questions
Are patterns free to use?
Yes. The entire UI pattern catalog is free for all users. Patterns are combined with your taste model (public or private) to generate code.
Can I create custom patterns?
Not yet. You can create custom patterns as components on your models, but we don't offer a way to public model-agnostic patterns privately or publicly at this time.
Do patterns work with any framework?
Patterns are framework-agnostic templates. Your AI generates code for your target framework (React, Vue, Svelte, etc.) based on your project context.
How do I see all available patterns?
Ask your AI to search for patterns by category or function: "hero," "features," "pricing," "cta," "testimonials," "faq." If one sounds interesting, it can generate an example for you.
What's next
- Building Landing Pages - Start putting these concepts into practice
- MCP Basics - Learn more about how Popmelt empowers your AI
Better prototypes with less prompting
Start creating