Vika Taylor Prompt pack Demo project · HabitHero is not a real product MMXXVI YouTube
Free Prompt Pack

Claude Design vs Lovable vs v0

The exact prompts I used to design and build HabitHero: the full brand system, mascot, illustrations and the app brief. Copy, paste, build.

▶ Watch the build
↳

The video

One brief, three AI builders. Watch how the same HabitHero prompts play out across Claude Design, Lovable and v0, then grab the prompts below.

Video thumbnail: the HabitHero dashboard as built by Claude Design, Lovable and v0, side by side, under the headline 10 minutes to build a web app, with the HabitHero mascot in front. ▶ Watch on YouTube
✦

The prompts

Six prompts, in build order: brand system first, then the app. Highlighted [placeholders] are the bits you swap for your own product.

01

Brand color palette

Design systemClaude / any LLM

The senior-brand-designer prompt that generates a cohesive 5-color palette with WCAG-safe contrast. The foundation everything else is built on.

You are a senior brand designer. Generate a complete, cohesive color palette for my product.

MY PRODUCT: [describe what your app does in 1-2 sentences]
THE MOOD I WANT: [e.g. calm and premium / energetic and playful / minimal and serious]
THEME FOCUS: [light mode / dark mode / both]

Give me exactly 5 colors, each with:
- Its role (primary accent, light background, dark background, text color, secondary accent)
- The HEX code
- One short line on where to use it

Rules:
- ONE bold accent color only: everything else stays neutral and supporting
- Text color must have strong contrast on both backgrounds (WCAG AA)
- The palette should feel coherent, modern, and premium, not random
- Output as a clean copy-paste list I can drop straight into any design or AI building tool
02

Wordmark logo

Brand assetChatGPT image

A clean, premium wordmark in a single pass: geometric sans-serif, charcoal on cream, horizontal lockup.

Wordmark logo design "HabitHero", modern geometric sans-serif typography, clean letterforms, deep charcoal color on cream background, horizontal layout, premium tech startup branding, minimalist vector style --ar 4:1 --v 7 --style raw
03

Mascot character

Brand assetChatGPT image×5 options

The hero of the brand: a soft, round, marshmallow creature in a coral cape. Tight 4-color palette and character-sheet quality so it stays consistent everywhere.

Stylized 3D animated character. Soft toy like animation friendly silhouette. Mascot character design, small round adorable creature, fluffy white marshmallow body, large expressive shiny dark eyes looking directly at viewer, gentle warm friendly smile, wearing a tiny soft coral-red hero cape flowing behind, holding a small gold checkmark like a tiny trophy, full body front view, clean crisp lines, limited 4-color palette of coral orange, cream, soft charcoal and gold accent, isolated on pure white background, character feels supportive determined and warm, similar visual energy to Duolingo Duo and Notion illustrations but softer and rounder, character sheet quality --ar 1:1 --v 7 --style raw --no text, words, letters, Smooth rounded forms, soft clay like modeling, warm muted colors, subtle fabric texture, simple clean cartoon styling. Family friendly animated short film aesthetic. Full body front view, neutral standing pose, character sheet quality, white/light gray background, soft studio lighting, polished 3D render.

Give me 5 different options to choose
04

Hero illustration

Brand assetChatGPT image--cref

Reuses the chosen mascot (via --cref) standing on a stack of glowing streak tiles. Isometric, premium SaaS-marketing energy, for the landing page.

Use this mascot [attach picture of mascot to chat] for Landing page hero illustration, the HabitHero mascot character (the pic attached) standing confidently on top of a small stack of glowing daily streak calendar tiles in cream color, tiny gold stars and sparkles floating around the character, soft warm light from upper left, composition centered and without background, isometric three-quarter perspective, modern flat vector illustration style, color palette of coral orange cream soft charcoal and gold, sense of joy progress achievement and quiet confidence, premium SaaS illustration quality similar to Linear Notion or Stripe marketing pages, NOT corporate or stocky --cref [PASTE_MASCOT_URL_HERE] --cw 80 --ar 1:1 --v 7 --style raw --no text, words, letters, photorealism, 3D render.
05

Expression sheet

Brand assetChatGPT image--cref

Four locked-in mascot poses (celebrate, cheer, sleep, focus) in a 2x2 grid: the emotional states used for empty states and achievement moments.

Character expression sheet, four poses of the same HabitHero mascot character (round white mochi creature with coral red cape, large expressive eyes), arranged in a 2x2 grid with subtle dividers: top-left pose celebrating with arms raised and gold confetti around, top-right pose cheering with thumbs up and bright smile, bottom-left pose sleeping peacefully curled up with floating Zzz, bottom-right pose determined and focused with serious supportive look, consistent character design across all four poses, flat vector illustration style, warm coral cream charcoal and gold palette, clean white background --cref [PASTE_MASCOT_URL_HERE] --cw 100 --ar 1:1 --v 7 --style raw --no text, words, letters
06

The full app brief

The buildClaude Design · Lovable · v0

The master prompt fed to all three builders: brand system, every feature, and a strict design-elevation block that keeps the output away from generic SaaS templates.

Build me a web app called "HabitHero": a personal habit tracker for people who want to build better daily routines.

BRAND ASSETS (attached):
- Logo / wordmark: [attach logo.png or .svg]
- Mascot character: [attach mascot.png, use throughout the app]
- Hero illustration: [attach hero.png, for landing page]
- Character expressions: [attach expressions.png, for empty states and achievement moments]

BRAND SYSTEM:
- Primary: Coral #F97316
- Cream background (light): #FAF7F2
- Deep Indigo background (dark): #0F172A
- Charcoal text: #1F2937
- Gold accents: #FCD34D
- Fonts: Instrument Serif (headlines), Inter (body)
- Dark mode by default, with light mode toggle

CORE FEATURES:
- Landing page: hero illustration on the right, oversized serif headline on the left, single "Start Free" CTA, social proof strip with fake testimonials placeholders
- Email + password signup and login flow
- After login, user dashboard:
  • Create habits (name, emoji icon, frequency: daily or weekly, target count)
  • Check off habits each day with one click (with celebratory micro-animation using the mascot)
  • Current streak counter for each habit, prominently displayed
  • GitHub-style calendar heatmap showing last 30 days of progress
  • "AI Coach" section: personalized motivational message + one suggested new habit based on existing patterns
  • Empty states use the mascot expressions (sleepy when no habits, celebrating when streak hits 7+)
- Mobile responsive
- Smooth route transitions

DESIGN ELEVATION (CRITICAL, do not skip):
- Take strong inspiration from Linear, Vercel dashboard, Stripe, and Things 3, NOT generic SaaS templates
- Generous whitespace everywhere, never cramped
- Typography: mix Instrument Serif (large headlines, 56-80px) with Inter (body, 14-16px) for editorial personality
- Color discipline: 80% warm cream and charcoal neutrals, coral used SPARINGLY for accents and CTAs only
- Soft, low-opacity shadows only (never heavy drop shadows)
- Subtle background gradients (5-10% opacity), glassmorphism on floating cards with backdrop-blur
- Asymmetric hero layout, NOT centered three-column feature grids
- Micro-interactions: 300ms ease-out transitions on hover, subtle scale on buttons
- Each component should feel hand-crafted, never template-generated
- The overall feel: confident, calm, premium, like a 2026 indie hacker product
- Use the mascot character throughout: empty states, loading screens, achievement moments, hero section
- AVOID: purple gradient backgrounds, centered "Welcome to [App]" heroes, generic feature card grids, lorem ipsum, stock photos, default shadcn theme look

Make it fully functional with working auth, database, and ready to deploy.