/preview-designs
Generate or regenerate design preview options for a site
$ npx -y skills add Automattic/wordpress-agent-skills --agent claude-codeHow it fires
How this command gets triggered: by you, by Claude, or both.
- Fires itselfClaude auto-loads it when your prompt matches the work.
- You can call itInvoke it directly when you want it.
- Slash command
/preview-designs
Context preview
What this command does when you run it.
Generate or regenerate design preview options for a site
Command definition
preview-designs.mddescription: Generate or regenerate design preview options for a site
argument-hint: "<site description or 'regenerate'>"
Preview Designs
> This command uses the `site-specification` skill.
Generate 3 distinct visual design directions for a website theme. Use this to explore new design options or regenerate options for an existing specification.
Trigger
User runs `/preview-designs` or asks to see design options, explore different directions, or regenerate design previews.
Inputs
If `$ARGUMENTS` contains a description:
- Extract site specifications using the `site-specification` skill
- Generate design previews based on those specs
If `$ARGUMENTS` is empty or "regenerate":
- Check if there's an existing site specification from the current conversation
- If yes, regenerate 3 NEW design directions (different from any previously shown)
- If no, ask: "Describe the site you want designs for, or share an existing site specification."
Design Generation
You are a world-class web designer tasked with creating 3 distinct visual design directions for a website theme.
Technical Requirements
Each design preview MUST:
- Be a complete, self-contained HTML document with inline CSS in a `<style>` tag in the `<head>`
- Include NO external dependencies (no CDN links, no JavaScript except for UI controls)
- **ABSOLUTELY NO STOCK IMAGE URLS**: Only use `<img>` tags, background images, or external image URLs if explicitly provided by the user.
- Use Google Fonts via `<link>` tag (preferred over web-safe fonts for distinctive design)
- Fill the viewport (use vh/vw units, min-height: 100vh)
- Include realistic placeholder content appropriate for the site type
- Be visually complete — sections should be cohesive
- Use CSS only for all styling
- Include CSS animations/transitions that showcase the design's motion personality (e.g., hero entrance animation, hover effects on nav items, subtle ambient motion like floating shapes or gradient shifts). This gives the user a feel for the motion direction alongside color and typography
- Provide clear, self-explanatory class naming so another model can build upon it
Image Handling
**If the user provided images**, use them in the design previews:
- **Logo**: If a logo file exists, include it in the header of every design direction. This is non-negotiable — users expect to see their logo.
- **Hero image**: Choose the most hero-appropriate photo(s) from the user's images (e.g., a storefront, interior, hero product shot) and incorporate it into the hero section. Different directions can use the same image in different ways (full-bleed background with overlay, framed/inset, partial coverage, etc.), or could use different images if multiple are suitable. The key is to showcase the user's actual visuals in the design options, not just placeholders.
- Reference user images using relative paths (e.g., `src="site_logo.png"`) since they are co-located in the design directory.
**If no user images were provided**, use CSS gradients, color blocks, and typography to convey atmosphere. Don't let missing images block design exploration.
Phase 1: Plan Direction Briefs
Before generating any HTML, plan 3 **fundamentally distinct** aesthetic directions grounded in the site's topic, industry, and audience.
**Planning Process:** 1. **Analyze the subject**: What is the site about? What industry, culture, community, or tradition does it belong to? Who is the audience and what are their expectations? 2. **Explore visual worlds**: Ask yourself: "What are the different visual worlds this site could inhabit?" Every industry has multiple authentic aesthetic territories. For example:
- A **craft brewery** could inhabit: taproom warmth (wood, amber light, hand-lettered chalk), label-art maximalism (illustrated, colorful, Victorian-tinged), or industrial grain-and-steel (raw concrete, copper pipes, utilitarian type)
- A **law firm** could inhabit: courtroom gravitas (dark wood, gold leaf, classical serif), modernist confidence (glass-and-steel minimalism, Swiss typography), or neighborhood counsel (approachable, warm, editorial clarity)
- A **yoga studio** could inhabit: Zen monastery stillness (stone, negative space, calligraphy), tropical retreat lushness (verdant greens, natural textures, flowing forms), or athletic precision (clean lines, energetic accents, bold sans-serif)
3. **Research visual traditions**: For each world, identify real-world visual languages — materials, spaces, cultural artefacts, print traditions, architectural styles — that authentically inform the aesthetic. Think like a human designer building a mood board for this exact brief. 4. **Generate topic-grounded directions**: From those authentic visual traditions, identify 3–6 aesthetic directions. Each should represent a genuinely different interpretation of the site's identity — not a generic style imposed from outside. **Vary across multiple axes simultaneously — not just color swaps on the same layout.** Different color temperature, different typographic voice, different spatial composition, different emotional register. 5. **Select 3 most distinct directions**: Choose the 3 options that differ most across all dimensions.
**Anti-patterns — do NOT produce directions that:**
- Use generic palettes (purple gradients, safe blue-gray corporate, muted pastels that could be anything)
- Default to generic fonts (Inter, Roboto, Open Sans) — every direction should have a distinctive typographic voice
- Reuse the same hero layout for all 3 — each direction MUST use a different hero composition
- Feel topic-agnostic — if you could swap the site topic and the direction still works unchanged, it's too generic. Rework it.
**For each direction, define:**
- **Name**: Evocative title that captures the aesthetic (e.g., "Warm Heritage", "Bold Industrial", "Quiet Confidence")
- **Vision**: A rich, evocative paragraph (3-5 sentences) describing the complete design atmosphere. What does a
Read more
description: Generate or regenerate design preview options for a site argument-hint: "<site description or 'regenerate'>"
Preview Designs
> This command uses the `site-specification` skill.
Generate 3 distinct visual design directions for a website theme. Use this to explore new design options or regenerate options for an existing specification.
Trigger
User runs `/preview-designs` or asks to see design options, explore different directions, or regenerate design previews.
Inputs
If `$ARGUMENTS` contains a description:
- Extract site specifications using the `site-specification` skill
- Generate design previews based on those specs
If `$ARGUMENTS` is empty or "regenerate":
- Check if there's an existing site specification from the current conversation
- If yes, regenerate 3 NEW design directions (different from any previously shown)
- If no, ask: "Describe the site you want designs for, or share an existing site specification."
Design Generation
You are a world-class web designer tasked with creating 3 distinct visual design directions for a website theme.
Technical Requirements
Each design preview MUST:
- Be a complete, self-contained HTML document with inline CSS in a `<style>` tag in the `<head>`
- Include NO external dependencies (no CDN links, no JavaScript except for UI controls)
- **ABSOLUTELY NO STOCK IMAGE URLS**: Only use `<img>` tags, background images, or external image URLs if explicitly provided by the user.
- Use Google Fonts via `<link>` tag (preferred over web-safe fonts for distinctive design)
- Fill the viewport (use vh/vw units, min-height: 100vh)
- Include realistic placeholder content appropriate for the site type
- Be visually complete — sections should be cohesive
- Use CSS only for all styling
- Include CSS animations/transitions that showcase the design's motion personality (e.g., hero entrance animation, hover effects on nav items, subtle ambient motion like floating shapes or gradient shifts). This gives the user a feel for the motion direction alongside color and typography
- Provide clear, self-explanatory class naming so another model can build upon it
Image Handling
**If the user provided images**, use them in the design previews:
- **Logo**: If a logo file exists, include it in the header of every design direction. This is non-negotiable — users expect to see their logo.
- **Hero image**: Choose the most hero-appropriate photo(s) from the user's images (e.g., a storefront, interior, hero product shot) and incorporate it into the hero section. Different directions can use the same image in different ways (full-bleed background with overlay, framed/inset, partial coverage, etc.), or could use different images if multiple are suitable. The key is to showcase the user's actual visuals in the design options, not just placeholders.
- Reference user images using relative paths (e.g., `src="site_logo.png"`) since they are co-located in the design directory.
**If no user images were provided**, use CSS gradients, color blocks, and typography to convey atmosphere. Don't let missing images block design exploration.
Phase 1: Plan Direction Briefs
Before generating any HTML, plan 3 **fundamentally distinct** aesthetic directions grounded in the site's topic, industry, and audience.
**Planning Process:** 1. **Analyze the subject**: What is the site about? What industry, culture, community, or tradition does it belong to? Who is the audience and what are their expectations? 2. **Explore visual worlds**: Ask yourself: "What are the different visual worlds this site could inhabit?" Every industry has multiple authentic aesthetic territories. For example:
- A **craft brewery** could inhabit: taproom warmth (wood, amber light, hand-lettered chalk), label-art maximalism (illustrated, colorful, Victorian-tinged), or industrial grain-and-steel (raw concrete, copper pipes, utilitarian type)
- A **law firm** could inhabit: courtroom gravitas (dark wood, gold leaf, classical serif), modernist confidence (glass-and-steel minimalism, Swiss typography), or neighborhood counsel (approachable, warm, editorial clarity)
- A **yoga studio** could inhabit: Zen monastery stillness (stone, negative space, calligraphy), tropical retreat lushness (verdant greens, natural textures, flowing forms), or athletic precision (clean lines, energetic accents, bold sans-serif)
3. **Research visual traditions**: For each world, identify real-world visual languages — materials, spaces, cultural artefacts, print traditions, architectural styles — that authentically inform the aesthetic. Think like a human designer building a mood board for this exact brief. 4. **Generate topic-grounded directions**: From those authentic visual traditions, identify 3–6 aesthetic directions. Each should represent a genuinely different interpretation of the site's identity — not a generic style imposed from outside. **Vary across multiple axes simultaneously — not just color swaps on the same layout.** Different color temperature, different typographic voice, different spatial composition, different emotional register. 5. **Select 3 most distinct directions**: Choose the 3 options that differ most across all dimensions.
**Anti-patterns — do NOT produce directions that:**
- Use generic palettes (purple gradients, safe blue-gray corporate, muted pastels that could be anything)
- Default to generic fonts (Inter, Roboto, Open Sans) — every direction should have a distinctive typographic voice
- Reuse the same hero layout for all 3 — each direction MUST use a different hero composition
- Feel topic-agnostic — if you could swap the site topic and the direction still works unchanged, it's too generic. Rework it.
**For each direction, define:**
- **Name**: Evocative title that captures the aesthetic (e.g., "Warm Heritage", "Bold Industrial", "Quiet Confidence")
- **Vision**: A rich, evocative paragraph (3-5 sentences) describing the complete design atmosphere. What does a
This repository contains early prototypes of Agent Skills for building WordPress themes/sites and easily sharing them with the world.
Repo: Automattic/wordpress-agent-skills
Other commands on automattic-wordpress-agent-skills.
- /design-site
Design a WordPress site, starting with a clear design direction and style tokens, then intial page layouts, followed by a full custom theme build with content pages deployed to a local Studio site
Open command - /quick-build
Creates a WordPress block theme from a description with an index.html landing page template and deploys it to a local Studio site
Open command - /create-site
Create a WordPress block theme from a description and deploy it to a local Studio site
Open command