50 Claude Prompts That Build Websites

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>