AI Mode. More power to you.
31st October 2026
The Workflow
Here is the workflow from start to finish.
Let's find out what you can do with AI Mode.
For a shorter overview, see Figma to WordPress or Build a Custom Website with AI.
Design in Figma↓Open Figma Dev Mode↓
Connect Claude to Lay↓Let it build the Design↓
Use it in Lay,manage content here
Real life example
Check out this website → city-adventszauber.de
Built entirely with AI Mode.
Made by the talented @andrederbeiler.
Custom Design. Easy Content Management.
The Big Win:
You can create a complex custom design, while content management stays simple for your client.
They can edit exactly what they need through simple fields, without messing up the design. Pretty nice :)
Check out the available fields:
Design in Figma
Design the website, or just parts of it, in Figma. You can mix custom-built elements with normal Lay Theme layouts.
Open Figma Dev Mode
Click the Dev Mode button in the bottom right corner of Figma. This needs a Figma subscription.
Select the part you want to build in Dev Mode.
Copy the URL while you are in Dev Mode.
Connect Claude to Lay
Open the Claude or ChatGPT / Codex desktop app and connect it to your website through AI Mode. Here is how to connect it.
Let it build the Design
Give the AI your Figma Dev Mode link and describe how the element should work. Tell it which content should be editable. AI Mode creates the Custom Element, its fields and the code.
Use in Lay Theme
We can now insert this element into the Gridder.
You can continue editing the content through its fields. The result stays connected to WordPress, just like the rest of your website. Pretty nice :)
AI Mode is optional. Use this workflow when a project needs something more complex or tailored.
My Thoughts on AI Mode
- In my opinion it is far better to do your designs in Figma or Lay. Instead of letting AI do design work.
- Figma Dev Mode is the best way to create a design and have your AI code it pixel-perfect into your website.
- Use it to create Custom Elements, Custom Views and Custom Fields
- Use it to migrate data and do the hard and boring work
- Building a complex part of a website? To save AI usage, first finish a good prototype with HTML, JS and CSS. Then tell your AI to put it into Lay Theme.
- Don't one-shot things and expect good results. Build step by step.
- Simple settings are usually faster to do in Lay yourself instead of tasking the AI.
- AI Mode is optional. Use it when a project needs something more complex or tailored.
- More earning potential: With enough expertise, you can create more professional and tailored Lay websites and ask for a higher budget for client projects.
That's what AI Mode can help you with!
Enable AI Mode
Go to Lay Options and enable AI Mode!
Yes, it's that easy
Connect to Claude / Codex
Use the Claude app or ChatGPT/Codex App! This won't work with the browser based ai chatbots.
Personally, I prefer ChatGPT/Codex cause for web-frontend work the built-in browser is better I think!
Go to "AI Mode". If you are working on a local website, click "Copy Browser Bridge instructions".
Paste these instructions into Claude or Codex. The Browser Bridge connects your AI app to your local Lay website without a key.
If your website is online, click "Create direct connection" instead. You will now see the secret key and another button:
Click "Copy instructions including key".
Paste this into Claude/Codex.
Your AI app will connect to Lay and see everything it can do now!
If you don't want to put the secret key in the chat, you can also use the "Connect without key" button.
The secret key can always be revoked and expires automatically after 30 days.
Explore what it can do
Once connected, you can ask your AI:
What can you do now with Lay Theme based on this connection?
By asking your Claude / Codex, you can explore all the capabilities, even the ones that are not yet part of this tutorial.
Turn a Gridder Layout into an Edit Form
Remember how you built a layout in the Gridder.
And your client moved around everything and messed it up?
Well, those days are over.
Let's say we got this layout (just a simple example):
Now tell the AI:
For this page, hide the Gridder and create custom fields for the content of the Gridder.
Before it really does it, it will ask: "Should I do the changes?"
Say yes and you can even tell it: Don't ask me anymore, just always apply the changes.
The AI created these fields: An image field and a WYSIWYG Texteditor.
The content of your layout is now tied to those fields instead of the Gridder.
Custom Field Types
Choose a field based on the kind of content an editor should enter. Here is an overview of every available field and the situations in which it is most useful.
Text and Numbers
Text A single-line field for short pieces of text. Best for titles, names, labels and other values that should stay on one line. When qTranslate-XT is active, multilingual input can be enabled or disabled separately for this field.
Textarea A multi-line field for plain text. Best for longer descriptions, summaries or notes that do not need formatting. When qTranslate-XT is active, multilingual input can be enabled or disabled separately for this field.
WYSIWYG A rich text editor for formatted content. Best for body text that needs paragraphs, links, headings or typography settings. When qTranslate-XT is active, multilingual input can be enabled or disabled separately for this field. When enabled, the language switcher lets you enter separate content for each language.
Code A larger plain-text field that preserves every character and line break. Useful when AI or a developer needs editable HTML, CSS, JavaScript or data snippets.
Number A field that only accepts numbers. Best for years, prices, quantities or measurements, especially when the content may later be sorted, filtered or calculated.
URL A field for a web address. Best for external links, project websites, social profiles or buttons that should lead to another page.
Email A field for an email address. Best for contact details or links that should open the visitor's email application.
Choices
Checkbox A single on-or-off option. Best for simple yes-or-no settings such as “Featured”, “Show caption” or “Open in a new tab”.
Select A compact list from which one option can be selected. Best when there are several choices but they do not need to be visible all the time.
Radio A visible list from which one option can be selected. Best for a small number of choices when the editor should see every available option immediately.
Multi Check A list in which multiple options can be selected. Best when several predefined choices may apply at the same time.
Color and Date
Color A color picker for selecting and storing a color. Best for backgrounds, text colors, accents or other editable design values.
Date A calendar date without a specific time. Best for publication dates, event days, deadlines or project dates.
Time A time of day without a specific date. Best for opening hours, start times or recurring schedules.
Date & Time A date and an exact time combined in one field. Best for events, appointments, launches or deadlines.
Timezone A field for selecting a timezone. Best when dates or times need to work correctly for visitors in different parts of the world. It is usually used together with a Date & Time field.
Media and Embeds
Image A field for selecting a single image from the Media Library. Best for thumbnails, portraits, cover images or other individually editable visuals.
Gallery A field for selecting and arranging multiple images. Best for slideshows, portfolios, image collections or project documentation.
File A field for selecting a downloadable file from the Media Library. Best for PDFs, press kits, documents, audio files or other downloads.
oEmbed Paste a link from YouTube, Vimeo, SoundCloud or another supported platform to display its media automatically.
Content Relations
Post Choose one existing page, project or post. Useful when one specific piece of existing content should appear or be referenced here.
Relationship Choose and arrange several existing pages, projects or posts. Useful for related projects, featured work, team selections or other hand-picked lists.
Structured Fields
Group A fixed collection of related fields. Here, one Group represents one person with a portrait, name, email address and role.
Repeater A repeatable collection of fields. Here, each row represents one person, making it easy to add, remove or reorder team members.
Content migration
In your admin panel you usually create pages and project posts manually.
Imagine you need to rebuild a site.
The existing old site has 100 projects.
Instead of re-creating them manually, you can tell your AI:
Layout & Page Creation
You can even tell it to build layouts based on existing layouts you did:
But it is advisable to first do a test run with just one or two pages before telling your AI to do a hundred.
This tutorial will get more content over time.
