A landing page is not a single component. It is a hierarchy: hero, social proof, feature grid, pricing, FAQ, footer — each with spacing, typography, and responsive behavior that must stay coherent. Traditionally you either design in Figma and hand off pixels, or you scaffold in code and iterate in the editor. PromptUI sits between those extremes: you describe the page in plain English, and you get production-ready code (HTML, CSS, and React) you can ship or refactor immediately.
This guide walks through a practical workflow: how to write prompts that produce usable output, how to iterate without starting over, how to export and wire code into your stack, and how to customize results so they match your brand and architecture. It also situates PromptUI alongside other Wigley Studios tools — UI Kit Packs, the UI Kit Generator, and Developer Labs including the free Brand Token Studio — so you know when to generate a page versus when to generate a whole system or token set.
What PromptUI Does (and What It Does Not)
PromptUI is built for developers who need UI fast without surrendering control. You type a natural-language specification: layout, sections, tone, and constraints. The model returns structured output you can paste into a repo — not a screenshot, not a proprietary canvas format. The goal is to collapse the gap between “I know what this page should say” and “I have markup I can lint, test, and deploy.”
What it does not replace: your routing, your data layer, your analytics instrumentation, or your accessibility audit. Treat generated code as a strong first draft. You still own semantics (aria-*, heading order, form labels) and you still connect buttons to real endpoints. PromptUI accelerates the visual and structural layer so you spend time on integration, not on boilerplate flexbox for the fifth time this month.
Pricing: Pick a Tier That Matches Your Cadence
PromptUI is sold in three tiers so occasional builders and daily users can both find a fit:
| Tier | Price | AI generations | Best for |
|---|---|---|---|
| Starter | $19 one-time | 10 | Single landing page or a small set of variants; proof of concept before committing to a heavier workflow |
| Pro | $49 one-time | 30 | Multiple pages, A/B layout experiments, or iterating through several prompt styles on the same product |
| Unlimited | $79/month | Unlimited | Agencies, product teams shipping weekly, or anyone treating PromptUI as a standing part of the design-to-code pipeline |
Generations are the unit of work: each pass that produces a new version of UI from your prompt typically consumes one generation. Plan prompts so one generation carries more intent (see below) rather than burning cycles on vague one-liners.
Step 1: Anchor the Page Before You Describe Chrome
Weak prompts read like mood boards: “modern, clean, startup vibe.” Strong prompts read like a spec sheet. Start with audience and action: who lands here, and what should they do next? Then list sections top to bottom. For example: hero with headline, subhead, primary and secondary CTAs; logo strip; three-column feature grid with icons; testimonial row; pricing cards; FAQ accordion; footer with links and legal.
Specify stack and format up front. If your team ships React with Tailwind, say so. If you need semantic HTML with a single stylesheet for a static marketing site, say that instead. PromptUI can adapt its output shape when the constraint is explicit — ambiguity is what forces generic patterns.
Prompt skeleton that works
Goal + audience. One sentence each.
Section order. Numbered list.
Visual system. Dark or light, density (spacious vs. compact), accent color name or hex if you have one.
Output contract. “React function component + Tailwind classes” or “single HTML file + embedded CSS.”
Non-goals. “No external images; use placeholder gradients” or “No animation libraries.”
Step 2: Write the First Pass Prompt
Compose one prompt that covers the full page. You will refine later; the first pass should still be complete enough to render a believable layout. Include copy hints where they matter: exact headline if you have it, or the value proposition in your own words so the model does not invent off-brand messaging.
If you already use Brand Token Studio, reference your tokens in the prompt (“primary #2563EB, radius 12px, font stack Inter / Fraunces”). That keeps generated CSS closer to the rest of your Developer Labs workflow without manual find-and-replace across dozens of rules.
Step 3: Iterate With Surgical Follow-Ups
Iteration is where most time is saved or wasted. Do not re-prompt the entire page for a small change unless the structure is wrong. Instead, send delta instructions: “Keep everything except: make the hero full viewport height, move primary CTA to the right column on desktop, stack CTAs on mobile.” Or: “Replace the three-column section with a bento grid; six tiles; equal emphasis.”
If the first output is visually fine but structurally noisy, ask for a refactor pass: “Extract repeated card markup into a small inner component” or “Use CSS variables for colors at the root.” That moves you toward maintainable code without restarting from a blank prompt.
When two sections clash stylistically, fix one at a time. Models track context well within a thread-style workflow; the failure mode is asking for twelve unrelated edits in one message and getting a muddled middle ground.
Step 4: Export and Land the Code in Your Repo
Export is not a ceremony; it is a contract with your repository. Copy the generated block into the file you intend to ship. If you use a component library, paste into a single route or story first, run your formatter and linter, and fix import paths. For static HTML, drop into your build pipeline (Eleventy, Astro, plain nginx) and verify asset paths.
Establish a house rule: generated code always passes through Prettier (or equivalent) and your ESLint config on the first commit. That catches trailing issues early and keeps diffs readable for the rest of the team.
Version control hygiene
Commit the first PromptUI output as its own change (“feat: landing scaffold from PromptUI”), then follow with hand-edited commits for copy, analytics, and a11y. That history documents what came from generation versus what you validated manually — valuable when you revisit the page six months later.
Step 5: Customize for Brand, Content, and Performance
Customization falls into three buckets: visual alignment, content truth, and performance.
Visual alignment. Swap generic grays for your neutrals; align border radius and shadow depth with your design system. If you need a full library of pre-built components rather than a one-off page, UI Kit Packs ($14.99–$24.99 per pack, or $99.99 for the complete bundle) give you curated Tailwind/React collections you can merge with PromptUI output. For generating an entire multi-section kit from a style brief, the UI Kit Generator (from $29 one-time up to $999 lifetime) is the heavier hammer — complementary to PromptUI, not a substitute for a single landing route.
Content truth. Replace placeholder testimonials, statistics, and feature bullets with verified copy. Add real links, legal entity names, and locale-appropriate date formats. Generated text is plausible, not authoritative.
Performance. Inline critical CSS only if your deployment model requires it; otherwise split styles per your bundler defaults. Lazy-load below-the-fold imagery. If you added animation in iteration, prefer CSS transitions over large JS-driven motion for marketing pages that must stay lightweight.
When to Use PromptUI vs. Other Wigley Studios Tools
Use PromptUI when you have a concrete page layout in mind and want code now. Use UI Kit Packs when you want consistent primitives across many pages without regenerating from scratch each time. Use the UI Kit Generator when the deliverable is a cohesive kit (tokens + components + documentation scale) rather than a single URL. Use Brand Token Studio when you need to define or export tokens before any UI generation. Together they cover token definition, component libraries, and rapid page-level synthesis.
Common Pitfalls
- Vague hierarchy. “Add a features section” produces a section; it may not match your narrative order. Name sections and order explicitly.
- Missing breakpoint language. Say how the hero behaves under 640px if that matters to you.
- Skipping the linter. Generated imports and class names are usually valid; edge cases still happen. Always run your toolchain.
- Treating output as final copy. Use the model for structure and draft copy; ship edited copy for anything customer-facing.
Used deliberately, PromptUI compresses the path from idea to markup. Pair it with clear prompts, tight iterations, disciplined export, and thoughtful customization, and you can stand up a credible landing page in minutes — then spend your remaining time on what actually differentiates the product: messaging, measurement, and integration.