PageShape Pro

Getting started

What you need

• A WordPress site where you can install plugins.
• An account that can edit pages. Settings and design-system editing need an administrator account.
• Either a PageShape license (the default connection) or your own Anthropic API key.

Install and open

1. Upload the plugin folder to wp-content/plugins/, or install the zip from Plugins → Add New → Upload Plugin.
2. Activate SWAI PageShape Pro.
3. Open PageShape Pro in the WordPress admin menu. The app has its own screens: Pages, New page, Design systems, Section library, Settings and this Help.

First-run checklist

1. Connect. Go to Settings and choose how PageShape talks to the AI. See Settings.
2. Create a design system. Extract one from your site’s URL or a screenshot so every page matches your brand. See Design systems.
3. Make your first page. Describe the page, review the plan, generate, and create the WordPress page. See Creating a page.

Light and dark theme

The two buttons at the bottom of the left navigation switch the PageShape screens between light and dark. Clicking the active theme again returns to following your operating system.

Settings

Settings is available to administrators. Other editors can build pages but will not see this screen.

Connection

• Ready to go (recommended). Uses your PageShape license. Paste the license key from your PageShape account. No Anthropic account or API key is needed and usage is billed through your PageShape plan.
• Use my own Anthropic API key. Paste a key from the Anthropic console. The key is stored on your server and is never sent to the browser. Usage is billed to your Anthropic account.

Saved keys are never shown again. The field reads “Saved” and you enter a new key only to replace the old one.

Model

Max tokens per generation caps the length of a single AI response. The default of 8000 is enough for any section. Raise it only if long sections come back cut off.

Images

• No images (placeholders only). Sections get clearly marked image slots you can fill later.
• Stock photos (free, Openverse). Openly licensed images matched to the section’s content. No key required.
• AI-generated (Google Gemini). Images generated from the section’s content and your design system’s Imagery style. Needs a Google Gemini API key from aistudio.google.com.

See Images and forms for how images are placed and replaced.

Usage

The Usage panel counts pages created, sections generated, AI calls of all types and style extractions, with an estimated cost. Counts are for this site and are informational.

Design systems

A design system is the visual identity every generated page follows: colours, type, spacing, shape, component styles, plus a written page brief, named layout treatments and an imagery style. Pages are attached to a design system, and changing the system restyles every page that uses it on its next render, with no AI cost.

Create one

Open Design systems → New Design System and pick a source:

• Extract from URL. PageShape reads the site’s rendered appearance and builds a style vocabulary: palette, type, spacing, shape. It works on Tailwind and CSS-in-JS sites. A URL reads the site’s stylesheets, so you get the site-wide brand. If one page looks different from the rest of its site, extract from a screenshot of that page instead, or adjust the primary colour after extraction.
• Extract from screenshot. Upload a screenshot of the design you want to match. A full-page capture at desktop width gives the best results. Tall images are split into slices automatically so nothing is lost. PNG keeps text sharpest, but any image works.
• From CSS. Paste CSS to seed the tokens. This is how design systems saved in PageForge 1.x are migrated.

Review and save

Extraction opens a review step. Check the palette and type, adjust anything that looks off, then give the design system a name and save. Two things deserve a careful look:

• Imagery style. One art-direction sentence applied to every image this design system sources or generates: medium, mood, lighting, settings, palette, and what to avoid. Make it yours.
• Extraction notices. If a stylesheet could not be read or was too large to include, the review step says so. The tokens are still usable; fill any blanks by hand.

Make default

Make default sets the design system new pages start with. It does not change existing pages or other design systems.

Edit tokens

Edit tokens opens the full token panel. Groups are collapsed by default; open the ones you need.

A blank field means “inherit”. Only filled fields are written into the page CSS, so you can start from a handful of colours and refine over time.

Page brief and treatments

The page brief describes the source design as if briefing a designer: band sequence, rhythm, density, imagery. Treatments are named arrangements, for example a three-column card row or a striped key/value table, that the page plan assigns to sections. Generation follows these over generic layouts. Both are captured by extraction and can be edited under Edit tokens.

Delete

A design system that styles pages cannot simply be deleted. The delete dialog shows how many pages use it and asks which design system those pages should move to first. Renaming a system keeps its look; deleting and reassigning changes the look of every moved page.

Switch a page’s design style

In the editor, open Design tokens and use the Design style switcher at the top to move the page to another design system. The page re-renders immediately. On New page, the same switcher sits at the top of the Design tokens dialog.

Creating a page

Open New page. There are two ways to start: describe the page, or paste Markdown you have already written.

Describe a page

1. Describe the page you need. Say what the page is for and what it should contain, for example: “A landing page for our spring webinar series: hero with signup CTA, three feature highlights, speaker bios, and an FAQ.”
2. Choose a design system, then click Plan page. One quick AI call turns the brief into an ordered list of sections.
3. Review the plan. Each section card shows its type and prompt. Edit the prompt, reorder with Up and Down, Remove what you do not need, or Add section. Start from library inserts a section you saved earlier. Each card also has Background and Treatment selects so you can set the band and the named layout before generating.
4. Generate page builds every section in turn and shows each one in the live preview as it completes. Generate on a single card builds just that section. If a section fails, use Retry.
5. Refine any section with a short instruction, for example “make the buttons larger” or “redesign this section as three columns”. Regenerate rebuilds a section from its prompt.
6. Give the page a title and click Create WordPress Page. The page is created as a Draft. From here, Edit in PageShape opens the editor and View page opens the draft preview.

Section types

Hero, features, pricing, testimonials, CTA, FAQ, team, content and custom. The type sets the section’s starting layout and the band and hero rules that apply to it; the prompt says what it should say and do.

Paste Markdown

Switch to Paste Markdown, paste your text or upload a .md file (the file is read in your browser; nothing is uploaded), choose a design system, and pick what PageShape should do with it:

• Design it with AI. Your words are the copy, verbatim and never rewritten. The AI plans a layout and designs each section around them in your design system. Costs one AI call per section.
• Place it as-is. Instant and free. Your Markdown becomes plain structured HTML styled by the design system, with no AI call.

Click Build page from Markdown. Each Markdown section arrives as a card with a layout intent you can adjust before generating. See Writing Markdown for PageShape for the conventions that give you exact control over sections, buttons and images.

Design tokens on New page

The Design tokens button opens the same token panel the editor uses. Changes apply to the whole design system, so every page using it updates, and they cost nothing.

What costs an AI call

Writing Markdown for PageShape

Everything in a Markdown file is treated as page copy. The file should contain only the words you want on the page, plus the small set of conventions below.

Section markers (optional)

Plain Markdown works: sections split automatically at your repeated top heading level (usually ##), and a # headline with a ## subheadline directly under it stays together as one hero. Most files need nothing more.

For exact control, put a marker line above each section:

[SECTION: HERO]

# Meet Stringer. Your AI staff writer for WordPress.

## Turn a title into a publish-ready blog post.

Intro paragraph...

[SECTION: BENEFITS]

## Everything a great staff writer brings, minus the payroll
...

• One marker per section on its own line: [SECTION: Name]. Case does not matter; [SECTION] and [SECTION - Name] also work.
• With two or more markers, your markers decide the sections exactly. Headings no longer split anything.
• Markers never appear on the page.
• The name hints at the design treatment. Recognised keywords: HERO, FEATURES, BENEFITS, HOW IT WORKS, PRICING, PLANS, FAQ, TESTIMONIALS, REVIEWS, TEAM, ABOUT, CTA. Other names get a neutral treatment plus whatever the layout plan assigns.

The hero

Start the file with the hero: a # headline, optionally a ## subheadline directly under it, intro copy and buttons. The first # heading also becomes the WordPress page title.

Buttons

 Get Stringer
 [See how it works](#how-it-works)

Consecutive lines form one row; the first is the primary button, the rest secondary. To give a button a destination, write the label as a Markdown link. Allowed destinations: https:// and http:// URLs, mailto: and tel: links, site paths such as /pricing, and page anchors such as #section. A button without a link gets a placeholder you can change later by clicking the button in the preview and using Link in the formatting toolbar.

Images

[image] A writer at a wooden desk reviewing a draft on a laptop
[image 4:3] The Stringer topic queue inside WordPress
[image square] Product icon on a cream background

• Describe what the image should show, not how it should look. The design system’s Imagery style handles medium, mood and lighting.
• Optional shape inside the brackets: a ratio (16:9, 4:3, 1:1, 3:4, 9:16) or a word (wide, standard, square, portrait, tall). The default is 16:9.
• With image sourcing on, each line becomes a real image. With sourcing off, it becomes a visible placeholder you can fill later.
• Up to four images per section.

Supported Markdown

• Headings # to ######, paragraphs, bold, italic, inline code, links and images.
• Bulleted and numbered lists, blockquotes, horizontal rules, fenced code blocks.
• Pipe tables with a header row become styled tables. Choose Simple, Striped or Comparison style from the section’s Layout menu afterwards.

What not to put in the file

• Notes to the AI. Bracketed asides such as “[make this feel more urgent]” are placed on the page as visible copy. Put design direction in the design system’s brief and per-section tweaks in the Refine box after generation.
• Style or colour instructions. Colours, fonts and spacing come from the design system.
• Raw HTML. It is stripped or shown as text.
• Site chrome. No menus, footers or cookie notices. Your theme provides those.

Checklist before pasting

1. Sections break where you expect. If you use markers, use them for every section.
2. The file starts with the hero (# headline first).
3. Buttons use Label or [Label](url); images use [image] description.
4. No bracketed notes, no HTML, no style instructions.
5. Read it top to bottom: everything you see is what the page will say.

Editing a page

Open Pages and click Edit on any PageShape page. The editor shows section cards on the left and a live preview on the right. The preview renders at real device widths; use the Desktop, Tablet and Mobile buttons above it to check each width.

Top bar

• Page title is editable in place.
• View opens the page on your site in a new tab.
• Design tokens opens the token drawer for the page’s design system.
• Save writes the page to WordPress. “Unsaved changes” appears whenever there is something to save, and the editor asks before you leave with unsaved work.

Section cards

• Up / Down reorder sections. Duplicate copies one. Insert below adds a new section under it, either generated from a prompt or picked from the library. Delete removes it after confirmation.
• Refine: type one concrete change (“make the buttons larger”, “add space below the CTA”) and click Refine. Only that section is regenerated. For a redesign, say “redesign this section” plus what you want. Your earlier instructions for the section are re-sent each time so they stay in force.
• Layout opens the per-section layout menu. See below.
• Save to library stores the section for reuse. See Section library.
• Clicking a card highlights its section in the preview, and clicking a section in the preview highlights its card.

Layout menu

These options change this page only; they never touch the design system.

Edit text in the preview

Double-click any text in the preview to edit it in place. This is instant and free. A small toolbar offers Bold, Italic, Underline, Link and Unlink. With the cursor inside an existing link or button, Link edits its destination and Unlink removes the link (a button keeps its shape and returns to a placeholder destination). Text you edit by hand is marked as locked copy, so later Refine calls keep your wording.

Replace an image

Double-click an image in the preview, describe the new image, and click Replace. The replacement comes from the image source set in Settings. With images off, the slot stays a placeholder.

Design tokens drawer

Changes here apply to the whole design system, so every page using it updates on its next render, with no AI cost. Click Apply to save. The drawer’s Design style switcher moves the page to a different design system. The drawer header stays in view while you scroll; close it with the X.

Pages changed outside PageShape

If a page is edited in the WordPress editor or by another plugin after PageShape last rendered it, the Pages list flags it “Edited outside PageShape” and the editor shows a banner. You have two choices:

• Adopt outside changes keeps the WordPress version and reads it back into sections, so it is editable here again. This works when the section structure survived the outside edit; if it did not, PageShape tells you and you can choose below.
• Save without adopting asks whether to overwrite the outside changes, save as a new draft instead, or cancel.

Changing only the slug or title in WordPress does not count as an outside change.

Section library

The library holds sections you want to reuse across pages: a proven pricing table, a testimonial band, a CTA that converts.

Save a section

Click Save to library on any generated section card, in the editor or on New page. Give it a name and check the prompt. The prompt is prefilled with the section’s original prompt plus every refinement applied since; trim it to however you want the section described when you reuse it. The section’s layout is saved with it, and so is any copy you edited by hand.

Reuse a section

• On New page, Start from library inserts a saved section into the plan.
• In the editor, Insert below → From library adds one under the current section.

An inserted section arrives exactly as it was saved and is styled by the current page’s design system. Use Refine or Regenerate on its card to adapt the content to the new page.

Manage the library

The Section library screen lists everything saved with its prompt. Delete removes an entry; pages that already used it are not affected.

Images and forms

Where images come from

Set the source in Settings: none, stock photos from Openverse, or AI-generated images from Google Gemini. Stock and AI images are saved into your Media Library with the section’s description as alt text, so they survive plugin updates and can be reused anywhere in WordPress.

Placeholders

With images off, generated sections still reserve the space with a dashed placeholder, so the layout is right and you can fill it later by double-clicking it in the preview once a source is enabled, or by editing the page in WordPress.

Imagery style

Each design system carries one art-direction sentence that is applied to every image it sources or generates. Stock searches are biased towards it; AI generation receives it verbatim. Edit it under Design systems → Edit tokens.

Forms

When a section calls for a form, PageShape places a form slot instead of inventing form fields. If WPForms, Gravity Forms, Contact Form 7 or Fluent Forms is installed, the slot names the plugin and shows an example shortcode. To connect a real form, create it in your form plugin and put its shortcode in the slot; the page template runs shortcodes, so the form renders on the live page. Refine and regenerate keep the slot exactly where it is.

Publishing and your theme

Draft first

Every page PageShape creates starts as a WordPress Draft. Publish it, schedule it or set it private from the WordPress editor or the Pages list as you would any page. The PageShape Pages screen shows the current status.

The page template

PageShape pages use the SWAI PageShape Pro page template. It keeps your theme’s header and footer and renders the page content exactly as the preview showed it, without the theme’s automatic paragraph formatting. You can switch a page to another template in WordPress, but the layout may then pick up theme styling that the preview did not show.

Styling

The design system’s CSS is generated from its tokens and printed on PageShape pages only. It is scoped to the page content and written to win over theme styles, which is what keeps every page on brand regardless of the theme.

Editing in WordPress

You can open a PageShape page in the WordPress editor. PageShape notices the change the next time you open the page and offers to adopt it. See Editing a page.

Deactivating or uninstalling

• Deactivate: your pages and their content remain. The design-system CSS is no longer printed, so pages fall back to your theme’s styling until you reactivate.
• Uninstall: removes the plugin’s settings and its page metadata, and resets the page template on PageShape pages so they render with your theme’s default template. Page content and Media Library images are kept.

Troubleshooting

FAQ

Does PageShape rewrite my copy?

No. Text you provide, whether as Markdown or as edits in the preview, is used verbatim. The AI designs the layout around it.

Does it work with my theme?

Yes. PageShape pages use your theme’s header and footer and add their own scoped styling for the content. You do not need a page builder or a special theme.

Can I have more than one design system?

Yes. Create as many as you need, mark one as the default for new pages, and switch any page between them from the editor.

Can other people on my site use it?

Anyone who can edit pages can use PageShape. Settings and design-system editing are limited to administrators.

What happens to pages if I stop using PageShape?

The pages stay in WordPress as normal pages with their content intact. See Publishing and your theme for what changes in styling.

Where do I get help?

This Help is also published on the SWAI website, and each PageShape screen has a Help link that opens the matching section.