{
  "markdown": "# Build with WordPress Claude Code Plugin\n\nDescribe a website in plain English, get a complete WordPress block theme deployed to your local Studio site — ready to push to WordPress.com or Pressable.\n\n## What this does\n\nBuilding WordPress themes from scratch is complex — theme.json, block markup, template parts, design systems, responsive layouts. This plugin handles all of it. You describe your site (e.g., \"A landing page for my pottery studio called Clay & Fire\"), pick from 3 generated design directions, and get a fully deployed theme on a local WordPress Studio site.\n\nThere are two workflows:\n\n- **`/quick-build`** — Fast, single-session flow. Describe your site, review the spec, pick a design, and get a live theme in minutes.\n- **`/design-site`** — Multi-phase professional pipeline with style tile iteration, page layout reviews, full-page mockups, and a live design gallery that auto-refreshes as artifacts are generated.\n\n## Prerequisites\n\n1. **Claude Code** — [Install Claude Code](https://docs.anthropic.com/en/docs/claude-code/overview) if you haven't already.\n2. **WordPress Studio** — A local WordPress environment from Automattic. [Download Studio](https://developer.wordpress.com/studio/), then enable the CLI so the `studio` command is available in your terminal ([CLI docs](https://developer.wordpress.com/docs/developer-tools/studio/cli/)).\n3. **Node.js 18+** — Needed by the bundled block markup validator that runs after theme generation.\n\n## Installation\n\n1. Clone this repo (or note the path if you already have it):\n   ```bash\n   git clone https://github.com/Automattic/claude-code-wordpress.com.git\n   ```\n\n2. Start Claude from your Studio sites folder with the plugin flag:\n   ```bash\n   cd ~/Studio\n   claude --plugin-dir /path/to/claude-code-wordpress.com\n   ```\n\nClaude must be started from the folder where your Studio sites live (or a subdirectory of it). The plugin checks this on first run and will prompt you if you're in the wrong directory.\n\n## Getting started\n\nHere's what a typical `/wordpress.com:quick-build` session looks like:\n\n1. **Run the command** — Type your site description after the command:\n   ```\n   /wordpress.com:quick-build A landing page for my pottery studio called Clay & Fire\n   ```\n\n2. **Share design assets (optional)** — Claude asks if you have logos, photos, or brand guidelines. Share a folder path or skip.\n\n3. **Review the site spec** — Claude extracts the site name, type, audience, tone, brand keywords, and key sections, then presents them for confirmation. Adjust anything before moving on.\n\n4. **Studio site setup** — Claude creates a new Studio site (or offers to reuse an existing one).\n\n5. **Pick a design** — 3 HTML design previews (header + hero) open in your browser. Each represents a distinct aesthetic direction. Pick 1, 2, or 3 — optionally with tweaks like \"2, but darker\" or \"3 with the typography from 1.\"\n\n6. **Theme is built and deployed** — Claude generates the full theme (theme.json, templates, template parts, styles, animations), validates block markup, activates the theme, and returns your local site URL.\n\n7. **Next steps** — From here you can iterate on the design, create a shareable preview link, add pages, or regenerate design options.\n\n## Commands\n\n| Command | Description |\n|---|---|\n| `/wordpress.com:quick-build <description>` | Main workflow — describe your site, pick a design, get a deployed theme |\n| `/wordpress.com:preview-designs <description>` | Generate or regenerate 3 design direction previews without a full build |\n| `/wordpress.com:design-site <description>` | Advanced multi-phase workflow — style tiles, page layouts, full mockups, then theme build |\n\n## Advanced: `/design-site`\n\nThe `/wordpress.com:design-site` command adds several phases before the final theme build:\n\n- **Style tiles** — 3 palette/typography/component directions rendered as interactive HTML tiles. Pick one (or mix elements) to lock your design tokens.\n- **Page layouts** — 3 full-page layout compositions built from your locked tokens. Pick the layout approach that works best.\n- **Full mockups** — Every page (homepage, about, pricing, etc.) rendered as a complete HTML document for review before any WordPress code is generated.\n- **Live design gallery** — A gallery page at `/?design-gallery` on your Studio site that auto-refreshes as artifacts are generated, so you can review everything in one place.\n- **Redesigns** — Pass a URL and the plugin scrapes existing content to use as a foundation for the new design.\n\nFor contributors: the implementation details live in `skills/` (skill definitions) and `references/` (knowledge docs loaded by subagents at runtime).\n\n## Telemetry\n\n**Opt out:** Set this environment variable before running Claude:\n\n```bash\nexport WP_SITE_CREATOR_NO_TELEMETRY=1\n```\n\nThis plugin collects anonymous, count-only usage statistics to help understand how commands are used. No user identity, machine fingerprints, site names, file paths, or personal data are collected — just simple counters.\n\n**What's tracked:**\n\n| Group | Stat | When |\n|---|---|---|\n| `agent-site-builder` | `started` | `/wordpress.com:quick-build` invoked |\n| `agent-site-builder` | `theme-activated` | Theme deployed and activated |\n\n## Troubleshooting\n\n- **`studio: command not found`** — Enable the CLI in WordPress Studio's settings, then restart your terminal. [CLI docs](https://developer.wordpress.com/docs/developer-tools/studio/cli/).\n- **\"Wrong directory\" error** — Start Claude from `~/Studio` (or wherever your Studio sites live). The plugin needs to be running from the Studio sites folder.\n- **Design previews are blank** — This usually means a path issue with image sources. Re-run `/wordpress.com:preview-designs` to regenerate.\n- **Node.js not found during block fixing** — Install [Node.js 18+](https://nodejs.org/). The block markup validator requires it.\n- **Theme activates but looks wrong** — Re-run `/wordpress.com:quick-build` to regenerate the theme, or iterate on specific elements by asking Claude to adjust colors, typography, or layout.\n",
  "bytes": 6066,
  "sha": "291d0f0025b58bf93e70b8abef70b0d74d327598d8bd137e601507d159743b70",
  "repo_slug": "automattic/claude-code-wordpress.com",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/plg_automattic_claude_code_wordpress_com_bui_8e44c881/readme"
}