30 Claude Prompts That Design UI Screens

You are a SaaS product designer who builds upgrade and plan-selection UIs. <context> I need an in-app pricing / plan-selection screen built as one self-contained HTML file with inline CSS, previewable instantly as an artifact. </context> <inputs> - Plans and prices: [E.G. FREE, PRO 19, TEAM 49] - Key features per plan: [BULLETS] - Which plan to highlight: [E.G. PRO] - Billing toggle: [MONTHLY / ANNUAL WITH DISCOUNT] - Brand color and vibe: [DESCRIBE] </inputs> <task> Build a plan-selection screen with: a monthly/annual billing toggle that updates a 'save X%' badge, and a row of three pricing cards. Each card has plan name, price with cadence, a short positioning line, a feature list with checkmarks, and a CTA. Visually elevate the recommended plan (badge, ring, lift). Add a current-plan indicator on one card and a short FAQ or trust line below. Use realistic feature copy. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Recommended plan is clearly emphasized without crowding the others; cards align on a shared baseline. - Accessible toggle and buttons; the annual discount math is shown. </constraints> <format> Return the full HTML as an artifact, then explain the emphasis hierarchy and what to A/B test on the recommended plan. </format>

You are a product designer who builds first-run onboarding flows. <context> I need a multi-step onboarding wizard screen built as one self-contained HTML file with inline CSS, previewable instantly as an artifact, shown on one representative step. </context> <inputs> - Product context: [E.G. PROJECT TOOL] - Onboarding steps: [E.G. WELCOME, ABOUT YOU, INVITE TEAM, CONNECT DATA, DONE] - The step to render in detail: [PICK ONE] - Brand color and vibe: [DESCRIBE] </inputs> <task> Build an onboarding wizard frame with: a progress indicator at the top (numbered stepper or progress bar) showing completed, current, and upcoming steps; a centered card containing the current step's heading, a friendly one-line subhead, the step's inputs or option cards, and a back/continue button pair (continue is primary). For an 'about you' or 'choose a goal' step, render selectable option cards with one pre-selected. Add a 'skip for now' link. Keep it focused and welcoming. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Progress, selected option, and primary CTA are visually clear; accessible focus and labels. - Single focused action per step; no distracting nav. </constraints> <format> Return the full HTML as an artifact, then explain the stepper states and how the other steps would reuse this frame. </format>

You are a product designer who specializes in first-run empty states that drive activation. <context> I need a welcome / first-run dashboard empty state built as one self-contained HTML file with inline CSS, previewable instantly as an artifact. </context> <inputs> - Product context: [E.G. CRM, ANALYTICS, NOTES] - The first 'aha' action: [E.G. CREATE FIRST PROJECT] - Setup checklist items: [3-5 STEPS] - Brand color and vibe: [DESCRIBE] </inputs> <task> Build a first-run dashboard with: a warm welcome header (greeting + the value the user is about to get); a prominent illustrated empty-state block with a single primary CTA for the first key action; a getting-started checklist card with 3-5 steps, each with a checkbox, label, and the first item highlighted, plus a progress count; and one or two muted placeholder widgets hinting at what the dashboard fills with once they start. Keep momentum and guidance front and center. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only; illustration is a tasteful CSS/SVG placeholder. - One unmistakable primary action; checklist is accessible and shows progress. - Encouraging, specific copy; no generic 'no data' dead end. </constraints> <format> Return the full HTML as an artifact, then explain how the checklist and empty state push toward the activation action. </format>

You are a product designer who crafts empty and edge states across an app. <context> I need a collection of empty and edge states built as one self-contained HTML file with inline CSS, previewable instantly as an artifact, laid out as a gallery. </context> <inputs> - Product context: [E.G. SAAS APP] - States to cover: [E.G. NO DATA YET, NO SEARCH RESULTS, ERROR/404, ALL DONE, NO PERMISSIONS] - Brand color and vibe: [DESCRIBE] </inputs> <task> Build a gallery of empty-state panels, each in its own card: 'nothing here yet' (icon, headline, helpful subtext, primary CTA), 'no results found' (with a clear-filters action), an error/404 state (with retry and go-home), an 'all caught up' success state, and a 'no access' state (with a request-access action). Each uses a tasteful CSS/SVG illustration, encouraging copy, and the right action. Label each panel with its scenario. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only; illustrations are CSS/SVG placeholders. - Each state has a clear primary action and supportive, specific copy; accessible contrast. - Consistent illustration style and spacing across panels. </constraints> <format> Return the full HTML as an artifact, then explain the shared empty-state anatomy (icon, headline, subtext, action). </format>

You are a SaaS product designer who builds in-product upgrade moments. <context> I need a feature upgrade / paywall modal built as one self-contained HTML file with inline CSS, previewable instantly as an artifact, shown open over a dimmed app background. </context> <inputs> - Locked feature: [WHAT THEY HIT] - The value of unlocking it: [WHAT THEY GAIN] - Plan that unlocks it and price: [E.G. PRO 19/MO] - Proof or reassurance: [E.G. TRIAL, GUARANTEE, USAGE STAT] - Brand color and vibe: [DESCRIBE] </inputs> <task> Build an upgrade modal over a faint app screenshot: a centered modal with a small lock/spark icon, a benefit-led headline naming what unlocking gives them, a short list of three things the upgrade includes (checkmarks), a price line with the cadence, a primary upgrade CTA, a secondary 'maybe later' link, and a small reassurance line (trial / cancel anytime). Write specific, value-first copy that doesn't feel pushy. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only, inline SVG icons. - Proper backdrop, elevation, and focus styling; accessible roles and a visible close affordance. - Lead with the gain, not the restriction; specific copy, no hype words. </constraints> <format> Return the full HTML as an artifact, then explain the value framing and what to A/B test on the CTA. </format>

You are a mobile UI designer who builds native-feeling app screens. <context> I need a mobile app home screen built as one self-contained HTML file with inline CSS, framed inside a phone mockup and previewable instantly as an artifact. </context> <inputs> - App type: [E.G. FITNESS, FINANCE, SOCIAL, FOOD] - Primary content blocks: [E.G. GREETING, STATS, FEED, QUICK ACTIONS] - Bottom-nav tabs: [E.G. HOME, EXPLORE, ADD, ACTIVITY, PROFILE] - Brand color and vibe: [DESCRIBE] </inputs> <task> Build a phone-framed home screen with: a status-bar strip, a header (greeting/avatar/notification icon), a hero summary or balance/stat card, a horizontal scroll row of quick-action chips or category cards, a vertical feed/list of content cards, and a fixed bottom tab bar with icons and labels (one active). Use realistic mobile content and generous touch targets. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only, inline SVG icons. - Phone frame with rounded corners; mobile-first spacing and tap targets of at least 44px. - Bottom nav fixed; active tab clearly indicated; accessible contrast. </constraints> <format> Return the full HTML as an artifact, then describe the mobile layout system and how the content scrolls within the frame. </format>

You are a mobile UI designer who builds first-launch onboarding carousels. <context> I need a mobile onboarding carousel built as one self-contained HTML file with inline CSS, framed inside a phone mockup and previewable instantly as an artifact. </context> <inputs> - App type and core value: [DESCRIBE] - Three to four intro slides: [HEADLINE + ONE LINE EACH] - Final CTA: [E.G. GET STARTED, SIGN UP] - Brand color and vibe: [DESCRIBE] </inputs> <task> Build a phone-framed onboarding carousel showing one slide in detail: a large illustration area, a benefit headline, a one-line description, page-dot indicators (current dot active), a skip link top-right, and a next/get-started button. Render the structure so all slides share the same layout. On the final slide show a primary get-started CTA and a secondary sign-in link. Use warm, specific copy. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only; illustrations are CSS/SVG placeholders. - Phone frame, mobile spacing, large tap targets; active page dot clearly shown. - Accessible buttons and contrast; one clear action per slide. </constraints> <format> Return the full HTML as an artifact, then explain how slides share the frame and where swipe/dots would be wired. </format>

You are a mobile UI designer who builds high-trust checkout flows. <context> I need a mobile checkout / payment screen built as one self-contained HTML file with inline CSS, framed inside a phone mockup and previewable instantly as an artifact. </context> <inputs> - What is being bought: [PRODUCT OR PLAN + PRICE] - Order line items: [ITEMS, QUANTITIES, PRICES] - Payment methods: [E.G. CARD, APPLE PAY, PAYPAL] - Brand color and vibe: [DESCRIBE] </inputs> <task> Build a phone-framed checkout screen with: a top bar with back arrow and 'Checkout' title; an order summary card listing line items, subtotal, tax/shipping, and a bold total; an express-pay button row (e.g. Apple Pay) with an 'or pay with card' divider; a card form (number with brand icon, expiry, CVC, name) with mobile-friendly fields; a promo-code row; a trust line (secure padlock); and a sticky bottom 'Pay $X' button. Use realistic amounts. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only, inline SVG icons. - Phone frame; the total and pay button are unmissable; fields use correct input types and large tap targets. - Accessible labels and focus; trust/security cue near the pay button. </constraints> <format> Return the full HTML as an artifact, then explain the trust signals and the field choices that reduce checkout friction on mobile. </format>

You are a mobile UI designer who builds settings and profile screens. <context> I need a mobile settings/profile screen built as one self-contained HTML file with inline CSS, framed inside a phone mockup and previewable instantly as an artifact. </context> <inputs> - App type: [DESCRIBE] - Profile info: [NAME, HANDLE/EMAIL, PLAN/STATUS] - Settings groups: [E.G. ACCOUNT, NOTIFICATIONS, PRIVACY, SUPPORT] - Brand color and vibe: [DESCRIBE] </inputs> <task> Build a phone-framed settings screen with: a profile header card (avatar, name, handle, an edit button and maybe a plan badge); grouped settings lists with section headers, where each row has a leading icon, a label, and a trailing control (chevron, value text, or toggle); a notifications group with toggle rows; and a footer group with sign-out (destructive styling) and an app-version line. Use realistic labels and a few toggles in different states. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only, inline SVG icons. - Phone frame; grouped list styling with dividers; rows have large tap targets and accessible labels. - Toggles and destructive actions are visually clear; consistent iconography. </constraints> <format> Return the full HTML as an artifact, then describe the grouped-list row pattern so I can add more settings. </format>

You are a mobile UI designer who builds content-feed apps. <context> I need a mobile feed screen paired with its detail screen, built as one self-contained HTML file with inline CSS, shown as two phone mockups side by side and previewable instantly as an artifact. </context> <inputs> - App type: [E.G. NEWS, RECIPES, SOCIAL, JOBS] - Feed item fields: [E.G. IMAGE, TITLE, META, LIKE/SAVE] - Detail screen content: [WHAT THE FULL VIEW SHOWS] - Brand color and vibe: [DESCRIBE] </inputs> <task> Build two phone frames: (1) a feed screen with a header, a search/filter bar, and a vertical list of content cards (image area, title, meta line, action icons), plus a bottom nav; and (2) the matching detail screen for one item with a back arrow, a hero image area, a title and meta, body content, an action bar (like/save/share), and a primary CTA. Keep the two screens visually consistent. Use realistic content. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only, inline SVG icons; image areas are labeled placeholders. - Both phone frames are mobile-first with large tap targets; consistent type and spacing across screens. - Accessible contrast and clear active/nav states. </constraints> <format> Return the full HTML as an artifact, then explain how the feed card maps to the detail screen and the shared mobile tokens. </format>

You are a UI designer who specializes in refined dark-mode interfaces. <context> I need a dark-mode SaaS dashboard screen built as one self-contained HTML file with inline CSS, previewable instantly as an artifact. </context> <inputs> - Product and what it tracks: [DESCRIBE] - Top KPIs: [3-4 METRICS] - Accent color for the dark theme: [E.G. ELECTRIC BLUE, VIOLET] - Widgets to include: [E.G. CHART, LIST, TABLE] - Vibe: [E.G. SLEEK, TECHNICAL] </inputs> <task> Build a dark dashboard with: a dark sidebar (logo, nav items, active glow), a top bar, a row of KPI cards on elevated dark surfaces with a colored accent on each value, a featured chart drawn in CSS/SVG with a glowing accent line, and two secondary widgets (a ranked list and a table). Use a layered dark palette (background, surface, raised surface) rather than flat black, and apply the accent sparingly for emphasis. Use realistic numbers. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only; no chart libs. - Use elevation via surface lightness and subtle borders, not heavy shadows; meet WCAG contrast for text on dark surfaces. - Accent color used purposefully, not everywhere; clear focus states. </constraints> <format> Return the full HTML as an artifact, then list the dark-palette tokens (bg, surface, raised, text, accent) and the contrast logic. </format>

You are a front-end engineer who builds themeable interfaces. <context> I need a single screen that demonstrates a working light/dark theme toggle, built as one self-contained HTML file with inline CSS and a tiny bit of JS, previewable instantly as an artifact. </context> <inputs> - Screen to theme: [E.G. A SETTINGS PAGE, A CARD GALLERY] - Accent color: [HEX OR DESCRIBE] - Default theme: [LIGHT / DARK] - Vibe: [DESCRIBE] </inputs> <task> Build a representative screen (header, a few cards, a form control, buttons, a chart or stat) plus a theme toggle in the header. Drive both themes entirely from CSS custom properties, swapped by toggling a data-theme attribute on the root with minimal JS. Ensure both themes look intentional and meet contrast, and animate the transition smoothly. Render in the chosen default theme so the toggle visibly flips everything. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only; minimal vanilla JS for the toggle only. - All colors come from CSS variables defined for both themes; no hardcoded per-element colors. - Both themes are accessible (contrast, focus rings); smooth, non-jarring transition. </constraints> <format> Return the full HTML as an artifact, then list the CSS variables for both themes and explain the toggle mechanism. </format>

You are a UI designer known for tasteful glassmorphism and depth. <context> I need a glassmorphism-style UI panel set built as one self-contained HTML file with inline CSS, previewable instantly as an artifact. </context> <inputs> - What the panels show: [E.G. WEATHER, MUSIC PLAYER, STATS, LOGIN] - Background vibe and colors: [E.G. PURPLE-TO-PINK GRADIENT, MESH] - Accent color: [DESCRIBE] - Mood: [DESCRIBE] </inputs> <task> Build a scene with a rich gradient or mesh background and two to three frosted-glass cards floating on it: a primary card (e.g. a stat or now-playing panel) and supporting cards. Each uses a translucent background, backdrop blur, a subtle 1px light border, soft inner highlight, and gentle shadow for depth. Include real content (numbers, controls, text) so it reads as a usable UI, not just a visual. Keep type crisp and legible over the blur. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Glass effect via backdrop-filter with a fallback; ensure text stays readable (contrast) over the blur. - Restrained, elegant depth; accessible focus states on any interactive element. </constraints> <format> Return the full HTML as an artifact, then explain the glass recipe (blur, border, highlight, shadow) and the readability safeguards. </format>

You are a UI designer who crafts polished authentication screens. <context> I need a set of authentication screens built as one self-contained HTML file with inline CSS, previewable instantly as an artifact, arranged as a small gallery. </context> <inputs> - Product name and vibe: [DESCRIBE] - Auth methods: [E.G. EMAIL/PASSWORD, GOOGLE, SSO, MAGIC LINK] - Brand color and theme: [LIGHT OR DARK, ACCENT] - Side panel content: [E.G. TAGLINE, ILLUSTRATION, TESTIMONIAL] </inputs> <task> Build three auth screens sharing one design language: (1) a sign-in screen with a split layout (branded visual panel on one side, form on the other), email + password fields, a remember/forgot row, a primary sign-in button, social/SSO buttons, and a 'create account' link; (2) a sign-up screen; and (3) a forgot-password screen with a single email field and a send-reset button plus a 'back to sign in' link. Keep spacing and components consistent across all three. Use realistic copy. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only, inline SVG for social icons. - Accessible labels, visible focus rings, valid input types, and clear primary-vs-secondary buttons. - The branded side panel collapses gracefully on mobile; consistent components across screens. </constraints> <format> Return the full HTML as an artifact, then explain the shared auth-form pattern and the responsive split-layout behavior. </format>

You are a motion-minded UI engineer who designs delightful micro-interactions. <context> I need a micro-interactions showcase built as one self-contained HTML file with inline CSS (and minimal JS only if needed), previewable instantly as an artifact, laid out as a gallery of interactive specimens. </context> <inputs> - Brand color and vibe: [DESCRIBE] - Interactions I want: [E.G. BUTTON PRESS, TOGGLE, LIKE/HEART, COPY-TO-CLIPBOARD, SKELETON LOADER, SUCCESS CHECK, HOVER CARD] - Theme: [LIGHT / DARK] </inputs> <task> Build a gallery where each specimen is a labeled card demonstrating one interaction with real CSS animation: a button with a satisfying press and ripple, an animated toggle switch, a heart/like that pops and fills on click, a copy button that swaps to a checkmark, a loading skeleton with shimmer, an animated success checkmark, a spinner, and a card with a smooth hover lift. Keep animations quick, eased, and purposeful. Respect prefers-reduced-motion. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only; vanilla JS only where an interaction truly needs it. - Animations are short and eased (not bouncy/distracting); include a prefers-reduced-motion fallback. - Each specimen is labeled and accessible (focus states, ARIA where relevant). </constraints> <format> Return the full HTML as an artifact, then explain the timing/easing choices and how to reuse each interaction. </format>