30 Claude Prompts That Design Mockups

You are a senior product designer who mocks up mobile app screens in clean, modern HTML. <context> I need a high-fidelity mockup of my app's home screen, built as one self-contained HTML file with inline CSS so I can preview it instantly as an artifact. Render it inside a styled phone frame at a realistic mobile width. </context> <inputs> - App name and what it does: [NAME PLUS ONE-LINE PURPOSE] - Primary user goal on this screen: [E.G. START A WORKOUT, CHECK BALANCE] - Key elements I want visible: [E.G. GREETING, SEARCH, CARDS, BOTTOM NAV] - Brand colors and vibe: [HEX OR DESCRIPTION] - Sample data to show: [REALISTIC PLACEHOLDER CONTENT] </inputs> <task> Build a home-screen mockup inside a phone frame: a status-bar strip, a top header with greeting and an avatar or action icon, a primary hero card or search, a scrollable list or grid of realistic content cards, and a fixed bottom tab bar with four or five labeled icons. Use real-looking placeholder copy and data, not lorem ipsum. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only; icons as inline SVG or unicode. - Realistic mobile width (around 390px) centered in a subtle device frame. - Consistent spacing, accessible contrast, and a coherent color system. </constraints> <format> Return the full HTML as an artifact, then list the design tokens (type scale, colors, spacing) and the one screen I should mock up next. </format>

You are a UX designer who specializes in first-run onboarding experiences. <context> I need a three-screen onboarding flow mocked up as one self-contained HTML file with inline CSS, shown side by side in phone frames and previewable instantly as an artifact. </context> <inputs> - App name and core promise: [NAME PLUS WHAT IT DELIVERS] - The transformation to communicate: [WHAT LIFE LOOKS LIKE AFTER] - Three points to teach across the screens: [VALUE 1, VALUE 2, VALUE 3] - Final action: [SIGN UP / GET STARTED / ALLOW NOTIFICATIONS] - Brand colors and mood: [DESCRIBE] </inputs> <task> Build three phone-framed onboarding screens displayed in a row: each has an illustration placeholder block, a benefit-led headline, one supporting line, page-dot indicators, and a next or skip control; the third screen ends with a prominent primary CTA. Write punchy, specific copy that sells the outcome, not features. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only; illustrations are labeled gradient or color blocks. - Three phones aligned horizontally, wrapping on small screens; consistent design across all three. - Accessible contrast and clear visual progression between screens. </constraints> <format> Return the full HTML as an artifact, then explain the narrative arc across the three screens and where a fourth screen could add value. </format>

You are a product designer mocking up an app's account and settings screen. <context> I need a clean settings or profile screen mockup as one self-contained HTML file with inline CSS, rendered in a phone frame and previewable instantly as an artifact. </context> <inputs> - App name and type: [NAME PLUS CATEGORY] - User profile data to show: [NAME, EMAIL, PLAN, AVATAR] - Setting groups I want: [E.G. ACCOUNT, NOTIFICATIONS, PRIVACY, BILLING] - Toggle-style settings to include: [WHICH ONES ARE ON/OFF] - Brand colors: [DESCRIBE] </inputs> <task> Build a settings screen in a phone frame: a profile header with avatar, name, email, and plan badge; grouped setting rows with labels, icons, and chevrons or toggles; a clearly styled upgrade or account-type banner; and a destructive sign-out action at the bottom. Use realistic labels and grouping, not placeholders. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only; icons as inline SVG or unicode. - Settings grouped with section headers; toggles and chevrons styled consistently. - Phone-width layout, accessible contrast, clear separation between groups. </constraints> <format> Return the full HTML as an artifact, then note which settings you grouped together and why, plus one row I should consider adding. </format>

You are a checkout-experience designer who mocks up high-converting payment screens. <context> I need a mobile checkout screen mocked up as one self-contained HTML file with inline CSS, in a phone frame and previewable instantly as an artifact. </context> <inputs> - What is being bought: [PRODUCT OR PLAN NAME] - Price and any breakdown: [SUBTOTAL, TAX, DISCOUNT, TOTAL] - Payment options to show: [CARD, APPLE PAY, PAYPAL, ETC] - Trust signals to include: [SECURE BADGE, MONEY-BACK, REVIEW COUNT] - Brand colors: [DESCRIBE] </inputs> <task> Build a checkout screen in a phone frame: a back header with the order title, an order-summary card with line items and a clear total, a styled card-input section plus alternative pay buttons, a promo-code field, a trust strip, and a sticky bold pay button stating the amount. Make the total and pay action unmissable. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only; card fields styled but non-functional. - The total and pay button must be the visual focus; clear field labels and big tap targets. - Phone-width layout, accessible contrast, sensible field types implied. </constraints> <format> Return the full HTML as an artifact, then explain the friction-reducing choices you made and what to test to lift checkout conversion. </format>

You are a UX writer and product designer who turns empty states into helpful first moments. <context> I need a polished empty-state screen mocked up as one self-contained HTML file with inline CSS, in a phone frame and previewable instantly as an artifact. </context> <inputs> - App name and the screen this empties into: [E.G. INBOX, PROJECTS, ORDERS] - Why it is empty right now: [NEW USER / NOTHING YET / ALL DONE] - The one action I want them to take: [CREATE, INVITE, CONNECT] - Tone: [ENCOURAGING, PLAYFUL, MATTER-OF-FACT] - Brand colors: [DESCRIBE] </inputs> <task> Build an empty-state screen in a phone frame: a friendly illustration placeholder, a short headline that reframes the emptiness positively, one line of guidance, a clear primary CTA to take the next step, and an optional secondary link such as a tutorial or example. Keep it warm, specific, and action-oriented. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only; illustration as a labeled color block or inline SVG. - One dominant CTA; copy that guides rather than apologizes. - Phone-width layout, centered composition, accessible contrast. </constraints> <format> Return the full HTML as an artifact, then explain the copy angle you chose and give two alternative headlines to A/B test. </format>

You are a marketing designer who creates app hero shots for landing pages. <context> I need a hero-section mockup showing my app on a phone, built as one self-contained HTML file with inline CSS and a pure-CSS phone frame, previewable instantly as an artifact. </context> <inputs> - App name and one-liner: [NAME PLUS WHAT IT DOES] - The screen to display inside the phone: [DESCRIBE THE KEY SCREEN] - Headline and subhead for the hero: [OR ASK CLAUDE TO WRITE THEM] - App store badges to show: [IOS / ANDROID / BOTH] - Brand colors and background style: [DESCRIBE] </inputs> <task> Build a two-column hero: left side has a benefit headline, a supporting line, and store-badge buttons; right side has a CSS-drawn phone frame with a believable mockup of the app screen inside it (header, content, nav). Add a soft background gradient or shape behind the phone. Write the hero copy if I did not provide it. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only; phone and screen drawn entirely in CSS/HTML. - The in-phone screen must look like a real app view, not a blank block. - Responsive: phone stacks under copy on mobile; accessible contrast. </constraints> <format> Return the full HTML as an artifact, then explain how the phone screen reinforces the headline and what background variation to try. </format>

You are a web designer who frames product screenshots in clean browser and laptop mockups. <context> I need my web app shown inside a laptop and browser frame, built as one self-contained HTML file with inline CSS, previewable instantly as an artifact. </context> <inputs> - Product name and what the screen shows: [DASHBOARD, EDITOR, ETC] - The URL to display in the address bar: [E.G. APP.EXAMPLE.COM] - Key UI elements on the screen: [SIDEBAR, TABLE, CHARTS, ETC] - Surrounding context: [JUST THE FRAME / WITH A HEADLINE] - Brand colors: [DESCRIBE] </inputs> <task> Build a laptop mockup: a CSS-drawn laptop or browser window with traffic-light dots, an address bar showing the URL, and a realistic product screen inside (top bar, sidebar, main content with believable data). Optionally add a short headline above it. The framed screen should look like a genuine app, with real-looking labels and numbers. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only; frame and screen drawn in CSS/HTML. - Browser chrome accurate (dots, address bar) and the inner UI coherent. - Responsive scaling; accessible contrast; no external images. </constraints> <format> Return the full HTML as an artifact, then describe the inner-screen layout choices and how to swap in a different product view. </format>

You are a designer who shows responsive products across phone, tablet, and desktop in one shot. <context> I need a multi-device showcase proving my product is responsive, built as one self-contained HTML file with inline CSS and CSS-drawn frames, previewable instantly as an artifact. </context> <inputs> - Product name and screen to feature: [WHAT THE SCREENS SHOW] - Devices to include: [PHONE, TABLET, DESKTOP — OR A SUBSET] - The key content that adapts across sizes: [DESCRIBE] - Headline for the showcase: [OR ASK CLAUDE] - Brand colors: [DESCRIBE] </inputs> <task> Build a composition with overlapping or aligned device frames (desktop behind, tablet and phone in front), each showing the same product adapted to its size: full layout on desktop, condensed on tablet, single-column on phone. Add a short headline and one line about the responsive design. Make the inner screens genuinely different per device. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only; all frames and screens in CSS/HTML. - Each device's inner layout must reflect a real responsive adaptation, not the same screen scaled. - Composition stacks gracefully on small viewports; accessible contrast. </constraints> <format> Return the full HTML as an artifact, then explain how the layout changed across each breakpoint and which device to feature most prominently. </format>

You are an ASO designer who creates App Store and Play Store screenshot panels. <context> I need a set of app-store screenshot panels mocked up as one self-contained HTML file with inline CSS, shown in a row of phone frames with captions, previewable instantly as an artifact. </context> <inputs> - App name and category: [NAME PLUS TYPE] - The 4-5 features or benefits to feature, one per panel: [LIST THEM] - The single phrase to lead with on panel one: [HOOK] - Brand colors and background style: [DESCRIBE] - Tone of captions: [BOLD, FRIENDLY, PREMIUM] </inputs> <task> Build four or five vertical screenshot panels in a row, each with a colored background, a large benefit caption at the top, and a phone frame showing the relevant app screen for that benefit. The first panel leads with the strongest hook. Captions are short and benefit-led; each in-phone screen matches its caption. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only; phones and screens in CSS/HTML. - Consistent background system and caption style across panels; each phone shows a distinct screen. - Panels wrap on small viewports; accessible contrast; no external images. </constraints> <format> Return the full HTML as an artifact, then explain the order of the panels and which caption should be your first impression. </format>

You are a designer who mocks up wearable and smartwatch interfaces. <context> I need a smartwatch screen mocked up as one self-contained HTML file with inline CSS and a CSS-drawn watch frame, previewable instantly as an artifact. </context> <inputs> - App name and what it tracks or shows: [E.G. RUN STATS, NOTIFICATIONS] - The key metric or info to display: [E.G. HEART RATE, STEPS, ALERT] - Glanceable elements: [TIME, RING, BUTTONS, COMPLICATIONS] - Watch style: [ROUND OR SQUARE FACE] - Brand colors: [DESCRIBE] </inputs> <task> Build a watch mockup: a CSS-drawn round or square watch with a band, showing a glanceable interface with the key metric large and central, supporting micro-stats, an optional progress ring, and one or two tappable controls. Keep the layout legible at small size with bold, high-contrast type and minimal elements. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only; watch and face drawn in CSS/HTML. - Information density tuned for a tiny screen; only the essentials, big and clear. - Centered composition; accessible contrast; no external images. </constraints> <format> Return the full HTML as an artifact, then explain what you prioritized for glanceability and what you deliberately left off. </format>

You are a product designer who mocks up data dashboards with clean information hierarchy. <context> I need a SaaS analytics dashboard mocked up as one self-contained HTML file with inline CSS, previewable instantly as an artifact with realistic data. </context> <inputs> - Product and what it measures: [E.G. EMAIL TOOL TRACKING OPENS, SENDS, REVENUE] - The 4 headline KPIs to show: [METRIC NAMES PLUS SAMPLE NUMBERS] - Charts to include: [LINE TREND, BAR BREAKDOWN, DONUT, ETC] - A table to feature: [WHAT ROWS AND COLUMNS] - Brand colors: [DESCRIBE] </inputs> <task> Build a dashboard with a left sidebar nav, a top bar with title and a date-range control, a row of four KPI stat cards with values and up/down deltas, a primary trend chart drawn in CSS or inline SVG, a secondary chart, and a data table with realistic rows. Use believable numbers and labels; charts can be CSS/SVG approximations, not libraries. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only; charts as CSS or inline SVG. - Clear visual hierarchy: KPIs first, then trend, then detail; consistent card styling. - Responsive: sidebar collapses on mobile; accessible contrast; no external images. </constraints> <format> Return the full HTML as an artifact, then explain the metric hierarchy and which KPI deserves the most prominent placement. </format>

You are an enterprise UX designer who mocks up admin and data-management interfaces. <context> I need an admin records-table interface mocked up as one self-contained HTML file with inline CSS, previewable instantly as an artifact. </context> <inputs> - What the records are: [E.G. CUSTOMERS, ORDERS, USERS, TICKETS] - Columns to show: [LIST THE COLUMNS] - Status types and their colors: [E.G. ACTIVE, PENDING, CHURNED] - Bulk actions and filters I want: [E.G. EXPORT, DELETE, FILTER BY STATUS] - Brand colors: [DESCRIBE] </inputs> <task> Build an admin table view: a sidebar, a top bar with search and a primary add button, a filter and bulk-action toolbar, and a dense, scannable data table with sortable-looking headers, status pills, row checkboxes, a per-row action menu, and pagination. Populate eight to twelve realistic rows. Make it feel like a real internal tool. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only; icons as inline SVG or unicode. - Table must be scannable: aligned columns, status pills, consistent row height. - Responsive: table scrolls horizontally on mobile; accessible contrast. </constraints> <format> Return the full HTML as an artifact, then explain the column order and which action you made primary versus tucked into the row menu. </format>

You are a product designer who mocks up kanban and project-tracking interfaces. <context> I need a kanban project board mocked up as one self-contained HTML file with inline CSS, previewable instantly as an artifact. </context> <inputs> - Project or team context: [WHAT THE BOARD TRACKS] - Column stages: [E.G. BACKLOG, IN PROGRESS, REVIEW, DONE] - Card details to show: [TITLE, ASSIGNEE, LABEL, DUE DATE, PROGRESS] - Sample tasks across columns: [A FEW REAL-SOUNDING TASKS] - Brand colors: [DESCRIBE] </inputs> <task> Build a kanban board: a top bar with project title, view tabs, and an add-task button; horizontal columns for each stage with a count badge; and realistic task cards showing a title, a colored label, an assignee avatar, a due date, and an optional progress bar or subtask count. Distribute believable tasks across the columns. Make it feel like a working board. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only; avatars as colored initials. - Columns scroll horizontally; cards consistent and scannable. - Responsive layout; accessible contrast; no external images. </constraints> <format> Return the full HTML as an artifact, then explain the card information you prioritized and one field worth adding for clarity. </format>

You are a fintech product designer who mocks up trustworthy money interfaces. <context> I need a personal-finance or banking dashboard mocked up as one self-contained HTML file with inline CSS, previewable instantly as an artifact. </context> <inputs> - Product type: [BUDGETING APP, BANK, INVESTING, EXPENSE TOOL] - The headline balance or figure to show: [AMOUNT AND LABEL] - Breakdown to visualize: [SPENDING BY CATEGORY, INCOME VS EXPENSE, ETC] - Recent transactions to list: [A FEW REALISTIC ENTRIES] - Brand colors and tone: [DESCRIBE] </inputs> <task> Build a finance dashboard: a header with the account balance large and clear plus a delta or savings goal; a row of summary cards (income, spending, saved); a CSS or SVG chart of spending by category or a trend; a recent-transactions list with merchant, category icon, date, and signed amount; and a clear primary action like transfer or add. Use believable amounts and a calm, trustworthy visual style. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only; charts as CSS or inline SVG. - Numbers formatted as currency; positive and negative amounts visually distinct. - Responsive layout; accessible contrast; no external images. </constraints> <format> Return the full HTML as an artifact, then explain the trust and clarity choices you made and what to surface above the fold. </format>

You are a B2B SaaS designer who mocks up workspace and team-management screens. <context> I need a team and permissions settings panel mocked up as one self-contained HTML file with inline CSS, previewable instantly as an artifact. </context> <inputs> - Product and workspace context: [WHAT THE TEAM USES IT FOR] - Roles and their permissions: [E.G. OWNER, ADMIN, MEMBER, VIEWER] - Team members to list: [NAMES, ROLES, STATUS] - Actions to include: [INVITE, CHANGE ROLE, REMOVE, RESEND INVITE] - Brand colors: [DESCRIBE] </inputs> <task> Build a team-settings panel: a settings sidebar with a highlighted Members tab, a header with an invite button, a search and role filter, and a members table listing avatar, name, email, a role dropdown control, status (active or pending), and a row action menu. Include a small roles-and-permissions explainer block. Populate realistic members and roles. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only; avatars as colored initials. - Role controls and status clearly distinguishable; consistent table styling. - Responsive layout; accessible contrast; no external images. </constraints> <format> Return the full HTML as an artifact, then explain how you surfaced role differences and what permission detail to make more visible. </format>