AI prompts that build a complete website

Act as a Senior Conversion Designer, UX Writer, and Frontend Developer. Build a single index.html file for a checklist lead magnet landing page. **Goal:** Capture a valuable contact in exchange for a specific practical resource, without aggressive selling or dark patterns. **Context:** The resource is titled 'Checklist: 27 points before publishing a WordPress website.' It targets small-business owners, freelancers, and marketers who want to review a site before launching a campaign or handing it over to a client. **Structure:** Hero with a strong value promise, CSS/SVG preview of the first checklist page, 'Who this is for' section, list of concrete outcomes, a sample excerpt with 5 checklist items, short author bio, download form, and FAQ. **Design principles:** Make it feel like a valuable expert publication, not an aggressive funnel. Use generous whitespace, excellent typography, and a content-first layout. Do not use giant counters, fake scarcity messages, countdown timers, or popups. **Copywriting:** Use specific professional Polish copy. Instead of vague claims, describe what users can check: speed, forms, backups, SSL, mobile, SEO, cookie consent, and analytics. **Features:** Form with name and email, client-side validation, optional marketing-consent checkbox separate from delivery information, success screen with a demo PDF download button, and FAQ anchor navigation. **Quality requirements:** Semantic HTML using <header>, <main>, <section>, <article>, <form>, <label>, <details>, <summary>. Proper form labels, aria-live for errors and confirmation, visible :focus-visible, WCAG AA contrast, and no horizontal overflow from 320px to 1440px. Minimum control height: 44px. **Technology:** Pure HTML, embedded CSS, and Vanilla JS only for validation and success state. No frameworks or Font Awesome; use inline SVG. **Data and output:** Do not use Lorem Ipsum. Use complete realistic Polish copy. Return only a complete working index.html with CSS in <style> and JavaScript in <script>.

Act as a Senior Conversion Designer and Senior Frontend Developer. Create a lead magnet landing page powered by an interactive calculator in one index.html file. **Goal:** Deliver an immediate useful result, then offer an emailed summary as a natural next step without forcing contact before the result is visible. **Context:** The calculator, 'How much is an unoptimized website costing you?', estimates lost sales opportunities caused by poor page speed, low conversion, and mobile issues. **Layout:** Hero with a clear question, central calculator panel, result interpretation section, three sample improvement actions, report-email form, and short methodology FAQ. **Calculator parameters:** Monthly site traffic, average lead or order value, current conversion rate, estimated mobile-user share, and potential conversion improvement. **Features:** Instant calculation on input; Polish number formatting; clear current versus potential result; generated text report; email form shown after calculation but never blocking the result; success state with simulated report send; calculator reset. **Design principles:** Advisory and transparent, inspired by FinTech tools. Prioritize numbers, clarity, and calm. Do not use external chart libraries, oversized illustrations, or time pressure. **Quality requirements:** Semantic <form>, <fieldset>, <legend>, <label>, <output>. Every slider needs a paired <input type='number'> alternative. Announce results through aria-live. Protect against NaN, Infinity, and negative values. Ensure contrast, keyboard support, and mobile-first responsiveness. **Technology:** HTML, CSS, and Vanilla JS. Separate calculation functions from DOM rendering. Draw any necessary chart in SVG. No libraries. **Data and output:** Use realistic Polish data without Lorem Ipsum. Return only a complete index.html file.

Act as an Art Director, Senior UX Writer, and Frontend Developer. Design an industry-report download landing page in one index.html file. **Goal:** Build expert brand authority and capture leads interested in market analysis. **Context:** The report is titled 'Hosting and company websites 2026: what truly affects conversion and customer trust.' It targets service-business owners, ecommerce managers, and marketing leaders. **Page structure:** Report cover as an original CSS/SVG composition; hero with title, page count, and publication date; key findings section; 3 simple SVG charts with methodology description; chapter list; expert quote; download form; author or brand section; report and privacy FAQ. **Design principles:** Editorial, refined, and calm. Use a magazine-like layout, strong typography, and data credibility. Do not use typical SaaS cards, excessive gradients, countdowns, or artificial urgency. **Features:** Charts require textual equivalents for screen readers; form delivers report by email; after submission show a success screen with a demo report-open option; FAQ via <details>/<summary>; accessible smooth scroll to form. **Quality requirements:** Semantic <figure>, <figcaption>, <article>, <form>, <label>. Mark decorative graphics aria-hidden. Maintain high contrast, clear focus, responsiveness, and 44px minimum tap targets. **Technology:** Pure HTML, CSS, and Vanilla JS for form and scrolling. Use inline SVG, no external libraries. **Data and output:** Invent realistic data clearly described as demo data. Do not use Lorem Ipsum. Return a complete index.html.

Act as a CRO Strategist and Senior Frontend Developer. Build a '3-minute website mini audit' lead magnet landing page in one index.html file. **Goal:** Collect context about a user's website, give immediate value through a simplified assessment, and offer an expanded email report. **Form:** Website address, industry, main site goal, monthly traffic range, whether the user runs paid campaigns, whether the site has a form or ecommerce, and biggest challenge: few inquiries, low sales, slow performance, low trust, or poor visibility. **Result:** Generate a score across 4 areas: conversion, speed, trust, and mobile. Show 3 priorities to review, explain that the assessment is preliminary and based on user-provided declarations, then offer a fuller checklist by email. **Design principles:** Make it look like a consulting tool. Do not pretend to run an automated technical scan if the page does not actually analyze the site. Clearly communicate the method and result limitations. **Features:** Multi-step form, validation, progress bar, result generation, score animation respecting prefers-reduced-motion, simulated report send, and restart option. **Quality requirements:** Use semantic form elements, aria-live for result announcements, visible textual errors, proper focus management after step changes, and high contrast. **Technology:** HTML, CSS, and Vanilla JS. Keep scoring logic readable and separate from DOM code. No libraries. **Data and output:** Full realistic Polish copy, no Lorem Ipsum. Return a complete index.html.

Act as a Senior Brand Strategist, UX Writer, and Frontend Developer. Create a single index.html file for a premium B2B service page: 'Designing and building websites that generate inquiries.' **Goal:** Convince the right client to have a strategic conversation rather than merely collect random contact forms. **Audience:** Service-business owners and marketing managers whose websites do not reflect their offer quality or who are planning a new site. **Structure:** Hero with service positioning; problem solved; who the service is not for; outcomes and proof; engagement scope; 4-stage process; sample case study; objection handling; working-model section; inquiry form or consultation CTA. **Design principles:** Position through specifics, calm, and quality. Avoid exaggerated marketing language, testimonial sliders, countdowns, and generic icon sections titled 'why us.' Every section should develop an argument rather than fill the layout. **Copywriting:** Write specifically about decisions, outcomes, risks, and the work process. Use realistic case study elements: goal, scope, problem, outcome, without fake client logos or invented testimonials. **Features:** Sticky section navigation, expandable FAQ, validated consultation form, success state, conversation-topic selection, accessible smooth scroll with scroll-padding. **Quality requirements:** Semantic HTML, <main>, <section>, <article>, <figure>, <form>, <label>, <details>. WCAG AA contrast, logical H1–H3 hierarchy, focus-visible, keyboard support, and mobile-first responsiveness. **Technology:** HTML, CSS, and Vanilla JS. Use CSS Custom Properties and inline SVG. No frameworks. **Data and output:** Use mature Polish copy, no Lorem Ipsum. Return a complete working index.html file.

Act as a Senior UX Writer, technical consultant, and Frontend Developer. Build a 'Website and Hosting Technical Audit' service page in one index.html file. **Goal:** Explain what an audit covers, which problems it may uncover, what the deliverable looks like, and encourage a short qualification inquiry. **Audience:** An owner of a WordPress site, WooCommerce store, or company app experiencing speed, security, error, or stability issues but unsure where to begin. **Structure:** Hero with clear promise; symptoms requiring an audit; analysis areas: performance, security, backups, server configuration, WordPress, plugins, database, monitoring; what the client receives; engagement process; styled report-excerpt card; out-of-scope section; FAQ; qualification form. **Design principles:** Calm expert tone. Do not frighten users with attacks and data loss. Explain risks, priorities, and remediation decisions instead. Avoid stock server-room imagery and decorative cybersecurity aesthetics. **Features:** Form with website URL, system type, symptoms, availability of technical access, and preferred timing; dynamic hints based on selected issue; validation; success screen; FAQ; copyable sample checklist. **Quality requirements:** Semantic forms, aria-live messaging, accessible tooltips for technical terms, contrast, and focus-visible. Ensure long-text readability and mobile layout quality. **Technology:** HTML, CSS, and Vanilla JS. No libraries. **Data and output:** Original factual Polish copy. Do not use Lorem Ipsum. Return a complete index.html.

Act as a Senior Product Marketer and Frontend Developer. Create a recurring WordPress care service page in one index.html file. **Goal:** Explain the value of ongoing technical care and help clients choose a plan without manipulating through price or fear. **Context:** The service includes updates, backups, monitoring, basic support, minor work, and reports. Three plans are available: Essential, Business, and Priority. **Structure:** Hero; brief explanation of what care means; problems it solves; plan comparison; detailed scope; onboarding process; security and responsibility section; FAQ; plan-selection form. **Design principles:** Transparency and trust. Do not hide plan differences behind hover states. Do not use fake 'most popular' labels unless supported by data. You may subtly highlight a recommended plan based on a sample user scenario. **Features:** Monthly/yearly toggle, dynamic pricing, feature comparison, 'show only differences' filter, plan-selection form, and modal with service-start conditions. **Quality requirements:** Semantic <section>, <article>, <table> or an accessible comparison layout, <form>, <fieldset>, <legend>. Toggle with aria-pressed, price details available as text, visible focus, and responsiveness. **Technology:** HTML, CSS, Vanilla JS, inline SVG. No frameworks or external icons. **Data and output:** Use realistic sample prices clearly labeled as demo and complete Polish copy. Return only index.html.

Act as a Senior Local SEO Strategist, UX Writer, and Frontend Developer. Build a local service page in one index.html file for a professional air-conditioning service company in Warsaw. **Goal:** Help a prospective customer quickly understand the offer, service area, appointment availability, and contact options. **Structure:** Hero with service and location; trust built through specifics such as experience, certifications, and pricing approach; service list; service area shown in text and a styled SVG map; booking process; indicative price ranges; reviews clearly marked as sample content; FAQ; inquiry form; contact details and business hours. **Design principles:** Make it practical and local, not generic. In the hero, immediately show phone, contact hours, and inquiry CTA. Do not add fake 'only 2 slots left' counters or pretend to provide real-time availability. **Features:** Form with service selection, district, preferred date, and contact method; validation; tappable phone on mobile; SVG map with district tooltips; FAQ; success screen. **Quality requirements:** Use semantic contact data through <address>, proper <label> elements, tel: links, and accessible interactive elements. Provide high contrast, responsiveness, and 44px minimum tap targets. **Technology:** HTML, CSS, Vanilla JS, and inline SVG. No external maps or libraries. **Data and output:** Use realistic Polish copy without Lorem Ipsum. Return a complete index.html file.

Act as an Event Marketing Strategist, UX Writer, and Senior Frontend Developer. Build a webinar-registration landing page in one index.html file. **Goal:** Encourage the right audience to register while clearly communicating topic, value, date, and event flow. **Context:** Live webinar: 'A website that sells: 7 UX decisions before launching a campaign.' Audience: service-business owners, marketers, and people managing company websites. Duration: 60 minutes plus 20 minutes of Q&A. **Structure:** Hero with date, time, and online format; registration in hero or a sticky panel; concrete learning outcomes; timed agenda; speaker section; who the webinar is and is not for; Q&A section; FAQ; registration form; closing CTA. **Design principles:** Keep it energetic but substantive. Do not use aggressive countdowns or artificial scarcity language. If you include a countdown, it must be subtle, accessible, and never the only source of event-date information. **Features:** Registration form with name, email, job title, and optional marketing consent; validation; confirmation screen with calendar-add information; button generating a local .ics file through Blob API; FAQ; event-link copy; complete Europe/Warsaw timezone handling. **Quality requirements:** Semantic <time datetime>, <form>, <label>, <details>, <summary>. aria-live for confirmation, visible focus-visible, WCAG AA contrast, mobile-first design, and 44px minimum tap targets. **Technology:** HTML, CSS, Vanilla JS, and inline SVG. No external libraries. **Data and output:** Use specific Polish copy and realistic data. Return a complete index.html.

Act as a Senior Event Designer and Frontend Developer. Design a one-day industry conference page in one index.html file. **Goal:** Convince the audience to buy a ticket through program value and event credibility while making attendance planning easy. **Context:** 'Digital Operations Summit' for business owners, marketing, ecommerce, and automation professionals. The event takes place in Warsaw. **Structure:** Hero with name, date, location, and CTA; key themes; agenda as a readable timeline; speaker profiles; session formats; ticket information; what a ticket includes; venue and travel; partners as text placeholders without pretending to be real brands; FAQ; interest form or demo purchase. **Design principles:** Modern editorial event aesthetics. Avoid overload from speaker photos, excessive cards, and neon tech styling. The agenda must be the most important element after hero. **Features:** Agenda filters by thematic track, expandable session details, ticket-type toggle, dynamic price summary, demo purchase form, accessible terms modal, and selected-session saving to 'My day plan' in localStorage. **Quality requirements:** Semantic <time>, <article>, <section>, <dialog>, <form>. Keyboard support, aria-expanded, modal focus trap, session status beyond color, and full responsiveness. **Technology:** HTML, CSS, Vanilla JS, and inline SVG. No frameworks. **Data and output:** Use complete realistic Polish copy. Do not use real logos or Lorem Ipsum. Return full index.html.

Act as a Senior Product Marketer, Conversion Designer, and Frontend Developer. Create a new digital-product promotion landing page in one index.html file for 'Hostilo Monitor' — a simple tool for monitoring websites, SSL, domains, and essential services. **Goal:** Clearly explain the problem, product value, how it works, and encourage a user to start a free trial or join a waitlist. **Structure:** Hero with specific promise; problem and its cost; product visualization built as an HTML/CSS UI mockup; three main use cases; 3-step process; key features; 'manual checking' versus 'Hostilo Monitor' comparison; pricing or beta information; FAQ; closing CTA. **Design principles:** Make the product feel credible and specific. Avoid generic claims like 'we revolutionize monitoring.' Do not use fabricated testimonials, fake customer logos, visitor counters, or manipulative promotion countdowns. If the offer has a time limit, state the date and terms directly. **Features:** Interactive dashboard mockup with monitoring-view switching, plan selector, dynamic price summary, validated trial/waitlist form, success screen, FAQ, and copyable product information. **Quality requirements:** Semantic HTML, accessible view-switching controls, aria-pressed or radio buttons for plans, aria-live for messages, high contrast, keyboard navigation, and mobile-first behavior. **Technology:** HTML, CSS, Vanilla JS, and inline SVG. No frameworks or external libraries. **Data and output:** Use realistic Polish demo data, no Lorem Ipsum. Return a complete working index.html.

Act as a Senior Conversion Strategist and Frontend Developer. Build a landing page for a limited but transparent product or service promotion in one index.html file. **Goal:** Clearly explain the offer, terms, price benefit, and deadline without artificial pressure or dark patterns. **Context:** The 'Autumn Online Start' campaign offers WordPress hosting, site migration, and 3 months of technical care at a preferential price. The offer is valid until a specific date or until a clearly stated implementation capacity is reached. **Structure:** Hero with complete promotion name and specific time condition; package contents; who the offer fits; standard versus promotional price comparison; start timeline; qualification conditions; FAQ; spot-reservation form; honest explanation of the limit. **Design principles:** The promotion should be clear, elegant, and credible. Do not use flashing elements, fake purchase notifications, aggressive popups, hidden costs, or misleading buttons. If a countdown is included, make it secondary, accessible, and always supplement it with a written end date. **Features:** Dynamic savings summary, qualification checklists, reservation form, validation, confirmation screen, modal with full promotion terms, and download of the terms as a text file through Blob API. **Quality requirements:** Semantic <time>, <article>, <form>, <fieldset>, <legend>, <dialog>. Equal visual treatment of decision buttons, clear focus-visible, high contrast, responsiveness, and aria-live messages. **Technology:** Pure HTML, CSS, Vanilla JS, inline SVG. No libraries. **Data and output:** Use complete realistic Polish copy. Do not use Lorem Ipsum. Return only a working index.html.