What WordPress section designer does
Two phases. First, three design versions of the section in one HTML review file. Then, once you pick one, Gutenberg block code with the styling built into the blocks wherever WordPress supports it, plus any leftover CSS appended to your template or stylesheet. The copy is never touched, because it was almost certainly approved by someone.
What you give it
Pasted text or Markdown, a screenshot, or a reference URL, plus any layout instruction such as image left and content right.
What you get back
- Phase 1: three design versions in one HTML review file you open in a browser
- Phase 2: Gutenberg block code for the chosen version, ready to paste into the editor
- Any CSS that blocks cannot express, appended to your template or stylesheet using its existing conventions
- A summary flagging anything odd in the source copy rather than silently fixing it
Use cases
Client-approved copy that must stay exactly as written
Silently improving approved copy creates a version nobody signed off, and it surfaces weeks later when somebody compares the page to the document.
Building from a screenshot
The text is transcribed verbatim, and anything unclear is shown to you rather than guessed.
Matching an existing template
The template or stylesheet is read first so the new CSS follows its class prefix and conventions and never collides with what is there.
Choosing a direction before committing
Three versions in one file means the design decision happens before any block code is written.
How to use WordPress section designer
Install the WordPress toolkit
/plugin install wordpress-toolkit@claude-skills
Paste the content
Paste copy, drop in a screenshot or give a reference URL, and ask for three versions.
Open the review file and pick one
All three versions sit in a single HTML file.
Take the blocks
The chosen version comes back as block code plus the extra CSS to add to your template.
Benefits
The content is never changed
No rewording, no reordering, no dropping or adding words, not even to fix a typo. Problems are flagged in the summary instead.
Verified, not asserted
A script checks that the rendered text equals the source, for every version and for the final blocks.
Real URLs only
Links use the URLs you gave, or are looked up on the live site through the WordPress REST API. Nothing is invented, and assumptions are stated.
Reusable site profile
Save a site profile once and every later section on that site starts from known tokens and conventions instead of a fresh extraction.
Install wp-section-designer
This skill ships in the wordpress-toolkit plugin. Add the marketplace once, then install the plugin in Claude Code.
/plugin marketplace add rodneylungayan/claude-skills
/plugin install wordpress-toolkit@claude-skillsAfter that the skill loads on its own whenever your request matches it. You can also invoke it by name with /wp-section-designer.
- Needs
- Node 18+ and a one-time npm install for the block validator.
- Profile
- Reads
~/.claude/profiles/wp-sites/<site>.md (optional). It asks for the details the first time and offers to save them there, so later runs ask nothing.
Questions about wp-section-designer
- Will it improve my copy while designing?
- No, and that is the non-negotiable rule of the skill. Presentation changes such as bold, colour and CSS case are allowed; the words themselves are untouched, and anything that looks wrong is flagged for you to decide.
- Does it need a page builder?
- No. The output is core Gutenberg block code with styling built into the blocks wherever WordPress supports it, plus scoped CSS for the rest.