skills.rest
dr-robert-li
dr-robert-liCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

build-visual

Generate a WordPress FSE block theme from HTML/CSS exports or screenshots.

27|1|Updated Feb 16, 2026
Search Tags:#automation#design to code#wordpress#theme development#fse#block theme
One-click install
npx skills add https://github.com/dr-robert-li/cowork-wordpress-expert --skill build-visual
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: build-visual
Source: https://github.com/dr-robert-li/cowork-wordpress-expert/tree/main/skills/build-visual
Command: npx skills add https://github.com/dr-robert-li/cowork-wordpress-expert --skill build-visual

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires wp-cli, docker-mysql-running, python3, curl, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill automates the creation of custom WordPress Full Site Editing (FSE) block themes directly from visual design inputs, eliminating the need for manual coding and theme development.

Core Features & Use Cases

  • Design-to-Theme Conversion: Translates visual designs (HTML/CSS exports or screenshots) into a fully functional WordPress FSE theme.
  • Automated Scaffolding: Generates all necessary theme files, including style.css, theme.json, templates, and parts.
  • Use Case: You have a Figma design for a client's new website. Use this Skill to generate a complete, installable WordPress theme that matches the design precisely, saving days of development time.

Quick Start

Generate a custom WordPress FSE block theme from the design files located in the './my-design-export' directory.

Frequently Asked Questions about build-visual

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert a visual design export into a custom WordPress FSE block theme?▼

To convert visual designs into a WordPress FSE block theme, this Skill extracts design tokens from HTML/CSS exports or screenshots and automatically scaffolds theme files like style.css and theme.json.

Do I need WP-CLI and Docker to generate an FSE theme from screenshots?▼

Yes, generating an FSE theme requires WP-CLI and Docker for certain operations, alongside Python3 and curl, to accurately process visual inputs and scaffold block markup.

What files are included when scaffolding a WordPress block theme from a design?▼

Scaffolding a WordPress block theme generates essential files including style.css, theme.json, templates, and parts, while also bundling Google Fonts and creating block markup.

Can I use an HTML and CSS export to create a Full Site Editing theme?▼

Yes, you can use an HTML and CSS export to create a Full Site Editing theme by extracting design tokens from the export to build matching templates and parts.

What's the best way to automate generating WordPress theme files from a Figma design?▼

The best way to automate WordPress theme generation from a Figma design is processing its visual export directory to extract tokens, bundle Google Fonts, and scaffold FSE block markup.

Are there limitations when translating screenshots into WordPress theme templates?▼

A limitation when translating screenshots into WordPress theme templates is the dependency on specific environments, requiring Docker and WP-CLI to execute the automated scaffolding and conversion operations.

Related Skills

Explore More Design & Creative Skills→
artisanworkshopartisanworkshop
3

wp-wpcli-and-ops

Execute WP-CLI commands for safe WordPress operational changes.

Official
Intermediate
RebelliousSmileRebelliousSmile
1

wp-blocks

Validate WordPress block markup by simulating editor behavior with Playwright.

Community
Advanced
HungNthHungNth

wp-performance

Profile WordPress backend performance using WP-CLI and Server-Timing data.

Community
Advanced
PMDevSolutionsPMDevSolutions
16

canva-to-fse-autonomous-workflow

Convert Canva HTML/CSS exports into WordPress FSE themes with automated validation.

Official
Advanced