SiteAgent Elementor Studio

SiteAgent Elementor Studio — Claude Code & OpenClaw Skill

Build WordPress sites with AI — design with Claude Code, then have Claude build it directly inside your Elementor Free or Pro site. No more rebuilding mockups by hand.

A Claude Code & OpenClaw skill that teaches Claude to build directly inside Elementor. Not just a mockup tool — Claude places real sections, widgets, colors, and typography into your live Elementor site, with Pro/free auto-detection and a widget-vs-HTML discipline.

The short version: This kit teaches Claude (Anthropic's AI) how to talk to your WordPress site through the Elementor MCP server. You design pages in Claude Code, then Claude places sections, widgets, colors, and typography directly into Elementor for you. Works on local sites (Local-by-Flywheel) and live hosts.

Naming note: the GitHub repo, the installed/invoked skill name (siteagent-elementor-studio), and the ClawHub listing (display name "SiteAgent Elementor Studio") are all aligned. Same kit, same name everywhere.

---

Part of the Aura Design Engine

These are the free skills behind Aura — one AI web-agency lifecycle you can run standalone or orchestrate across a whole client fleet from a single dashboard.

Stage	Skill	Role
🎨 Build	siteagent-elementor-studio ← you are here	Design & build sites inside Elementor
🔎 Audit + Content	wordpress-api-pro	REST content ops, SEO & site audits
🖥 Host	cloudways-mcp · hostinger-mcp	Provision & operate the infrastructure

→ Orchestrate all of it across your client fleet with Aura — governed agent ops with approvals and a full audit trail on top of these skills.

What's inside

siteagent-elementor-studio/
├── INSTALL.sh          ← Installer for Mac & Linux
├── INSTALL.bat         ← Installer for Windows (double-click)
├── INSTALL.ps1         ← Windows installer (PowerShell)
├── files/
│   ├── SKILL.md                  ← The cheat sheet Claude reads
│   └── setup-elementor-mcp.sh    ← The robot that connects Claude to WordPress
├── docs/
│   ├── QUICKSTART.md       ← Short "how to use this" guide
│   ├── WHATS_INSTALLED.md  ← One-page map of every file/plugin the kit touches
│   └── LESSONS.md          ← Deep-dive on why it works the way it does
├── LICENSE             ← MIT — free for any use
└── README.md           ← You are here

---

How it works (in 30 seconds)

There are two pieces:

1. The skill (SKILL.md) — a guide Claude reads every time you ask it to work on Elementor. It encodes every quirk and gotcha learned the hard way (correct widget parameter names, when to use HTML vs native widgets, the auth gotchas, etc.).

2. The setup script (setup-elementor-mcp.sh) — a wizard that connects Claude to one specific WordPress site. It installs the MCP plugins, wires up authentication, and writes a .mcp.json file in your project directory.

After running both, you can tell Claude "build me a hero section with this design" and watch it appear on your WordPress site in real time.

---

Prerequisites

The kit touches five layers of stuff. Some you install yourself, some the wizard handles for you. Here's the full picture so nothing surprises you mid-setup.

Layer 1 — On your computer (install once, ever)

• ☐ Claude Code — the AI assistant the kit plugs into
• ☐ Local by Flywheel (only if you want offline WordPress — skip if you have a live site)
• ☐ Git Bash (Windows only — gives you bash, curl, python, zip that the setup script needs. Mac and Linux users already have these.)

Layer 2 — Inside Local (or your hosting panel)

• ☐ A WordPress site. Create a fresh one in Local, or have admin access to a live host.
• ☐ An Application Password. WP Admin → Users → Profile → scroll to Application Passwords → click Add. Copy the password — that's the credential the wizard uses. (WordPress docs)