Vibecoding with Blockstudio

Andrej Karpathy coined the term "vibe coding" in February 2025 to describe a workflow where you describe what you want to an AI and it writes the code. One year later, the practice has matured into what he now calls "agentic engineering": developers orchestrating AI agents rather than writing code line by line.

Blockstudio was built for this. Its file-based architecture, zero build tooling, and predictable project structure make it one of the best environments for AI-assisted WordPress development.

This guide covers practical patterns for using AI coding agents with Blockstudio, from project setup to full site generation.

Why Blockstudio works well with AI agents

Files, not databases

AI coding agents read and write files. That is their primary interface. Blockstudio keeps everything in the filesystem: a block.json and a template file per block, a page.json per page, a pattern.json per pattern. No database entries to manage, no admin UI to click through, no build step to run.

This matters because filesystems and shell commands represent one of the largest sources of pretraining data for LLMs. Every model has seen millions of examples of reading, writing, and organizing files. When your WordPress development workflow matches that interface, agents can work with minimal instruction.

Predictable structure

Every Blockstudio block follows the same pattern:

my-block/
├── block.json    # Configuration + fields
├── index.php     # Template
└── style.css     # Styles (optional)

This consistency means an agent that has built one block can build a hundred. There are no surprises, no special cases, no hidden configuration. The same pattern applies to pages (page.json + template), patterns (pattern.json + template), and extensions (extend.json).

Full pages as files

Traditional WordPress page building requires the block editor: dragging blocks, configuring settings, saving through the admin. AI agents cannot do any of that. They need files.

Blockstudio's file-based pages solve this completely. A page.json defines the page metadata, and an index.php template defines the block structure using HTML:

pages/about/
├── page.json     # Title, slug, post type, template lock
└── index.php     # Block structure as HTML

<block name="core/cover" key="hero" url="https://example.com/bg.jpg">
  <h1 blockEditingMode="contentOnly">About Us</h1>
  <p blockEditingMode="contentOnly">Our story.</p>
</block>

<div key="team">
  <h2>The Team</h2>
  <block name="my/team-member" />
  <block name="my/team-member" />
</div>

An agent can scaffold an entire WordPress page, complete with core blocks, custom blocks, template locking, and editing controls, all by writing two files. The page syncs to the database automatically when you visit the admin.

This is one of the most powerful features for AI-assisted development. Instead of describing a page layout and manually assembling it in the editor, you describe it to an agent and it writes the template. The result is version-controlled, reproducible, and can be iterated on in seconds.

No build step

There is nothing to compile, bundle, or transpile. An agent creates a file, and it works immediately. SCSS is compiled server-side. ES modules are resolved at runtime. Tailwind CSS is compiled on every frontend request. The feedback loop between "agent writes code" and "code runs in the browser" is as short as it gets.

Why Tailwind CSS is the right choice

Blockstudio supports both regular CSS and Tailwind CSS, but Tailwind has a significant advantage when working with AI agents.

LLMs know Tailwind extremely well

Tailwind CSS is used across tens of thousands of open-source repositories. It powers the interfaces of Claude.ai, Vercel, Shopify, Cursor, and OpenAI's own products. This prevalence in training data means LLMs generate Tailwind classes with high accuracy and rarely hallucinate non-existent utilities.

The class vocabulary is finite and well-defined. An agent cannot invent a CSS property that does not exist, which dramatically reduces styling errors compared to freeform CSS where the agent might generate invalid selectors or misunderstand cascade behavior.

Styles live in the markup

With Tailwind, all styling information is co-located in the HTML template. An agent sees the complete visual description of an element in one place. There is no need to cross-reference separate .css files, understand cascade order, or track specificity conflicts.

This is particularly powerful for Blockstudio blocks where the template is already a single file. The agent can generate a complete, styled component in one pass:

<div useBlockProps class="bg-white rounded-2xl shadow-lg p-8">
  <h2 class="text-2xl font-bold text-gray-900">
    <?php echo $a['title']; ?>
  </h2>
  <p class="mt-4 text-gray-600 leading-relaxed">
    <?php echo $a['description']; ?>
  </p>
</div>

Parallel agents without conflicts

Because Tailwind styles are scoped to each template, multiple agents (or developers) can work on different blocks simultaneously without CSS merge conflicts. There is no shared stylesheet where changes to one component accidentally break another. Each block is self-contained.

This also works well with regular CSS when using Blockstudio's scoped styles (style.scoped.css), but Tailwind eliminates the CSS file entirely, which means one fewer file for the agent to manage per block.

Regular CSS still works

Tailwind is not required. Blockstudio's asset pipeline handles .css and .scss files automatically, including scoped styles that are namespaced to the block. If your project uses a different CSS methodology, agents can work with that too. The advantage of Tailwind is simply that LLMs are better at it due to training data coverage and the co-location of styles with markup.

AI coding agents

The following CLI tools can all work with Blockstudio projects out of the box. They read and write files, run shell commands, and understand project structure from context files.

Terminal agents (CLI)

IDE agents

All of these tools can create and edit files in a Blockstudio project directory. The terminal agents are particularly well-suited because Blockstudio development requires no IDE-specific features: it is purely file-based.

Setting up your project for AI agents

The LLM context file

Blockstudio ships a pre-built context file that contains the complete framework documentation and all JSON schemas in a single file (~48k tokens). This is not a summary or a cheat sheet. It is the full reference: every field type, every template variable, every hook, every configuration option, plus the block.json, page.json, settings, and extension schemas.

Enable it in your blockstudio.json:

{
  "ai": {
    "enableContextGeneration": true
  }
}

The file is now available at your-site.com/blockstudio-llm.txt. Point your AI tool to this URL and it will understand the entire Blockstudio API without any additional instruction. See the AI integration docs for tool-specific setup.

This single file replaces the need to write framework-specific instructions yourself. An agent with access to blockstudio-llm.txt knows how to create blocks, define fields, write templates, configure Tailwind, set up pages, and use every hook Blockstudio provides.

Project-specific context files

Most AI coding agents also read a project-level context file for instructions specific to your codebase. The convention varies by tool:

Since blockstudio-llm.txt already covers the framework, your project context file only needs to describe what is unique to your project: directory layout, naming conventions, commands, and boundaries.

# My WordPress Site

Built with Blockstudio 7. File-based blocks with Tailwind CSS.

Fetch https://example.com/blockstudio-llm.txt for full framework docs.

## Structure

- `blockstudio/` - Custom blocks (block.json + index.php)
- `pages/` - File-based pages (page.json + index.php)
- `patterns/` - Block patterns (pattern.json + index.php)
- `blockstudio.json` - Plugin settings

## Conventions

- Use Tailwind utility classes for all styling
- Keep blocks small and focused: one component per block
- Use `$a['fieldId']` to access field values in templates

## Commands

- `wp server` - Start local development server

Developer tools for AI workflows

Blockstudio includes two developer tools designed specifically for AI-assisted development.

Canvas

The canvas is a Figma-like overview of all your Blockstudio pages, rendered as live iframe artboards in a single view. Pan with your trackpad, zoom with pinch or Ctrl+scroll.

This is useful when working with AI agents because it gives you a visual overview of every page without switching tabs or navigating the WordPress admin. When an agent modifies a page template, you can see the result immediately. Enable live mode and the canvas refreshes automatically when files change.

Enable it in blockstudio.json:

{
  "dev": {
    "canvas": {
      "enabled": true,
      "adminBar": false
    }
  }
}

Then navigate to /wp-admin/admin.php?page=blockstudio-canvas. Switch between a pages view (full-width artboards) and a blocks view (grid of all registered blocks with default values).

Element Grabber

The element grabber solves a common problem in AI workflows: telling the agent which file renders a specific element on the page.

Append ?blockstudio-devtools to any frontend URL, then hold Cmd+C (Mac) or Ctrl+C (Windows) for 100ms. A crosshair selector activates and highlights Blockstudio blocks as you hover. Click an element to copy its context to the clipboard:

@<div>

<div class="my-block">
  Hello world
</div>
  in theme-name/blockstudio/blocks/my-block/index.php

Paste this into your AI coding tool and the agent immediately knows the file path, the HTML structure, and the element you are pointing at. No more manually looking up template file paths.

Enable it in blockstudio.json:

{
  "dev": {
    "grab": {
      "enabled": true
    }
  }
}

Practical patterns

Building a single block

The simplest workflow: describe what you want and let the agent create it.

Prompt:

Create a testimonial block with fields for quote (textarea), author name (text), author role (text), and author photo (files). Use Tailwind for styling. The quote should be in a large italic font with a decorative quotation mark.

The agent will create:

blockstudio/testimonial/
├── block.json
└── index.php

Building a full page

Blockstudio's file-based pages let an agent scaffold an entire WordPress page as a template. This is where the real leverage is: instead of building blocks one at a time, the agent creates the complete page structure with all its blocks in one pass.

Prompt:

Create an "About" page with a hero section, team grid, and contact form placeholder. Use existing blocks where possible, write new ones where needed. Pin it to post ID 2. Lock the template but make headings and paragraphs content-editable.

The agent creates:

pages/about/
├── page.json     # postId: 2, templateLock: "all"
└── index.php     # Full block structure with core + custom blocks

Plus any custom blocks it references (e.g., blockstudio/team-member/). The page syncs to WordPress automatically, complete with template locking and editing controls. The entire page is version-controlled and reproducible.

Building a full site

This is where Blockstudio's architecture really shines. A single prompt can generate an entire site because every artifact is a file:

Prompt:

Build a portfolio website with these pages: Home, Work, About, Contact. Create custom blocks for: hero section, project grid, project card, team member, contact info, and footer. Use a dark theme with Tailwind. Configure Tailwind in blockstudio.json with a custom color palette.

The agent creates the block directories, page templates, a blockstudio.json with Tailwind config, and optionally patterns for reusable sections. Everything is committed to git as a single changeset.

Parallel agent workflows

Some tools (Codex desktop app, GitHub Copilot CLI, Kilo Code) support running multiple agents in parallel. Blockstudio's file-per-block architecture makes this safe:

• Agent 1: builds the hero block and home page
• Agent 2: builds the project card block and work page
• Agent 3: builds the contact form block and contact page

Because each block is its own directory and Tailwind styles are co-located in templates, these agents will not conflict with each other. The only shared file is blockstudio.json, which typically only needs to be set up once at the start.

Tips for better results

1. Reference the LLM context file. Agents produce significantly better Blockstudio code when they have the full framework documentation. Always point them to blockstudio-llm.txt.

2. Be specific about field types. Instead of "add an image field," say "add a files field with allowedTypes: ['image'] and returnFormat: 'object'." The more precise your field definitions, the fewer iterations needed.

3. Start with one block, then scale. Let the agent build one block correctly, review its patterns, and then ask it to build the rest following the same conventions. This establishes a reference that improves subsequent output.

4. Review the output. Vibe coding does not mean blindly accepting code. Check that field types match your intent, templates render correctly, and Tailwind classes produce the right visual result. AI-generated code should be reviewed before shipping.

5. Use block.json schemas. Blockstudio provides a JSON Schema at https://blockstudio.dev/schema/block. Adding "$schema" to your block.json gives agents validation feedback and prevents malformed configurations.

6. Keep blocks small and focused. One block per visual component. This makes each block easier for the agent to reason about and keeps templates short enough to fit in a single context window pass.