In recent years, large language models such as Claude and ChatGPT have begun permeating the web-production field. In LP (landing page) production especially, the workflow of having AI generate HTML/CSS and incorporating it into WordPress has become a realistic option. This article shares concrete steps for integrating AI coding into WordPress production, along with insights gained in the field.
The Impact of AI Coding on WordPress Production
In the traditional WordPress production flow, you had to proceed in order from design comp to coding, theme integration, and block conversion. The most time-consuming parts of this are "HTML coding" and "conversion to blocks." Introducing AI coding can dramatically shorten these two steps.
Specifically, you put a Figma design comp into words, hand it to Claude, and have it generate HTML/CSS section by section. What matters here is prompt design that, from the start, keeps in mind a structure editable in the WordPress block editor. For example, include instructions like "use semantic HTML5 tags and separate each section with a section element" and "use CSS variables instead of inline styles."
Practical Workflow: Generating LP HTML with Claude
First, design the prompt you give Claude. The elements of an effective prompt are as follows.
- A clear definition of the page's purpose and target user (e.g., "a yoga-studio LP for women in their 30s")
- Specifying the section structure (hero, problem statement, solution, pricing, FAQ, CTA, etc.)
- The design direction (color palette, fonts, sense of spacing)
- Technical constraints (responsive support, use of CSS Grid/Flexbox, placeholder images)
- Specifying an output format that considers WordPress compatibility
Claude generates each section's HTML/CSS according to your instructions. What matters here is to repeat generation, review, and revision section by section rather than generating everything at once. Keeping each section within about 1,500 lines stabilizes accuracy.
Converting Generated HTML into WordPress Blocks
If you paste the generated HTML directly into WordPress, it is treated as a "Custom HTML" block, leaving it in a state the client cannot edit. There are two approaches here.
The first is manual conversion. You understand the structure of the generated HTML and replace it by hand with the corresponding Gutenberg blocks (paragraph, heading, columns, group, etc.). It is reliable but time-consuming.
The second is automatic conversion using a plugin. With a tool like AI HTML to Blocks Importer, you can automate everything from HTML structure analysis to block conversion. It converts Flex/Grid layouts into Column blocks and text content into paragraph and heading blocks, importing them into the editor in an editable state. The conversion accuracy is not perfect, but it cuts working time by 60–70% compared with rebuilding from scratch.
Checkpoints to Ensure Quality
Rather than using AI-generated code as-is, review it from the following perspectives.
- Accessibility: Check that alt attributes, aria-labels, and the heading hierarchy are appropriate. Because AI sometimes skips heading levels, always check the h1 → h2 → h3 order.
- Responsive support: Check that the layout does not break not only on desktop but also at 375px width (equivalent to iPhone SE). Pay special attention to Grid column counts and font-size clamp() settings.
- Performance: Check for unnecessary CSS, duplicate style definitions, and excessive nesting. Because AI tends to err on the safe side and write verbose code, remove unnecessary parts.
- Security: Check for external resource loading, inline JavaScript, and unknown CDN links. Always remove unnecessary script tags in the production environment.
Operational Tips from the Field
Finally, here are insights gained from actually adopting this workflow.
Templating your prompts is essential. Rather than writing a prompt from scratch for each project, preparing templates by industry (beauty, food, real estate, etc.) dramatically improves the accuracy of the first HTML generation. Include color rules, baseline spacing values, and font-size steps in the template.
Also, the efficient approach to dialogue with Claude is to run the "generate → review → revise" cycle about three times. Settle the broad strokes on the first pass, adjust details on the second, and make final fine-tuning on the third. Four or more iterations tend to yield diminishing returns.
Theme compatibility also needs consideration. When using a feature-rich theme like SWELL, including in the prompt an instruction to use the theme's design tokens (custom properties) makes the converted look blend naturally with the whole site. In particular, matching the color, font-family, and border-radius values to the theme's design is important.
The AI coding × WordPress workflow is still developing, but its effect in reducing production effort is already proven. Rather than aiming for perfect automation, the hybrid approach of leaving 70% to AI and having humans finish the remaining 30% is the most practical method at present.