Guide: building a website with AI for the platform

1The prompt to copy

Copy this text at the start of your request to the AI (ChatGPT, Claude, Gemini or another), then describe your project in place of the brackets. It contains all of the platform's technical rules.

Build me a static website for [describe your project: who you are, what you offer, the tone, the colors, the pages you want].

Mandatory technical constraints:
- Only HTML, CSS and JavaScript that runs in the browser. No PHP, no database, no Node, no framework that needs a build step (React, Vue, Next, Vite).
- An index.html page at the root, and one HTML page per section (about.html, services.html, contact.html, etc.). Relative links between pages, for example href="about.html".
- Allowed files: .html, .css, .js, .webp .jpg .png .svg images, .woff2 fonts. No PDF, video or audio files in the website: embed YouTube or Vimeo videos with an iframe.
- Contact form: a plain HTML <form> with method="post" and NO action attribute. No JavaScript that intercepts the submission, no external service (Formspree, Netlify, EmailJS), no file input.
- Each form field has a clear name attribute: name, email, phone, message. The email field is named exactly "email" and has type email.
- Do not add any captcha, reCAPTCHA, hCaptcha or Turnstile. Leave a little space below the submit button.
- Create a merci.html page (thank-you message after the form is sent, with a link to the home page) and a 404.html page (page not found).
- Do not create a favicon, robots.txt or sitemap.xml, and do not add any <link rel="icon"> tag.
- Search engines (SEO): each page has a unique <title> (under 60 characters) and a unique <meta name="description"> (under 160 characters), a single <h1>, <h2> and <h3> headings in order, semantic tags (header, nav, main, section, article, footer), descriptive alt text on every image and a <link rel="canonical"> tag with the page's full address.
- AI engines (GEO): clear, factual content that says who I am, what I offer, where and for whom; my contact details written the same way on every page; an FAQ section with real questions and answers; schema.org JSON-LD structured data (Organization or Person or LocalBusiness as appropriate, and FAQPage for the FAQ) in the home page <head>.
- Facebook and social sharing: on every page, the Open Graph tags og:title, og:description, og:url, og:type, og:locale and og:image, plus twitter:card="summary_large_image". og:url and og:image are full addresses starting with https://[my website address]. Create a 1200 x 630 pixel sharing image (images/share.jpg) that presents the website.
- No cookies and no analytics tool.
- Optimized images (under 500 KB each), lowercase file names with no spaces or accents.
- Deliver everything in a single ZIP file, with index.html at the root.

2What goes in the ZIP

• index.html must be at the root of the ZIP. A single enclosing folder is also accepted (mysite/index.html): it is removed automatically.
• Limits: ZIP of 50.0 MB at most, 1,000 files at most, 10.0 MB per file and 150.0 MB once unzipped.
• Accepted files: HTML, CSS, JavaScript (.js, .mjs), images (PNG, JPEG, GIF, WebP, AVIF, SVG, ICO), fonts (WOFF, WOFF2, TTF, OTF), JSON, XML, text and webmanifest.
• Other files (PDF, videos, sounds, PHP, Word documents, etc.) are ignored. The import report lists them with the reason: you always know what was kept.
• The new ZIP replaces the whole website: files missing from the ZIP disappear from the new version.

3Pages and links

• Make one HTML page per section: it works best and search engines prefer it.
• Clean addresses: /about shows about.html, and /blog/ shows blog/index.html. Your links can be written href="about.html" or href="/about".
• A 404.html page in your ZIP replaces the platform's “not found” page.
• Links to other websites, Google Fonts and libraries on a CDN (Bootstrap, Font Awesome, etc.) work normally.

4The contact form

At upload, each form without an external destination is connected to the platform automatically: a form with no action, with action="#", action="mailto:…" or a .php page. The portal tells you how many forms were connected.

<form method="post">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>

    <label for="message">Message</label>
    <textarea id="message" name="message" rows="5" required></textarea>

    <button type="submit">Send</button>
</form>

• Receiving email: choose it in the portal, website page > Settings. Without an email, messages are only kept in “Received forms”.
• Replying to the visitor: a field whose name contains “email”, “e-mail” or “courriel” becomes the “Reply to” address of the message you receive.
• After sending, the visitor sees your merci.html page if it exists, otherwise the platform's “Thank you” page. For another page, add to the form: <input type="hidden" name="_next" value="/thanks-signup.html">.
• Fields whose name starts with “_” are not forwarded: they are reserved for the platform.
• Limits: 50 fields per form, 5,000 characters per field, and 5 submissions per visitor per 10 minutes.
• Messages are kept 365 days in the portal, then deleted automatically.
• Several forms (contact, sign-up, submission) can exist in the same website: each message shows which page it came from.

5Attachments

The platform's forms send text only: a file input is ignored and the file is not received. To receive files (photos, résumés, mockups), two options:

• ask for a sharing link in the form (Google Drive, Dropbox, WeTransfer): <input type="url" name="files_link" placeholder="Link to your files">;
• invite the visitor to attach their files when replying to the email you send them.

6Bot protection (Turnstile)

• It is added automatically to each connected form: a small Cloudflare check box appears at the end of the form, below the button. The visitor often has nothing to do.
• Do not add any captcha yourself (reCAPTCHA, hCaptcha, Turnstile): it would conflict with the platform's.
• An invisible trap field is also added, and each visitor is limited to 5 submissions per 10 minutes.
• With a custom domain, you can enter your own Turnstile keys in the domain card; without keys, the trap field and the sending limit protect the form.

7Favicon

• The favicon is uploaded in the portal, “Favicon” card of the website page: a square PNG, JPEG, WebP or GIF image of 180 pixels or more.
• Do not put it in the ZIP: favicon.ico, favicon.png and apple-touch-icon.png are ignored there.
• Do not add any <link rel="icon"> tag: the platform adds the right tags to each page and removes those the AI may have added.
• Without a favicon, your website uses its base domain's.

8Images, videos, fonts and documents

• Images: prefer WebP or JPEG, under 500 KB each and at most 2,000 pixels wide. Light images make the website fast on phones.
• Videos and music: publish them on YouTube, Vimeo, SoundCloud, Spotify or Bandcamp and embed the player (iframe). They cannot be in the ZIP.
• PDF and documents: put them on Google Drive or Dropbox and add a sharing link.
• Fonts: Google Fonts by link, or .woff2 files in the ZIP.

9Search engines, AI engines and sharing

Three things to get right so your website is found, cited and shared. The prompt at the top already asks for them; replace [my website address] with your real address (for example your-name.zicspace.com, or your custom domain).

• Search engines (SEO): a unique <title> and <meta name="description"> per page, a single <h1>, headings in order, alt text on every image and a canonical address. robots.txt and sitemap.xml are generated automatically: do not put them in the ZIP.
• AI engines (GEO): ChatGPT, Gemini, Perplexity and others cite websites that answer questions clearly. State plainly who you are, what you offer, where and for whom; add an FAQ; keep your contact details identical everywhere; add schema.org structured data (JSON-LD).
• Facebook, LinkedIn and other sharing: Open Graph tags choose the title, text and image shown when someone shares your link. The image must be 1200 x 630 pixels, be in the ZIP and be given by a full address (https://...).

<title>Mary Smith, wedding photographer in Quebec City</title>
<meta name="description" content="Wedding and family photographer in Quebec City and Lévis. Natural storytelling, clear packages, reply within 24 hours.">
<link rel="canonical" href="https://mary-smith.pixstudio.ca/">

<!-- Facebook and social sharing -->
<meta property="og:type" content="website">
<meta property="og:locale" content="en_CA">
<meta property="og:title" content="Mary Smith, wedding photographer in Quebec City">
<meta property="og:description" content="Natural wedding storytelling in Quebec City and Lévis.">
<meta property="og:url" content="https://mary-smith.pixstudio.ca/">
<meta property="og:image" content="https://mary-smith.pixstudio.ca/images/share.jpg">
<meta name="twitter:card" content="summary_large_image">

<!-- Structured data for Google and AI engines -->
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "LocalBusiness",
    "name": "Mary Smith Photography",
    "url": "https://mary-smith.pixstudio.ca/",
    "image": "https://mary-smith.pixstudio.ca/images/share.jpg",
    "areaServed": "Quebec City, Lévis",
    "email": "[email protected]"
}
</script>

With a bio page in your base domain's directory, your website also gains one more link.

10What does not work

• Server-side code: PHP, Python, Node, WordPress and databases.
• Member accounts, sign-in, built-in shopping cart. To sell, use an external payment link (Stripe Payment Links, PayPal, Square) or an online store button.
• Form submission by JavaScript or to an external service, and attachments.
• Heavy files in the website (video, audio, PDF).

Everything that runs in the browser works: menus, animations, galleries, carousels, tabs, embedded Google Maps, embedded calendars, social media buttons.

11Updating the website

• Ask the AI for the changes in the same conversation, with the same prompt, and upload the new ZIP: it becomes a new version.
• For a small fix (a text, a price, a color), use the portal's online editor, without redoing a ZIP.
• The latest versions are kept: you can go back to an older one in one click.
• Always keep a copy of your ZIP on your computer.

12Checklist before uploading

• index.html is at the root of the ZIP.
• The pages open properly on your computer, and the links between them work.
• The form has method="post", no action, an “email” field and no captcha.
• There is a merci.html page (and a 404.html page if you want).
• Each page has its title, description and sharing tags, with your real address; the sharing image is in the ZIP.
• No favicon, no PDF, no video in the ZIP.
• The images are light.
• The content follows the content rules of the terms of use.

After uploading, read the import report, choose the receiving email in the settings, upload your favicon, then send yourself a test message through the form.