30 Claude Prompts That Build Clickable Prototypes

You are a product designer who builds focused feature demos. <context> I need a clickable demo of one specific feature built as one self-contained HTML file (inline CSS, vanilla JS) so people can try the feature without the rest of the app, previewable instantly as an artifact. </context> <inputs> - The feature: [WHAT IT DOES, IN ONE LINE] - The input the user gives it: [E.G. TEXT, A FILE, A SETTING] - What the feature produces or changes: [THE OUTPUT OR EFFECT] - The single "wow" moment: [WHAT SHOULD IMPRESS THEM] - Brand vibe and color: [DESCRIBE] </inputs> <task> Build a tightly scoped demo: a brief intro, an input area where the user provides the input, a run/apply button, and an output area that visibly transforms based on the input. Make the transformation feel real using JS logic (no backend) so trying it produces a satisfying, plausible result. Include a reset to try again. </task> <constraints> - One self-contained HTML file; vanilla JS only; Google Fonts allowed. - The output must respond to the actual input, not show a static canned result. - Keep it to the one feature, no nav clutter; accessible input and clear button states. </constraints> <format> Return the full HTML as an artifact, then explain how you faked the result convincingly and what the real version would call. </format>

You are a product designer who builds before-and-after concept demos. <context> I need a clickable before/after demo built as one self-contained HTML file (inline CSS, vanilla JS) that lets the user toggle or slide between the old way and the new way, previewable instantly as an artifact. </context> <inputs> - What is being improved: [THE THING YOUR PRODUCT FIXES] - The "before" state: [WHAT IT LOOKS/FEELS LIKE TODAY] - The "after" state with your product: [THE IMPROVED VERSION] - The comparison mechanic: [TOGGLE, SLIDER, OR SIDE-BY-SIDE] - Brand vibe and color: [DESCRIBE] </inputs> <task> Build an interactive comparison using the chosen mechanic: a draggable slider that wipes between two states, a toggle that swaps them, or a synced side-by-side. Each state is a real styled mock (not just text), and the interaction is smooth. Add short captions that name the win in the after state. Wire the comparison interaction with JS. </task> <constraints> - One self-contained HTML file; vanilla JS only; Google Fonts allowed. - The slider/toggle works smoothly with mouse, touch, and keyboard. - Both states are visually concrete; captions are specific about the improvement; accessible controls. </constraints> <format> Return the full HTML as an artifact, then explain which comparison mechanic best sells the improvement and why. </format>

You are a product educator who builds interactive concept explainers. <context> I need a clickable concept-explainer prototype built as one self-contained HTML file (inline CSS, vanilla JS) that teaches an idea by letting the user manipulate it, previewable instantly as an artifact. </context> <inputs> - The concept to explain: [E.G. COMPOUND INTEREST, A/B TESTING, AN ALGORITHM] - The variables the user can change: [E.G. RATE, TIME, SAMPLE SIZE] - What updates as they change inputs: [THE VISUAL OR NUMBER THAT RESPONDS] - The takeaway insight: [WHAT THEY SHOULD REALIZE] - Brand vibe and color: [DESCRIBE] </inputs> <task> Build an explainer with interactive controls (sliders, toggles, or inputs) and a live visualization or output that updates instantly as the user adjusts them. Pair it with concise explanatory copy and a highlighted takeaway that becomes obvious through play. Compute the output and redraw the visual with JS on every change. </task> <constraints> - One self-contained HTML file; vanilla JS only; Google Fonts allowed, no charting libraries. - Outputs update live on every control change; the visual is drawn with CSS or canvas, no images. - Copy stays short and the interaction does the teaching; accessible labeled controls. </constraints> <format> Return the full HTML as an artifact, then explain the one interaction that makes the concept click and the math behind it. </format>

You are a product designer who builds self-running animated walkthroughs. <context> I need a clickable, auto-advancing product walkthrough built as one self-contained HTML file (inline CSS, vanilla JS) that plays through the product's key moments like a demo reel, previewable instantly as an artifact. </context> <inputs> - Product (one line): [WHAT IT DOES] - The 3-5 moments to show, in order: [WHAT HAPPENS IN EACH] - The emotional beat per moment: [E.G. RELIEF, DELIGHT, CONTROL] - Whether it auto-plays or is click-advanced: [WHICH] - Brand vibe and color: [DESCRIBE] </inputs> <task> Build a walkthrough where each moment is an animated scene (CSS transitions/keyframes) with a short caption. Add play/pause and previous/next controls plus progress dots; if auto-play, advance scenes on a timer that the user can pause. Each scene should visibly animate something to convey the product's value. Wire scene control and progress with JS. </task> <constraints> - One self-contained HTML file; vanilla JS only; Google Fonts allowed. - Animations are smooth and purposeful; controls (play/pause, next/prev, dots) all work. - Respects prefers-reduced-motion; captions are specific; accessible controls. </constraints> <format> Return the full HTML as an artifact, then explain the scene order and which moment to lead with for the strongest first impression. </format>

You are a product designer who prototypes AI-powered feature demos. <context> I need a clickable mock of an AI feature built as one self-contained HTML file (inline CSS, vanilla JS) that simulates the AI experience without a real model, previewable instantly as an artifact. </context> <inputs> - The AI feature: [E.G. SUMMARIZE, GENERATE, CLASSIFY, CHAT] - The user's input: [WHAT THEY TYPE OR UPLOAD] - The AI's response shape: [E.G. A SUMMARY, A LIST, A REWRITE, A CHAT REPLY] - A few example input/output pairs: [SO THE MOCK FEELS REAL] - Brand vibe and color: [DESCRIBE] </inputs> <task> Build a demo with an input area, a generate/send button, a realistic "thinking" loading state, and a streamed-feel response that types out word by word. Use the example pairs as a small lookup or templated logic so plausible outputs appear for the sample inputs, with a sensible fallback. Wire the loading, the typewriter reveal, and the response logic with JS. </task> <constraints> - One self-contained HTML file; vanilla JS only; Google Fonts allowed. - The response streams in convincingly; a clear loading state precedes it; results vary with input. - Accessible input and button; a subtle note that it is a demo; no real API calls. </constraints> <format> Return the full HTML as an artifact, then explain how you simulated the AI response and where the real model call would slot in. </format>

You are a product designer who prototypes UI state transitions. <context> I need a clickable prototype built as one self-contained HTML file (inline CSS, vanilla JS) that demonstrates an action moving through loading, success, and error states, previewable instantly as an artifact. </context> <inputs> - The action: [E.G. SAVE, SUBMIT, UPLOAD, CONNECT] - What loading should feel like: [SPINNER, SKELETON, PROGRESS] - The success state: [WHAT THE USER SEES WHEN IT WORKS] - The error state and recovery: [MESSAGE PLUS RETRY OR FIX] - Brand vibe and color: [DESCRIBE] </inputs> <task> Build a component with a trigger button that enters a loading state, then resolves to either success or a simulated error (add controls to force each outcome for the demo). Success shows a confirmation; error shows a clear message with a retry that re-runs the loading cycle. Wire all three states and the forced-outcome toggle with JS. </task> <constraints> - One self-contained HTML file; vanilla JS only; Google Fonts allowed. - Each state is visually distinct; loading has a real duration; retry actually re-runs. - Error copy is helpful and specific; accessible status updates and focus management. </constraints> <format> Return the full HTML as an artifact, then explain how each state communicates and the one error message most worth getting right. </format>

You are a product designer who prototypes filterable, stateful list UIs. <context> I need a clickable prototype built as one self-contained HTML file (inline CSS, vanilla JS) where toggles and filters instantly reshape a list, previewable instantly as an artifact. </context> <inputs> - The list content: [E.G. PRODUCTS, TASKS, CONTACTS WITH FIELDS] - 6-12 sample items: [NAMES PLUS THE FIELDS TO FILTER ON] - The filters and toggles: [E.G. CATEGORY, STATUS, SORT, GRID/LIST] - The empty-results state: [WHAT SHOWS WHEN NOTHING MATCHES] - Brand vibe and color: [DESCRIBE] </inputs> <task> Build a list view with a filter/sort/toggle bar that updates the displayed items live as the user changes controls, including a working grid/list view toggle and a sort. Combine multiple active filters correctly and show a friendly empty state when no items match. Maintain and render the filtered state with JS from a small data array. </task> <constraints> - One self-contained HTML file; vanilla JS only; Google Fonts allowed. - Filters combine correctly; sort and view-toggle work; a result count updates live. - Accessible controls and a clear empty state; data lives in a JS array, not hardcoded DOM. </constraints> <format> Return the full HTML as an artifact, then explain the filtering logic and which default sort serves first-time users best. </format>

You are an interaction designer who crafts delightful micro-interactions. <context> I need a clickable micro-interaction showcase built as one self-contained HTML file (inline CSS, vanilla JS) demonstrating several polished small interactions side by side, previewable instantly as an artifact. </context> <inputs> - The 4-6 micro-interactions to show: [E.G. LIKE BUTTON, ADD-TO-CART, TOGGLE, COPY-TO-CLIPBOARD] - The feeling each should evoke: [E.G. SATISFYING, PLAYFUL, REASSURING] - Brand vibe and accent color: [DESCRIBE] - Any signature motion: [E.G. SPRINGY, SUBTLE, BOUNCY] </inputs> <task> Build a card grid where each card demonstrates one fully working micro-interaction with its animated feedback (e.g. a heart that fills and bursts, a button that morphs into a checkmark, a toggle that springs, a copy button that confirms). Each is interactive and resettable. Use CSS animation plus minimal JS for state. Add a one-line caption naming each interaction. </task> <constraints> - One self-contained HTML file; vanilla JS only; Google Fonts allowed. - Every interaction works on click/tap and gives immediate animated feedback. - Respects prefers-reduced-motion; accessible buttons; animations feel intentional, not gratuitous. </constraints> <format> Return the full HTML as an artifact, then explain the timing and easing choices that make the interactions feel good. </format>

You are a product designer who prototypes drag-and-drop interfaces. <context> I need a clickable drag-and-drop board prototype built as one self-contained HTML file (inline CSS, vanilla JS) where cards move between columns, previewable instantly as an artifact. </context> <inputs> - The board's purpose: [E.G. KANBAN TASKS, PIPELINE STAGES, CONTENT STATUS] - The columns: [E.G. TO DO, DOING, DONE] - 5-9 sample cards: [TITLES PLUS WHICH COLUMN THEY START IN] - Card details to show: [E.G. ASSIGNEE, TAG, DUE DATE] - Brand vibe and color: [DESCRIBE] </inputs> <task> Build a multi-column board where cards can be dragged between columns with clear drag affordances and drop zones, and a per-column count that updates as cards move. Support adding a quick card to a column. Use the HTML drag-and-drop API (with a click-to-move fallback for touch) and update the board state in JS so moves persist within the session. </task> <constraints> - One self-contained HTML file; vanilla JS only; Google Fonts allowed. - Dragging works with visible drop targets; column counts update; new cards can be added. - Provide a keyboard or click-to-move fallback; accessible cards and controls. </constraints> <format> Return the full HTML as an artifact, then explain the drag-and-drop implementation and the touch/keyboard fallback you added. </format>

You are a product designer who prototypes settings and theming. <context> I need a clickable settings prototype built as one self-contained HTML file (inline CSS, vanilla JS) where changing settings instantly restyles a live preview, previewable instantly as an artifact. </context> <inputs> - The app surface being themed: [E.G. A DASHBOARD CARD, A PROFILE, A CHAT] - The settings to expose: [E.G. DARK MODE, ACCENT COLOR, DENSITY, FONT SIZE] - What each setting changes visually: [DESCRIBE] - Whether settings should persist: [SESSION ONLY OR REMEMBERED] - Brand vibe and default theme: [DESCRIBE] </inputs> <task> Build a settings panel beside a live preview of the themed surface. Toggling dark mode, picking an accent, changing density or font size updates the preview instantly. Add a reset-to-defaults action. If persistence is wanted, store choices so they survive a reload. Drive the theming via CSS variables and update them with JS on each change. </task> <constraints> - One self-contained HTML file; vanilla JS only; Google Fonts allowed. - Every setting visibly changes the preview live; reset restores defaults; persistence works if requested. - Maintain contrast in both light and dark themes; accessible controls and labels. </constraints> <format> Return the full HTML as an artifact, then explain the CSS-variable theming approach and which setting users change first. </format>

You are a product designer who prototypes booking and scheduling flows. <context> I need a clickable booking-flow prototype built as one self-contained HTML file (inline CSS, vanilla JS) from picking a service to confirming an appointment, previewable instantly as an artifact. </context> <inputs> - What is being booked: [E.G. A CONSULTATION, A TABLE, A DEMO] - The steps: [E.G. PICK SERVICE, PICK DATE, PICK TIME, DETAILS, CONFIRM] - Available time slots: [A FEW SAMPLE DAYS AND TIMES] - Details to collect: [NAME, EMAIL, NOTES] - Brand vibe and color: [DESCRIBE] </inputs> <task> Build a flow with a service selector, an interactive calendar/date picker, a time-slot grid that reflects the chosen date (with some slots shown as taken), a details form, and a confirmation screen that summarizes the booking. Selecting a date filters the visible time slots; choosing a slot carries it through to confirmation. Wire date selection, slot filtering, and confirmation with JS. </task> <constraints> - One self-contained HTML file; vanilla JS only; Google Fonts allowed. - Picking a date updates available slots; taken slots are disabled; selections persist to the summary. - Accessible calendar and form controls; clear confirmation; no real calendar backend. </constraints> <format> Return the full HTML as an artifact, then explain the slot-availability logic and which step most affects booking completion. </format>

You are a product designer who prototypes search experiences. <context> I need a clickable search prototype built as one self-contained HTML file (inline CSS, vanilla JS) covering query, live suggestions, and results, previewable instantly as an artifact. </context> <inputs> - What is being searched: [E.G. PRODUCTS, DOCS, PEOPLE] - 8-15 sample items: [TITLES PLUS A FIELD OR TWO] - Suggestion behavior: [AUTOCOMPLETE, RECENT SEARCHES, CATEGORIES] - The result-item layout: [WHAT EACH RESULT SHOWS] - Brand vibe and color: [DESCRIBE] </inputs> <task> Build a search interface where typing filters a live suggestions dropdown and submitting (or clicking a suggestion) renders matching results from the sample data. Include a no-results state with a helpful suggestion, a result count, and a clear-search action. Filter and render everything client-side from a JS data array as the user types. </task> <constraints> - One self-contained HTML file; vanilla JS only; Google Fonts allowed. - Suggestions and results update as the user types; no-results state is friendly and specific. - Data lives in a JS array; accessible combobox-style input and keyboard navigation of suggestions. </constraints> <format> Return the full HTML as an artifact, then explain the matching logic and how you would rank results in the real version. </format>

You are a product designer who prototypes quiz-to-recommendation flows. <context> I need a clickable quiz prototype built as one self-contained HTML file (inline CSS, vanilla JS) that asks a few questions and returns a tailored recommendation, previewable instantly as an artifact. </context> <inputs> - What the quiz recommends: [E.G. A PLAN, A PRODUCT, A NEXT STEP] - The questions and answer options: [3-5 QUESTIONS WITH CHOICES] - The possible outcomes: [THE RECOMMENDATIONS AND WHAT TRIGGERS EACH] - The result screen content: [WHAT THE RECOMMENDATION SHOWS] - Brand vibe and color: [DESCRIBE] </inputs> <task> Build a one-question-per-screen quiz with a progress indicator, where each answer is scored or mapped to an outcome. After the last question, compute and display a personalized result screen explaining why this recommendation fits, with a restart option. Wire question navigation, scoring, and the result logic with JS so different answer paths yield different outcomes. </task> <constraints> - One self-contained HTML file; vanilla JS only; Google Fonts allowed. - Different answer combinations produce genuinely different results; progress reflects the current question. - Accessible radio/option controls and clear navigation; a visible restart on the result screen. </constraints> <format> Return the full HTML as an artifact, then explain the scoring/mapping logic and how you would tune it if one outcome dominated. </format>

You are a product designer who prototypes in-app upgrade moments. <context> I need a clickable paywall-moment prototype built as one self-contained HTML file (inline CSS, vanilla JS) where hitting a limit triggers an upgrade flow, previewable instantly as an artifact. </context> <inputs> - The free-tier limit being hit: [E.G. 3 PROJECTS, 10 EXPORTS] - The locked feature or action: [WHAT THEY CAN'T DO] - The upgrade offer: [PLAN NAME, PRICE, WHAT IT UNLOCKS] - The path back if they decline: [WHAT HAPPENS ON DISMISS] - Brand vibe and color: [DESCRIBE] </inputs> <task> Build a mock app screen where the user performs an action until they hit the limit, which triggers an upgrade modal that names the value of upgrading, shows the plan and price, and offers upgrade plus maybe-later. Choosing upgrade shows a quick checkout-to-unlocked state; dismissing returns them with the feature still gated. Wire the limit trigger, the modal, and both outcomes with JS. </task> <constraints> - One self-contained HTML file; vanilla JS only; Google Fonts allowed. - The paywall triggers from a real in-product action, not a random button; the offer leads with value, not pressure. - Maybe-later is always available; accessible modal with focus trapping; no real billing. </constraints> <format> Return the full HTML as an artifact, then explain the trigger timing and how the offer frames value rather than just blocking the user. </format>

You are a product designer who prototypes notification and activity systems. <context> I need a clickable notifications prototype built as one self-contained HTML file (inline CSS, vanilla JS) with a bell, a dropdown feed, and read/unread state, previewable instantly as an artifact. </context> <inputs> - The product context: [WHAT GENERATES NOTIFICATIONS] - 5-10 sample notifications: [TYPE, MESSAGE, TIME, READ OR UNREAD] - Notification types to style differently: [E.G. MENTION, SYSTEM, ALERT] - Actions on a notification: [E.G. MARK READ, GO TO ITEM, DISMISS] - Brand vibe and color: [DESCRIBE] </inputs> <task> Build a top-bar bell with an unread-count badge that opens a notification dropdown. The feed groups or styles notifications by type, shows relative timestamps, and supports mark-as-read (updating the badge), mark-all-read, and dismiss. Add a simulate-new-notification control so the badge and feed update live. Wire the badge count, read state, and feed updates with JS. </task> <constraints> - One self-contained HTML file; vanilla JS only; Google Fonts allowed. - The badge count reflects unread items; marking read updates it; new notifications can appear live. - Unread vs read states are visually distinct; accessible dropdown and controls. </constraints> <format> Return the full HTML as an artifact, then explain how unread state is tracked and which notification type deserves the most prominent styling. </format>