AI prompts

Built In page prompts

These prompts use built-in section and row type_of renderers for the main page structure, followed by a reusable Liquid footer.

Liquid Backed page prompts

These template-forward prompts use reusable Liquid section and row templates for more distinctive, creative layouts while keeping content editable.

How to use these prompts

Start with the base instruction, then add one section prompt or combination prompt for the component you want the AI to create.

Each prompt assumes the AI has already read /docs/ai-page-generation and called GET /api/v1/schema.

First call GET /api/v1/schema and use only the returned fields and enum values. Create or revise the page using structured StaticPagesApi models. Prefer built-in section and row types over raw_html. Use active for visible content, draft for staged content, and generous section_classes spacing between non-navbar sections.
Do not create tags or send tag, tag_id, tags, tag_ids, taggable, or taggables fields. Tags are user-managed.

Docs-first page builder prompt

Use this when you want an AI assistant to read the docs, schema, and templates before it creates or edits any page.

Before creating or editing any page, first read the StaticPagesApi AI page generation docs and schema.

Required first steps:
1. Read /docs/ai-page-generation.
2. Call GET /api/v1/schema.
3. Call GET /api/v1/templates and reuse matching templates before creating new ones.
4. Only after that, create or revise the page through the API.

Follow the docs exactly. Pay special attention to:
- Use a variety of built-in section and row types.
- Choose one of the ai_layout_presets returned by GET /api/v1/schema before drafting the page.
- Treat ai_layout_contract as hard requirements, not suggestions.
- For general page requests, combine built-in sections/rows with 1-3 owned or copied Liquid-backed sections/rows so the page has reliable structure and custom visual polish from the first draft.
- End generated landing pages and marketing pages with an actual Footer Liquid template from owned templates or the default template library, not a generic text/raw HTML footer.
- Use reusable Liquid templates for custom visual layouts.
- Do not create one giant raw_html page.
- Do not overlap sections, cards, badges, dividers, media, or text.
- Do not let cards get clipped or chopped off.
- Avoid fixed heights, hidden overflow, cramped columns, negative margins, absolute/fixed positioning, and transform hacks.
- Keep text readable. Do not use text colors that are close to the section, row, card, or raw HTML background color.
- Use rows_in_columns only with balanced column_index values and short enough content for the chosen column count.
- Keep pages draft unless I explicitly ask to publish.
- Do not create or assign tags. Tags are optional user-managed metadata.
- Respect trial limits: 7 days, 3 pages, unlimited exports.

After creating the page, inspect layout_warnings and response IDs. Revise sections/rows through the API if anything looks cramped, overlapping, clipped, sparse, or visually uneven.

Give the AI an API token

Use this setup prompt before the page-building prompt so the AI knows how to authenticate with the API.

Create an Organization API token in StaticPagesApi and give it to the AI only for this page-building session.

Human setup:
1. Log in to StaticPagesApi.
2. Open Organization API Tokens.
3. Create a new token for the organization that should own the page.
4. Copy the token value immediately, because it may only be shown once.
5. Give the token to the AI as YOUR_API_TOKEN.

AI instructions:
- Use the token only in HTTP requests to the StaticPagesApi API.
- Send it as: Authorization: Bearer YOUR_API_TOKEN
- First verify access with GET /api/v1/schema.
- Then call GET /api/v1/templates before creating or editing pages.
- Do not print the full token back in summaries, logs, docs, or generated page content.
- If an API request returns 401, stop and ask for a valid token.
- If an API request returns 402, treat it as a trial or billing gate and ask whether to subscribe or reuse an existing page.

Short docs-first prompt

Use this shorter prompt when the AI already has API access and you want a concise guardrail.

Read /docs/ai-page-generation, GET /api/v1/schema, GET /api/v1/templates, and GET /api/v1/template_library before making anything. Pick an ai_layout_preset and follow ai_layout_contract as hard requirements, especially the rules about Liquid templates, actual Footer templates, varied components, no raw_html blobs, no overlapping elements, readable text/background contrast, balanced columns, no risky CSS, and no clipped cards. Keep the page draft and build only through the API.

Standalone sections

These section types can stand alone without rows. Use rows only when the section type supports or benefits from repeated child content.

• text: Create a text section with a clear header, optional eyebrow in subheader, rich text body, CTA buttons, and roomy section_classes such as py-5 bg-white.
• hero: Create a hero section for the first viewport. Use hero_type split when there is a primary image, or banner for centered copy. Add section_classes such as min-vh-100 d-flex align-items-center py-5 bg-white.
• split_pane: Create a split_pane section with text/media balance. Use leading_cols, alignment, mobile_image_position, vertical_text_alignment, CTAs, and image_styles for a polished two-column explanation.
• raw_html: Create a raw_html section only when the design requires markup the built-in components cannot express. Keep the markup scoped and avoid replacing an entire page with one raw_html block.

cards + row prompts

Use cards when repeated items should scan as a grid or collection.

• cards + text: Create a cards section with text rows for compact explanation cards. Use card-like row_classes such as h-100 border-0 shadow-sm bg-white.
• cards + card: Create a cards section with card rows. Choose card_variant grid, icon, header_body, inline_image, feature_text, numbered_step, or centered_top_icon based on the content.
• cards + image: Create a cards section with image rows when each card needs a visual. Use image_variant caption or text, and image_styles for consistent height and object-fit.
• cards + testimonial: Create a cards section with testimonial rows for quotes, ratings, or customer proof. Use num_value for ratings when applicable.
• cards + collapsible: Create a cards section with collapsible rows when compact FAQ cards or objection handling should expand inline.
• cards + split: Create a cards section with split rows when each item needs paired media and copy inside the collection.
• cards + raw_html: Create a cards section with raw_html rows only for custom snippets that still belong inside a repeated card collection.

rows_in_columns + row prompts

Use rows_in_columns for process steps, mixed content blocks, compact FAQs, and side-by-side information groups.

• rows_in_columns + text: Create a rows_in_columns section with text rows for short grouped explanations. Use 1-2 columns for paragraph copy, 3 columns for short blurbs, and 4 columns only for very short labels/cards. Set or allow balanced column_index values.
• rows_in_columns + card: Use this combination only when there is exactly one card per column. Use card_variant numbered_step for short ordered workflows, or centered_top_icon for centered step cards. When there are more cards than columns, use a cards section with cards_per_row so full-height card styling cannot make vertically stacked cards overlap later sections.
• rows_in_columns + image: Create a rows_in_columns section with image rows for screenshot grids, logo rows, or visual proof blocks.
• rows_in_columns + testimonial: Create a rows_in_columns section with testimonial rows for compact social proof.
• rows_in_columns + collapsible: Create a rows_in_columns section with collapsible rows for FAQ columns. Use collapsed_status closed unless the first item should start open.
• rows_in_columns + split: Create a rows_in_columns section with split rows when each column item needs its own media/copy pairing.
• rows_in_columns + raw_html: Create a rows_in_columns section with raw_html rows for small custom widgets inside an otherwise structured column layout.

slider + row prompts

Slider sections use slider_variant for slide content and slider_behavior for motion. Pick the content variant first, then choose auto or controls.

• slider mixed + controls + text: Create a slider section with slider_variant mixed, slider_behavior controls, and text rows for browsable tips, quotes, or campaign messages.
• slider mixed + auto + card: Create an animated slider section with slider_variant mixed, slider_behavior auto, and card rows for compact featured items or rotating benefits.
• slider mixed + auto + testimonial: Create an animated slider section with slider_variant mixed, slider_behavior auto, and testimonial rows for compact customer proof cards.
• slider mixed + controls + collapsible: Create a slider section with slider_variant mixed, slider_behavior controls, and collapsible rows for browsable FAQ or objection slides.
• slider cards + auto + card: Create an animated slider section with slider_variant cards and slider_behavior auto when every moving item should be a card. Add card rows and choose any supported card_variant for each card.
• slider image + auto + image: Create a slider section with slider_variant image and slider_behavior auto. Add image rows with image_variant slider_item, consistent image_styles, and descriptive image_alt.
• slider split_rows + controls + split: Create a full-width controlled slider section with slider_variant split_rows and slider_behavior controls. Add split rows with image/copy pairs for product stories, destinations, case studies, or feature walkthroughs. Every split row must have a real or placeholder image_desktop attachment so the media pane never renders empty.

pricing + offer prompts

Pricing sections should only contain offer rows.

Create a pricing section with active offer rows. Use each offer row for one plan, workflow, package, or deployment option. Put the plan name in header, price or label in subheader, benefits in body, and the destination in the row's action. Use section_classes such as py-5 bg-light and row_classes such as h-100 border-0 shadow-sm.

navbar + navbar_link prompts

Navbar sections should only contain navbar_link rows.

Create a navbar section with navbar_link rows. Use the section header for brand text and the section's first action for the brand URL. Give a navbar_link row one action for a direct link. For a dropdown, make its first action the non-link dropdown label and add the actual dropdown links as later ordered actions. Use navbar_sticky, navbar_overlay, navbar_scrolled_color, background_color, and section_classes intentionally.

split_pane with rows

split_pane can stand alone, but it can also contain compatible rows when content_type is text_rows.

• split_pane + text: Create a split_pane section with supporting text rows for bullets or proof points beside the main copy/media.
• split_pane + card: Create a split_pane section with card rows for a feature list beside a screenshot or product image.
• split_pane + image: Create a split_pane section with image rows when multiple supporting visuals should sit alongside the copy.
• split_pane + testimonial: Create a split_pane section with testimonial rows for proof next to the main pitch.
• split_pane + collapsible: Create a split_pane section with collapsible rows for an image-left, FAQ-right layout or a copy-left, objections-right layout.
• split_pane + split: Create a split_pane section with split rows when each child item needs its own mini media/copy layout.
• split_pane + raw_html: Create a split_pane section with raw_html rows only for compact custom embeds inside the pane.

Compatibility checklist

Use this checklist before sending a blueprint or editing an existing page.

• pricing -> offer only.
• navbar -> navbar_link only.
• slider with slider_variant cards -> card rows with any supported card_variant.
• slider with slider_variant image -> image rows with image_variant slider_item.
• slider with slider_variant split_rows -> split rows, each with image_desktop attached. Use a placeholder image when the final asset is not available yet.
• slider with slider_variant mixed -> broad row support. Use auto for compact card/testimonial rows and controls only for full-slide text, FAQ, story, or mixed content.
• slider_behavior auto -> animated/autosliding compact track for cards, testimonials, logos, and image strips. slider_behavior controls -> left/right buttons for full-width slides; use split_rows or non-card full-slide content.
• Do not add Bootstrap col-* width classes to slider row_classes. Slider items own row/card width; use spacing and visual classes such as p-3, shadow-sm, bg-white, or border-0 instead.
• Do not use vertical auto-margin classes such as mt-auto, mb-auto, my-auto, or m-auto inside compact card/testimonial sliders. They pin content apart and create large empty gaps inside cards; use normal spacing such as mt-3, gap-3, or p-3.
• cards, rows_in_columns, split_pane, and slider mixed can use text, card, image, testimonial, collapsible, split, and raw_html rows where the content fits.
• text, hero, and raw_html sections usually stand alone.
• Use offer rows only in pricing sections and navbar_link rows only in navbar sections.
• For footer Liquid templates, use one row per column and put that column's vertical links in its ordered actions collection.
• For overlays, choose one content source: section raw_html or an ordered mixed row stack. Use raw_html rows only for items that need deployed or custom markup.
• For rows_in_columns, keep columns at 4 or fewer, use balanced column_index values, and avoid long body copy in 3-4 column layouts.
• Use the layout_warnings returned by blueprint responses as revision instructions.
• Verify the chosen partial renders the fields you set, especially row_classes, image_styles, attached images, CTAs, and rich text bodies.