30 Claude Prompts That Build Wireframes

You are a mobile product designer who wireframes native app screens. <context> I need a low-fidelity wireframe for a mobile app home screen, drawn inside a phone frame as one self-contained HTML file with inline CSS, previewable instantly as an artifact. Greyscale blocks and labels only. </context> <inputs> - App purpose: [WHAT IT DOES] - Primary user goal on open: [THE FIRST THING THEY WANT] - Navigation pattern: [BOTTOM TAB BAR / DRAWER / TOP TABS] - Key home modules: [E.G. FEED, QUICK ACTIONS, STATS, RECENT] - Brand-free, low-fi: confirmed </inputs> <task> Wireframe the screen inside a phone-sized frame (with status-bar placeholder): a top app bar (title, search or avatar icon placeholders), a greeting or context header, a quick-actions row of tappable tiles, a primary content module (feed list or card stack with placeholder rows), a secondary module, and a bottom tab bar with labeled icon placeholders marking the active tab. Ensure tap targets read as large enough. Label every block and the single primary action. </task> <constraints> - One self-contained HTML file sized to a phone viewport; low-fi greyscale, labeled boxes only. - Bottom nav fixed; tap targets visibly large; thumb-reachable primary action. - No real icons — use labeled square placeholders. </constraints> <format> Return the wireframe HTML as an artifact, then explain the navigation choice and which module you put in the thumb-friendly zone. </format>

You are a UX designer who wireframes responsive layouts across breakpoints. <context> I need a low-fidelity wireframe showing how one page reflows across desktop, tablet, and mobile, as one self-contained HTML file with inline CSS, with all three frames shown side by side and previewable as an artifact. </context> <inputs> - The page: [E.G. PRODUCT PAGE, DASHBOARD, ARTICLE] - Key blocks on the page: [LIST] - What must stay above the fold on mobile: [PRIORITY ELEMENT] - Nav pattern: [WHAT COLLAPSES INTO A MENU] </inputs> <task> Wireframe the same page three times at labeled frame widths — desktop (multi-column), tablet (reduced columns), and mobile (single column) — showing how the nav collapses to a hamburger, how grids reflow, what reorders, and what gets hidden or moved behind a toggle. Use the same block labels across all three so the reflow is traceable. Mark the priority element staying above the fold on mobile. </task> <constraints> - One self-contained HTML file; three labeled frames; low-fi greyscale, labeled boxes only. - Block labels must be consistent across breakpoints so reviewers can follow each element. - Show nav collapse and column reflow explicitly, not just resized boxes. </constraints> <format> Return the wireframe HTML as an artifact, then list each block and what happens to it at each breakpoint. </format>

You are a mobile product designer who wireframes onboarding carousels. <context> I need a low-fidelity wireframe for a mobile first-launch onboarding carousel, drawn as a row of phone frames in one self-contained HTML file with inline CSS, previewable instantly as an artifact. Greyscale blocks and labels only. </context> <inputs> - App: [WHAT IT DOES] - Number of intro slides: [E.G. 3] - What each slide should teach: [VALUE POINTS] - Ending action: [SIGN UP / ALLOW PERMISSIONS / START] - Skip allowed: [YES/NO] </inputs> <task> Wireframe each carousel slide as a phone frame in sequence: an illustration placeholder, a headline line, a one-line benefit, page-dot indicators showing position, a next/continue button, and a skip affordance if allowed; the final slide swaps the next button for the primary ending action and any permission-request pattern. Label every block, show the dot progression across frames, and mark the single action per slide. </task> <constraints> - One self-contained HTML file; phone-sized frames in a row (wrapping if needed); low-fi greyscale, labeled boxes only. - Page-dot indicator visible and advancing across slides; one action per slide. - Illustrations are labeled placeholders; ending slide clearly distinct. </constraints> <format> Return the wireframe HTML as an artifact, then explain the message order across slides and whether you would gate or defer the permission request. </format>

You are a mobile product designer who wireframes form-heavy screens. <context> I need a low-fidelity wireframe for a mobile form screen, drawn inside a phone frame as one self-contained HTML file with inline CSS, previewable instantly as an artifact. Greyscale blocks and labels only. </context> <inputs> - Form purpose: [E.G. ADD PAYMENT, CREATE LISTING, PROFILE EDIT] - Fields and types: [TEXT, DROPDOWN, DATE, TOGGLE, UPLOAD] - Validation needs: [REQUIRED FIELDS, INLINE ERRORS] - Submit action: [SAVE / CONTINUE / PAY] - Long form?: [SINGLE SCREEN / SECTIONED / STEPPER] </inputs> <task> Wireframe the form inside a phone frame: a top bar with title and back affordance, grouped form sections with labeled field rows showing the right input type (text box, dropdown chevron, date picker, toggle, file-upload tile), inline helper and error-state placeholders, a required-field convention, and a sticky bottom primary action button that stays reachable above the keyboard. If the form is long, show a section stepper or progress. Label every field and pattern. </task> <constraints> - One self-contained HTML file sized to a phone viewport; low-fi greyscale, labeled boxes only. - Primary action sticky at the bottom; tap targets large; one input per row. - Show at least one field in an error state to convey inline validation. </constraints> <format> Return the wireframe HTML as an artifact, then explain the field grouping and your approach to keeping the submit button reachable above the keyboard. </format>

You are a mobile product designer who wireframes detail and profile views. <context> I need a low-fidelity wireframe for a mobile detail or profile screen, drawn inside a phone frame as one self-contained HTML file with inline CSS, previewable instantly as an artifact. Greyscale blocks and labels only. </context> <inputs> - What is being shown: [E.G. PRODUCT, USER PROFILE, LISTING, EVENT] - Hero content: [IMAGE, AVATAR, OR MEDIA CAROUSEL] - Key facts to surface: [PRICE, STATS, BIO, SPECS] - Primary action: [BUY / FOLLOW / BOOK / MESSAGE] - Tabs or scrollable sections: [WHICH] </inputs> <task> Wireframe the screen inside a phone frame: a media hero (image carousel or avatar placeholder with paging dots), a title and key-facts block, a tab bar or section anchors for grouped content (details, reviews, related), placeholder content rows under the active section, and a sticky bottom action bar with the primary action and a secondary option. Show the scroll relationship between the hero and the sticky bar. Label every block and mark the primary action. </task> <constraints> - One self-contained HTML file sized to a phone viewport; low-fi greyscale, labeled boxes only. - Sticky bottom action bar; large tap targets; one dominant action. - Media area is a labeled placeholder with paging-dot indicators if a carousel. </constraints> <format> Return the wireframe HTML as an artifact, then explain what you surfaced above the fold and what you deferred to tabs or deeper scroll. </format>

You are a UX designer who wireframes e-commerce checkout flows. <context> I need a low-fidelity wireframe of a full checkout flow, shown as a connected sequence of screen frames in one self-contained HTML file with inline CSS, previewable instantly as an artifact. Greyscale blocks and labels only. </context> <inputs> - Cart-to-purchase steps: [CART, SHIPPING, PAYMENT, REVIEW, CONFIRMATION] OR "YOU DECIDE" - Guest checkout: [ALLOWED / ACCOUNT REQUIRED] - Payment methods: [CARD, WALLET, BNPL] - Single-page or multi-step: [WHICH] - Trust signals: [SECURITY BADGES, RETURN POLICY] </inputs> <task> Wireframe each step as a labeled frame connected by a progress indicator: cart review (line-item rows, quantity controls, order-summary block), an account/guest choice, shipping address form, delivery-options block, payment method form, an order-review summary with edit links back to prior steps, and a confirmation screen with order number and next steps. Persist an order-summary block across the payment steps. Label every block and mark trust signals near payment. </task> <constraints> - One self-contained responsive HTML file; low-fi greyscale, labeled boxes only. - Visible step/progress indicator on every frame; order summary sticky/persistent through checkout. - Each form has accessible labeled fields; one clear primary action per step. </constraints> <format> Return the wireframe HTML as an artifact, then list the steps, where you reduced friction, and the one step most likely to cause abandonment. </format>

You are a conversion-focused UX designer who wireframes single-page checkouts. <context> I need a low-fidelity wireframe for a one-page express checkout, as one self-contained HTML file with inline CSS, previewable instantly as an artifact. Greyscale blocks and labels only. </context> <inputs> - Product type: [PHYSICAL / DIGITAL / SUBSCRIPTION] - Express wallets first: [APPLE PAY, GOOGLE PAY, PAYPAL] - Required fields only: [EMAIL, SHIPPING, CARD] - Upsell/order-bump: [YES/NO] - Trust elements: [BADGES, GUARANTEE, REVIEWS] </inputs> <task> Wireframe a single-screen, two-column checkout: left column has an express-wallet row at the top, then a compact contact, shipping, and payment form with minimal labeled fields and inline validation; right column has a sticky order-summary card (line items, discount-code field, totals) and trust elements. Add an optional order-bump block and a single prominent pay button. Label every block and field, and mark which fields you cut to reduce friction. </task> <constraints> - One self-contained responsive HTML file; low-fi greyscale, labeled boxes only. - Express wallets above the form; order summary sticky; one dominant pay action. - Stacks to single column on mobile with summary first; show that behavior. </constraints> <format> Return the wireframe HTML as an artifact, then explain the fields you removed and where you placed trust signals relative to the pay button. </format>

You are a UX designer who wireframes subscription signup and plan-selection flows. <context> I need a low-fidelity wireframe of a subscription selection-to-payment flow, as a connected sequence of screen frames in one self-contained HTML file with inline CSS, previewable instantly as an artifact. Greyscale blocks and labels only. </context> <inputs> - Plans: [NAMES AND TIERS] - Billing options: [MONTHLY/ANNUAL, TRIAL?] - Recommended plan: [WHICH] - After-payment step: [ONBOARDING / DASHBOARD] - Add-ons: [YES/NO] </inputs> <task> Wireframe the flow as labeled frames: (1) plan-selection screen with a billing toggle and comparable plan cards (the recommended one marked), (2) optional add-ons screen, (3) account/email step, (4) payment screen with a persistent plan-summary block and trial-terms note, and (5) a success screen leading into onboarding. Show a progress indicator across frames and keep the chosen-plan summary visible from selection through payment. Label every block and mark the recommended plan and trial terms. </task> <constraints> - One self-contained responsive HTML file; low-fi greyscale, labeled boxes only. - Progress indicator on each frame; chosen-plan summary persistent through payment. - Trial/billing terms shown clearly near the pay action, not buried. </constraints> <format> Return the wireframe HTML as an artifact, then explain how you signaled the recommended plan and where you surfaced the trial terms to build trust. </format>

You are an e-commerce UX designer who wireframes cart experiences. <context> I need a low-fidelity wireframe for a shopping cart plus a slide-out mini-cart, as one self-contained HTML file with inline CSS, previewable instantly as an artifact. Greyscale blocks and labels only. </context> <inputs> - Product type: [PHYSICAL / DIGITAL] - Cart line-item details: [IMAGE, NAME, VARIANT, QTY, PRICE] - Promo/discount code: [YES/NO] - Cross-sell/recommendations: [YES/NO] - Shipping estimator: [YES/NO] </inputs> <task> Wireframe two views in one artifact: (1) a slide-out mini-cart drawer triggered from a header cart icon, with line-item rows (thumbnail, name, variant, quantity stepper, price, remove), a subtotal, and view-cart and checkout buttons; and (2) a full cart page with the same line items, a quantity-and-remove controls block, a promo-code field, an order-summary block with subtotal/shipping/total, a cross-sell row, and a prominent checkout button with an "continue shopping" secondary. Label every block and control. </task> <constraints> - One self-contained responsive HTML file; low-fi greyscale, labeled boxes only. - Show both the drawer and full-page cart; quantity steppers and remove actions clearly placed. - Checkout is the dominant action in both views; show an empty-cart state variant. </constraints> <format> Return the wireframe HTML as an artifact, then explain the mini-cart vs full-cart split and where you placed the promo code to avoid distracting from checkout. </format>

You are a UX designer who wireframes booking and reservation flows. <context> I need a low-fidelity wireframe of a booking flow, shown as a connected sequence of screen frames in one self-contained HTML file with inline CSS, previewable instantly as an artifact. Greyscale blocks and labels only. </context> <inputs> - What is booked: [APPOINTMENT / TABLE / ROOM / SERVICE] - Selection inputs: [DATE, TIME SLOT, PARTY SIZE, OPTIONS] - Account needed: [GUEST OK / LOGIN] - Payment/deposit: [NONE / DEPOSIT / FULL] - Confirmation channel: [EMAIL / SMS / CALENDAR] </inputs> <task> Wireframe the flow as labeled frames: (1) selection screen with a date picker and time-slot grid placeholders plus options (party size, service type), (2) details/contact form, (3) optional payment or deposit screen with a booking-summary block, and (4) a confirmation screen with the booking details, an add-to-calendar affordance, and a manage/cancel link. Show a progress indicator and keep a booking-summary block visible from selection onward. Label every block and mark the selected slot state. </task> <constraints> - One self-contained responsive HTML file; low-fi greyscale, labeled boxes only. - Time-slot grid shows available vs selected vs unavailable states via labels/outlines. - Booking summary persistent; one clear primary action per step. </constraints> <format> Return the wireframe HTML as an artifact, then explain the slot-selection pattern and where you confirmed the booking details to reduce no-shows. </format>

You are a UX designer who produces annotated wireframes for developer and stakeholder handoff. <context> I need a low-fidelity wireframe with numbered annotation callouts explaining each element, as one self-contained HTML file with inline CSS, previewable instantly as an artifact. Greyscale blocks plus a margin of annotation notes. </context> <inputs> - Screen to annotate: [E.G. CHECKOUT, DASHBOARD, SIGNUP] - Key elements to spec: [LIST] - Audience: [DEVELOPERS / STAKEHOLDERS / BOTH] - Behaviors to note: [VALIDATION, STATES, INTERACTIONS] </inputs> <task> Wireframe the screen with low-fi blocks, then attach numbered markers to the important elements and a matching numbered annotation list (either in a side rail or below the frame). Each annotation explains the element's purpose, expected behavior, states (default/hover/error/loading/empty), and any data or validation rule. Cover interactions, conditional logic, and edge cases. Label every block and number every annotation consistently. </task> <constraints> - One self-contained responsive HTML file; low-fi greyscale wireframe plus a clearly separated annotation list. - Numbered markers on the wireframe map exactly to the numbered notes. - Annotations are specific and actionable (behavior, states, rules), not decorative. </constraints> <format> Return the annotated wireframe HTML as an artifact, then summarize the open questions or decisions the team still needs to make. </format>

You are a UX designer who documents component states inside wireframes. <context> I need a low-fidelity wireframe that shows the key UI states of a screen or component, as one self-contained HTML file with inline CSS, previewable instantly as an artifact. Greyscale blocks and labels only. </context> <inputs> - Screen/component: [E.G. DATA TABLE, FORM, CARD LIST] - States to cover: [DEFAULT, LOADING, EMPTY, ERROR, SUCCESS, NO-RESULTS] - What triggers each state: [BRIEF NOTE PER STATE] - Primary action per state: [IF ANY] </inputs> <task> Wireframe the same screen/component repeated once per state, each in a clearly labeled frame: default (populated), loading (skeleton/spinner placeholder), empty (first-use guidance plus CTA), error (message plus retry affordance), and any others requested. For each, show how the layout and the available actions change. Label every frame with the state name and the trigger, and mark the recovery action in error/empty states. </task> <constraints> - One self-contained responsive HTML file; low-fi greyscale, labeled boxes only. - One frame per state, all visible at once for comparison; consistent block labels across states. - Loading shown as skeleton/placeholder bars; error and empty states each have a clear next action. </constraints> <format> Return the wireframe HTML as an artifact, then list each state, its trigger, and the recovery path you designed. </format>

You are a UX designer who specifies interactions and navigation on wireframes. <context> I need a low-fidelity wireframe annotated with the interactions and click-through behavior of each element, as one self-contained HTML file with inline CSS, previewable instantly as an artifact. Greyscale blocks and labels only. </context> <inputs> - Screen: [WHICH SCREEN] - Interactive elements: [BUTTONS, LINKS, TABS, ACCORDIONS, MENUS] - Where each leads: [DESTINATION OR EFFECT] - Micro-interactions: [HOVER, EXPAND, TOAST, MODAL OPEN] </inputs> <task> Wireframe the screen, then annotate every interactive element with a short note describing the trigger (click/hover/swipe), the result (navigate to X, open modal, expand section, show toast), and any state change. Use callout markers tied to a notes list. Where an interaction opens another surface (modal, drawer, next page), block out that secondary surface too. Label every interactive element and its destination clearly. </task> <constraints> - One self-contained responsive HTML file; low-fi greyscale wireframe plus an interaction-notes list. - Every interactive element has a labeled trigger-and-result note; destinations named explicitly. - Secondary surfaces (modals/drawers) wireframed inline so the click-through is complete. </constraints> <format> Return the annotated wireframe HTML as an artifact, then list the click-through map (element -> action -> destination) so a developer can wire navigation directly. </format>

You are a product designer who builds clickable low-fi prototypes. <context> I need a clickable low-fidelity wireframe prototype connecting several screens, as one self-contained HTML file with inline CSS and minimal vanilla JS (or anchor links / show-hide) so I can actually click between screens in the artifact preview. Greyscale blocks and labels only. </context> <inputs> - Screens in the flow: [LIST, E.G. HOME, LIST, DETAIL, CREATE] - The path to demo: [THE MAIN CLICK-THROUGH] - Interactive links per screen: [WHICH BUTTONS NAVIGATE WHERE] - Back navigation: [YES/NO] </inputs> <task> Wireframe each screen as a low-fi block layout and wire the key buttons/links so clicking them shows the next screen (toggle visibility or anchor scroll). Implement the primary happy-path click-through plus back navigation if requested. Keep only the navigation interactive; everything else is static placeholder. Label every screen and every clickable element, and add a small "reset / start over" control. </task> <constraints> - One self-contained HTML file; greyscale low-fi; vanilla JS only (no frameworks), kept minimal and commented. - Only navigation is interactive; show one screen at a time with smooth transitions optional. - Every clickable element is visibly marked as interactive. </constraints> <format> Return the clickable wireframe HTML as an artifact, then list the screen map and exactly which elements are wired so I can extend the flow. </format>

You are a UX designer who packages wireframes into a lightweight handoff doc. <context> I need a low-fidelity wireframe paired with a structured handoff spec, as one self-contained HTML file with inline CSS, previewable instantly as an artifact. Greyscale wireframe plus a readable spec section. </context> <inputs> - Screen/feature: [WHAT IT IS] - User goal: [WHAT THE USER ACHIEVES] - Elements and their data: [LIST] - Acceptance criteria I care about: [ANY KNOWN RULES] - Audience: [DEV TEAM / CLIENT] </inputs> <task> Wireframe the screen with labeled low-fi blocks, then below it produce a handoff spec containing: a one-line goal, a numbered element inventory mapped to the wireframe, behavior and state notes per element, validation and data rules, responsive notes, and a short acceptance-criteria checklist written as testable statements. Keep the wireframe and the spec visually linked by shared numbering. Label every block and number every spec item. </task> <constraints> - One self-contained responsive HTML file; low-fi greyscale wireframe plus a clearly structured spec section. - Spec numbering maps to wireframe markers; acceptance criteria are testable, not vague. - No real branding or copy in the wireframe; spec text is concrete and implementable. </constraints> <format> Return the wireframe-plus-spec HTML as an artifact, then list the open questions and assumptions the team should confirm before building. </format>