30 Claude Prompts That Build a SaaS

You are a data-visualization engineer who builds product analytics SaaS. <context> I need a product-analytics dashboard for my SaaS, built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. Render charts with lightweight inline SVG or canvas, no chart libraries. </context> <inputs> - Product: [WHAT USERS DO IN IT] - Core metrics: [E.G. DAU, WAU, ACTIVATION RATE, RETENTION] - Key funnel steps: [E.G. SIGNUP, ACTIVATED, PAID] - Date range control: [E.G. 7D, 30D, 90D] - Accent color: [DESCRIBE] </inputs> <task> Build a dashboard with a date-range selector, a KPI row with sparklines and week-over-week deltas, an active-users line chart, a conversion-funnel bar chart with step drop-off percentages computed in JS, and a top-events table. Seed realistic time-series data, render the charts from it with inline SVG, and have the date-range selector reslice the data and update every chart and KPI. </task> <constraints> - One self-contained HTML file; no chart libraries or frameworks, Google Fonts only. - Funnel drop-off and deltas are computed from the seeded data, not hard-coded. - Accessible charts with text summaries; realistic metric values. </constraints> <format> Return the full HTML as an artifact, then explain the data shape each chart expects and how to pipe in real event data. </format>

You are a front-end engineer who builds web-analytics dashboards. <context> I need a web-traffic analytics overview for my SaaS, built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact, with charts drawn in inline SVG. </context> <inputs> - Site type: [E.G. SAAS MARKETING SITE, BLOG] - Metrics: [VISITORS, PAGE VIEWS, BOUNCE RATE, AVG SESSION] - Dimensions to break down: [TOP PAGES, SOURCES, COUNTRIES, DEVICES] - Time range: [E.G. LAST 30 DAYS] - Accent color: [DESCRIBE] </inputs> <task> Build an overview with a headline metrics row, a visitors-over-time area chart, and a set of breakdown panels: top pages, referral sources, countries, and devices, each as a ranked list with a percentage bar. Seed realistic data, compute the percentage bars and totals in JS, and add a segment toggle (e.g. all traffic vs organic) that reslices every panel. </task> <constraints> - One self-contained HTML file; no chart libraries or frameworks, Google Fonts only. - Percentages sum sensibly and are computed from the data; realistic sources and pages. - Accessible ranked lists and chart with a text summary. </constraints> <format> Return the full HTML as an artifact, then explain the breakdown data structure and how to connect it to an analytics API. </format>

You are a data engineer who builds retention-analysis tooling. <context> I need a cohort-retention analysis view for my SaaS, built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. </context> <inputs> - What defines a cohort: [E.G. SIGNUP WEEK, SIGNUP MONTH] - Retention event: [E.G. RETURNED AND WAS ACTIVE] - Number of periods to show: [E.G. 8 WEEKS] - Metric shown: [PERCENT RETAINED / COUNT] - Accent color for the heatmap: [DESCRIBE] </inputs> <task> Build a cohort retention grid: rows are cohorts (with size), columns are periods since signup (0..N), and each cell shows the retention percentage shaded as a heatmap from light to your accent color by value. Seed realistic cohort data with a natural decay curve, compute the percentages and column averages in JS, add a toggle between percentage and absolute counts, and show a summary of average retention by period below the grid. </task> <constraints> - One self-contained HTML file; no frameworks, Google Fonts only. - Heatmap color scales continuously with the value; percentages computed, not hard-coded. - Accessible table with headers and readable cell contrast at every shade. </constraints> <format> Return the full HTML as an artifact, then explain the cohort data shape and the SQL-style query that would produce it. </format>

You are a front-end engineer who builds live operational dashboards. <context> I need a real-time metrics monitor for my SaaS, built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. Simulate live updates with a JS timer. </context> <inputs> - What is monitored: [E.G. ACTIVE USERS, REQUESTS/SEC, ERRORS, REVENUE TODAY] - Live counters I want: [LIST 3-4] - An event feed of: [E.G. SIGNUPS, PURCHASES, ERRORS] - Refresh cadence feel: [E.G. EVERY 2 SECONDS] - Accent color: [DESCRIBE] </inputs> <task> Build a monitor with big live counter tiles that tick and animate on change, a rolling line/bar chart of the primary metric over the last N intervals, and a live event stream that prepends new events with type, timestamp, and detail. Use a JS interval to simulate incoming data: increment counters, shift the chart window, and push new events, with a pause/resume control and a subtle flash on updates. </task> <constraints> - One self-contained HTML file; no frameworks, Google Fonts only. - Updates are driven by a timer and are visibly live but not distracting; pausable. - Accessible live region for the event feed; realistic event types and values. </constraints> <format> Return the full HTML as an artifact, then explain how to replace the simulated timer with a WebSocket or SSE connection. </format>

You are a senior product engineer scoping an analytics feature. <context> I need a precise build spec for a self-serve custom report builder in my analytics SaaS, so an engineer or Claude can implement it without further clarification. Return a structured spec document, not code. </context> <inputs> - Data available: [E.G. EVENTS WITH PROPERTIES, USERS, REVENUE] - Dimensions users can group by: [LIST] - Metrics they can measure: [LIST] - Visualization types: [E.G. TABLE, LINE, BAR] - Constraints: [E.G. SAVE/SHARE REPORTS, DATE RANGE, FILTERS] </inputs> <task> Produce a build spec with: an overview and user stories; the UI layout (dimension/metric pickers, filter builder, chart-type switch, results canvas, save/share); the report config data model as a typed schema (JSON/TypeScript); the query-generation approach (how a config maps to an aggregation query); validation rules and empty/error states; and a phased implementation plan (MVP vs later). Include one worked example config and the query it produces. </task> <constraints> - Structured document with clear headings and tables; concrete, not hand-wavy. - Include the exact config schema and one full worked example. - Call out edge cases (no data, incompatible dimension+metric, huge result sets). </constraints> <format> Return the spec as a formatted document (an artifact), then a one-paragraph summary of the riskiest implementation decision. </format>

You are a front-end engineer who builds polished AI chat interfaces. <context> I am building an AI-wrapper SaaS and need a chat assistant UI as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. Mock the AI responses; no real API calls. </context> <inputs> - Assistant purpose: [E.G. A LEGAL DRAFTING HELPER, A CODING COPILOT] - Assistant name and persona: [NAME, TONE] - Suggested starter prompts: [3-4 EXAMPLES] - Features: [E.G. STREAMING FEEL, COPY BUTTON, REGENERATE, MODEL PICKER] - Accent color: [DESCRIBE] </inputs> <task> Build a chat app with a sidebar of past conversations, a main thread with user and assistant message bubbles, markdown-style rendering for assistant replies (code blocks with a copy button), a starter-prompt grid on an empty thread, and an input box with send-on-enter. Mock responses with a typewriter streaming effect from a canned reply set, and wire new-chat, message send, regenerate, and copy in vanilla JS. </task> <constraints> - One self-contained HTML file; no frameworks, Google Fonts only. - Streaming is a visual simulation; make the mock response layer a single swappable function. - Accessible: input labeled, messages in a live region, keyboard send. </constraints> <format> Return the full HTML as an artifact, then explain where to plug in a real streaming Claude API call and how to render true markdown. </format>

You are a front-end engineer building AI content-generation SaaS. <context> I need an AI content generator tool as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. Mock the generation output; no real API. </context> <inputs> - What it generates: [E.G. PRODUCT DESCRIPTIONS, AD COPY, EMAILS] - Input fields the user fills: [E.G. TOPIC, TONE, LENGTH, KEYWORDS] - Preset templates: [2-4 NAMED PRESETS] - Output actions: [COPY, REGENERATE, VARIATIONS] - Accent color: [DESCRIBE] </inputs> <task> Build a two-panel tool: a left input form with the fields plus a preset selector that pre-fills them, a tone and length control, and a generate button; and a right output panel that shows a loading state then renders a mocked result, with copy, regenerate, and generate-variations (produce 2-3 alternates as tabs). Track a simple usage/credits counter that decrements per generation and disables the button at zero. </task> <constraints> - One self-contained HTML file; no frameworks, Google Fonts only. - Mocked generation lives behind one function; presets and credits logic are readable. - Accessible form and output region; realistic sample outputs, not lorem ipsum. </constraints> <format> Return the full HTML as an artifact, then explain the prompt-assembly logic and where a real model call replaces the mock. </format>

You are a front-end engineer who builds document-Q&A (RAG) interfaces. <context> I need an AI document Q&A app as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. Mock uploads, retrieval, and answers; no real API. </context> <inputs> - Document types: [E.G. PDFS, CONTRACTS, POLICIES] - Use case: [E.G. ASK QUESTIONS ABOUT UPLOADED CONTRACTS] - Answer style: [CONCISE WITH CITATIONS] - Features: [E.G. SOURCE HIGHLIGHTS, MULTI-DOC, HISTORY] - Accent color: [DESCRIBE] </inputs> <task> Build an app with a left panel to add documents (drag-drop zone plus a seeded list of 2-3 mock docs with page counts), a center chat where the user asks questions and gets mocked answers that include inline citation chips referencing a doc and page, and a right panel that shows the cited source snippet when a citation chip is clicked. Wire upload simulation, question submit, citation-to-source linking, and a clear-history control in vanilla JS. </task> <constraints> - One self-contained HTML file; no frameworks, Google Fonts only. - Citations must link to and reveal the matching mock source snippet. - Accessible file input and chat; realistic questions, answers, and snippets. </constraints> <format> Return the full HTML as an artifact, then explain the retrieval-and-citation flow and how to back it with real embeddings and a Claude call. </format>

You are a front-end engineer building an AI experimentation playground. <context> I need an AI prompt playground for my SaaS as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. Mock the model output; no real API. </context> <inputs> - What users experiment with: [E.G. TEXT PROMPTS, IMAGE PROMPTS] - Parameters to expose: [E.G. TEMPERATURE, MAX LENGTH, STYLE, MODEL] - Saved prompt library: [YES/NO AND SAMPLE ITEMS] - Output display: [TEXT / IMAGE GRID] - Accent color: [DESCRIBE] </inputs> <task> Build a playground with a system-and-user prompt editor, a parameter sidebar with sliders and selects (temperature, max length, model), a run button, and an output area that shows a mocked result plus the parameters used. Add a run-history list users can click to restore a previous prompt+params, and a save-to-library action. Wire the sliders, run (mock), history restore, and library in vanilla JS. </task> <constraints> - One self-contained HTML file; no frameworks, Google Fonts only. - History entries capture the exact prompt and params so runs are reproducible. - Accessible sliders and editor; realistic sample prompts and outputs. </constraints> <format> Return the full HTML as an artifact, then explain the run/params data shape and where to send it to a real model endpoint. </format>

You are a senior engineer scoping an AI-automation product. <context> I need a precise build spec for a visual AI agent workflow builder in my SaaS, so it can be implemented without further questions. Return a structured spec document, not code. </context> <inputs> - What workflows automate: [E.G. LEAD ENRICHMENT, SUPPORT TRIAGE] - Node types: [E.G. TRIGGER, LLM STEP, TOOL CALL, CONDITION, OUTPUT] - Tools/integrations available: [LIST] - Execution model: [SEQUENTIAL / BRANCHING] - Constraints: [E.G. SAVE, VERSION, TEST-RUN, LOGS] </inputs> <task> Produce a spec with: overview and target user; the canvas UX (node palette, drag-connect, config panel per node type); the workflow data model as a typed schema (nodes, edges, per-node config, variables passed between steps); the execution engine design (how a run traverses nodes, handles branches, passes context, and logs); validation (disconnected nodes, cycles, missing config); and a phased plan. Include one worked example workflow described as its JSON graph plus a step-by-step run trace. </task> <constraints> - Structured document with headings, tables, and the exact schema; concrete throughout. - Include one full example workflow graph and its execution trace. - Address error handling, retries, and how LLM step outputs feed later nodes. </constraints> <format> Return the spec as a formatted document (an artifact), then a short note on the hardest part to get right and why. </format>

You are a front-end engineer who builds internal admin tools. <context> I need a working admin CRUD panel for one resource in my SaaS, built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. </context> <inputs> - Resource being managed: [E.G. USERS, PRODUCTS, ORDERS] - Fields per record: [NAME, TYPE, AND WHICH ARE REQUIRED] - Statuses or enums: [E.G. ACTIVE/SUSPENDED] - Bulk actions I need: [E.G. DELETE, EXPORT] - Accent color: [DESCRIBE] </inputs> <task> Build a panel with a searchable, sortable, paginated table of the resource, row checkboxes for bulk actions, a create button opening a validated add-record modal, per-row edit and delete (with confirm) actions, and a status badge column. Hold records in a JS array so create, edit, and delete update the table live, with inline form validation and a toast on each successful action. Seed 10-12 realistic records. </task> <constraints> - One self-contained HTML file; no frameworks, Google Fonts only. - Full create/read/update/delete works against the in-memory array; validation enforced. - Accessible table, modal (focus trap, escape), and toasts; realistic data. </constraints> <format> Return the full HTML as an artifact, then explain the record schema and how to swap the in-memory store for REST or GraphQL calls. </format>

You are a platform engineer who builds internal feature-management tools. <context> I need a feature-flag management console for my SaaS, built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. </context> <inputs> - Environments: [E.G. DEV, STAGING, PRODUCTION] - Sample flags: [4-6 FLAG NAMES AND DESCRIPTIONS] - Flag types: [E.G. BOOLEAN, PERCENTAGE ROLLOUT] - Who can toggle: [ROLE NOTE] - Accent color: [DESCRIBE] </inputs> <task> Build a console with an environment tab switcher, a searchable table of flags showing name, description, type, and a per-environment on/off toggle plus a rollout-percentage slider for gradual flags, and a create-flag modal. Toggling or changing rollout updates state in a JS object per environment, writes an entry to an audit-log panel (who, what, when), and shows a toast. Seed flags with different states across environments. </task> <constraints> - One self-contained HTML file; no frameworks, Google Fonts only. - State is tracked per environment; the audit log records every change. - Accessible toggles and sliders with text values; realistic flag names. </constraints> <format> Return the full HTML as an artifact, then explain the flag data model and how to serve these flags to your app via an API or SDK. </format>

You are a front-end engineer who builds internal support tooling. <context> I need a support ticket queue tool for my SaaS, built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. </context> <inputs> - Ticket fields: [SUBJECT, REQUESTER, PRIORITY, STATUS, ASSIGNEE, CREATED] - Statuses: [E.G. NEW, OPEN, PENDING, RESOLVED] - Priorities: [LOW, MEDIUM, HIGH, URGENT] - Agents: [2-4 NAMES] - Accent color: [DESCRIBE] </inputs> <task> Build a two-pane tool: a left queue list filterable by status, priority, and assignee with a search box and unread/SLA indicators, and a right ticket detail pane showing the conversation thread, requester info, and controls to change status, priority, and assignee plus a reply box. Seed 10-12 realistic tickets; selecting one loads it, and changing its status or assignee updates the list live in vanilla JS. Show a count badge per status. </task> <constraints> - One self-contained HTML file; no frameworks, Google Fonts only. - Filters combine; list and detail stay in sync from one ticket array. - Accessible list, detail controls, and reply form; realistic ticket content. </constraints> <format> Return the full HTML as an artifact, then explain the ticket data shape and how to connect it to an inbox or helpdesk API. </format>

You are a front-end engineer who builds data-import tooling. <context> I need a CSV import and column-mapping tool for my SaaS, built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. Parse CSV in the browser. </context> <inputs> - What is being imported: [E.G. CONTACTS, PRODUCTS] - Target fields in my system: [LIST WITH TYPES AND REQUIRED FLAGS] - Validation rules: [E.G. EMAIL FORMAT, UNIQUE ID] - Duplicate handling: [SKIP / UPDATE] - Accent color: [DESCRIBE] </inputs> <task> Build a three-step importer: (1) upload or paste CSV, parsed in JS with a preview of the first rows and detected headers; (2) a mapping step where each source column maps to a target field via dropdowns, with smart auto-mapping by name and required-field checks; (3) a validation-and-import summary showing valid rows, row-level errors with reasons, and duplicate counts, then a confirm-import that reports how many would be created vs skipped. Handle quoted fields and commas correctly. </task> <constraints> - One self-contained HTML file; no frameworks, Google Fonts only. - CSV parsing handles quotes and commas; validation reports per-row errors clearly. - Accessible steps and controls; block import until required fields are mapped. </constraints> <format> Return the full HTML as an artifact, then explain the mapping/validation model and how to stream large files to a backend import. </format>

You are a front-end engineer who builds access-control admin tools. <context> I need a roles and permissions manager for my SaaS, built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. </context> <inputs> - Roles: [E.G. OWNER, ADMIN, EDITOR, VIEWER] - Resources/actions to control: [E.G. VIEW, CREATE, EDIT, DELETE PER RESOURCE] - Any locked defaults: [E.G. OWNER ALWAYS FULL ACCESS] - Members to assign: [3-5 SAMPLE MEMBERS] - Accent color: [DESCRIBE] </inputs> <task> Build a manager with a permission matrix (roles as columns, resource/action pairs as rows) of toggles, with owner locked to full access, a create-role action that clones an existing role, and a members panel where each member is assigned a role via dropdown. Changing a toggle updates a permissions object in JS and reflects instantly; show a live preview of what a selected role can do. Seed the roles and a sensible default permission set. </task> <constraints> - One self-contained HTML file; no frameworks, Google Fonts only. - Locked defaults cannot be unset; the permissions object is the single source of truth. - Accessible matrix toggles and member assignment; realistic role setup. </constraints> <format> Return the full HTML as an artifact, then explain the permissions data model and how to enforce the same checks on the backend. </format>