My New Favourite Way to Vibe Code WordPress ![rw-book-cover](https://readwise-assets.s3.amazonaws.com/static/images/article3.5c705a01b476.png) 🔗 **Source:** [My New Favourite Way to Vibe Code WordPress](https://www.youtube.com/watch?v=5B-5Z3A8YA8) > [!note]+ Document Notes > tags: [vibe-coding, wordpress-studio, ai-workflow, developer-tools, slash-commands] > author: Ryan Welcher > source: WordPress.com > reference: https://www.youtube.com/watch?v=5B-5Z3A8YA8 > date created: {{date:YYYY-MM-DD}} {{time:HH:mm}} > > # 🏷️ Title: My New Favourite Way to Vibe Code WordPress > <!-- deep-read:sections start --> ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - [WordPress Studio (desktop app)](https://developer.wordpress.com/studio/) - [WordPress.com](https://wordpress.com) - [Claude Code](https://www.anthropic.com/claude-code) ## 📝 Summary - Ryan Welcher, a developer advocate at Automattic, demos Studio Code: an AI agent inside the WordPress Studio desktop app that builds and audits WordPress sites from natural-language prompts. He frames it as "Claude Code, but for WordPress." - It matters because it pulls AI-assisted "vibe coding" out of the terminal and into a local WordPress environment, lowering the barrier for site builders and freelancers. - Key stakeholders: Automattic / WordPress.com (vendor), developer advocates, freelance WordPress builders, and their clients. - Risks and tradeoffs: it's a vendor demo of beta software. The strengths shown (annotate-and-edit, shareable previews, audits) are demo-friendly; whether vibe-coded output holds up as a maintainable product is untested here. - Bottom line: a slick, low-friction workflow for editing and auditing sites by talking and pointing — best understood as a promising demo, not a proven production pipeline. ## 📖 Main Content - The core pitch is a metaphor: an always-on senior WordPress developer that "never once sends you a bill," now living inside Studio instead of only the terminal. - The standout feature is slash commands. Welcher highlights the ones he reaches for rather than cataloging all of them. - **Annotate** opens the site in a browser; you click elements, describe changes in plain language ("make it bigger, change the copy"), and stack notes across the whole site in one pass. Picking Mode stays on so you point at one thing after another. When done, Studio Code returns a numbered list, you confirm, and it makes every edit. He pitches this for live client calls — the client points while screen-sharing, and edits land after the call. - **Preview** pushes a shareable link to WordPress.com — a real site, not a static mockup. Everything runs locally; nothing touches the live site until you sync, so you can build and break freely. - Three audit commands: **Need for Speed** (performance audit), **Rank Me Up** (on-page SEO audit covering titles, meta descriptions, headings, alt text, Open Graph, Twitter cards, structured data, sitemap), and **Taxonomist** (reads every post and suggests a cleaner category structure). - Terms: "vibe coding" = building software by describing intent to an AI rather than writing code directly. "Slash commands" = preset prompt shortcuts. "Studio" = WordPress.com's local-development desktop app. - Contested / uncertain: this is a vendor video for beta software. "Free to use while it's still in beta" signals future paid pricing. No evidence is shown for audit accuracy or edit quality on complex sites — the connection to the broader vibe-coding critique is that you can vibe-code a demo far more easily than a durable product. ### 🗒️ Notes #### ⏱️ [00:00:00](https://www.youtube.com/watch?v=5B-5Z3A8YA8?t=0) The pitch and the metaphor - Opens with "a senior WordPress developer on call 24/7 builds whatever you ask and never once sends you a bill." - Names the tool Studio Code: "Think Claude Code, but for WordPress." - Key shift: it moved from terminal-only to inside WordPress Studio, so you choose how and where to work. #### ⏱️ [00:00:30](https://www.youtube.com/watch?v=5B-5Z3A8YA8?t=30) Why slash commands - You can talk to it like any AI, but the slash commands are the part he likes. - He'll show only the ones he always reaches for, not the full list. - Speaker identifies himself: "I'm Ryan Welcher, a developer advocate at Automatic" (Automattic). #### ⏱️ [00:01:00](https://www.youtube.com/watch?v=5B-5Z3A8YA8?t=60) Annotate - Run it and Studio Code opens the site in a browser; you walk through "like a normal person." - Click an element, describe the change, save; Picking Mode stays on so you stack notes in one pass. - "No screenshots, no marked up images going back and forth, just point, describe, and done." - Live-call use case: client points while you share screen; edits get bundled and applied after the call. #### ⏱️ [00:02:00](https://www.youtube.com/watch?v=5B-5Z3A8YA8?t=120) Preview - Pushes a shareable preview to WordPress.com — "a real link to a real site, not a static markup." - Runs locally; "nothing touches their live site until you decide to sync it." - Lets you build, break, and redo without the client seeing a half-finished site. #### ⏱️ [00:02:30](https://www.youtube.com/watch?v=5B-5Z3A8YA8?t=150) Audit commands - Need for Speed: performance audit; good to run before handing a site off. - Rank Me Up: full on-page SEO audit (titles, meta, headings, alt text, Open Graph, Twitter cards, structured data, sitemap) with a report on what's wrong and what to do. - Taxonomist: reads every post and suggests a better category structure if categories "grown a little bit into a swamp." #### ⏱️ [00:03:00](https://www.youtube.com/watch?v=5B-5Z3A8YA8?t=180) Beta and call to action - "This is all in beta right now, which means it's free to use while it's still in beta." - Closer: grab WordPress Studio, point it at a site, start with annotate, and comment your favorite command. ## 📚 References - [WordPress Studio](https://developer.wordpress.com/studio/) - [WordPress.com](https://wordpress.com) - [Claude Code](https://www.anthropic.com/claude-code) - [Automattic](https://automattic.com) ## 🗣️ Paraphrase - Studio Code is an AI agent that builds WordPress for you on request, now embedded in the Studio desktop app rather than confined to the terminal. You can prompt it conversationally, but the slash commands are the real draw. - Annotate lets you walk a live site, point at elements, and leave plain-language change notes in one continuous pass; Studio Code then applies the whole batch after you confirm. Preview ships a real shareable link from a local copy that never touches production until you sync. Need for Speed, Rank Me Up, and Taxonomist audit performance, SEO, and category structure. It's free during beta. ## 📰 Newsletter - New from Automattic: Studio Code brings AI "vibe coding" into the WordPress Studio desktop app — described as "Claude Code, but for WordPress." Developer advocate Ryan Welcher walks through his go-to slash commands. - The headline trick is Annotate: open your site, click around, describe edits in plain English, and let it apply the whole stack at once — handy on a live client call. Preview pushes a real shareable WordPress.com link from your local build, so clients never see a half-finished site. - Auditors round it out: Need for Speed (performance), Rank Me Up (on-page SEO), and Taxonomist (category cleanup). It's free while in beta, so it's a low-cost time to kick the tires — just remember a polished demo isn't the same as a shipped product. - Links: [WordPress Studio](https://developer.wordpress.com/studio/) · [WordPress.com](https://wordpress.com) ## ✅ Action Items #### DevRel - Developer advocacy: produce a counterpart demo that stress-tests Studio Code on a real, messy site, not a clean one, and publish measurable before/after results. - Education: write a short workshop on "where vibe coding helps vs. where it bites" using these slash commands as the example set. - Developer experience: document each slash command (annotate, preview, need for speed, rank me up, taxonomist) with reproducible quickstarts. - Developer marketing: note the "free while in beta" framing and track when pricing lands. - Community management: open a thread asking which commands people actually reach for (mirrors the video's own CTA). - Internal/external/cross-project: align with the Studio team on audit-accuracy expectations before recommending to clients. #### OSPO - Policy & Governance: N/A — no governance or contribution-policy content in a product demo. - License Compliance: N/A — no licensing claims made. - Security Management: N/A — no security topics covered. - Software Inventory: N/A — no SBOM or inventory content. - Developer Support: clarify what beta support exists before recommending Studio Code for client work. - Community Engagement: N/A — no upstream funding or operator content. - Strategic Alignment: N/A — out of scope for a 3-minute demo. #### Community - Maintainers: N/A — not a maintainer-facing topic. - Contributors: N/A — no contribution path discussed. - Sponsors: N/A. - Ecosystem: N/A. #### WordPress - Core: N/A — Studio Code is a WordPress.com/Studio product, not Core. - Core Performance: cross-check Need for Speed's audit method against Core performance metrics for consistency. - Core AI: track how Studio Code's responsible-AI guardrails compare to emerging Core AI guidance. - **Core Program Team:** N/A. - Mobile: N/A. - Playground: explore whether annotate-style editing could be demoed in Playground for safe trial. - Community: N/A. - Training: build a lesson on AI-assisted site editing using these commands. - Marketing: N/A. - Support: anticipate support questions about local-vs-live sync confusion. - Design: N/A. - Documentation: file a docs request for the full slash-command reference (the video shows only a subset). - Photos: N/A. - TV: caption this video; vendor shorts often ship without quality captions. - Polyglots: N/A. - Accessibility: audit the annotate browser flow for keyboard and screen-reader support. - Meta: N/A. - CLI: note that Studio Code originated in the terminal; compare its command UX to wp-cli conventions. - Hosting: N/A. - Tide: N/A. - Openverse: N/A. - Themes: N/A. - Plugins: N/A. #### The WPCC - Programs: N/A. - Projects: N/A. - Funding experiments: N/A. ### FAIR - Technical independence: N/A — Studio Code is tied to WordPress.com sync; note the vendor-lock dimension if relevant later. - Policies and covenants: N/A. - Productized governance artifacts: N/A. ## 🧪 Hypotheses - Annotate reduces client-revision turnaround time versus the screenshot-markup loop it replaces. - Vibe-coded edits produce acceptable results on simple sites but degrade in accuracy as site complexity rises. - The "free while in beta" framing precedes a paid tier within a defined window after general availability. - Rank Me Up's SEO audit overlaps substantially with existing SEO plugins rather than surfacing novel findings. - Users adopt 2-3 favorite slash commands and rarely use the rest, matching the presenter's own "ones they always reach for" pattern. ### 📊 Methodology - Time-on-task study comparing annotate vs. screenshot-markup for a fixed set of client edits. - Controlled build test across low/medium/high complexity sites, scoring edit accuracy and rework rate. - Longitudinal pricing watch from beta announcement to first paid tier. - Audit-overlap comparison: run Rank Me Up and an established SEO plugin on the same sites, diff the findings. - Usage telemetry (or survey) on which slash commands users invoke and how often. ### ❓ Questions - How does Studio Code handle edits it can't confidently make — does it flag uncertainty or guess? - What model powers it, and does the "Claude Code" comparison mean Claude under the hood? - How reliable are the audits on real client sites versus the demo site shown? - What happens to local changes if a sync conflicts with live-site edits made elsewhere? - Is annotate's browser flow keyboard- and screen-reader-accessible? ### 🔮 Future Research - Independent benchmarking of audit accuracy (performance, SEO, taxonomy) against established tools. - Maintainability study of vibe-coded WordPress output over months, not minutes. - Accessibility evaluation of the point-and-describe editing interface. - Comparison of in-Studio vibe coding against terminal-based Claude Code workflows for the same tasks. ### 💡 Implications - Practice: lowers the floor for non-developers to edit and audit WordPress sites; raises the importance of reviewing AI output before client handoff. - Policy: vendor "free in beta" offers shape adoption; teams should plan for eventual cost. - Security: local-first with deliberate sync reduces live-site risk during iteration, but audit blind spots could give false confidence. - Education: strengthens the case for teaching "review the vibe-coded result" as a core skill. - Funding models: beta-to-paid trajectory is the implicit business model. ### 🧠 Learning Styles Assessment - Reading level estimate: Flesch-Kincaid Grade ~6-7 — short, conversational sentences, contractions, minimal jargon. #### 👀 Visual learners - Present: the video itself demonstrates each command on screen (screen-share walkthrough). - Improve: add labeled before/after stills and a diagram of the local-build → preview → sync flow. #### 🔊 Aural learners - Present: narrated video with the presenter's voiceover throughout. - Improve: offer a 2-3 minute audio-only summary and accurate captions. #### 🗣️ Verbal learners - Present: plain-language analogies ("senior developer on call 24/7," "grown into a swamp"). - Improve: add a glossary defining vibe coding, slash commands, and sync. #### 🧩 Kinesthetic learners - Present: the closing CTA tells you to grab Studio, point it at a site, and run annotate. - Improve: a step-by-step checklist or sandbox task for each command. #### 🧠 Logical learners - Present: commands grouped by purpose (edit vs. preview vs. audit). - Improve: a decision table mapping task → command, plus expected outputs. #### 🧑‍🤝‍🧑 Social learners - Present: the comment-prompt CTA invites discussion of favorite commands. - Improve: a community thread or live Q&A walkthrough. #### 🧘‍♀️ Solitary learners - Present: self-paced video you can follow alone. - Improve: a self-check worksheet to try each command and record results. #### 🌿 Naturalistic learners - Present: N/A — no sustainability or environment framing (the "swamp" metaphor is decorative, not ecological). - Improve: tie local-first iteration to reduced wasted live-site churn if a green angle is wanted. ### 📊 Accessibility Assessment #### Screen reader semantics - Present: N/A for the video; the annotate browser flow's semantics aren't shown. - Improve: ensure Picking Mode exposes element roles and names to assistive tech. #### Keyboard navigation - Present: not demonstrated — interaction shown is mouse-based pointing and clicking. - Improve: provide keyboard equivalents for selecting and annotating elements. #### Contrast and readability - Present: N/A — no UI contrast data available from a transcript. - Improve: verify the Studio Code UI meets 4.5:1 text contrast. #### Text resizing and reflow - Present: N/A. - Improve: confirm the annotate overlay reflows at 200% zoom without clipping. #### Media and captions - Present: unknown whether accurate captions ship with the video. - Improve: add a verified transcript and captions; avoid autoplay. #### Forms and interactions - Present: N/A — the numbered confirm-list is described but not shown for label/error quality. - Improve: ensure the confirm step has accessible labels and forgiving correction of mis-captured notes. #### Standards reference - Map gaps to WCAG 2.2 AA: 2.1.1 Keyboard, 1.4.3 Contrast, 1.2.2 Captions, 1.4.10 Reflow. ### 🌍 DEIB Assessment #### Cultural breadth - Present: N/A — no multi-region or multilingual examples; single-presenter US/English demo. - Improve: localized walkthroughs and examples beyond a single market. #### Inclusive language - Present: plain, jargon-light language; no idioms that block comprehension beyond mild metaphor. - Improve: define "vibe coding" inline for newcomers. #### Neurodiversity support - Present: short, consistently structured segments (one command at a time). - Improve: add headings/timestamps and icon+text labels in companion docs. #### Representation - Present: single presenter; no breadth of identities or roles shown. - Improve: feature varied builders and client scenarios in future demos. #### Psychological safety - Present: respectful, low-pressure framing ("kick the tires"). - Improve: set expectations that beta output needs review, to avoid overconfidence. ### ✅ Logical Validity #### Strong reasoning - Analogical (opening): framing Studio Code as "a senior WordPress developer on call 24/7" who "never once sends you a bill" is a clear, memorable analogy for an always-available, no-marginal-cost assistant. Clarify by stating where the analogy breaks (a senior dev reviews their own work; the AI may not). - Causal (preview segment): "nothing touches their live site until you decide to sync it" gives a sound reason why local-first iteration is safe. Strong because the mechanism (local build + deliberate sync) directly supports the claim. - Inductive (command selection): showing "just the ones they always reach for" generalizes from personal repeated use to recommended commands — reasonable but sample-of-one. #### Fallacies - Appeal to authority / vendor framing: the presenter is a developer advocate at the vendor; "these are my favorites" carries promotional weight. Fix: pair with independent benchmarks. - Suppressed evidence: no failure cases or accuracy limits shown for the audits or edits. Fix: include where vibe coding produces wrong output. - Loaded framing: "free to use while it's still in beta" implies a deal while signaling future cost without stating terms. Fix: state the expected pricing model plainly. #### Tone of voice - Enthusiastic, casual, and conversational ("the part I really like," "kick the tires," "grown a little bit into a swamp"). Friendly and confident, aimed at lowering adoption friction. ### 🛡️ DARVO Analysis - Deny: N/A — no accusation is being answered, so no denial or minimization is present. - Attack: N/A — the content attacks no person or critic; the only contrast is against the old screenshot-markup workflow, which is process, not a party. - Reverse victim/offender: N/A — no victim/offender dynamic in a product demo. - Emotional cues / rhetoric: persuasion runs through enthusiasm and convenience framing ("never sends you a bill," "point, describe, and done"), not defensive rhetoric. No DARVO pattern applies. ## 🎯 Conclusion - Bottom line: Studio Code puts AI "vibe coding" inside the WordPress Studio app, with annotate-and-edit, shareable previews, and performance/SEO/taxonomy audits as the highlights — a low-friction, free-during-beta workflow pitched by a vendor advocate. - Practical next steps: install WordPress Studio, point it at a real (ideally messy) site, run annotate and the three audits, and verify the output before any client handoff. Treat it as a strong demo of intent-driven editing, and keep the vibe-coding caveat in mind: shipping a polished demo is easier than shipping a maintainable product. ## 🔄 Refactor Appendix — My New Favourite Way to Vibe Code WordPress > Density: 2–5 Literature atoms (H3), 0–3 Permanent candidates (H4). > Defaults: 3 Literature, 1 Permanent. Resonance filter: if you can't > articulate in one line why a claim matters, drop it. > > Konik claim-header rules: present tense, declarative, ≤10 words when > possible, searchable, unique, mirrors annotation focus if present. > > Atomicity: one declarative sentence per atom. "and"/"also" → split. > > Tag pool: #bmf · #addendum · #xref · #articleseed · #storystem · #share · #aphorisms ### 📚 Literature Atoms (H3) #### [H1] Studio Code brings Claude Code-style AI to WordPress > [!quote] ID:rw_5B5Z3A8YA8_h1 > Think Claude Code, but for WordPress. It used to live only in the terminal, but now it's right inside a WordPress studio. **Context & use**: - Opening framing, ~00:00:10. - Names the vendor's positioning: AI vibe coding moved from terminal-only into the Studio desktop app, lowering the barrier to entry. **Tags**: #xref **Highlight**: [view highlight](readwise://) <!-- atomicity: 1 idea ✓ --> #### [H2] Annotate edits by pointing and describing in one pass > [!quote] ID:rw_5B5Z3A8YA8_h2 > No screenshots, no marked up images going back and forth, just point, describe, and done. **Context & use**: - Annotate segment, ~00:01:50. - Captures the core workflow win: stack plain-language change notes across a site, confirm a numbered list, and let the agent apply every edit — useful even on live client calls. **Tags**: #xref #articleseed **Highlight**: [view highlight](readwise://) <!-- atomicity: 1 idea ✓ --> ### 🧠 Permanent Candidates (H4) #### [P1] A vibe-coded demo is easier to ship than a vibe-coded product **Claim** (one sentence, Courtney's voice): Intent-driven AI tools make impressive demos cheap, but a working demo doesn't prove the output survives as maintainable production software. **Evidence pointer**: [[#H2]] **Scope & conditions**: Holds for AI build tools shown on clean demo sites; breaks where independent benchmarks test accuracy and maintainability on real, complex sites. **Links**: - [[Vibe coding]] — because extends - [[Vendor demo skepticism]] — because applies-in evaluating product launches <!-- atomicity: 1 idea ✓ --> ### ✏️ Fleeting Queue - [F1] Confirm what model powers Studio Code and whether "Claude Code" means Claude under the hood — https://www.youtube.com/watch?v=5B-5Z3A8YA8 #fleeting #inbox - [F2] Watch for the beta-to-paid pricing transition signaled by "free while in beta" #fleeting #inbox ### → Things 3 (max 2 actions) - [ ] Test Studio Code's annotate + audits on a messy real site and record accuracy — context #things <!-- deep-read:sections end --> 📄 **Full text:** [[Full Document Contents/Articles/My New Favourite Way to Vibe Code WordPress.md|My New Favourite Way to Vibe Code WordPress by WordPress.com]] ## Highlights - Okay, picture this, a senior WordPress developer on call 24/7 builds whatever you ask and never once sends you a bill. It's called Studio Code. Think Claude Code, but for WordPress. It used to live only in the terminal, but now it's right inside a WordPress studio. ([View Highlight](https://read.readwise.io/read/01kw2mzder8hc3cnzz4g8rhvz0)) - Note: Studio Code positioned as "Claude Code for WordPress," moved from terminal into the desktop app — lowering the AI-vibe-coding barrier. - Tags: vibe-coding, atom/literature/h1 - When I'm done, Studio Code hands me a numbered list of everything I ask for. I confirm and it goes and makes every single edit. No screenshots, no marked up images going back and forth, just point, describe, and done. Now think about doing this live. ([View Highlight](https://read.readwise.io/read/01kw2mzfqshs47dbe2z0g36d3h)) - Note: The point-describe-done workflow: stack plain-language change requests, confirm a numbered list, the agent applies every edit — even on live client calls. - Tags: atom/literature/h2, ai-workflow ## Links - [[Platform Friction Sets the Real AI Productivity Gain]] — applies-in: point-and-edit lowers generation friction but doesn't establish deployment or maintenance quality. - [[Cheap Generation Raises the Total Maintenance Bill]] — context: a fast first edit still creates code and configuration someone must own afterward.