Skip to content

Category: Claude

Build Your First WordPress Plugin with The Power of AI (Even if You Can’t Code!)

Let me share a story that might resonate with many of you.

Picture this: You’re a freelance web developer building WordPress sites for clients.

One day, a client comes to you wanting to add custom product options to their WooCommerce store — like allowing customers to add gift wrapping, personalized messages, or special requests — so that these add-ons can help the clients make more money per sale.

You spend hours searching through countless plugins, comparing features, reading reviews, and even testing some out.

But nothing quite fits the bill. Some plugins come close but are either too expensive, poorly maintained, or filled with bloated features you don’t need.

After all that time invested, you’re back to square one, still without a solution that matches your client’s requirements.

This scenario plays out frequently in web development. Clients request unique features that either require expensive premium plugins or simply don’t exist in the WordPress ecosystem.

Even when you do find a plugin, it might not work exactly as needed, or worse – it might conflict with other plugins on the site. You’re stuck between customizing an existing plugin (which requires coding knowledge) or telling your client it can’t be done.

But what if I told you there’s a better way?

What if you could use AI to help you build custom plugins that do exactly what your clients need, without having to be an expert developer?

This is where the power of AI comes in – It can bridge the gap between your clients’ needs and your technical capabilities.

However, most people are using AI the wrong way — and it usually leads to disappointment.

The First Mistake Everyone Makes With AI

This is what most people do — They open ChatGPT and type a simple command: ‘build me a product addons plugin for WooCommerce.’

On the surface, it looks like the job is done. But under the hood? That’s where the cracks start to form.

The code you get back will likely be incomplete or problematic because the prompt is too vague

Many people assume AI is like a magic wand that can instantly create perfect, working plugins

Even with modern AI coding assistants like Cursor:

  • You might get impressive-looking file generation
  • Multiple PHP files appear in seconds
  • The code looks clean and organized

However, the reality is often disappointing:

  • The generated code has hidden bugs and edge cases
  • Critical WooCommerce hooks are missing
  • Security measures are incomplete
  • The plugin breaks when tested with real data

We can’t just give one-line prompts and expect AI to build production-ready plugins

So… What’s the Right Way to Use AI for WordPress Plugins?

Instead of relying on one-line prompts, let’s look at how to build plugins properly.

A better approach involves:

  • Start by clearly defining what you need
  • Break big problems into smaller pieces
  • Plan before you code

With a proper workflow, you’re not guessing — you’re engineering a plugin that works.

This mirrors traditional software development:

  • Requirements gathering
  • Design and planning
  • Implementation in stages
  • Testing and verification

There’s a reason the pros don’t just wing it, or in a more trending term, “vibe it”

The best software in the world? It’s built on systems — not guesswork. That’s how it scales. That’s how it lasts. It’s why companies invest in process, testing, and repeatability workflows.

Like Tony Robbins says: “Success leaves clues.” If you want to build like the best, follow what the best do.

This is why we need a proper workflow to build plugins with AI. Rather than hoping for an instant solution, we need a systematic approach. Let me show you how.

Here’s How I Actually Use AI to Build Plugins

Disclaimer: I didn’t develop this workflow myself. Credit goes to McKay Wrigley for creating these templates, which I refine it to better suit for WordPress plugin development. If you’re interested in learning his original templates, he covers them in a 4-hour YouTube video.

Ok, let me give you a brief walkthrough of how does the workflow works first before we jump into the details.

First, we brainstorm the plugin requirements, then establish project rules. Based on these, we develop specifications using user stories. Finally, we use all these results to create a step-by-step implementation plan for building the plugin.

With our implementation plan ready, we execute each step one at a time.

This workflow closely mirrors traditional manual development. The main difference is that AI handles the heavy lifting instead of us doing it ourselves.

Let’s dive into the details of each step:

Step 1: Brainstorm for plugin requirements

This is the MOST important step of all.

Many people have trouble building WordPress plugins with AI because they just write one line and hope AI figures out what to include. This usually gives them incomplete plugins or the wrong thing entirely.

When working with AI, you need to be very clear about what you want.

That’s why we start with brainstorming—it helps us know exactly what to build.

You might be thinking, “But Nathan, I don’t know how to write plugin requirements!”

Don’t worry—we’ll use AI, specifically Claude 3.7 Sonnet, to help us brainstorm the requirements.

Here’s the prompt I use for brainstorming plugin requirements:

I have a WordPress plugin idea I'd like to develop. Here's my initial concept:

---

{{_IDEA_}}

---

I'm looking to collaborate with you to turn this into a detailed plugin request. Let's iterate together until we have a complete request that I find to be complete.

After each of our exchanges, please return the current state of the request in this format:

```request
# Plugin Name
## Plugin Description
[Description]

## Target Audience
[Target users]

## Desired Features
### [Feature Category]
- [ ] [Requirement]
    - [ ] [Sub-requirement]

## Design Requests
- [ ] [Design requirement]
    - [ ] [Design detail]

## Other Notes
- [Additional considerations]
```

Please:
1. Ask me questions about any areas that need more detail
2. Suggest features or considerations I might have missed
3. Help me organize requirements logically
4. Show me the current state of the spec after each exchange
5. Flag any potential technical challenges or important decisions

We'll continue iterating and refining the request until I indicate it's complete and ready.

(Replace {{IDEA}} with your actual plugin idea.)

Your idea can be a one-liner or a full list of features you want to include in the plugin.

The goal is to give Claude something to work with as a starting point.

During the brainstorming process, Claude will ask questions to clarify what you want.

We’ll go through several iterations until we’re satisfied with the requirements.

IMPORTANT: While Claude 3.7 can be very detailed (which is great for brainstorming), be careful not to simply agree with everything it suggests. Saying “yes” to everything will make your requirements too complicated, causing problems later during development.

Take time to think through what you should and shouldn’t include.

If you’re just starting out, you might not know which features to choose—and that’s perfectly fine. You’ll develop better judgment with experience, so don’t worry too much now.

Once we’re satisfied with the requirements, we can move on to the next step.

Step 2: Establish Project Rules

Project rules tell AI exactly how to build your plugin.

We’ll specify things like naming style, folder layout, and which WordPress or WooCommerce hooks to use. This helps prevent mistakes before they happen.

Think of these rules like guardrails. When we say things like “no Composer autoloaders” or “only WooCommerce 9.x functions,” AI stays focused on exactly what we need.

While you can find project rules online from other developers, I prefer using OpenAI deep research to create my own rules.

Here’s the prompt I use to ask OpenAI deep research to research for project rules for WordPress plugin:

Help me write a comprehensive, detailed project rules that I can used for Cursor AI. This project rules is building a WordPress plugin.

This project rules should follow the native WordPress plugin development coding standard, and sticking to core WordPress methodologies. This native approach avoids modern PHP features like Composer-based autoloading, namespaces, MVC approach, or advanced package management.

Here are some details about Cursor Project rules:

```
Rules for AI
Guide to customizing AI behavior in Cursor using project-specific and global rules for model responses

Using rules in Cursor you can control the behavior of the underlying model. You can think of it as instructions and/or a system prompt for LLMs.

Inside Cursor, we have two main ways to customize the behavior of the AI to suit your needs:

Project Rules
Rules specific to a project, stored in the .cursor/rules directory. They are automatically included when matching files are referenced.

Global Rules
Rules applied globally to all projects, configured in the Cursor Settings > General > Rules for AI section.

Learn more about how to use them in the following sections.

Project Rules (recommended)

Project rules offer a powerful and flexible system with path specific configurations. Project rules are stored in the .cursor/rules directory and provide granular control over AI behavior in different parts of your project.

Here’s how they work

- Semantic Descriptions: Each rule can include a description of when it should be applied
- File Pattern Matching: Use glob patterns to specify which files/folders the rule applies to
- Automatic Attachment: Rules can be automatically included when matching files are referenced
- Reference files: Use @file in your project rules to include them as context when the rule is applied.

Example use cases:

- Framework-specific rules for certain file types (e.g., SolidJS preferences for .tsx files)
- Special handling for auto-generated files (e.g., .proto files)
- Custom UI development patterns
- Code style and architecture preferences for specific folders

```

You can refer to this directory for examples of cursor project rules: [https://cursor.directory/rules](https://cursor.directory/rules)

OpenAI Deep Reaearch can analyze various online resources – documentation, repositories, and discussions – to gather comprehensive information about WordPress plugin development best practices. It can identify common patterns in coding standards, security measures, and architectural approaches used by successful plugins.

This helps create a set of project rules that incorporate proven community standards while remaining focused on your specific plugin needs. The result is a practical, well-vetted foundation for your development work.

Here are the project rules I generated from the prompt above:

# Global WordPress Standards and Best Practices (`wordpress-general.mdc`)

```
---
description: Enforce WordPress coding standards and best practices for all plugin files
globs:
  - "**/*"
alwaysApply: true
---

## Recommended project structure
```
my-plugin/
├─ my-plugin.php            ← Main plugin bootstrap (contains header)
├─ readme.txt               ← WordPress.org–style read‑me (optional)
├─ uninstall.php            ← Clean‑up on uninstall (optional)
├─ admin/                   ← Dashboard‑only code (menus, settings pages, notices)
├─ frontend/                ← Public‑facing features (shortcodes, blocks, templates)
├─ includes/                ← Core logic, helpers, custom post‑type/classes
├─ assets/
│  ├─ css/                  ← Stylesheets loaded via wp_enqueue_style
│  ├─ js/                   ← Scripts loaded via wp_enqueue_script
│  └─ images/               ← Icons or other media
└─ languages/               ← .pot / .po / .mo translation files
```

> **Why this layout?**  
> • Keeps admin, frontend, and shared logic isolated, mirroring WordPress’s own separation.  
> • Simplifies conditional loading (e.g., enqueue assets only where needed).  
> • Helps maintain predictable paths for Cursor’s glob rules (`admin/**`, `frontend/**`, etc.).  

---

- **Follow official WordPress Coding Standards** for PHP, JS, HTML, and CSS (tabs for indentation, brace style, no trailing whitespace, descriptive names).
- **Avoid modern PHP features** (Composer autoloaders, namespaces, traits, MVC frameworks). Use procedural functions or classic classes with a unique prefix.
- **Never modify WordPress core files.** Hook into WordPress via `add_action`/`add_filter`. Execute plugin logic only through hooks or on activation / deactivation.
- **Use core APIs** (Settings API, REST API, WP Cron, `$wpdb` with prepared statements, `wp_remote_get`, etc.) instead of reinventing functionality.
- **Internationalize everything.** Wrap user‑facing strings in `__()`, `_e()`, `_n()`, etc., with a single text domain that matches the plugin slug.
- **Escape output & sanitize input** (`esc_html()`, `esc_attr()`, `sanitize_text_field()`, etc.) to prevent XSS and SQLi.
- **Prefix every global** (functions, classes, constants, option keys) with a unique plugin slug (e.g. `myplugin_`).
- **Standard plugin header** and `ABSPATH` check in every PHP entry file (e.g. `if ( ! defined( 'ABSPATH' ) ) exit;`).
- **Keep code modular**; include files from `includes/` as needed with `require_once`, but avoid side‑effects inside those include files.
- **Test with `WP_DEBUG` on**, resolve notices/warnings, and document complex functions with PHPDoc.
```

# Admin Area Code (`wordpress-admin.mdc`)

```
---
description: Guidelines for WordPress plugin admin (dashboard) code and functionality
globs:
  - "admin/**"
---

- Admin code should run **only in the WordPress admin context**. Use `is_admin()` or admin-specific hooks to ensure code only executes in the dashboard (e.g. hook into `admin_menu` to add admin pages, `admin_init` for initialization).
- Use the **Settings API** for admin settings pages (e.g. `register_setting()`, `add_settings_section()`, `add_settings_field()`) instead of creating custom form handlers from scratch. This ensures settings are handled consistently by WordPress.
- When adding admin menu items or pages, use `add_menu_page()`/`add_submenu_page()` and related functions. Follow WordPress UI patterns and leverage core styles (use built-in CSS classes) for a native look and feel.
- **Validate user capabilities and intents**: wrap admin functionality with permission checks like `current_user_can()` and use nonces for actions. For example, use `wp_nonce_field()` in forms and `check_admin_referer()` to verify requests, preventing CSRF.
- If your plugin outputs lists or tables in WP Admin, consider using `WP_List_Table` for a consistent, accessible listing interface.
- Enqueue admin-only scripts/styles with the proper hook (`admin_enqueue_scripts`). Do not load plugin assets on every admin page unnecessarily; target your plugin’s pages or specific screens (check `get_current_screen()` if needed).
- Keep the admin code organized: separate display logic from processing logic. For complex HTML forms or layouts, consider moving HTML into include templates and output them via functions, while keeping business logic in PHP.
- Ensure any admin notices, messages, or outputs are translatable and escape all output (use `esc_html__()` for admin text, etc.). Follow the WordPress admin color schemes and icon guidelines if adding custom icons.

```

# Frontend/Public-Facing Code (`wordpress-frontend.mdc`)

```
---
description: Guidelines for WordPress plugin public-facing (frontend) functionality
globs:
  - "frontend/**"
---

- Frontend code should integrate smoothly with the theme and site. Use WordPress **template tags and hooks** rather than direct HTML when possible (e.g. filter `the_content` or use `shortcode` outputs to inject plugin content).
- Provide features via **shortcodes or other pluggable methods** for users to embed plugin functionality. For example, use `add_shortcode()` to register shortcodes that render your plugin’s output. Document their usage for end-users.
- Enqueue all public scripts and styles in the appropriate hook (`wp_enqueue_scripts`). Do not print raw `<script>` or `<link>` tags in HTML; use `wp_enqueue_script()`/`wp_enqueue_style()` with proper dependencies and in-footer loading as needed.
- Ensure output is safe and escapable: never output user data without escaping. Use `esc_html()`, `esc_attr()`, etc. when printing to the frontend. For URLs, use `esc_url()` and for HTML fragments use `wp_kses_post()` if needed.
- Keep frontend performance in mind: only query necessary data (use WP_Query efficiently with caching if appropriate) and avoid heavy computations in templates. Leverage WordPress caching APIs (transients, object cache) when storing expensive results.
- Make your plugin’s frontend output **responsive and accessible**. Use semantic HTML and include ARIA labels or roles if needed. Follow WordPress Theme Review guidelines for front-end output (e.g. no hard-coded inline styles that can't be overridden).
- Avoid conflicts with themes and other plugins: use unique CSS selectors or a specific namespace for your plugin’s CSS, and avoid globally enqueuing scripts that could clash (wrap your JS in a closure or use WordPress’s no-conflict handling for jQuery).

```

# Core Plugin Logic and Includes (`wordpress-includes.mdc`)

```
---
description: Guidelines for shared core logic and helper includes in the plugin
globs:
  - "includes/**"
---

- Use the `includes/` directory for shared classes, utilities, and core functions of your plugin. These files contain the business logic and should be loaded by the main plugin file as needed (e.g. via `require_once`).
- **Do not execute code in include files at load time** (other than function and class definitions). Any functional code (like hooking into actions) should be called from the main plugin file or an initialization function, not run automatically when the file is included.
- Structure your code into reusable functions or classes. It’s fine to define classes in includes (for example, a class handling a custom post type), but avoid namespaces – instead, prefix class names (e.g. `My_Plugin_Helper`) to prevent collisions.
- Leverage WordPress core APIs within your logic: for database interactions use the `$wpdb` object or WP functions, for custom post types use `register_post_type()`, for scheduling use WP Cron (wp_schedule_event), etc., rather than custom implementations.
- If your plugin defines custom REST API endpoints, register them via `register_rest_route()` in an initialization hook (e.g. `rest_api_init`), and keep the callback implementations in this includes folder. Similarly, if defining a widget, extend `WP_Widget` in includes and register it on the `widgets_init` hook.
- Keep functions focused and documented. Follow WordPress PHP coding style in these files (including Yoda conditions, spacing, etc.). Provide PHPDoc comments for complex functions or classes to describe their purpose.
- The includes should be logically organized (you can create sub-folders if necessary, e.g. `includes/api/`, `includes/helpers/`). Each file should generally encapsulate a specific piece of functionality (one class or a set of related functions).

```

# Assets (JavaScript, CSS, Images) (`wordpress-assets.mdc`)

```
---
description: Guidelines for static assets (JS, CSS, images) used by the plugin
globs:
  - "assets/**"
---

- Organize front-end assets in this directory (e.g. put CSS, JS, images in subfolders like `assets/css/`, `assets/js/`, etc.). Use WordPress functions to load them rather than hard-coding paths.
- **JavaScript**: Follow WordPress JavaScript Coding Standards. For example, use single quotes for strings, indent with tabs, and name variables descriptively. Avoid polluting global namespace; wrap your code in an IIFE or module pattern. If using jQuery, use it in no-conflict mode (WordPress includes jQuery by default) — e.g. wrap your script with `(function($){ ... })(jQuery);`.
- **CSS**: Adhere to WordPress CSS Coding Standards (proper commenting, one rule per line, etc.). Use class names that are unlikely to conflict (perhaps prefix with your plugin or unique identifier). Avoid !important if possible to let themes override styles if needed.
- Enqueue asset files through PHP: e.g. call `wp_enqueue_script()` for your `assets/js` files and `wp_enqueue_style()` for `assets/css` files, usually in the plugin’s init or specific hook. Specify dependencies (like jQuery) and version numbers (possibly use plugin version) for cache busting.
- If your build process generates minified files, load those in production (and handle dev vs prod if applicable). However, a simple plugin can be written with plain JS/CSS without a complex build pipeline, to align with WordPress’s preference for simplicity.
- Load assets conditionally: only on pages where needed. For example, if your script is only used on a shortcode or a particular page, use `wp_enqueue_script` inside that shortcode handler or on specific conditionals, so it doesn’t load site-wide unnecessarily.
- Ensure any images or media in assets are properly referenced and used. For example, if you have icons or images, use functions like `plugins_url()` or `plugin_dir_url(__FILE__)` to get the correct path to assets in your code.

```

# Internationalization and Localization (`wordpress-i18n.mdc`)

```
---
description: Ensure all user-facing text is internationalized (translatable) and localized properly
globs:
  - "languages/**"
---

- All user-facing strings in the plugin **must be wrapped in translation functions**. Use `__()` for returning translated text, `_e()` for echoing text, `_n()` for plural forms, and `_x()` or `_ex()` when context is needed. Example: `__('Hello World', 'your-plugin-textdomain')`.
- Maintain a consistent **text domain** for your plugin. The text domain should match the plugin’s slug (and the one declared in the plugin header). Every translation function call should include this exact text domain string.
- Include a `languages/` folder with a `.pot` file (translation template). Update the `.pot` file whenever strings change, so translators can create `.po` and `.mo` files for their language. In the plugin header, declare `Domain Path: /languages` so WordPress knows where to find translations.
- **Load the text domain** on plugin initialization. Call `load_plugin_textdomain( 'your-plugin-textdomain', false, dirname( plugin_basename(__FILE__) ) . '/languages' );` in an early hook (e.g. `plugins_loaded`) to make sure translations are available.
- Avoid string concatenation that would make translation difficult. Instead, use placeholders and `sprintf()` or `number_format_i18n()` for variables within translatable strings. E.g., `sprintf( __('Hello %s', 'your-plugin-textdomain'), $username )`.
- Provide translator comments where needed for clarity. For example, above a complex string you can add `// translators: %s is the username` to help translators understand context.
- Ensure locale-specific formatting is considered. Use date and time functions that respect WordPress locale (like `date_i18n()` for dates) and number formatting functions for numbers/prices in output.

```

Each of these rule files should be placed in the `.cursor/rules` directory of your WordPress plugin project. With these rules in place, the Cursor AI assistant will consistently follow WordPress’s native development practices, adhere to coding standards, utilize core APIs correctly, and handle internationalization properly across your plugin. This helps maintain a high-quality codebase that is in line with WordPress community best practices.

Step 3: Generate Technical Specifications based on User Stories

Next, we’ll create technical specifications using user stories, incorporating both our requirements and project rules.

User stories keep our specifications tied to real-world needs.

For example, consider this WooCommerce Product Add-ons user story: “As a shop owner, I want to let customers add gift wrapping so I can earn more per sale.”

This simple format tells AI exactly who needs the feature, what to build, and why it matters. It creates a clear checklist that prevents AI from adding unnecessary features.

This is the prompt I used to generate technical specs:

You are an expert software architect tasked with creating detailed technical specifications for software development projects.

Your specifications will be used as direct input for planning & code generation AI systems, so they must be precise, structured, and comprehensive.

First, carefully review the plugin requirements:

<plugin_requirements>
{{_REQUIREMENTS_}}
</plugin_requirements>

Next, carefully review the WordPress plugin guidelines:

<wp_plugin_guidelines>
{{_RULES_}}
</wp_plugin_guidelines>

Your task is to generate a comprehensive technical specification for a WordPress plugin based on all the above information.

Before creating the final specification, analyze the project requirements and plan your approach. Wrap your thought process in <specification_planning> tags, considering the following:

1. **Core Plugin Architecture & Key Workflows**
   - Overview of what the plugin does and how it integrates with WordPress.
   - Any custom post types, taxonomies, or database interactions.
   - Activation/deactivation/uninstall flows.

2. **Plugin Folder Structure & Organization**
   - How files and directories will be arranged (admin, public, includes, etc.).
   - References to the main plugin file, admin partials, public-facing templates, etc.

3. **Detailed Feature Specifications**
   - Each key feature should have user stories, implementation steps, hooks used, and any relevant admin/public UI components.

4. **Database Schema (if applicable)**
   - Description of custom tables (if needed).
   - MySQL vs. SQLite compatibility strategies (if applicable).
   - Data validation and sanitization.

5. **WordPress Actions, Filters & Hook Implementations**
   - Which hooks (actions/filters) are used or created by the plugin.
   - Purpose and flow for each.

6. **Admin Settings & UI**
   - Usage of the WordPress Settings API.
   - Menu page structure.
   - Enqueueing admin assets.

7. **Public-Facing UI (if applicable)**
   - Templates or shortcodes.
   - Enqueueing CSS/JS for the front-end.
   - Any public endpoints or custom routes.

8. **Security & Capability Checks**
   - Nonce usage.
   - Sanitization and escaping.
   - Role/capability checks for admin actions.

9. **Internationalization & Localization**
   - How text domains and translation files are set up.

In your analysis, be sure to:
- Break down complex features into step-by-step flows.
- Identify areas that require further clarification or have potential risks.
- Propose solutions or alternatives for any identified challenges.

After your analysis, generate the technical specification in **Markdown** using the structure below. Make sure the details align with WordPress plugin best practices:

```markdown
# "{Project Name}" WordPress Plugin Technical Specification

## 1. System Overview
- Core purpose and value proposition
- Key workflows
- High-level plugin architecture

## 2. Plugin Folder Structure
- Directory layout (admin, includes, public, etc.)
- Key files and their responsibilities

## 3. Feature Specification
For each feature:
### 3.1 Feature Name
- User story and requirements
- Implementation steps (hooks, functions, UI changes)
- Error handling and edge cases

## 4. Database Schema (if applicable)
### 4.1 Tables
For each table:
- Complete table schema (field names, types, constraints)
- Relationships and indexes
- MySQL/SQLite compatibility considerations (if relevant)

## 5. WordPress Hooks & Actions
### 5.1 Custom Actions / Filters
- Detailed description of each custom action/filter
- Input parameters and return values
- Usage examples

### 5.2 Core WordPress Hooks Utilized
- Explanation of how and why these hooks are being used
- Examples of callback functions

## 6. Admin Settings & UI
- Settings page structure (menu, sub-menu)
- WordPress Settings API usage
- Enqueueing admin assets (CSS/JS)
- Access control (capabilities)

## 7. Public-Facing Functionality
- Shortcodes, template tags, or public-facing pages
- Enqueueing front-end assets (CSS/JS)

## 8. Security & Capability Checks
- Nonce usage
- Sanitization and escaping patterns
- Role/capability verification

## 9. Internationalization
- Text domain configuration
- .po/.mo file placement
- Steps to generate translation files

```

Ensure that your specification is **extremely detailed**, providing specific implementation guidance wherever possible. Include concrete code snippets for complex features and clearly define any interfaces between components (e.g., how data flows between admin forms and the database).

Begin your response with your <specification_planning> analysis, then proceed with the complete Markdown technical specification. Once you are done, this document will be passed to the AI code planning system for implementation.

(Replace the placeholder for requirements and project rules with the actual requirements and project rules)

Note: While I prefer using O1 Pro for generating technical specifications due to its superior results, Gemini 2.5 Pro is also a viable alternative.

Here’s the result:

Step 4: Generate implementation plan

The implementation plan breaks down the development process into clear, manageable steps that AI can understand and execute.

This serves as a roadmap that guides the AI through the development process.

Here’s the prompt I use to generate implementation plans:

You are an AI task planner responsible for breaking down a complex WordPress plugin development project into manageable steps.

Your goal is to create a detailed, step-by-step plan that will guide the code generation process for building a fully functional WordPress plugin based on a provided technical specification.

First, carefully review the following inputs:

<plugin_requirements>
{{_REQUIREMENTS_}}
</plugin_requirements>

<wp_plugin_guidelines>
{{_RULES_}}
</wp_plugin_guidelines>

<technical_specification>
{{_SPECS_}}
</technical_specification>

After reviewing these inputs, your task is to create a comprehensive, detailed plan for implementing the WordPress plugin.

Before creating the final plan, analyze the inputs and plan your approach. Wrap your thought process in <brainstorming> tags.

Break down the development process into small, manageable steps that can be executed sequentially by a code generation AI.

Each step should focus on a specific aspect of the plugin and should be concrete enough for the AI to implement in a single iteration. You are free to mix both admin and public tasks if they make sense together.

When creating your plan, follow these guidelines:

1. **Start with the plugin folder structure** and essential WordPress configurations (plugin header, main plugin file).
2. **Progress through database schema** setup if needed (custom tables), along with the hooks or functions to manage plugin activation, deactivation, and uninstall.
3. **Move on to shared functionalities** in the `includes` directory, such as helper functions or hooks implementations.
4. **Break down the implementation of admin pages** (settings screens, custom post types, etc.) and any public-facing features into smaller, focused steps.
5. **Include steps for integrating** custom capabilities, roles, security checks (nonces, sanitization, escaping), and any other WordPress APIs.
6. **Incorporate steps for enqueuing assets** (CSS/JS) in both admin and public contexts.
7. Ensure that **each step** is atomic and self-contained enough to be implemented in a single code generation iteration. Each step should modify **no more than 20 files** at once (ideally fewer) to keep changes manageable. Be sure to include instructions for any manual tasks the user must perform (e.8., running SQL scripts, updating environment variables, etc.).

Present your plan using the following markdown-based format. This format is designed to integrate with the subsequent code generation phase, where an AI will systematically implement each step and mark it as complete. **Each step must be atomic** and self-contained:

```md
# Implementation Plan

## [Section Name]
- [ ] Step 1: [Brief title]
  - **Task**: [Detailed explanation of what needs to be implemented]
  - **Files**: [Maximum of 20 files, ideally less]
    - `path/to/file1.php`: [Description of changes]
  - **Step Dependencies**: [List any previous step(s) that must be completed before this step]
  - **User Instructions**: [Any manual instructions for the user, if applicable]

[Additional steps...]
```

After presenting your plan, provide a **brief summary** of the overall approach and any key considerations for the implementation process, such as security, localization, or potential risks.

Remember to:
- Ensure that your plan covers all aspects of the **WordPress plugin** technical specification.
- Break down complex features (e.g., custom admin pages, database interactions) into smaller, manageable tasks.
- Consider the **logical order** of implementation, ensuring that hooks, data structures, and dependencies are addressed in the correct sequence.
- Include steps for **error handling, data validation, and edge case** management.
- Reference **WordPress best practices** for hooks (actions/filters), capability checks, i18n, enqueuing scripts/styles, and so on.

Begin your response with your <brainstorming> analysis, then proceed to create your detailed implementation plan for the WordPress plugin based on the provided specification.

Once you are done, we will pass this specification to the AI code generation system.

(Replace the placeholders with the actual requirements, project rules and specifications you generated in the previous steps)

Note: I prefer using O1 Pro for generating implementation plans since it produces clearer, more streamlined plans compared to other models. However, if you want to avoid O1 Pro’s higher pricing, Gemini 2.5 Pro is a solid alternative.

Here’s the result:

Step 5: execute the implementation plan, step-by-step using Cursor AI

Now that we have everything ready, it’s time to build the plugin with Cursor AI.

First, set up a local WordPress development environment on your computer. I’m using LocalWP since it’s most familiar to the WordPress community.

Next, navigate to the WordPress wp-content/plugins folder and create a new folder for your plugin.

Create a notes folder inside the plugin folder and add your plugin requirements, specifications, and implementation plan to it.

Set up a .cursor/rules folder for your project rules and move all rules into that folder.

Once everything is set up, follow the instructions outlined in the video below:

Here’s the prompt used in the video:

Your task is to systematically implement each step of the plan, one at a time.

First, carefully review the following inputs:

{{_INPUTS_}}

Then, implement the following steps:

{{_STEP_}}

The implementation plan is a high-level guide. Use it to shape your approach, but you do not have to follow it strictly. However, you must adhere to the specified **WordPress plugin** rules, guidelines, and technical requirements.

### Documentation Requirements

-   **File-level documentation**: Purpose and scope of each file
-   **Function-level documentation**: Inputs, outputs, and logic flow
-   **Inline comments**: For complex logic or essential WordPress considerations (e.g., nonce checks, hooks usage)
-   **Edge cases and error handling**: Address potential pitfalls and how you are handling them
-   **Notes**: Any assumptions or limitations

### Guidelines

1. **Implement exactly one step** at a time from the plan.
2. Ensure all code follows **WordPress plugin best practices** and the provided technical specification.
3. Include **all necessary imports** (e.g., `require_once` or WordPress function calls).
4. Write clean, well-documented PHP code with appropriate **WordPress coding standards** (4 spaces indentation, prefixed function names, etc.).
5. **Always provide the entire file contents**—avoid ellipses or placeholders.
6. Handle edge cases: Nonce checks, validation, and escaping where appropriate (e.g., `sanitize_text_field()`, `esc_html()`).
7. **Follow the security guidelines**: capabilities checks, nonces, sanitization, prepared statements when interacting with the database.
8. Include or update **tests** (PHPUnit, if specified in the plan) or demonstration code for your plugin as needed.
9. Use **prefixed** function names and constants (e.g., `my_plugin_`) to avoid naming collisions.
10. **Type Declarations**: If employing any advanced static analysis or using typed PHP, ensure correctness. Otherwise, ensure thorough docblocks for clarity.
11. **Begin by identifying** the next incomplete step from the plan, then generate the required code.
12. Above each file’s XML entry, provide a summary titled: "**Here's what I did and why**".
13. End your overall response with:
    - "**STEP X COMPLETE. Here's what I did and why:**" – Summarize your changes
    - "**USER INSTRUCTIONS**: Please do the following:" – Provide instructions for any manual tasks needed (e.g., activating the plugin, updating WordPress settings, running SQL queries in the database, etc.).
14. If you **update the implementation plan**, append the updated steps as Markdown code blocks after the user instructions.

This structure ensures your code is clearly delineated, documented, and ready to be tested or merged into the ongoing **WordPress plugin** development process

Let’s Talk About the Hard Part

.

.

.

Challenge #1: No Single AI Tool Can Do It All

This workflow requires different AI tools to achieve the best results, as there’s no single AI model that can handle everything perfectly from start to finish.

Each AI model has its specialized strengths and optimal use cases:

  • Claude excels at thoughtful analysis, brainstorming, and detailed requirements gathering
  • OpenAI’s deep research capabilities are perfect for compiling project rules and technical specifications
  • Gemini and o1 Pro are particularly good at generating implementation plans and technical documentation
  • Cursor AI stands out for code implementation, offering real-time suggestions and debugging assistance

In our demo, you saw how we leveraged these different tools:

  • We started with Claude 3.7’s thinking mode for thorough plugin requirement analysis
  • Then used OpenAI’s deep research capabilities to develop comprehensive project rules
  • Followed by O1 Pro and Gemini 2.5 Pro for generating detailed technical specifications and implementation plans
  • Finally, we used Cursor for the actual coding and implementation phase

We are using each tool for what it best at.

So, this multi-tool approach gives us significantly better results than trying to rely on a single AI model.

However, this also means that it would leads us to the next challenge, which is….

Challenge #2: These AI Tools Aren’t Free

Every AI tool out there, whether it’s fancy IDEs like Cursor and Windsurf, or chat assistants like ChatGPT, Gemini, and Claude – none of them are completely free.

Sure, they all have free versions, but here’s the catch – you either get basic models that can’t handle complex tasks, or limited access to the good stuff. And trust me, when you’re building a WordPress plugin from scratch, you need the good stuff.

These tools typically cost between $20 – 200 USD monthly

ChatGPT Pro? That’s the premium option at $200 USD per month

Now, I can already hear you saying, “Nathan, $200 per month? That’s a lot of money!”

But let me share something interesting with you

Not too long ago, a friend came to me needing a custom plugin to connect a popular Malaysian payment gateway with their premium plugin

Back then, I told him it would take 20 hours at RM100 per hour – adding up to RM2,000

Now, with our AI workflow? I could wrap up the same project in just an hour or two

Here’s what I want you to understand – it’s not about how much these tools cost, it’s about what they help you earn.

Think about it – if spending RM1,000 helps you earn RM2,000, while saving tons of time… that’s actually pretty amazing, right?

.

.

.

What You Should Really Take Away From This

1. AI is not a magic wand… yet.

Therefore, we can’t just wave it around and expect perfect results.

Just like humans need to follow specific steps to achieve their goals, AI requires the same systematic approach.

2. This workflow is a “Work in Progress” — and That’s Okay

Since AI is still developing, our current workflow isn’t perfect. However, as AI continues to improve and better understands our needs, this workflow will become more and more effective.

3. It’s Not About the Cost — It’s About the Return

As I mentioned earlier, while some AI tools can be expensive (like O1 Pro, which requires a ChatGPT Pro subscription at $200 USD per month), we shouldn’t focus solely on the price tag.

Instead, consider the value these tools deliver. Take my earlier example — if you can invest $1K in AI tools to earn $2K from your projects, that’s a fantastic return because your costs are more than covered by what you’re able to deliver.

4. AI Can Build With You — But You Still Need to Think Like a Developer

Use these AI tools as a stepping stone to learn WordPress plugin development.

In the past, you will have to to learn PHP first—including concepts like variables, arrays, functions, and algorithms—before you could build a plugin.

Now, with AI, you can start building plugins right away and learn these programming concepts as you go, helping you better understand the AI-generated code.

Programming remains an incredibly valuable skill. It’s not just about writing code—it’s about systems thinking and architecture.

“Vibe coding” will only work when you truly understand what you’re doing.

That’s why I encourage you to develop your programming skills along the way.

Think about it – every line of code you write, whether through AI or not, is a building block in your journey as a developer.

The tools may change, but the fundamentals of problem-solving and creative thinking remain constant.

As you navigate this evolving landscape of AI-assisted development, ask yourself: Are you using AI as a crutch, or as wings to help you soar higher?

The answer might just reshape how you approach not just plugin development, but your entire journey in tech.

27 min read ChatGPT, AI Summarizer, Claude, Gemini, Prompt Engineering

How to Use AI to Quickly Digest Long-Form Content Like a Pro

We live in an age of information overload.

There are seemingly endless supply of content coming at us from all directions.

Trying to take in all the content out there can be really tough. It’s like trying to drink from a fire hydrant – way too much, way too fast! And let’s be real, it’s about as doable as trying to read every book in a huge library all at once.

Even though we’re often eager to soak up as much information as we can, it’s just not possible to read everything! With our busy schedules, finding time to get through lengthy articles, books, or podcasts can be a real tough cookie.

That’s where a summary of all that content come in handy.

Here’s why:

  • They help you get the main idea fast.
  • They make learning quick and save your time.
  • They’re useful when you’re short on time or need to decide whether the content is worth consuming.

In essence, summaries streamline our consumption of information, making it more efficient and effective.

.

.

.

How AI Can Help Us in Summarizing Long Form Content

In recent years, AI has made some seriously impressive strides.

And guess what? It turns out AI can be a total game-changer when it comes to summarizing long-form content!

But it hasn’t always been smooth sailing.

When I first started using AI to summarize long-form content, I began with models like GPT-3.5 and the early release of GPT-4. Back then, the experience was quite challenging.

These older models had limited context windows, meaning they could only handle small chunks of content at a time. This often resulted in skipped or ignored sections, leaving me with a fragmented understanding of the material, much like trying to piece together a puzzle with half the pieces missing.

The summaries were often superficial, missing the depth needed for complex topics.

Over time, I noticed another significant issue: maintaining coherence.

These early models struggled with short-term memory, making it difficult for them to retain information over long passages. This led to summaries that were incoherent or disjointed, with no smooth flow. Additionally, when faced with lengthy content, these models couldn’t prioritize essential information effectively, resulting in summaries that missed the mark.

Thankfully, things have come a long way with the latest AI models….

Advancements with New LLM Models

Using newer versions like Claude 3 Opus, Gemini 1.5 Pro, and GPT-4o has been a night and day difference.

  1. Larger Context Windows:
    .
    • Enhanced Processing Capabilities: These newer models have much larger context windows. They can process and understand entire documents without losing context, which is a huge relief.
      .
    • Comprehensive Summarization: Because they can look at the whole content at once, the summaries they produce are more comprehensive and accurate. No more missing pieces!
      .
  2. Improved Recall Capabilities:
    .
    • Memory Integration: Modern models have much better memory integration. They can recall previously processed information more effectively, keeping track of key points throughout the summarization process.
      .
    • Context Retention: This improved memory means that important themes and details are retained, leading to coherent and thorough summaries.
      .
  3. Depth and Detail in Summarization:
    .
    • In-Depth Analysis: These advanced models can perform deeper analysis, capturing intricate details and nuances. They dive deep into the content instead of just skimming the surface.
      .
    • Contextual Understanding: Larger context windows help these models grasp the broader context of the content, ensuring that summaries are not just a collection of isolated points but a coherent narrative that makes sense.

These new LLM models make it easier than ever to stay informed, save time, and make smarter decisions about what to read or watch.

Now that you’ve got a good idea of how AI has evolved and improved in summarizing long-form content, let’s get down to the nitty-gritty. After all, it’s not just about having a fancy AI models, but knowing how to use it effectively.

And the key to that? Crafting a good summarizing prompt.

Think of it as instructing a new intern.

You wouldn’t just throw them into the deep end without clear instructions, right? Same goes for AI. It’s all about giving it the right guidance to get the job done. Ready to learn how to craft the perfect summarizing prompt?

Let’s get started!

.

.

.

What Makes a Good Summarizing Prompt?

Picture this: you’ve found a lengthy article that you want to summarize using AI.

You excitedly copy the text, paste it into your AI tool, and type out a quick prompt: “Please summarize the content above.” You hit enter, eager to see the magic happen.

But the result? It’s underwhelming, to say the least.

Here’s why:

  1. Surface-Level Summaries:
    .
    • Such prompts tend to produce summaries that only scratch the surface, missing deeper insights.
    • Key examples, strategies, and important details are often omitted.
      .
  2. Lack of Depth:
    .
    • Without specific instructions, the AI might not delve into the sub-points and nuances, leading to a shallow summary.
    • The summary might fail to capture the full context and intricacies of the content.

This is the problem with generic summarizing prompts.

They don’t provide the AI with any guidance on what aspects to focus on, how much detail to include, or how to structure the summary.

As a result, the AI does its best, but the output often misses the mark.

To get the best out of AI for summarizing stuff, we can’t just throw any old instructions at it.

We’ve gotta give it clear, detailed directions, kinda like how you’d explain a game to a friend. This helps the AI zero in on the important stuff, include all the juicy details, and arrange everything in a way that makes sense.

Doing this, we can use AI to create great summaries easily.

Consider the following prompt:

### Instructions for Crafting a Detailed Summary:

1. **Objective**:
   Understand that the purpose of this summary is to extract the essential insights, strategies, examples, tactics, and tips from the content. The reader should gain key knowledge from your summary without having to read the entire content line by line.

2. **Length**:
   While brevity is valued, it should not come at the expense of key information. It's better to have a longer, comprehensive summary than a brief one that misses out on crucial insights.

3. **Detailing Topics**:
   - When summarizing a section, delve beyond just the headline. Dive into the sub-points and nuances.
   - If specific examples are provided to illustrate a point, include those examples.
   - If a particular strategy or tactic is mentioned, describe it briefly in your summary.

4. **Incorporate Direct Quotes**:
   If there's a particularly impactful or insightful quote from the content, include it verbatim, ensuring you attribute it to the speaker or author.

5. **Use Bullet Points for Clarity**:
   - Bullet points make content easier to scan and digest.
   - For instance, if multiple strategies are discussed under a section, list each strategy as a separate bullet point with a brief description or example.

6. **Avoid Generalizations**:
   Avoid phrases like "Various strategies are discussed." Instead, specify what those strategies are: "The content discusses strategies such as A, B, and C, explaining that..."

7. **Conclude with Takeaways**:
   At the end of your summary, include a "Key Takeaways" section. This should be a bullet-pointed list that captures the core lessons, strategies, and insights from the content.

This prompt is my secret sauce.

It guides the AI to:

  • Set Goals: Tell the AI exactly what we want – to pull out the most important bits and strategies.
  • Dig Deep: Ask the AI to go beyond the main points and look at the little details and finer points.
  • Use Direct Quotes: Spice things up by adding in powerful quotes straight from the source.
  • Keep it Organized: Use bullet points to make everything clear and easy to read.
  • Stay Specific: Make sure the AI doesn’t just make broad statements, but gives us the specific details.
  • Recap Quickly: Wrap things up at the end with the key lessons for a quick and easy reference.

With a prompt like this, the AI has a clear roadmap to follow.

The resulting summary is detailed, insightful, and captures the core of the original content. It’s a summary that actually saves you time and provides value.

.

.

.

Comparing GPT-4o, Gemini 1.5 Pro, and Claude 3 on Summarizing Long-Form Content

Imagine this: you’ve found a gem of a podcast episode, but it’s way too long.

Tim Ferriss’s podcast episodes are like buried treasures full of insights. The problem? They’re longer than your usual commute. That’s where AI summarizers can help.

In a test, we had three leading AI models summarize an episode.

Seth Godin’s episode on the Tim Ferriss Show was our guinea pig.

It’s a great episode on How to Say “No,” Market Like a Professional, and Win at Life. We tested GPT-4o, Gemini 1.5 Pro, and Claude 3, using the same detailed prompt.

And guess what? The results were fascinating.

GPT-4o: Detailed and Organized

First, we tell GPT-4o that its role by providing a detailed prompt for summarizing Seth Godin’s podcast episode, including objectives and key instructions.
Here we feed GPT-4o with the podcast transcript
Here’s GPT-4o’s summary of Seth Godin’s podcast on the Tim Ferriss Show, highlighting key insights on habits, routines, and effective marketing strategies.

GPT-4o delivered a killer summary of Seth Godin’s podcast episode.

It started off strong with a clear introduction, then dove into the meaty topics. It tackled things like overcoming overwhelm, project management, and the difference between long work and hard work.

The real highlight was GPT-4o’s knack for detail. It gave a great explanation of Seth’s thoughts on pricing and scarcity, using relatable examples like Supreme and Franklin Barbecue. It didn’t stop at the surface, it went deep into the content, giving us a clear understanding of the topics.

At the end, GPT-4o wrapped it all up with a tidy list of key takeaways. This made it super easy to get the core lessons without having to listen to the whole podcast.

In short, GPT-4o nailed the summary game.

Gemini 1.5 Pro: Insightful and Engaging

Here, we provide a detailed prompt to Gemini 1.5 Pro via the Gemini API playground for summarizing Seth Godin’s podcast episode
Gemini 1.5 Pro’s engaging summary of Seth Godin’s podcast on the Tim Ferriss Show, highlighting key insights on managing overwhelm and choosing work.

Gemini 1.5 Pro turns summarizing into storytelling.

This model kicks things up a notch by delivering a comprehensive summary that reads like a captivating narrative. It sets the tone right from the start, presenting the discussion as a masterclass in modern work and marketing, drawing the reader in. The summary is neatly divided into distinct sections, each honing in on a crucial theme – from overcoming overwhelm to the art of saying “no” and identifying your niche audience. What really sets it apart are the catchy subheadings like “The Lizard Brain’s Influence” and “The Three-Sentence Marketing Promise,” that make the summary not just informative but also enjoyable to read.

To top it off, Gemini 1.5 Pro serves up practical templates like Seth’s three-sentence marketing promise, offering readers not just insights but actionable takeaways.

In short, Gemini 1.5 Pro doesn’t just summarize, it tells a story.

Claude 3: Concise yet Comprehensive

An example of a detailed prompt given to Claude 3 for summarizing Seth Godin’s podcast episode on the Tim Ferriss Show.
Claude 3’s summary of Seth Godin’s podcast episode on the Tim Ferriss Show, showcasing its ability to produce concise yet comprehensive summaries

Claude 3 pumps out the most concise summaries, but don’t let that fool you.

Each section is clearly divided, with bold headings that perfectly capture the essence of the main ideas. Its brevity doesn’t mean it’s skimping on the good stuff – far from it. Key examples and direct quotes are all part of the package, shedding light on things like Seth’s approach to overwhelm and his views on authenticity versus professionalism. At the tail end of it all, a “Key Takeaways” section steps in, boiling down the big lessons into clear, actionable nuggets of wisdom.

So, while it may be the most concise, Claude 3 gets you straight to the good stuff without missing a beat.

The Verdict

All three models produced excellent summaries that capture the podcast’s core insights.

GPT-4o’s summary is the most detailed, making it perfect for those who want an in-depth understanding. Gemini 1.5 Pro shines with its engaging, narrative style, making the content enjoyable to read. Claude 3 excels in conciseness, providing key points without unnecessary fluff.

Ultimately, your choice depends on whether you prioritize detail, engagement, or brevity.

.

.

.

Deep Dive Summarization by Focusing on a Specific Topic

Summarizing extensive content like three-hour podcasts can be challenging, even for advanced AI.

The sheer volume of information can lead to summaries that only skim the surface, leaving crucial insights untouched. But hey, we’re not settling for that. We’re aiming for detailed, insightful summaries that dig deep into specific topics, ensuring we don’t miss a thing.

So, let’s dive in and learn how guiding AI to focus on specific topics can transform our summaries and bring us the rich insights we’re after.

How to Extract and Summarize Specific Topics

Step 1: Extract Relevant Content

First off, figure out the part of the content you’re really into.

For instance, if you’re curious about Seth Godin’s discussion on “Long Work vs. Hard Work” from his Tim Ferriss interview. Just grab that bit from the transcript.

Here’s how: Ask the AI to extract the segment where Seth talks about this topic. A simple query like, “Can you extract the part of the transcript where Seth Godin talks about the long work vs hard work?” should do the trick.

The AI might come back with something like this:

Step 2: Crafting a Detailed Summarizing Prompt

After you’ve pulled out the content you’re really into, it’s time to get the AI to work its magic.

You’ll want it to use the same super detailed summarization instructions we used earlier. But here’s the twist: you’re gonna ask it to only focus on the part of the transcript that’s all about the topic you’re dying to dive into.

Tell the AI:

Detailed Summary Example

Here’s an example of how the AI might respond with a detailed summary of the “Long Work vs. Hard Work” section:

### Detailed Summary of the Long Work vs. Hard Work Section

**Objective**:
This section focuses on the differences between long work and hard work, with Seth Godin explaining the concepts and providing examples from his experience.

**Main Points**:

1. **Definitions**:
   - **Long Work**: Involves tasks that are time-consuming and repetitive, such as billing hours for a lawyer or performing piecemeal work. These tasks are exhausting and provide diminishing returns as more time is spent.
   - **Hard Work**: Consists of emotional labor, confronting risk, and finding generosity. This type of work requires dealing with discomfort and seeing nuance. Hard work is about creating value through challenging tasks that don't always provide immediate applause or satisfaction.

2. **Examples and Insights**:
   - **Platform Work**: Platforms like Fiverr and Medium often reward long work, where additional hours don’t yield significantly better results.
   - **Emotional Labor**: Hard work involves emotional labor that might feel risky but is ultimately generous and useful over time.
   - **Seth's Experience**:
     - Early in his speaking career, Seth paid to give the first hundred speeches and was initially ranked very low among speakers. He faced getting booed off stage multiple times.
     - Starting the altMBA and other online initiatives involved significant hard work. Initially, these projects were not well-received, requiring persistence and the willingness to "make a mess" before finding success.
     - He described a critical moment of reflection in the desert where he decided whether to continue pursuing the altMBA concept or walk away. He emphasized the importance of making decisions, even risky ones, to eventually produce something valuable.

3. **Strategies and Tactics**:
   - **Focusing on Impact**: Seth stresses the importance of choosing projects that align with one's long-term goals and values, rather than being driven by immediate opportunities or fears of insufficiency.
   - **Iterative Process**: The altMBA was developed through iterative playtesting, with Seth pretending to be the system. This allowed for refinement based on real feedback before fully committing to the project.
   - **Building Trust**: Initially, the altMBA participants were those who gave Seth the benefit of the doubt, highlighting the importance of trust and reputation in launching new initiatives.

4. **Direct Quotes**:
   - "Hard work is the emotional labor of confronting risk; the emotional labor of finding generosity when you don’t feel like it; the emotional risk of seeing nuance where there isn’t a lot of nuance." - Seth Godin
   - "You have to get booed off stage a whole bunch of times." - Seth Godin, on the journey to becoming a successful speaker.

**Key Takeaways**:
- **Long Work vs. Hard Work**: Understand the distinction and focus on hard work that involves emotional labor and risk-taking to create lasting value.
- **Persistence**: Success often requires enduring initial failures and continuously refining your approach.
- **Strategic Choices**: Make decisions that align with your long-term goals and values, and avoid being driven by fear of insufficiency.
- **Building Trust**: Cultivate trust and reputation to help launch and sustain new projects.
- **Iterative Development**: Use feedback and iterative testing to refine projects before full-scale implementation.

And there you have it!

Zero in on the bits you care about the most and really dive into the nitty-gritty. This way, you save time and make sure you fully understand the stuff that matters to you.

.

.

.

Wrapping It All Up

Managing the vast amount of information we encounter daily can feel overwhelming.

Fortunately, AI is here to help. With significant advancements in AI technology, models like GPT-4o, Gemini 1.5 Pro, and Claude 3 have transformed the way we summarize long-form content. These models offer larger context windows, better recall capabilities, and more detailed summarizations, making it easier to grasp main ideas quickly and efficiently.

Crafting the right prompt is key.

Just like giving clear instructions to a new intern, a specific and detailed prompt can guide the AI to produce comprehensive and insightful summaries.

Whether you need an in-depth understanding, an engaging narrative, or a concise overview, these AI models cater to various needs effectively. Don’t let lengthy content overwhelm you. Next time you face a long article, book, or podcast, remember that AI can help you digest and understand the content like a pro.

Happy summarizing!

.

.

.

27 min read Claude, Code Generation with AI, The Art of Vibe Coding

Building WordPress with AI Magic

Crafting a WordPress website from scratch can feel like wrestling with a lion, even for the experienced web builders!

It’s like standing in front of a blank canvas with a palette full of colors, but no clear idea of where to begin. You need to decide on a layout, select appropriate themes and plugins, choose color schemes, select typography, and craft user interfaces – all while ensuring the site remains responsive and user-friendly. If you don’t have a background in design or development, this process can be daunting and time-consuming, often leading to your own frustration and delays.

A frustrated web designer facing a large, blank computer screen in a cluttered office, surrounded by web design books and color swatches.

The struggle of transforming a vision into a functional, visually appealing WordPress site is a real hurdle faced by many.

That’s why many block builder plugins provide ready-to-use templates. They allow you to get your website up and running without dealing with complicated designs.

While starter templates can be a lifesaver, but there are times when they just don’t cut it. Like when you received a Figma design from your client and you need to turn it into a WordPress site. These templates can’t keep up with the unique designs and specific needs.

So, you end up spending far too much time adjusting things or starting from scratch again, which can be a real pain!

.

.

.

Enter The AI

Ever since ChatGPT burst onto the scene, AI has been a total game changer.

So, here’s a thought: What if you could snap a picture of a website layout or a Figma design, and AI could whip up a fully functional WordPress template from it? Sounds like something out of a sci-fi movie, right? But imagine the impact on web development!

We already know that AI can churn out code, but the real question is whether it can help us build a WordPress site right from scratch.

Imagine the possibilities if AI could actually pull this off.

It would revolutionize the game, especially for those unique designs where pre-made templates just aren’t enough.

That said, the market is flooded with tools that claim to be “AI-powered,” promising to generate a complete WordPress site in mere minutes. However, when you actually try them, you realize this so-called “AI-powered” magic is nothing more than some fancy if-else logic.

Really, they’re just tweaking standard templates with a little sprinkle of “AI.”

This won’t cut it if you’re looking to create a site with a truly custom design. Ultimately, you find yourself back at square one, manually adjusting the layout. Sometimes, you can’t help but wonder if starting from scratch would have been faster.

So here’s the real question: Can AI truly help us build a WordPress site from the ground up? I mean the kind of AI that’s more than just a set of if-else statements and can handle whatever custom design we throw at it.

Well…

.

.

.

Here Comes Claude 3

With Claude 3 on the scene, what once seemed like a distant dream is now very much a reality.

Let me walk you through how it works:

First, I pick the image layout I want to recreate in WordPress. This could be anything from a Figma design to a screenshot of an existing website layout you’re aiming to clone.

(The screenshot of the layout I want to recreate)
Screenshot of uploading the layout to Claude chat interface
(Upload it to Claude chat interface)

Next, I feed the AI some training data that showcase examples of how to build block patterns in WordPress.

Screenshot of uploading the training document to Claude chat interface
(Upload the training document to Claude chat interface)

(Note: I’ll explain how to craft your own training docs later on.)

Then, I instruct the AI to use the image layout as a reference and ask it for the codes needed to create a similar layout.

Screenshot of entering the prompt
(Enter the prompt)

The Prompt:

The attached markdown file are examples of block patterns in WordPress block editor.

Use it as reference to create a block pattern similar to the attached layout.

Please note that the image in the layout is a background image.

You can ignore it and replace it with a generic background color.

Make sure to put all the content on the left column only.

Please wrap the block pattern codes in code block.

(Tip: It’s a good idea to describe the layout a bit so the AI knows exactly what to do and gives you precisely what you need.)

Make sure “Claude 3 Opus” is selected and hit the “Start Chat” button.

Screenshot of starting the chat in Claude.ai

And voilà… just like that, the AI spits out codes that you can use to replicate the layout in WordPress.

The block pattern codes from Claude.ai

All that’s left to do is copy these codes and paste them into the block editor.

copying codes from Claude.ai
pasting the codes to WordPress block editor
Result of pasting the codes into block editor

Here are the codes generated by Claude 3 Opus (feel free to try this on your own site):

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"200px","left":"0px"},"blockGap":"16px"},"color":{"background":"#f5f5f5"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-background" style="background-color:#f5f5f5;padding-top:0px;padding-right:0px;padding-bottom:200px;padding-left:0px"><!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"100px","right":"30px","bottom":"100px","left":"30px"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull" style="padding-top:100px;padding-right:30px;padding-bottom:100px;padding-left:30px"><!-- wp:columns {"verticalAlignment":"center","align":"wide","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|40","left":"var:preset|spacing|40"}}}} -->
<div class="wp-block-columns alignwide are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"50%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%"><!-- wp:heading {"style":{"typography":{"textTransform":"none","fontStyle":"normal","fontWeight":"700","lineHeight":"1.5"},"spacing":{"margin":{"top":"var:preset|spacing|20","right":"0","bottom":"0","left":"0"}}},"fontSize":"big-font"} -->
<h2 class="has-big-font-size" style="margin-top:var(--wp--preset--spacing--20);margin-right:0;margin-bottom:0;margin-left:0;font-style:normal;font-weight:700;line-height:1.5;text-transform:none">BIG FONT HEADING</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30","right":"0","bottom":"var:preset|spacing|40","left":"0"}}}} -->
<p style="margin-top:var(--wp--preset--spacing--30);margin-right:0;margin-bottom:var(--wp--preset--spacing--40);margin-left:0">Ornare quam viverra orci sagittis diam phasellus vestibulum lorem sed risus ultricies sem viverra aliquet eget.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"left","orientation":"horizontal"},"style":{"spacing":{"blockGap":"var:preset|spacing|30"}}} -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"black","textColor":"white","style":{"border":{"radius":"0px"},"spacing":{"padding":{"top":"12px","right":"24px","bottom":"12px","left":"24px"}}},"className":"is-style-fill"} -->
<div class="wp-block-button is-style-fill"><a class="wp-block-button__link has-white-color has-black-background-color has-text-color has-background wp-element-button" style="border-radius:0px;padding-top:12px;padding-right:24px;padding-bottom:12px;padding-left:24px">Visit Shop</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"white","textColor":"black","style":{"border":{"radius":"0px"},"spacing":{"padding":{"top":"12px","right":"24px","bottom":"12px","left":"24px"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-black-color has-white-background-color has-text-color has-background wp-element-button" style="border-radius:0px;padding-top:12px;padding-right:24px;padding-bottom:12px;padding-left:24px">Contact Us</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"60px","right":"0","bottom":"0px","left":"0"},"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group" style="padding-top:60px;padding-right:0;padding-bottom:0px;padding-left:0"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}},"fontSize":"big"} -->
<p class="has-big-font-size" style="font-style:normal;font-weight:700">200+</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"textColor":"cyan-bluish-gray","fontSize":"small"} -->
<p class="has-cyan-bluish-gray-color has-text-color has-small-font-size" style="font-style:normal;font-weight:600">Products</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}},"fontSize":"big"} -->
<p class="has-big-font-size" style="font-style:normal;font-weight:700">500+</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"textColor":"cyan-bluish-gray","fontSize":"small"} -->
<p class="has-cyan-bluish-gray-color has-text-color has-small-font-size" style="font-style:normal;font-weight:600">Happy clients</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}},"fontSize":"big"} -->
<p class="has-big-font-size" style="font-style:normal;font-weight:700">15+</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"textColor":"cyan-bluish-gray","fontSize":"small"} -->
<p class="has-cyan-bluish-gray-color has-text-color has-small-font-size" style="font-style:normal;font-weight:600">Brands</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"50%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%"></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

A heads up: you’ll notice there are no background images. That’s because I specifically told the AI to skip over the background image part. AI isn’t quite smart enough to automatically create background images just yet, and you definitely don’t want to risk it hallucinating and throwing in a broken image link.

It’s safer to have AI ignore the images entirely or just insert a placeholder.

So, now we just need to upload the background image, do a little tweak here and there, and we’re all set!

.

.

.

Now, you might think that was just a lucky shot.

Let’s test it out again.

This time, I’m taking a layout straight from the WordPress.org site to see if we can replicate it.

Here’s the screenshot:

Let’s dive in and repeat the process.

First off, upload the screenshot of the layout. Next, load up the training documents. After that, give the AI a basic rundown of the layout so it can really hone in on what we’re trying to mimic.

The attached markdown file contains examples of block patterns in the WordPress block editor.

Use it as a reference to create a block pattern similar to the attached layout.

The layout contains 2 rows. The first row contains 3 columns. Each column has an image, title, and description. The second row contains 2 columns. The left column contains a title, description, and a button. The right column is an image.

For all the image blocks, use a placeholder instead of a real image.

Please wrap the block pattern codes in a code block.

The idea here is to feed the AI enough details so it can produce something that’s even closer to the layout we want to clone.

Let’s see how close we can get this time!

Hit ‘Start’ and let the AI do its thing.

Just a few moments later, the AI churns out the new code.

Test this out on your own site:

<!-- wp:columns {"align":"wide","style":{"spacing":{"margin":{"bottom":"60px"}}}} -->
<div class="wp-block-columns alignwide" style="margin-bottom:60px"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://via.placeholder.com/500x300" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>Design</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Create any website with flexible design tools and the power of blocks. Start with a blank canvas or choose a theme. Customize every detail—no code needed.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://via.placeholder.com/500x300" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>Build</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>See how your site will look in real time, even as you add, edit, and rearrange content—with intuitive editing and integrated features to manage it all.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://via.placeholder.com/500x300" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>Extend</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Make your site do whatever you need it to. Add a store, analytics, newsletter, social media integration; you're in control with an extensive library of plugins.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"60%"} -->
<div class="wp-block-column" style="flex-basis:60%"><!-- wp:heading -->
<h2>See what's new</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Elevate your site-building experience with WordPress 6.5. This release includes a new way to manage fonts, exciting new foundational APIs for developers, and an impressive performance boost.</p>
<!-- /wp:paragraph -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Discover WordPress 6.5</a></div>
<!-- /wp:button --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"40%"} -->
<div class="wp-block-column" style="flex-basis:40%"><!-- wp:image {"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://via.placeholder.com/400x400" alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

Now, let’s pop these codes into the WordPress block editor and see how they stack up against our original screenshot

pasting the codes to WordPress block editor

And here’s the result:

Pretty impressive, right?

It looks almost identical to the layout from the WordPress.org site. This really showcases the power of Claude 3 Opus—not just a one-hit wonder but a reliable tool for replicating designs. This method isn’t just a fluke; it’s a new frontier for web design, where you can bring any visual inspiration to life in your WordPress projects.

The potential here is huge, especially for designers looking to speed up their workflow and maintain high quality.

.

.

.

How does it work? More importantly, why does it work so well?

You might be wondering, what’s the deal with those training docs? Are they really the key to unlocking this AI magic?

Well, let’s put it to the test!

What if we tried the same prompt as before, but this time, we left out the training docs? Would the AI still be able to generate those sweet, sweet block pattern codes?

Let’s find out!

Here’s the prompt, without the training docs:

And the result?

Well, instead of block pattern codes, the AI spits out some generic HTML:

Not exactly what we were hoping for, right?

So, what gives?

It turns out, those training docs are the secret sauce, the special ingredient that makes this whole thing possible!

Inside these training docs, you’ll find step-by-step examples of how block patterns are created, along with their purpose and the specific codes that make them tick.

It’s like a crash course for the AI, teaching it the ins and outs of block pattern creation. The AI studies these examples, using them as a reference to generate any layout you throw its way. It’s like giving the AI a cheat sheet, enabling it to ace the test every single time!

Prototyping websites faster than you can say ‘reboot’!

It’s kind of like training a superhero sidekick. You teach ’em the ropes, and boom! They’re all set to help you save the day (or in this case, build awesome WordPress sites).

So, there you have it!

The training docs aren’t just some boring old files; they’re the key to unlocking the full potential of AI-powered web design. By providing the AI with a solid foundation of examples and knowledge, you’re essentially creating your own custom AI assistant, ready to tackle any layout challenge you throw its way.

Pretty mind-blowing, right?

.

.

.

How I Created My Training Docs

You can download the training docs I used right here: https://go.nathanonn.com/bwam-training-docs

Go ahead and take a peek inside. You’ll find 19 different block patterns, each one a shining example of what’s possible with WordPress. And the best part? They’re all courtesy of the WordPress Block Pattern Directory.

The WordPress block patterns directory
Ready-to-go layout to any WordPress site with a simple copy/paste

So, why did I choose these specific 19 block patterns? It’s simple: they cover pretty much every common layout you’ll find on a website. Whether you’re looking to create a hero section, a pricing table, or a testimonial showcase, these patterns have got you covered.

(Huge shoutout to Cozy Themes for sharing these gems with the world!)

Now, let’s dive into what makes these training docs so special.

For each block pattern, you’ll find:

  • The purpose of the design (What’s it for?)
  • A detailed description of the design (What’s it got?)
  • Step-by-step instructions on how to create it (How do you make it?)
  • The actual block codes (The secret recipe!)
Screenshot of a block pattern example from the training docs

By including all this info, we’re giving the AI everything it needs to learn how to write block codes like a pro.

It’s like sending the AI to block code bootcamp!

You might’ve noticed that there aren’t any images in the training docs.

There are a couple of reasons for that.

First off, you can’t actually attach images in a markdown file. But more importantly, they’re not really necessary. The purpose and description of each block pattern do a fantastic job of painting a picture for the AI, helping it “visualize” how the design should be used and what it should look like.

Plus, if we tried to include images, it would take up a ton of tokens for the AI to “read” them. We’d quickly exceed the context window limits, and nobody wants that!

(Fun fact: Claude 3 has a whopping 200k tokens of context windows, making it the perfect AI model for this kind of task.)

.

.

.

Crafting Your Own Training Docs

Now that you’ve seen the magic behind my training docs, I bet you’re itching to create your own. Don’t worry, it’s not as daunting as it might seem!

First things first, you’ll need to round up 15 to 20 block patterns that really float your boat. These could be design templates from a blocks plugin or straight from the WordPress Block Pattern Directory. The world’s your oyster!

For each block pattern, make sure you’ve got:

  • A screenshot of the block pattern design (gotta have that visual!)
  • The codes you can copy-paste into a block editor to recreate the design (the secret sauce!)

Once you’ve got your ducks in a row, it’s time to let the AI work its magic. We’ll use it to generate the purpose, description, and step-by-step instructions for each pattern.

Here’s how it’s done:

1. Say you want to include this snazzy block pattern from the directory in your training docs:

2. Upload the screenshot of the design into Claude (let the AI feast its eyes on it!)

3. Copy the block codes and paste ’em into the prompt box:

Click the “Copy pattern” button to copy the code
Paste the code into the prompt box

4. Drop this prompt into the box:

Feel free to copy the prompt here:

The attached image is the layout created in WordPress block editor using the attached block pattern codes.

Can you give me the purpose of the image, the detailed description of the image and the step-by-step instructions on how to recreate it using the block pattern codes.

Here's the structure:

PURPOSE:
(the purpose of the layout)

DESCRIPTION:
(the description of the layout)

INSTRUCTION:
(the step-by-step instructions to create the block pattern)

5. Make sure “Claude 3 Opus” is selected as the model, then smash that “Start Chat” button!

6. The AI will hit you back with the purpose, detailed description, and step-by-step instructions. It’s like magic!

7. All that’s left is to copy the AI-generated content and paste it into your training docs. Here’s the format to follow:

# {Title of the block pattern}

## PURPOSE
{insert the purpose here}

## DESCRIPTION:
{insert the description here}

## INSTRUCTIONS:
{insert the instructions here}

## BLOCK PATTERN
{insert the block pattern codes here}

Rinse and repeat until you’ve got a training docs packed with 15 to 20 block patterns that you’re totally vibing with.

Pro tip: save the file in markdown format. It’ll make it a breeze for the AI to read.

Personally, I’m all about using Obsidian to compile the training docs. It’s like the express lane for this stuff. But if you’re more of a Notion fan, go for it! Just make sure to export it as a markdown file when you’re done.

Finally, give it a test run and see if it works!

Testing out the training docs with Claude AI

Word of Advice: The AI is Only as Good as Your Training Docs

Here’s the deal: if your training docs are full of junk, the AI is gonna spit out junk right back at you.

It’s like the old saying, “garbage in, garbage out.” So, make sure you’re only including the crème de la crème of block patterns. We’re talking top-notch, cream of the crop, best of the best. If you stick to quality, the AI will deliver quality results. But if you skimp on the good stuff, well… you might end up with some less-than-stellar outputs.

.

.

.

Common pitfalls in crafting the training docs

Alright, let’s dive into some of the common pitfalls you might encounter when creating training.

Pitfall #1: Including too many block patterns in training docs

First up, let’s talk about the temptation to stuff your training docs with every block pattern under the sun. I get it, you want to give your AI a comprehensive education, and you might think that more patterns equal better performance.

But hold your horses!

There’s a catch.

You see, Claude AI, as powerful as it is, has a context window limitation of 200,000 tokens. That might sound like a lot, but when you start piling on the block patterns, those tokens get gobbled up faster than a plate of cookies at a kid’s birthday party. And when your training docs are too long, there’s less room for the AI to generate new content. It’s like trying to pour a gallon of milk into a pint-sized glass – it just won’t fit!

When you try to juggle too many block patterns in your AI’s training…and hope it doesn’t drop the ball!

So, how do you find the right balance?

It’s all about quality over quantity.

Instead of throwing every pattern you can find into the mix, be selective. Choose a diverse range of patterns that cover the essential layout types you need. Aim for a target range of block patterns that won’t overload the AI’s context window. And don’t be afraid to experiment!

Find that sweet spot that works best for your needs.

But wait, there’s more!

Pitfall #2: Using overly complex block patterns

Another pitfall to watch out for is using overly complex block patterns.

I know, I know, it’s tempting to showcase your mad skills with advanced layout techniques. You might think that complexity will lead to more creative AI outputs. But trust me, it’s a trap!

Complex block patterns are like token-hungry monsters.

They’ll devour those precious tokens, leaving less space for the AI to generate content. Plus, overly complicated patterns can lead to confusion and inconsistency in the AI’s outputs. It’s like trying to teach a toddler calculus – it’s just not gonna stick.

“When you said ‘feed the machine’, I didn’t think you meant my entire context window!”

The key here is to keep it simple and focused.

Clarity and simplicity are your friends when it comes to block patterns.

The AI can learn effectively from straightforward examples that demonstrate key layout concepts. Remember, the goal of training docs is to teach the AI the fundamentals of block patterns, not to overwhelm it with intricate designs.

When selecting block patterns, choose ones that:

  • Clearly illustrate the layout concepts you want the AI to learn.
  • Opt for patterns with clean, well-structured code.
  • Avoid patterns with excessive customization or complex nested structures.

Think of it like building a solid foundation – start with the basics and let the AI build upon that knowledge.

And here’s the kicker: simple, focused block patterns can lead to impressive AI results. Don’t underestimate the power of simplicity in AI training. Trust in the AI’s ability to learn and generalize from basic examples. You might be surprised at the creative solutions it comes up with!

As you embark on this journey of creating training docs, remember that it’s an iterative process.

Your training docs are a work in progress, and that’s okay!

Embrace the importance of continuous learning and adaptation. Experiment, learn from the AI’s outputs, and refine your approach over time. It’s all part of the exciting adventure of AI-assisted web design.

.

.

.

Wrapping Up the AI Adventure

Whew! What a journey we’ve been on, exploring the incredible potential of AI in WordPress web design.

We’ve seen how Claude 3 Opus can take a simple screenshot and turn it into a fully functional block pattern, making our design dreams a reality. We’ve discovered the secret sauce behind this AI magic – the training docs that teach our AI sidekick everything it needs to know.

And we’ve navigated the common pitfalls, learning how to create effective training docs that bring out the best in our AI partner.

But here’s the thing – this is just the beginning of the adventure.

The world of AI-assisted web design is constantly evolving, and there’s so much more to discover. As you dive deeper into this exciting frontier, remember to embrace the spirit of experimentation and continuous learning.

Don’t be afraid to try new things, to push the boundaries of what’s possible with AI and WordPress.

And most importantly, have fun with it!

Building websites with AI is like having a super-powered sidekick by your side. It’s a wild ride, but it’s also an incredible opportunity to unleash your creativity and bring your wildest design ideas to life.

So, what are you waiting for?

Grab your training docs, fire up Claude 3 Opus, and let’s see what kind of web design magic we can create together!

Who knows – you might just revolutionize the way we build websites, one AI-powered block pattern at a time.

Happy building, and may the AI force be with you!