Build Custom Pages with AI

You can use an AI assistant — Claude, ChatGPT, or any other — to design and build beautiful custom pages for your Syte, even if you don't write code. This guide shows the workflow that works reliably: describe what you want, give your AI the platform rules, paste the result in, and validate it before saving.

Before you start

• If your page collects information (signups, waivers, contact forms), create the form first under Admin > Custom Forms and note its numeric form ID.
• Create the custom page under Admin > Customize > Pages (it can be empty for now) and note its numeric page ID.
• Your AI will need both IDs to wire the form correctly.

Step 1 — Give your AI the rules

xsyte pages use a template system (Twig) with platform-specific rules that AIs don't know by default. Copy the entire AI Rules Reference for xsyte Custom Pages article and paste it into your AI chat before you describe your page. This one step prevents nearly every common failure.

Using Claude? Even better — install the xsyte skill once and Claude knows the rules automatically.

Step 2 — Describe the page you want

Tell your AI what the page is for, what it should look like, and (for forms) the exact field names from your Custom Form plus the form ID and page ID. Example:

"Build a tournament signup page for my roller hockey league. Black and gold theme, full-page takeover. It needs a form posting to our forms handler with fields team_name, captain_email, division. Our form_id is 7 and page_id is 15. Follow the xsyte rules I pasted above."

Step 3 — Paste the page in (the right way)

In Admin > Customize > Pages, open your page, then open the content editor's Tools > Source code view and paste the AI's HTML there.

Important: always paste into the Source code view, never the visual editing pane, and never route the HTML through Word or Google Docs first — rich-text editors wrap the code in junk markup and break it.

Step 4 — Validate before saving

Click the Validate Content button next to Save. It checks your page for template errors, broken form wiring, and markup that would damage the editor — and explains any problems in plain English.

If it finds problems: click Copy to Clipboard on the report, paste it back into your AI chat, and say "fix these issues." Paste the corrected page and validate again. Most pages pass on the second try.

Step 5 — Save and test

1. Save the page and view it at yoursyte.com/page/your-slug.
2. If it has a form, submit a test entry and confirm the thank-you state appears.
3. Check the submission arrived under your Custom Form's responses and notification email.

Tips

• Keep the original HTML file your AI produced. If the page is ever damaged by editing, you can re-paste it fresh.
• Iterate in small steps. Ask your AI for one change at a time and re-validate after each paste.
• Blank white page after saving? Run Validate Content — it will tell you exactly what broke and how to fix it.