Building Landing Pages

tl;dr Build landing pages by telling your AI what you want. Popmelt provides the design tokens and patterns; your AI combines them into production-ready code.

The workflow

Building landing pages with Popmelt is conversational:

1. Choose a taste model
2. Describe what you want to create
3. Iterate until it's right

Step 1: Pick a taste model

Start by telling your AI which model to use: Connect to Popmelt and use the "Melt" taste model

Your AI connects to Popmelt and loads the design principles (colors, typography, spacing) and component definitions (buttons, inputs, and layout elements) from your chosen model.

Our models

These are free taste models available to everyone. Think of them as curated design systems you can use immediately:

• Base - Black with electric orange and neon green, aggressive typography
• Burst - Bold yellow and black with playful display typography
• Cinder - Dark charcoal with copper accents, monospace-forward
• Clod - Warm beige and clay, calm editorial aesthetic
• DAS - Retro CGA/VGA blues and yellows, utilitarian monospace
• Doze - Windows XP-inspired soft blues and silver glass
• Genta - Neon magenta and violet on deep plum, dreamy glow
• Gray - NYT-inspired monochrome with elegant serif typography
• June - Bold geometric shapes with thick black borders
• Madonna - Soft lilac on light surfaces, friendly and modern
• Melt - Soft grays with hot pink accents, rounded and playful
• Nack - Cream and orange, dense utilitarian layout
• Pane - Classic teal and gray, retro system UI charm
• Prism - Dark purple with magenta-lavender accents, Frutiger Aero vibes
• Strata - Cool grays with electric blue, soft and airy
• Term - Green-on-black terminal aesthetic with glitch accents
• Thanks - Inky black with lavender, dark editorial mood
• TRASH - Tabloid newspaper aesthetic, bold red headlines
• Twit - Classic social blue on white, feed-style layout
• Veil - Pure monochrome, minimal and utilitarian
• Zee - Bright lavender with acid accents, bold and chunky

Or create your own (available to Popmelt subscribers)

Not sure which model to use?

Ask your AI to use a model that matches my vibe

Step 2: Describe what you want to create

Your unique vision is what will make your page special.

Let's imagine we're designing a landing page for a marketplace aimed at exotic plant collectors. You can go keep it simple:

Create a landing page for a marketplace for exotic plant collectors

Or go section by section:

Create a hero section with:
- Headline: "Find your next rare specimen"
- Subheadline: "The marketplace where collectors discover extraordinary plants"
- CTA button: "Browse Plants"

Or describe the whole page at once:

Build a landing page for "Frond", an exotic plant marketplace:

1. Hero section:
   - Headline: "Find your next rare specimen"
   - CTA: "Browse plants"

2. Features section (3 columns):
   - Verified sellers
   - Safe shipping guarantee
   - Expert care guides

3. Pricing section (3 tiers):
   - Free: Browse and buy
   - Collector ($9/mo): Early access to rare listings
   - Seller ($29/mo): List unlimited plants

4. CTA section:
   - "Ready to grow your collection?"

5. Footer with links

It all depends how clear your vision is and how you prefer to work. If you have the seed of an idea, don't be afraid to start simple: inspiration often comes when you have something to react to, and you'll have plenty of opportunity to refine what you're creating.

Send the message and watch your AI pick up the model, search Popmelt for relevant patterns, and create the first draft of your landing page

Step 3: Iterate until it's right

Once you see the draft, ideas will start coming to you. You might realize there's a section you want to add, or a different way you want to present collector profiles, or want a plant listing to do something special when you tap on it.

This is all part of the creative process. Keep refining your page by making suggestions:

Adjust styling: Make the hero section taller with more padding

Change content: Update the hero headline to "Where rare plants find their people"

Modify components: Make the CTA button larger and more prominent

Add sections: Add a "Featured sellers" logo strip below the hero

Once you're happy with what you've created, step away for a few minutes and come back with fresh eyes for a final look.

When your landing page is finished

You've created your landing page, it looks and functions exactly how you want it it... now what? There are a few routes you can take, depending on what your goals are.

Goal	Best option
Get quick feedback	Publish as an interactive artifact (Claude or ChatGPT only)
Add to an existing codebase	Copy the code your AI created, start a chat in your codebase's repo (Claude Code, Codex, Cursor), and ask your AI to give you an integration plan for the page
Publish to a custom domain	Copy the code your AI created and ask Claude Code/Codex/Cursor to publish it with Vercel

Tips & tricks

Start with a purpose

Every landing page needs a clear goal. The best prompts include:

• Specific headlines: what do you want visitors to understand first?
• Clear value propositions: what are you offering your visitors?
• Actual feature names: how should users think about what you're offering?
• An overarching target: building awareness, gaining users, selling a product, etc.

Optimize for small screens

Always ask for responsive layout code: Make sure all sections are responsive and look good on mobile

Don't forget accessibility

AI makes it easy to prepare your site for visitors with reduced sight, hearing, or touch. Request accessible markup: Include proper heading hierarchy and ARIA labels

Request variations

Ask for options: Show me 2 different approaches for the hero section

Ask for examples

Your AI can tell you what's in your taste model: Try asking what colors are available in my model? or show me my model's button variants

Common questions

How do I match an existing brand?

Iterate and Scale subscribers can sample their brand website to create a custom taste model (sampling is available to Iterate and Scale subscribers): Sample https://mycompany.com and create a taste model called "My Brand"

Can I create my own components?

Yes, Popmelt subscribers can add custom components to their taste models: Add a testimonial card component to my taste model with [whatever you need]

How do I export the code?

Taste models are code-agnostic, so you can ask your AI to translate them into whatever language or framework you need. If you're working locally, it will already be in your project. If you're working in Claude Chat or ChatGPT, you can copy it to a local project and ask your AI to adjust as needed.

What if a pattern or component I need doesn't exist?

Describe its structure and function: Create a "stats counter" section showing plants sold, active sellers, and countries shipped to. Your AI will layer in your model's principles as it works.

What's next

• Creating Taste Models - Build your own custom models