50 Claude Prompts That Build Websites

You are a senior brand designer and web developer. <context> Build a complete startup marketing site as one self-contained, responsive HTML file with inline CSS and anchor-based navigation between sections, returned as a previewable artifact. </context> <inputs> - Company: [NAME AND ONE-LINE PITCH] - Audience: [WHO] - Sections I want: [E.G. HOME, FEATURES, PRICING, ABOUT, CONTACT] - Brand vibe and colors: [DESCRIBE] </inputs> <task> Build a cohesive site with sticky nav linking each section: hero, features, how-it-works, pricing, social proof, about, and a contact/CTA footer. Write all copy. </task> <constraints> - One responsive HTML file, consistent design system, semantic HTML, accessible contrast. - No dependencies except Google Fonts. </constraints> <format> Return the full HTML in an artifact, then list the design-system choices (type scale, color, spacing) so I can extend it. </format>

You are an art director and front-end developer building a bold creative-agency site. <context> Build a complete creative-agency website as one self-contained, responsive HTML file with inline CSS and anchor-based navigation, returned as a previewable artifact. The design should feel confident and visually expressive, not template-generic. </context> <inputs> - Agency name and positioning: [E.G. NORTHLIGHT, A BRAND AND MOTION STUDIO FOR CHALLENGER BRANDS] - Services to feature: [E.G. BRANDING, WEB, MOTION, CAMPAIGN STRATEGY] - Signature projects to showcase: [3-6 PROJECT NAMES WITH CLIENT AND RESULT] - Aesthetic direction and colors: [DESCRIBE] </inputs> <task> Build the site with sticky nav linking: a high-impact hero with a statement headline, a services grid, a filterable-feel work showcase using project cards, a process or capabilities section, a clients/awards strip, a founder or team blurb, and a bold contact/brief-request footer. Write punchy agency copy and realistic project captions. </task> <constraints> - One responsive HTML file, expressive but coherent design system, semantic HTML, accessible contrast and focus states. - Use CSS-only hover and reveal effects; no JS frameworks. Google Fonts allowed. - Use solid color blocks or gradients as placeholders for project imagery, each labeled with the project name. </constraints> <format> Return the full HTML in an artifact, then explain the visual concept and the type, color, and grid system so I can extend it. </format>

You are a hospitality-focused web designer building an appetizing restaurant site. <context> Build a complete restaurant or cafe website as one self-contained, responsive HTML file with inline CSS and anchor-based navigation, returned as a previewable artifact. It should make people hungry and make booking or visiting effortless. </context> <inputs> - Venue name and concept: [E.G. SAGE AND SALT, A SEASONAL FARM-TO-TABLE BISTRO] - Cuisine and price range: [DESCRIBE] - Hours and location: [ADDRESS, DAYS, TIMES] - Mood and colors: [DESCRIBE] </inputs> <task> Build the site with sticky nav linking: a warm hero with the concept and a reserve/order CTA, an about-the-kitchen section, a structured menu with at least three categories and real dish names, prices, and descriptions, a gallery section, hours and location with a contact block, and a footer with social and reservation links. Write evocative food copy. </task> <constraints> - One responsive HTML file, warm and legible design system, semantic HTML, accessible contrast. - Menu must be styled cleanly with dish, description, and price aligned; no dependencies except Google Fonts. - Use color blocks or CSS gradients labeled as dish or interior photos for imagery placeholders. </constraints> <format> Return the full HTML in an artifact, then summarize the menu structure and design tokens so I can add or reprice items. </format>

You are a real-estate web specialist building a polished property-listings site. <context> Build a complete real-estate listings website as one self-contained, responsive HTML file with inline CSS and anchor-based navigation, returned as a previewable artifact. It should feel trustworthy and make browsing properties easy. </context> <inputs> - Brokerage or agent name and market: [E.G. HARBORLINE REALTY, LUXURY COASTAL HOMES] - Properties to list: [4-8 LISTINGS WITH PRICE, BEDS, BATHS, SQFT, LOCATION, ONE-LINE DESCRIPTION] - Audience: [E.G. FIRST-TIME BUYERS, INVESTORS, LUXURY BUYERS] - Brand colors and tone: [DESCRIBE] </inputs> <task> Build the site with sticky nav linking: a hero with a search-feel filter bar (visual only), a featured-listings grid of property cards showing price, key specs, and location, a single expanded featured-property highlight, a neighborhoods or market section, an agent bio with credentials, a testimonials strip, and a contact or schedule-a-viewing footer. Write credible listing copy. </task> <constraints> - One responsive HTML file, clean and premium design system, semantic HTML, accessible contrast. - Property cards must be consistent and scannable; no dependencies except Google Fonts. - Use labeled color blocks or gradients for property photos. </constraints> <format> Return the full HTML in an artifact, then list the card data structure and design tokens so I can swap in real listings. </format>

You are a mission-driven web designer building a nonprofit site that inspires action. <context> Build a complete nonprofit or cause website as one self-contained, responsive HTML file with inline CSS and anchor-based navigation, returned as a previewable artifact. It should build trust and drive donations and volunteer sign-ups. </context> <inputs> - Organization name and mission: [E.G. CLEARWATER FUND, RESTORING URBAN RIVERS] - The problem and the impact so far: [DESCRIBE WITH ANY REAL NUMBERS] - Ways to help: [E.G. DONATE, VOLUNTEER, PARTNER] - Tone and colors: [DESCRIBE] </inputs> <task> Build the site with sticky nav linking: an emotive hero with a primary donate CTA, a mission and problem section, an impact section with stat callouts, a programs or how-we-work section, a stories or testimonials block, a ways-to-give section with suggested donation tiers, a transparency or finances note, and a footer with newsletter and contact. Write sincere, specific copy that avoids cliche. </task> <constraints> - One responsive HTML file, warm and credible design system, semantic HTML, strong accessible contrast. - Donation tiers must show amount and concrete impact; no dependencies except Google Fonts. - Use labeled color blocks or gradients for imagery placeholders. </constraints> <format> Return the full HTML in an artifact, then explain the stat and donation-tier structure plus design tokens so I can update figures. </format>

You are a portfolio and personal-brand designer building a memorable individual site. <context> Build a complete personal-brand website as one self-contained, responsive HTML file with inline CSS and anchor-based navigation, returned as a previewable artifact. It should position the person clearly and make hiring or contacting them easy. </context> <inputs> - Name and headline: [E.G. MAYA OKONKWO, PRODUCT DESIGNER AND SPEAKER] - What I do and who I help: [DESCRIBE] - Highlights to feature: [E.G. SELECTED WORK, TALKS, WRITING, AWARDS] - Personality and colors: [DESCRIBE] </inputs> <task> Build the site with sticky nav linking: a confident hero with name, headline, and CTA, an about section in first person, a selected-work or projects section with cards, a services or what-I-offer section, a speaking, writing, or press section, a short testimonials strip, and a contact footer with social links. Write authentic first-person copy. </task> <constraints> - One responsive HTML file, distinctive but readable design system, semantic HTML, accessible contrast and focus states. - No dependencies except Google Fonts; use a labeled color block or gradient for the portrait placeholder. </constraints> <format> Return the full HTML in an artifact, then summarize the voice and design tokens so I can keep new sections on-brand. </format>

You are a product designer and developer building a SaaS site that blends marketing and documentation. <context> Build a combined SaaS marketing-plus-documentation site as one self-contained, responsive HTML file with inline CSS and anchor-based navigation, returned as a previewable artifact. The marketing sections sell the product and the docs sections help users get started. </context> <inputs> - Product: [NAME AND ONE-LINE PITCH] - Core features: [LIST 3-6] - Audience and use case: [DESCRIBE] - Brand vibe and colors: [DESCRIBE] </inputs> <task> Build the site with sticky nav linking two zones: a marketing zone (hero, features, pricing, CTA) and a docs zone with a left-side anchor menu linking sections like getting started, installation with a styled code snippet, core concepts, an API or reference section, and an FAQ. Write real marketing and documentation copy, including at least two realistic code examples. </task> <constraints> - One responsive HTML file, clear design system distinguishing marketing from docs, semantic HTML, accessible contrast. - Code blocks must be monospaced, styled, and readable; no dependencies except Google Fonts. - Docs nav should highlight or scroll to the active section using anchors and CSS only. </constraints> <format> Return the full HTML in an artifact, then explain how the marketing and docs zones share tokens and how to add a new docs section. </format>

You are an e-commerce designer building a clean, conversion-focused storefront. <context> Build a complete small e-commerce storefront as one self-contained, responsive HTML file with inline CSS and anchor-based navigation, returned as a previewable artifact. It should showcase products and drive add-to-cart intent. </context> <inputs> - Store name and what you sell: [E.G. EMBER GOODS, SMALL-BATCH CANDLES] - Products: [4-8 ITEMS WITH NAME, PRICE, SHORT DESCRIPTION] - Audience and brand feel: [DESCRIBE] - Colors and tone: [DESCRIBE] </inputs> <task> Build the site with sticky nav linking: a hero with brand promise and shop CTA, a product grid of cards showing image placeholder, name, price, and add-to-cart button, one expanded featured-product detail block with options, a brand story section, a reviews strip, a shipping and returns or FAQ section, and a footer with newsletter and policies. Write persuasive product copy. </task> <constraints> - One responsive HTML file, polished retail design system, semantic HTML, accessible contrast. - Product cards must be uniform and scannable with clear price and button states; no dependencies except Google Fonts. - Use labeled color blocks or gradients for product photos; cart and checkout can be visual only. </constraints> <format> Return the full HTML in an artifact, then list the product-card data structure and design tokens so I can add inventory. </format>

You are a B2B web strategist building a credible professional-services firm site. <context> Build a complete professional-services firm website as one self-contained, responsive HTML file with inline CSS and anchor-based navigation, returned as a previewable artifact. It should signal expertise and generate qualified inquiries. </context> <inputs> - Firm name and discipline: [E.G. MERIDIAN PARTNERS, MANAGEMENT CONSULTING FOR MID-MARKET FIRMS] - Services and industries served: [LIST] - Proof points: [E.G. CASE RESULTS, CLIENT LOGOS, YEARS, TEAM CREDENTIALS] - Tone and colors: [DESCRIBE] </inputs> <task> Build the site with sticky nav linking: an authoritative hero with positioning and a book-a-call CTA, a services or practice-areas section, an industries-served section, a case-results or outcomes section with quantified wins, an approach or methodology section, a team or leadership section with bios and credentials, a clients or recognition strip, an insights or resources teaser, and a contact footer. Write professional, results-oriented copy. </task> <constraints> - One responsive HTML file, refined corporate design system, semantic HTML, accessible contrast. - Case results must include realistic quantified outcomes; no dependencies except Google Fonts. - Use labeled color blocks for client logos and team photos. </constraints> <format> Return the full HTML in an artifact, then summarize the case-result and bio structures plus design tokens so I can update them. </format>

You are a community-platform designer building a site that drives membership sign-ups. <context> Build a complete community or membership website as one self-contained, responsive HTML file with inline CSS and anchor-based navigation, returned as a previewable artifact. It should communicate belonging and the value of joining. </context> <inputs> - Community name and purpose: [E.G. THE BUILD CLUB, A NETWORK FOR INDIE FOUNDERS] - Who it is for: [DESCRIBE THE MEMBER] - Member benefits: [LIST 4-6] - Membership tiers and prices: [LIST] - Vibe and colors: [DESCRIBE] </inputs> <task> Build the site with sticky nav linking: a welcoming hero with a join CTA and member-count or proof line, a what-you-get benefits section, an inside-the-community or activities section, a member-spotlight or testimonials block, an events or rituals section, a membership-tiers pricing section with feature comparison, an FAQ, and a join footer. Write inviting, specific community copy. </task> <constraints> - One responsive HTML file, friendly and energetic design system, semantic HTML, accessible contrast. - Tier cards must clearly compare benefits and price with a recommended-tier highlight; no dependencies except Google Fonts. - Use labeled color blocks or gradients for member photos and event imagery. </constraints> <format> Return the full HTML in an artifact, then explain the tier-comparison structure and design tokens so I can adjust benefits and pricing. </format>

You are a senior portfolio designer and copywriter. <context> Build a single-page design portfolio as one self-contained, responsive HTML file with inline CSS, returned as a previewable artifact. </context> <inputs> - Name and discipline: [E.G. PRODUCT DESIGNER] - Best 3 projects (title + one-line result): [LIST] - Audience I want to attract: [WHO] - Vibe: [MINIMAL / BOLD / EDITORIAL] </inputs> <task> Build a hero with a clear positioning line, a selected-work grid with case-study cards, an about blurb, a skills strip, and a contact CTA. Write all copy, framing every project around the outcome it created, not the deliverable. </task> <constraints> - One responsive HTML file, generous whitespace, accessible contrast, semantic HTML5 landmarks. - No dependencies except Google Fonts. - Real copy throughout, no placeholder text. </constraints> <format> Return the full HTML in an artifact, then suggest which project to feature first to attract my target audience. </format>

You are a senior frontend engineer who reviews technical portfolios for hiring managers. <context> Build a developer portfolio as one self-contained, responsive HTML file with inline CSS, returned as a previewable artifact. </context> <inputs> - Name and role: [E.G. FULL-STACK ENGINEER] - Core stack: [LANGUAGES / FRAMEWORKS] - Top 3 projects (name, what it does, impact metric): [LIST] - Links to add: [GITHUB / LINKEDIN / RESUME] </inputs> <task> Build a hero with a one-line value proposition, a project grid where each card shows the problem solved and the tech used, a skills section grouped by category, and a contact block. Write copy that emphasizes shipped impact and measurable results over a list of tools. </task> <constraints> - One responsive HTML file, monospace accents allowed, dark-mode-friendly palette, semantic HTML. - No frameworks or build steps. No dependencies except Google Fonts. - Make project cards keyboard-focusable with visible focus states. </constraints> <format> Return the full HTML in an artifact, then list 3 ways to make the projects read as more senior to a hiring manager. </format>

You are a portfolio editor who helps writers win bylines and freelance commissions. <context> Build a writing portfolio as one self-contained, responsive HTML file with inline CSS, returned as a previewable artifact. </context> <inputs> - Name and beat: [E.G. TECH AND CULTURE REPORTER] - Best 5 clips (headline, outlet, one-line angle): [LIST] - Publications I want to write for next: [LIST] - Tone: [LITERARY / PUNCHY / ANALYTICAL] </inputs> <task> Build a hero with a positioning line about my beat, a clips section organized by theme with pull-quote-style cards, a short bio with credentials, and a pitch-me contact block. Write all copy in a voice that matches my tone, and frame each clip around why it mattered. </task> <constraints> - One responsive HTML file, editorial serif headings, comfortable reading measure, semantic HTML. - No dependencies except Google Fonts. - Use real, specific copy for headlines and bio, no filler. </constraints> <format> Return the full HTML in an artifact, then suggest how to order the clips to appeal to the publications I named. </format>

You are an art director who builds portfolios for working photographers. <context> Build a photography portfolio as one self-contained, responsive HTML file with inline CSS, returned as a previewable artifact. </context> <inputs> - Name and specialty: [E.G. WEDDING / EDITORIAL / PRODUCT] - Galleries to show (title + image count): [LIST] - Booking goal: [WHAT I WANT VISITORS TO DO] - Mood: [WARM / MOODY / HIGH-KEY] </inputs> <task> Build a full-bleed hero, a clean masonry-style gallery grid using neutral placeholder image boxes labeled by gallery, a short artist statement, a services and pricing teaser, and a booking CTA. Let the imagery dominate and keep text minimal and confident. </task> <constraints> - One responsive HTML file, image-first layout, dark neutral chrome, lazy-load-friendly markup, semantic HTML. - No dependencies except Google Fonts. - Use labeled placeholder boxes for photos so I can swap in real images later. </constraints> <format> Return the full HTML in an artifact, then explain where to place my single strongest image for maximum impact. </format>

You are a positioning strategist who builds one-pagers for independent consultants. <context> Build a consultant one-pager as one self-contained, responsive HTML file with inline CSS, returned as a previewable artifact. </context> <inputs> - Name and area of expertise: [E.G. GROWTH ADVISOR FOR B2B SAAS] - Who I help and the result I deliver: [WHO / OUTCOME] - 3 proof points (clients, results, or credentials): [LIST] - Engagement types: [E.G. ADVISORY / WORKSHOP / FRACTIONAL] </inputs> <task> Build a hero with a sharp positioning statement, a problem-and-promise section, a how-I-work breakdown of engagement types, a proof strip with results, and a book-a-call CTA. Write authoritative copy that makes the value obvious in the first scroll. </task> <constraints> - One responsive HTML file, confident professional palette, clear hierarchy, semantic HTML. - No dependencies except Google Fonts. - Specific copy with concrete outcomes, no vague consulting jargon. </constraints> <format> Return the full HTML in an artifact, then suggest one headline variant that sharpens my positioning further. </format>

You are a resume designer who builds clean, scannable web CVs. <context> Build an online resume as one self-contained, responsive HTML file with inline CSS, returned as a previewable artifact. </context> <inputs> - Name and target role: [E.G. SENIOR MARKETING MANAGER] - Experience (role, company, dates, 2 achievements each): [LIST] - Education and certifications: [LIST] - Top skills: [LIST] </inputs> <task> Build a header with name, role, and contact links, a summary line, a reverse-chronological experience section with achievement bullets, an education block, and a skills section. Rewrite each achievement as a result-driven bullet starting with a strong verb and a number where possible. </task> <constraints> - One responsive HTML file that also prints cleanly to one page, restrained palette, semantic HTML. - No dependencies except Google Fonts. - Keep it ATS-friendly: real headings, no text inside images. </constraints> <format> Return the full HTML in an artifact, then list any achievement bullets that would be stronger with a metric I should add. </format>

You are a creator-economy designer who builds high-converting link-in-bio pages. <context> Build a link-in-bio page as one self-contained, responsive HTML file with inline CSS, returned as a previewable artifact. </context> <inputs> - Name or handle: [E.G. AT YOURHANDLE] - One-line tagline: [WHAT I DO] - Links to feature (label + purpose, ordered by priority): [LIST] - Brand colors: [TWO COLORS] </inputs> <task> Build a centered mobile-first layout with avatar placeholder, name, tagline, a stack of large tappable link buttons in priority order, and a small social row. Make the top link a visually distinct primary call to action. Write concise button labels that drive taps. </task> <constraints> - One responsive HTML file optimized for phone screens, large 48px-plus tap targets, accessible contrast, semantic HTML. - No dependencies except Google Fonts. - Real labels, no placeholder link text. </constraints> <format> Return the full HTML in an artifact, then suggest the single highest-value link to feature at the top. </format>

You are a speaker-marketing strategist who builds pages that get people booked for stages. <context> Build a speaker page as one self-contained, responsive HTML file with inline CSS, returned as a previewable artifact. </context> <inputs> - Name and speaking topics: [LIST 2-3 TALK THEMES] - Signature talk title and takeaway: [TITLE / OUTCOME] - Credibility markers (past stages, audience reach, results): [LIST] - Booking goal: [KEYNOTE / WORKSHOP / PANEL] </inputs> <task> Build a hero with my name and a bold speaking promise, a signature talks section with titles and audience takeaways, a credibility strip with past stages and reach, a short speaker bio, and a booking CTA with a request-availability framing. Write copy that makes an event organizer feel confident booking me. </task> <constraints> - One responsive HTML file, stage-ready bold typography, accessible contrast, semantic HTML. - No dependencies except Google Fonts. - Concrete copy with real talk titles and takeaways, no generic filler. </constraints> <format> Return the full HTML in an artifact, then suggest which credibility marker to lead with for event organizers. </format>

You are a brand-partnerships strategist who builds media kits for content creators. <context> Build a creator media kit as one self-contained, responsive HTML file with inline CSS, returned as a previewable artifact. </context> <inputs> - Name and niche: [E.G. FITNESS / FINANCE / BEAUTY] - Platforms and follower counts: [LIST] - Audience snapshot (age, location, interests): [DETAILS] - Past brand work and partnership options: [LIST] </inputs> <task> Build a hero with my name, niche, and combined reach, an audience-snapshot section with stat cards, a platforms breakdown with follower and engagement figures, a past-partnerships showcase, a partnership-packages section, and a contact CTA for brands. Write copy that positions me as a low-risk, high-return partner. </task> <constraints> - One responsive HTML file, polished brand-deck feel, stat-card grid, accessible contrast, semantic HTML. - No dependencies except Google Fonts. - Use clearly labeled stat placeholders where I will drop real numbers. </constraints> <format> Return the full HTML in an artifact, then suggest which audience stat is most persuasive to lead with for brand partners. </format>

You are a freelance-business coach who builds hire-me pages that convert visitors into leads. <context> Build a freelancer hire-me page as one self-contained, responsive HTML file with inline CSS, returned as a previewable artifact. </context> <inputs> - Name and service: [E.G. FREELANCE COPYWRITER] - The exact outcome clients hire me for: [OUTCOME] - Packages or pricing tiers: [LIST] - Proof (results, testimonials, or client names): [LIST] </inputs> <task> Build a hero with a benefit-led headline, a who-this-is-for section, a services-and-packages grid with clear scope, a proof section with a testimonial, an FAQ that handles common objections, and a strong contact CTA. Write persuasive copy that reduces hiring risk and makes the next step obvious. </task> <constraints> - One responsive HTML file, trustworthy clean layout, clear pricing presentation, accessible contrast, semantic HTML. - No dependencies except Google Fonts. - Specific, benefit-driven copy with a real FAQ, no lorem ipsum. </constraints> <format> Return the full HTML in an artifact, then suggest one objection-handling FAQ to add based on my service. </format>

You are a senior front-end engineer building a small interactive tool. <context> Build a working calculator as one self-contained HTML file with inline CSS and vanilla JavaScript, returned as a previewable artifact. No frameworks, no backend. </context> <inputs> - What it calculates: [E.G. MONTHLY SAVINGS FROM MY PRODUCT] - Input fields: [LIST THE NUMBERS THE USER ENTERS, E.G. TEAM SIZE, HOURLY RATE, HOURS SAVED] - The formula or logic: [DESCRIBE IT, OR ASK CLAUDE TO PROPOSE ONE] - Brand color: [HEX] </inputs> <task> Build the tool: labeled inputs with sensible defaults, live recalculation on every change, a clear result display, and a one-line plain-English summary of the result. </task> <constraints> - One responsive HTML file, accessible labels, input validation, no dependencies. - Clean modern UI; results update instantly without a submit button. - Format currency and percentages cleanly; never show NaN for empty inputs. </constraints> <format> Return the full HTML in an artifact, then explain the formula and how to embed it on my site. </format>

You are a senior front-end engineer building a small interactive tool. <context> Build a budget tracker as one self-contained HTML file with inline CSS and vanilla JavaScript, returned as a previewable artifact. No frameworks, no backend. Use localStorage so data survives a page refresh. </context> <inputs> - Monthly income: [E.G. 4000] - Spending categories: [E.G. RENT, GROCERIES, TRANSPORT, FUN, SAVINGS] - Currency symbol: [E.G. USD DOLLAR SIGN] - Brand color: [HEX] </inputs> <task> Build a tracker where I add transactions (description, amount, category, date), see totals per category, and see remaining budget versus income. Show a simple bar breakdown of spend by category and a running balance. </task> <constraints> - Persist all data in localStorage; reload must keep my entries. - Let me edit and delete any transaction; validate amounts as positive numbers. - One responsive HTML file, accessible labels, no dependencies. </constraints> <format> Return the full HTML in an artifact, then explain how the localStorage persistence works and how to reset the data. </format>

You are a senior front-end engineer building a small interactive tool. <context> Build a habit and streak tracker as one self-contained HTML file with inline CSS and vanilla JavaScript, returned as a previewable artifact. No frameworks, no backend. Use localStorage to remember progress. </context> <inputs> - Habits to track: [E.G. DRINK WATER, READ, EXERCISE] - Tracking window: [E.G. LAST 30 DAYS] - Brand color: [HEX] </inputs> <task> Build a grid where each habit has a row of day cells I can tap to mark complete. Show current streak and longest streak per habit, plus an overall completion percentage for the window. Let me add and remove habits. </task> <constraints> - Persist habits and check-ins in localStorage keyed by date. - Streak logic must count consecutive completed days correctly, including today. - One responsive HTML file, accessible buttons, no dependencies; mobile tap targets at least 40px. </constraints> <format> Return the full HTML in an artifact, then explain how streaks are calculated and how the daily data is stored. </format>

You are a senior front-end engineer building a small interactive tool. <context> Build a scored quiz or assessment as one self-contained HTML file with inline CSS and vanilla JavaScript, returned as a previewable artifact. No frameworks, no backend. </context> <inputs> - Quiz topic: [E.G. WHICH PRICING PLAN FITS YOU] - Questions and answer options: [LIST THEM, OR ASK CLAUDE TO DRAFT 6 TO 8] - Scoring logic: [E.G. EACH ANSWER ADDS POINTS; RANGES MAP TO RESULTS] - Result tiers: [E.G. STARTER, PRO, ENTERPRISE WITH A SHORT BLURB EACH] - Brand color: [HEX] </inputs> <task> Build a one-question-at-a-time quiz with a progress bar, then compute a score and show the matching result tier with its blurb and a call-to-action. Include a Start Over button. </task> <constraints> - Auto-advance after an answer is selected; do not require a Next button on single-choice questions. - Map scores to result tiers exactly per the logic given; never leave a result blank. - One responsive HTML file, keyboard accessible, no dependencies. </constraints> <format> Return the full HTML in an artifact, then explain the scoring map and how to swap in different questions. </format>

You are a senior front-end engineer building a small interactive tool. <context> Build a booking and scheduling mockup as one self-contained HTML file with inline CSS and vanilla JavaScript, returned as a previewable artifact. No frameworks, no backend; bookings are stored client-side only. </context> <inputs> - What is being booked: [E.G. A 30-MINUTE CONSULTATION] - Available days and time slots: [E.G. WEEKDAYS 9AM TO 5PM, 30-MIN SLOTS] - Fields to collect: [E.G. NAME, EMAIL, NOTES] - Brand color: [HEX] </inputs> <task> Build a flow: pick a day from a small calendar, pick an open time slot, fill the contact fields, and confirm. Show a confirmation screen summarizing the chosen slot. Mark already-taken slots as unavailable using localStorage. </task> <constraints> - Do not let two bookings take the same slot; gray out booked slots. - Validate the email field and required fields before confirming. - One responsive HTML file, accessible controls, no dependencies. </constraints> <format> Return the full HTML in an artifact, then explain how slot availability is tracked and how to wire it to a real calendar later. </format>

You are a senior front-end engineer building a small interactive tool. <context> Build an invoice generator as one self-contained HTML file with inline CSS and vanilla JavaScript, returned as a previewable artifact. No frameworks, no backend. </context> <inputs> - Your business details: [NAME, ADDRESS, LOGO TEXT] - Default tax rate: [E.G. 8 PERCENT] - Currency: [E.G. USD DOLLAR SIGN] - Brand color: [HEX] </inputs> <task> Build a form to enter client details, an editable list of line items (description, quantity, unit price), and notes. Auto-calculate line totals, subtotal, tax, and grand total. Render a clean printable invoice preview alongside the form with an invoice number and date. </task> <constraints> - Recalculate totals live as line items change; let me add and remove rows. - Provide a Print button that prints only the invoice preview cleanly. - One responsive HTML file, accessible labels, no dependencies; never show NaN. </constraints> <format> Return the full HTML in an artifact, then explain how totals are computed and how to print or save the invoice as PDF. </format>

You are a senior front-end engineer building a small interactive tool. <context> Build a converter as one self-contained HTML file with inline CSS and vanilla JavaScript, returned as a previewable artifact. No frameworks, no backend; conversion rates are hard-coded constants I can edit. </context> <inputs> - What it converts: [E.G. LENGTH, WEIGHT, TEMPERATURE, OR CURRENCY] - Units or currencies to include: [LIST THEM WITH THEIR CONVERSION FACTORS] - Default pair: [E.G. METERS TO FEET] - Brand color: [HEX] </inputs> <task> Build a converter with a value input, a from-unit dropdown, and a to-unit dropdown. Convert live as I type or change a unit, and show the result with appropriate precision. Include a swap button that reverses the two units. </task> <constraints> - Handle non-linear cases like temperature correctly if included. - Round results sensibly and never display NaN for empty input. - One responsive HTML file, accessible labels, no dependencies. </constraints> <format> Return the full HTML in an artifact, then explain where the conversion factors live so I can update or add units. </format>

You are a senior front-end engineer building a small interactive tool. <context> Build a Kanban board as one self-contained HTML file with inline CSS and vanilla JavaScript, returned as a previewable artifact. No frameworks, no backend. Use localStorage so the board survives a refresh. </context> <inputs> - Column names: [E.G. TO DO, IN PROGRESS, DONE] - Card fields: [E.G. TITLE AND OPTIONAL DESCRIPTION] - Brand color: [HEX] </inputs> <task> Build a board with the given columns where I can add cards, edit a card, delete a card, and drag cards between columns. Show a card count per column. Persist the full board state in localStorage. </task> <constraints> - Implement drag-and-drop with native HTML5 drag events; reorder must persist. - Edits and deletes must update storage immediately. - One responsive HTML file, accessible controls, no dependencies; works with mouse and touch where feasible. </constraints> <format> Return the full HTML in an artifact, then explain the board data shape in localStorage and how to add a new column. </format>

You are a senior front-end engineer building a small interactive tool. <context> Build a group expense splitter as one self-contained HTML file with inline CSS and vanilla JavaScript, returned as a previewable artifact. No frameworks, no backend. Use localStorage to keep the group and expenses. </context> <inputs> - People in the group: [E.G. ALEX, SAM, JORDAN] - Currency: [E.G. USD DOLLAR SIGN] - Brand color: [HEX] </inputs> <task> Let me add expenses (who paid, amount, description, and who shares it). Compute each person's net balance, then show the simplest set of who-owes-whom settlements to square everyone up. Let me edit and delete expenses. </task> <constraints> - Split logic must handle uneven participation; balances must always sum to zero. - Minimize the number of settlement transactions. - One responsive HTML file, accessible labels, no dependencies; never show NaN. </constraints> <format> Return the full HTML in an artifact, then explain the settlement algorithm and how balances are computed. </format>

You are a senior front-end engineer building a small interactive tool. <context> Build a countdown and goal-progress tracker as one self-contained HTML file with inline CSS and vanilla JavaScript, returned as a previewable artifact. No frameworks, no backend. Use localStorage to remember the goal. </context> <inputs> - Goal name: [E.G. LAUNCH DAY or FUNDRAISER] - Mode: [COUNTDOWN TO A DATE, A NUMERIC PROGRESS GOAL, OR BOTH] - Target date: [E.G. 2026-12-31] - Numeric target and starting value: [E.G. RAISE 10000 STARTING AT 0] - Brand color: [HEX] </inputs> <task> Build a live countdown showing days, hours, minutes, and seconds to the target date, and a progress bar toward the numeric goal with a percent complete. Let me update the current value, and show a celebratory state when the goal is reached or the date arrives. </task> <constraints> - The countdown must tick every second without reloading; handle the past-due state gracefully. - Persist goal config and current value in localStorage. - One responsive HTML file, accessible, no dependencies; never show negative or NaN values. </constraints> <format> Return the full HTML in an artifact, then explain how the timer updates and how to change the goal later. </format>

You are a senior UI designer and conversion copywriter. <context> Build a single hero section as a self-contained HTML snippet with inline CSS, returned as a previewable artifact I can paste at the top of my landing page. </context> <inputs> - Product/brand: [E.G. ACME ANALYTICS] - One-line value prop: [E.G. SHIP DASHBOARDS IN MINUTES, NOT WEEKS] - Primary CTA label and link: [E.G. START FREE TRIAL -> /signup] - Secondary CTA (optional): [E.G. WATCH DEMO] - Visual style: [E.G. CLEAN SAAS, DARK, PLAYFUL] </inputs> <task> Build one responsive hero with a bold headline, supporting subhead, primary and secondary CTAs, and a placeholder for a product screenshot or illustration. Then produce TWO headline-and-subhead copy variants (Variant A benefit-led, Variant B outcome-led) as commented swap-in blocks. </task> <constraints> - Self-contained responsive snippet, accessible, semantic HTML, no dependencies except optional Google Fonts. - Mobile-first; headline must stay readable and large on phones. - Persuasive but honest microcopy. Do not invent metrics or claims. </constraints> <format> Return the snippet in an artifact, then explain which variant you would test first and why. </format>

You are a senior UI designer and conversion copywriter. <context> Build a single pricing-table section as a self-contained HTML snippet with inline CSS, returned as a previewable artifact I can paste into my site. </context> <inputs> - Plans and prices: [LIST E.G. STARTER 19, PRO 49, TEAM 99] - Key features per plan: [LIST] - Which plan to highlight: [E.G. PRO] - Currency and billing: [E.G. USD, PER MONTH] </inputs> <task> Build a responsive 3-tier pricing table with a highlighted recommended plan, per-plan feature lists, clear CTAs, and a monthly/annual toggle that updates prices with vanilla JS. </task> <constraints> - Self-contained responsive snippet, accessible, semantic HTML, no dependencies except optional Google Fonts. - Persuasive but honest microcopy. Show annual savings only if the inputs justify it. </constraints> <format> Return the snippet in an artifact, then suggest the one change most likely to lift conversions. </format>

You are a senior UI designer and conversion copywriter. <context> Build a single testimonial and social-proof section as a self-contained HTML snippet with inline CSS, returned as a previewable artifact I can paste into my site. </context> <inputs> - Testimonials (quote, name, title, company): [LIST 3 TO 6] - Logos or stat strip (optional): [E.G. TRUSTED BY 4000 TEAMS] - Star ratings to show: [E.G. 4.8 AVERAGE] - Visual style: [E.G. LIGHT CARDS ON SOFT BACKGROUND] </inputs> <task> Build a responsive social-proof wall combining a headline stat bar, a masonry or grid of quote cards with avatars and attribution, and an optional logo strip. </task> <constraints> - Self-contained responsive snippet, accessible, semantic HTML, no dependencies except optional Google Fonts. - Use only the testimonials I provide; never fabricate quotes, names, or numbers. - Cards must reflow cleanly to one column on mobile. </constraints> <format> Return the snippet in an artifact, then note where on a page this section converts best. </format>

You are a senior UI designer and conversion copywriter. <context> Build a single FAQ section as a self-contained HTML snippet with inline CSS and vanilla JS, returned as a previewable artifact I can paste into my site. </context> <inputs> - Questions and answers: [LIST 5 TO 8 PAIRS] - Section heading: [E.G. FREQUENTLY ASKED QUESTIONS] - Visual style: [E.G. MINIMAL BORDERS, ROUNDED CARDS] </inputs> <task> Build a responsive accordion FAQ where each question expands and collapses on click, with smooth height animation and a rotating chevron icon. First item may start open. </task> <constraints> - Self-contained responsive snippet, accessible, semantic HTML using button elements with aria-expanded and aria-controls. - Keyboard operable; visible focus states; no dependencies except optional Google Fonts. - Use only the Q and A content I provide. </constraints> <format> Return the snippet in an artifact, then suggest 2 extra questions worth adding to reduce support load. </format>

You are a senior UI designer and conversion copywriter. <context> Build a single feature comparison table as a self-contained HTML snippet with inline CSS, returned as a previewable artifact I can paste into my site. </context> <inputs> - Columns to compare: [E.G. US VS COMPETITOR A VS COMPETITOR B, OR PLAN TIERS] - Feature rows: [LIST E.G. UNLIMITED PROJECTS, SSO, PRIORITY SUPPORT] - Which column to emphasize: [E.G. OUR PRO PLAN] </inputs> <task> Build a responsive comparison table with grouped feature rows, check and dash or x marks, an emphasized column, and a sticky header row on scroll. On mobile, collapse into stacked per-column cards. </task> <constraints> - Self-contained responsive snippet, accessible, semantic HTML using a real table with scope attributes. - Honest framing; do not overstate our advantages or misrepresent competitors. - No dependencies except optional Google Fonts. </constraints> <format> Return the snippet in an artifact, then flag any row where the comparison framing looks unfair or risky. </format>

You are a senior UI designer and conversion copywriter. <context> Build a single site footer as a self-contained HTML snippet with inline CSS, returned as a previewable artifact I can paste at the bottom of my site. </context> <inputs> - Link columns and links: [E.G. PRODUCT, COMPANY, RESOURCES, LEGAL] - Newsletter pitch: [E.G. ONE EMAIL A WEEK, NO SPAM] - Form action or note: [E.G. POST TO /subscribe OR LEAVE AS PLACEHOLDER] - Social links and brand name: [LIST] </inputs> <task> Build a responsive multi-column footer with a newsletter email-capture form (email input plus submit button with inline validation via vanilla JS), grouped link columns, social icons, and a copyright row. </task> <constraints> - Self-contained responsive snippet, accessible, semantic HTML with a proper label for the email input. - Validate email format and show a polite inline success or error message; do not actually send data. - Columns stack cleanly on mobile; no dependencies except optional Google Fonts. </constraints> <format> Return the snippet in an artifact, then suggest the single best newsletter incentive to raise signups. </format>

You are a senior UI designer and conversion copywriter. <context> Build a single closing call-to-action section as a self-contained HTML snippet with inline CSS, returned as a previewable artifact I can paste near the end of my page. </context> <inputs> - Final offer or message: [E.G. START BUILDING TODAY] - Primary CTA label and link: [E.G. GET STARTED FREE -> /signup] - Risk reducer (optional): [E.G. NO CARD REQUIRED, CANCEL ANYTIME] - Visual style: [E.G. BOLD GRADIENT BAND] </inputs> <task> Build a high-contrast closing CTA band with a punchy headline, one short reinforcing line, a prominent primary button, and an optional risk-reducer microline beneath the button. </task> <constraints> - Self-contained responsive snippet, accessible, semantic HTML, no dependencies except optional Google Fonts. - Strong color contrast for the button; large tap target on mobile. - Persuasive but honest microcopy; no fake urgency or invented deadlines. </constraints> <format> Return the snippet in an artifact, then give 2 alternative headline options for the band. </format>

You are a senior UI designer and front-end engineer. <context> Build a single site navigation bar as a self-contained HTML snippet with inline CSS and vanilla JS, returned as a previewable artifact I can paste at the top of my site. </context> <inputs> - Brand name or logo text: [E.G. ACME] - Nav links: [LIST E.G. FEATURES, PRICING, DOCS, BLOG] - CTA button label and link: [E.G. SIGN UP -> /signup] - Visual style: [E.G. STICKY WHITE BAR WITH SUBTLE SHADOW] </inputs> <task> Build a responsive sticky navbar with brand on the left, links and a CTA button on the right, and a hamburger menu that toggles a mobile drawer or dropdown via vanilla JS. Add a subtle shadow on scroll. </task> <constraints> - Self-contained responsive snippet, accessible, semantic HTML using nav and button elements with aria-expanded for the toggle. - Keyboard operable and focus-trappable mobile menu; closes on link click and on Escape. - No dependencies except optional Google Fonts. </constraints> <format> Return the snippet in an artifact, then note one accessibility detail I should verify before shipping. </format>

You are a senior UI designer and conversion copywriter. <context> Build a single email-capture modal as a self-contained HTML snippet with inline CSS and vanilla JS, returned as a previewable artifact I can drop into an existing page. </context> <inputs> - Offer or hook: [E.G. GET 10 PERCENT OFF YOUR FIRST ORDER] - Trigger: [E.G. AFTER 15 SECONDS, OR EXIT INTENT, OR ON BUTTON CLICK] - CTA label: [E.G. SEND MY CODE] - Visual style: [E.G. CENTERED CARD ON DIMMED OVERLAY] </inputs> <task> Build an accessible modal popup with a dimmed overlay, a headline, a single email field with inline validation, a submit button, and a clear close control. Wire the chosen trigger and a simple success state via vanilla JS. Include a sessionStorage check so it does not reappear after dismissal. </task> <constraints> - Self-contained responsive snippet, accessible, semantic HTML; focus moves into the modal on open, traps inside, and returns on close; Escape closes it. - Do not actually send data; show a friendly success message instead. - No dependencies except optional Google Fonts. </constraints> <format> Return the snippet in an artifact, then suggest the trigger timing most likely to convert without annoying users. </format>

You are a senior UI designer and front-end engineer. <context> I will paste the HTML and CSS of an existing section from my site. Redesign and rebuild it as one improved self-contained HTML snippet with inline CSS, returned as a previewable artifact I can swap in. </context> <inputs> - Current section markup: [PASTE HTML AND CSS HERE] - What it is for: [E.G. HERO, FEATURE GRID, PRICING] - Goal of the redesign: [E.G. MODERN LOOK, BETTER MOBILE, HIGHER CLICKS] - Constraints to keep: [E.G. SAME COPY, SAME BRAND COLORS, SAME LINKS] </inputs> <task> Audit the pasted section for visual hierarchy, spacing, responsiveness, accessibility, and conversion. Then rebuild it as a cleaner, modern, fully responsive version that preserves the content, links, and brand constraints I listed. </task> <constraints> - Self-contained responsive snippet, accessible, semantic HTML, no dependencies except optional Google Fonts. - Keep my existing copy and links unless I asked to change them; do not invent new claims. - Preserve any brand colors or fonts I specify. </constraints> <format> Return the rebuilt snippet in an artifact, then list the top 3 problems you fixed and why. </format>