Build a Pagelayer Landing Page with AI
Describe the page; get a Pagelayer draft with a hero, features, testimonials, an FAQ and a call to action.
Prerequisites
A site connected to WPVibe running Pagelayer 2.2.2 or newer (tested on 2.2.2, free) on WordPress 6.9 or newer, with an administrator account.
My WordPress site uses the Pagelayer page builder. Build me a landing page for [your business or offer] and save it as a draft; do not publish it. Page title: [title]. Include: a hero with the headline [headline], a short supporting line and a button for [main action] that links to [a page on my site or a URL]; feature cards for [feature one], [feature two] and [feature three]; an about section with [two or three sentences about you]; testimonials [name, role and quote for each, or leave this section out]; an FAQ answering [questions, or write five from my description and show them to me first]; and a closing call to action with the same button. 1. Run get_ability_info for pagelayer-pages/get-page. If it is not found, run rest_api GET /wp/v2/plugins with search pagelayer. If Pagelayer is active, tell me this recipe needs Pagelayer 2.2.2 or newer on WordPress 6.9 or newer, and stop. If it is installed but not active, tell me to activate it, and stop. If it is not installed, tell me this recipe is for the free Pagelayer plugin, and stop. 2. Run pagelayer-pages/get-data-structure with topic all, and pagelayer-global/get-global-styles. Use Pagelayer's global color and font tokens from get-global-styles as they are, and do not hard-code colors; if it returns none, leave colors to the section defaults. Do not pass global_colors, global_fonts or content_width, and do not run pagelayer-global/update-global-styles: those change every Pagelayer page on my site. 3. Photos: Pagelayer's own search-images needs a Pexels key, so do not use it. Find [two] photos with WPVibe's search_images (or use these: [image URLs]), add each to my media library with upload_media, with short alt text that says what it shows. Use the attachment ID it returns as the section's image, written as text (for example "3345"), not the URL: Pagelayer takes alt text from the media item, and an image given by URL shows empty alt text on the live page. The first photo goes in the hero, the second in the about section. 4. Check that each page I want linked exists (rest_api GET /wp/v2/pages with search) and use its link. If one does not exist, ask me before linking anything else. 5. If you wrote the FAQ questions, show me them with their answers and wait for my yes first. Then build the page in one pagelayer-pages/create-page call with status draft (create-page publishes by default, so always pass it) and pagelayer_data made of the section specs listed under fast_path_sections: hero, features, about, testimonials, faq and cta. Use only my words or text written from my description, never sample text. Never write testimonials or quotes yourself: if I gave none, leave the testimonials section out. In any text you send, use curly quotes instead of straight double quotes, leave out backslashes and angle brackets, and leave out quote marks around a whole testimonial: Pagelayer drops a widget's settings, text and link included, when its text holds a straight double quote or a backslash, and its validator does not notice. Do not pass is_homepage or is_posts_page. If it is rejected, nothing was saved: fix only what the error lists and try again. If the error names a setting you did not send, a section key you added produced it: remove that key. PAGE_ID is the new page's id and SITE_URL my site address. 6. Run pagelayer-pages/validate-page (post_id PAGE_ID) and fix what it reports with pagelayer-pages/update-element. Then note the page's modified time (rest_api GET /wp/v2/pages/PAGE_ID with _fields modified). 7. Give me the preview link from pagelayer-pages/preview-page (it opens while I am logged in) and the Pagelayer editor link SITE_URL/?page_id=PAGE_ID&pagelayer-live=1, and list each section with its heading so I can spot-check. Publish only when I say so, with pagelayer-pages/publish-page. 8. If I ask for changes in this chat, read the modified time before each change and compare it with the last one you noted; after each of your own saves, note it again. If it moved, someone saved the page elsewhere: stop and tell me to make the change in the editor. Otherwise make each with pagelayer-pages/update-element on PAGE_ID (read the element with get-page and element_id first; attrs are merged, so send only what changes). When you change a heading, keep its h1, h2 or h3 tag around the new text exactly as stored (those tags are the only angle brackets you send): plain text removes the heading tag on the live page without an error. In any text you send, use curly quotes instead of straight double quotes, leave out backslashes and angle brackets, and leave out quote marks around a whole testimonial: Pagelayer drops a widget's settings, text and link included, when its text holds a straight double quote or a backslash, and its validator does not notice. Read each one back, list it as before and after, and run validate-page again. Never use update-page with pagelayer_data or edit-layout. Then tell me that once anyone edits this page outside the AI (in Pagelayer's editor or anywhere else), later changes belong in the editor: Pagelayer's AI abilities keep their own copy of the layout and would bring back the older version.
Skip pasting the full prompt. Drop this into your AI on a site that already has WPVibe:
Run the “Build a Pagelayer Landing Page with AI” recipe from the WPVibe cookbook on my connected site.
A landing page in Pagelayer means picking a row layout, dragging in a heading, an icon box per feature, a testimonial and an accordion, and then replacing every bit of sample text. It is an afternoon of clicking before you get to the words that matter.
The AI builds the page with Pagelayer’s own tools from a short brief: a hero with your headline and button, feature cards, testimonials, an FAQ and a closing call to action. It puts your photos in your media library, uses Pagelayer’s global colors and fonts as they are set, saves the page as a draft and checks it with Pagelayer’s validator.
Nothing is published until you say so, and no site-wide setting changes. Give it your real headline, features and quotes: it writes the rest from your description and never makes up testimonials. Ask for changes in the same chat before you publish. Once the page is edited outside the AI, in Pagelayer’s editor or anywhere else, keep making changes there: Pagelayer’s AI abilities work from their own copy of the layout and would bring back the older version.
Outcome
A draft Pagelayer landing page with your sections, photos and links, ready to preview and publish.