webuildanyapp.ukDesign your app
AI app designer

Pick. Prompt.
Generate. Send.

Pick what your app does, watch the brief write itself live below, hit Generate — Claude turns your brief into three real mockups in 30 seconds. Send it to us when one looks right.

What industry are you in?

Pick the closest match. We adapt patterns to your sector.

What kind of app?

Pick the industry above first, then we tune the rest.

Which features must it have?

Pick all that apply. You picked 0.

Pick a colour direction.

The look, not the exact hex.

What vibe?

Visual personality of the product.

Who is it for?

Primary user, the one who opens it daily.

Anything else worth knowing?

Optional. One sentence about the real problem you want solved.

The brief we send to Claude

A senior-grade design brief, writing itself live.

This is the actual prompt we feed to Claude when you hit Generate. It updates every time you tweak a pick above.

brief.md · live
4,473c
You are a senior web engineer and product designer with 20+ years building shipped products. Build a polished, production-grade a consumer mobile app for the a niche SMB market sector. The product is for YOUR BRAND operating in the UK, aimed at small business owners.

═══ AUDIENCE TYPE ═══
This is a CUSTOMER-FACING product — the end user is a paying customer who can leave for a competitor. Every screen has to feel polished. Onboarding has to be near-zero friction. No internal jargon.

═══ HOW THIS INDUSTRY ACTUALLY WORKS ═══
Greenfield product for an under-served market. Be specific about who uses it, when, and why — generic SaaS templates are not allowed.

═══ NON-NEGOTIABLE: SHIP THREE CONCEPTS ═══
Deliver ONE codebase containing a built-in "Concept Switcher" (visible in the dev / launch screen) that flips between THREE complete, visually distinct directions of the same screens. All three rendered, all three using the same screens and data — only the visual language differs. The client picks one to take to production.

THE THREE CONCEPTS (each with its own token set: colors, type scale, corner radius, card and button style — nothing hardcoded, everything from the active concept's tokens):

A · "Precision" — minimal, technical.
   Surfaces: navy / graphite. Accent: electric coral (#FF4D2E). Thin lines, data-forward, generous whitespace, light feel.

B · "Bold" — confident, industrial.
   Surfaces: near-black. Accent: warm peach (#FFA17D). Heavy cards, strong type hierarchy, decisive.

C · "Premium" — editorial, luxury.
   Surfaces: charcoal with subtle gradients and glassmorphism. Accent: electric coral (#FF4D2E) as a tint. Generous radius, calm spacing, considered transitions.

Visual mood across all three: considered, modern, premium. Underlying brand feel: high energy, action, urgency.

═══ STACK ═══
- Next.js 16 (App Router) + React 19 + TypeScript (strict)
- Tailwind 4 + per-concept theme tokens
- shadcn/ui components, customised
- Zustand or TanStack Query for state
- Recharts for analytics views
- lucide-react for icons
- framer-motion for transitions
- MOCK LAYER — no backend. Everything works on realistic seeded data, with simulated real-time (websocket-like updates from a local source)

═══ SCREENS AND FUNCTIONS ═══
1. Onboarding (3-4 carousel slides) + Sign in / Sign up
2. Home — personalised greeting, primary CTA, recent activity, upsell card
3. Service / product catalogue with filters and search
4. Detail screen with photos, copy, social proof
5. Booking / checkout flow with step indicator
6. Live status / tracking screen (map + timeline)
7. 1:1 chat with operator (with system messages)
8. Order / booking history with filtering
9. Profile + settings + dark mode toggle

═══ CORE FUNCTIONALITY (must be present) ═══
- (no specific features picked — infer sensible defaults for this sector)

═══ DESIGN BAR ═══
Mobile-first if mobile, responsive 375 / 768 / 1440 if web. considered, modern, premium. Polished in detail: consistent spacing, soft elevations and shadows, readable typography, real icons, loading skeletons, empty and error states, micro-interactions and haptics where they matter. Zero generic "default" looks — it has to feel like a product that already ships in the App Store / on Vercel.

═══ DATA (mock, seeded) ═══
Models appropriate to the sector. Realistic the UK data (names, places, prices in the local currency). Simulate real-time for any tracking, chat, or status-flow surfaces. Seed enough rows that every screen feels lived-in (a real catalogue, a busy day, a populated dashboard) — never one-row "Lorem ipsum" stubs.

Specifically for this sector: Use realistic names, places, prices in the local currency. Never use "Lorem ipsum" or placeholder text.

═══ STRUCTURE AND QUALITY ═══
Clean structure: routing folder, reusable theme-driven components, features/ for vertical slices, theme/ holding the three concept token sets, store/, data/ (mocks + seed + simulators), lib/. Components 100% driven by the active concept's tokens. A README with: how to run, how to switch concepts, what's mock vs. what would be real in production.

═══ HOW TO WORK ═══
First reply: short plan + file tree + the three concept palettes / tokens as code. Then build end-to-end in the same pass — do not wait for confirmation between steps. Commit in logical chunks. At the end, give the run instructions and a brief on how to switch between the three concepts. Keep going until the app actually launches.
Fill in industry, app type, at least one feature, colour, vibe and audience to unlock Generate.