Writing your own prompts

The bundled and premium prompts follow a specific format that we’ve found produces the most reliable output across Claude, Cursor, Antigravity, and similar clients. You can write your own using the same template.

The structure

Every effective prompt has six parts in roughly this order:

1. Brand identity: one paragraph: business name, what they do, target customer, vibe.
2. Critical layout rules: copy-paste boilerplate the AI needs to respect.
3. Design system: color palette (hex values), typography (specific fonts and sizes).
4. Section list: explicit list of every section the page needs, in order.
5. Copy direction: formal vs. playful vs. luxury vs. punchy. Concrete examples beat adjectives.
6. CTA expectations: what action you want visitors to take, how many CTAs, where.

The boilerplate

This block goes near the top of every prompt. It tells the AI how to use the row-layout tools without producing broken pages. Copy this verbatim:

## CRITICAL LAYOUT RULES

- For side-by-side columns, use a parent container with flex_direction=row.
  Children will auto-get content_width=full with equal percentage widths.
- NEVER set flex_wrap or _flex_size in any container settings, these are
  stripped automatically and cause layout issues.
- NEVER set _flex_size: 'grow' on any element.
- Top-level containers should use content_width=boxed (default).
- Do NOT manually set content_width or width on row children, the
  build-page tool calculates these automatically.

Most failures we’ve seen (overflowing rows, mis-aligned columns, weird gutters) trace back to the AI ignoring these rules. The boilerplate makes them explicit.

Color palettes

Provide hex values and names for the four standard globals (primary, secondary, text, accent) plus any custom colors. Example:

### Color Palette

- Primary: #2C1810 (rich espresso brown)
- Secondary: #D4A574 (warm caramel)
- Text: #6B5A4E (warm taupe body text)
- Accent: #B8895A (darker caramel for hover)
- Background: #FDF6EE (cream)
- Card background: #FFFFFF

Naming each color helps the AI choose the right one for each section. “Use accent for buttons” is unambiguous; “use a brown” is not.

Section lists

Explicit. Numbered. Not “a hero plus features plus testimonials”. Write each section like a sub-prompt:

### Section 1, Hero

- Full-width container, background = primary color
- Heading (h1, large, white) on the left
- Subhead (white, 18px) below
- Two CTAs side-by-side: "Order online" (primary) + "View menu" (secondary)
- Image of fresh pastries on the right (search Openverse)

The AI does much better when each section’s content + layout is spelled out than when it has to invent both.

Pro tip: write the globals first

Ask the AI to call update-global-colors and update-global-typography before building the page. Then in every widget, reference globals/colors?id=primary instead of repeating hex values. The result: changing one global color updates every section automatically, both in the AI’s output and any future edits in the Elementor UI.

Sample prompt opening line:

First, set the global colors and typography using the design system below. Then create a new draft page titled “Golden Crumb Bakery” and build the layout into it using build-page.

Iteration

After the first build, use:

Show me the current page structure using get-page-structure for post ID <N>.

The AI reads the structure back, sees what it built, and can then make surgical edits with update-element or batch-update instead of regenerating everything. This is the difference between “rebuild from scratch every time I change something” and “incremental refinement.”