The Ultimate AI Prompt for Building Professional WordPress FSE Themes
Here is the exact prompt I used in my YouTube video to generate a professional WordPress Full Site Editing (FSE) theme using ChatGPT and Claude. Feel free to use it as a starting point and customize it for your own projects.
PLAINTEXT
# WordPress Full Site Editing Demo Theme – Pet Grooming Landing Page
Create a complete **WordPress Block Theme (Full Site Editing)** named **Happy Paws Grooming**.
This is for a YouTube tutorial demonstrating Claude's design abilities, so the implementation should look professional while remaining intentionally small in scope.
## Goal
Build a modern, responsive **one-page website** for a fictional pet grooming business.
Do NOT build additional pages.
The homepage should include only:
1. Hero
2. Services
3. Why Choose Us
4. Before & After Gallery
5. Testimonials
6. Call To Action
7. Footer
Keep the design elegant, warm, and friendly.
---
## Technical Requirements
This must be a real WordPress Block Theme.
Use Full Site Editing.
Include the proper theme structure.
Example:
```
happy-paws/
style.css
theme.json
functions.php
/templates
index.html
home.html
/parts
header.html
footer.html
/patterns
hero.php
services.php
why-us.php
gallery.php
testimonials.php
cta.php
/assets
/css
styles.css
/images
```
Everything should be importable into WordPress as a theme.
---
## CSS Rules
Very important:
DO NOT use inline CSS.
DO NOT place style="" attributes anywhere.
DO NOT generate large blocks of CSS inside template files.
Store ALL custom styling inside:
```
assets/css/styles.css
```
Only enqueue this stylesheet through functions.php.
Keep CSS organized with comments such as:
```
Hero
Buttons
Services
Testimonials
Footer
Responsive
```
---
## Theme.json
Use theme.json properly.
Define:
* color palette
* typography
* spacing
* button defaults
* layout widths
* border radius
* global styles
Use CSS only when theme.json is not sufficient.
---
## Design Style
Modern.
Premium.
Clean.
Lots of whitespace.
Rounded corners.
Soft shadows.
Large photography.
Subtle gradients.
Friendly typography.
Nothing flashy.
The business should feel trustworthy and upscale.
---
## Color Palette
Primary:
#5B7CFA
Accent:
#FFB547
Background:
#FAFAFA
Dark Text:
#202124
Muted:
#6B7280
White Cards
---
## Fonts
Headings:
Poppins
Body:
Inter
---
## Sections
### Hero
Large headline
Example:
"Professional Grooming For Happy Pets"
Supporting text.
Two buttons:
Book Appointment
View Services
Large dog image on the right.
---
### Services
Four cards:
Dog Bath
Full Groom
Nail Trimming
Spa Package
Simple icons.
---
### Why Choose Us
Three feature cards.
Examples:
Certified Groomers
Gentle Care
Convenient Scheduling
---
### Before & After
Simple four-image responsive grid using placeholder images.
---
### Testimonials
Three testimonial cards.
Customer name.
Pet name.
Five stars.
---
### CTA
Large centered section.
Headline.
Button:
Schedule Your Visit
---
### Footer
Logo
Phone
Email
Address
Social icons
Copyright
---
## Responsiveness
Fully responsive.
Desktop
Tablet
Mobile
Use modern CSS.
Avoid unnecessary wrappers.
---
## Code Quality
Write clean production-quality code.
Use semantic HTML.
Keep markup organized.
Comment major sections.
Avoid duplicated CSS.
Keep CSS maintainable.
---
## WordPress Best Practices
Use block patterns wherever appropriate.
Follow WordPress coding standards.
Use proper enqueueing.
Do not hardcode unnecessary values.
Do not install plugins.
Do not use page builders.
No Bootstrap.
No Tailwind.
No inline JavaScript.
No inline CSS.
---
## Images
Use obvious placeholder image references with descriptive filenames such as:
```
hero-dog.jpg
before-after-1.jpg
testimonial-dog.jpg
```
Do not embed base64 images.
---
## Deliverable
Generate a complete importable WordPress Block Theme that can be zipped, installed, activated, and immediately display the finished one-page website.
Prioritize clean architecture and maintainability over adding extra features.
