AI Styling

When the Pattern Library can’t handle your styling request (confidence <70%), WyvernPress seamlessly falls back to AI-powered CSS generation. This guide covers everything you need to know about AI styling.

How AI Styling Works

The Fallback Flow

You describe styling → “Glassmorphism card with animated gradient border”
Pattern Library check → No pattern matches with sufficient confidence
AI generation triggered → Request sent to configured AI provider
CSS generated → AI analyzes your description and block context
Result cached → Future identical requests return instantly

When AI is Used

AI generation is triggered when:

Pattern Library confidence score is below 70%
Request includes complex or creative styling terms
Multiple styling concepts combined (e.g., “gradient + animation + hover”)
Request uses specific brand colors or custom values

Configuring AI

OpenRouter Setup

WyvernPress uses OpenRouter to access AI models. OpenRouter provides a single API for multiple AI providers.

Steps to configure:

Create account at openrouter.ai
Generate an API key
In WordPress: WyvernPress → Settings → AI Configuration
Enter your OpenRouter API key
Select your preferred model
Save changes

Supported Models

Model	Best For	Speed	Cost
Claude 3 Haiku	Fast, simple requests	Fast	$
Claude 3 Sonnet	Balanced quality/speed	Medium	$$
GPT-4 Turbo	Complex creative requests	Medium	$$$
Llama 3 70B	Open-source alternative	Medium	$

No API Key Mode

Without an API key, WyvernPress operates in Pattern Library-only mode:

Pattern Library works normally (60% of requests)
Complex requests show a suggestion to configure AI or rephrase
Zero cost, but limited to pre-built patterns

Writing Effective AI Prompts

Be Specific About Styles

The AI understands CSS concepts. Be explicit:

Good prompts:

Background gradient from #007cba to #6366f1, white text,
24px border-radius, 24px padding, subtle box-shadow

Glassmorphism effect: semi-transparent white background,
backdrop-filter blur, thin white border, soft shadow

Avoid vague prompts:

Make it look modern  ← Too vague
Make it pretty       ← No styling information
Style it nicely      ← AI can't interpret this

Describe Visual Effects

For animations and effects, describe the behavior:

On hover: lift up 4px, increase shadow depth,
smooth 0.2s transition

Animated gradient border that shifts colors continuously,
using blue, purple, and pink

Pulse animation on the button that subtly scales it
up and down to draw attention

Reference Design Trends

AI understands common design terms:

Term	What AI Generates
Glassmorphism	Frosted glass effect with backdrop-blur
Neumorphism	Soft UI with inset/outset shadows
Brutalist	Bold, raw, high-contrast design
Minimal	Clean, lots of whitespace
Gradient mesh	Complex multi-color gradients
Neon glow	Bright colors with glow effects

Example:

Neumorphism button with soft shadows,
subtle pressed state on click

Specify Responsiveness

Include responsive requirements:

Card that stacks vertically on mobile,
horizontal on desktop, with appropriate
padding adjustments

Cost Optimization

Pattern Library First

The Pattern Library handles 60% of requests at zero cost. To maximize pattern usage:

Use common terms: “blue”, “shadow”, “rounded” match patterns well
Simple requests first: Build complex styles incrementally
Check the pattern reference: Know what patterns exist

Caching

AI results are cached:

Cache duration: 24 hours (configurable)
Cache key: Prompt + block context hash
Cache storage: Redis (if available) or WordPress transients

What this means:

Identical requests are instant and free
Slight prompt variations create new cache entries
Cache clears when plugin updates

Request Batching

Style similar blocks together to maximize cache hits:

Style one button with AI
Copy that button to other locations
All copies use the same cached CSS

Model Selection

Choose cost-effective models:

Scenario	Recommended Model	Why
Simple styling	Claude 3 Haiku	Cheapest, fast
Complex layouts	Claude 3 Sonnet	Better understanding
Creative/artistic	GPT-4 Turbo	Most creative
High volume	Llama 3 70B	Very affordable

Advanced Techniques

Multi-State Styling

Request all states at once:

Button with three states:
- Default: Blue background, white text, subtle shadow
- Hover: Darker blue, lifted 2px, larger shadow
- Active: Even darker, pressed down 1px, minimal shadow
All with 0.2s smooth transitions

Pseudo-Element Styling

AI can generate ::before and ::after styles:

Card with decorative corner accents using
::before and ::after pseudo-elements,
small triangles in the top-left and bottom-right

Complex Animations

Describe keyframe animations:

Loading spinner animation: circular element
that rotates 360 degrees continuously with
a gradient stroke that also animates

CSS Custom Properties

Request variable-based CSS for easy theming:

Button using CSS variables for colors:
--button-bg, --button-text, --button-hover
so I can easily change themes later

Response Format

AI responses include:

{
  "css": {
    "background": "linear-gradient(135deg, #007cba, #6366f1)",
    "color": "#ffffff",
    "padding": "24px",
    "border-radius": "12px"
  },
  "source": "ai",
  "model": "claude-3-haiku",
  "confidence": 95,
  "tokens_used": 150,
  "cached": false
}

Understanding the Response

Field	Description
`css`	Generated CSS properties
`source`	”ai” or “pattern”
`model`	Which AI model was used
`confidence`	How confident AI is in the result
`tokens_used`	API tokens consumed
`cached`	Whether result came from cache

Accessibility in AI Styling

Automatic Checks

AI-generated CSS is validated for:

Color contrast: Meets WCAG 2.1 AA (4.5:1 for text)
Focus visibility: Interactive elements have visible focus states
Motion preferences: Animations respect prefers-reduced-motion
Touch targets: Buttons/links meet minimum 44x44px

Accessibility Warnings

If AI generates potentially inaccessible CSS:

⚠️ Accessibility Warning
The generated colors have a contrast ratio of 3.2:1.
WCAG AA requires 4.5:1 for normal text.

Suggestions:
- Darken the text color to #1a1a1a
- Or lighten the background to #f5f5f5

Requesting Accessible Styles

Include accessibility in your prompts:

Blue button with high contrast white text,
visible focus ring, and respects reduced-motion
preferences for hover animation

Troubleshooting

”AI Generation Failed”

Causes:

Invalid or expired API key
API rate limit exceeded
Network connectivity issues
Model temporarily unavailable

Solutions:

Verify API key in Settings
Check OpenRouter dashboard for usage limits
Try a different model
Wait a few minutes and retry

Slow Responses

Causes:

Complex prompts
High demand on AI service
Network latency

Solutions:

Simplify your prompt
Try Claude 3 Haiku (fastest)
Check if result is in cache
Build complex styles incrementally

Unexpected CSS Output

Causes:

Vague or ambiguous prompt
Context misunderstanding
Model limitations

Solutions:

Be more specific in your description
Include exact values (colors, sizes)
Review and edit the generated CSS
Try a different model

High Costs

Causes:

Using expensive models
Not utilizing Pattern Library
Cache misses

Solutions:

Switch to Claude 3 Haiku
Use Pattern Library terms when possible
Reuse styled blocks via copy/paste
Set usage alerts in OpenRouter

Usage Monitoring

In-Plugin Stats

WyvernPress → Settings → Usage:

Total AI requests this month
Pattern Library hit rate
Cache hit rate
Estimated costs

OpenRouter Dashboard

Monitor detailed usage at openrouter.ai/activity:

Per-model usage
Token consumption
Cost breakdown
Rate limit status

Best Practices Summary

Pattern Library first: Use common CSS terms for instant, free results
Be specific: Include colors, sizes, and exact values
Use design terms: AI understands “glassmorphism”, “neumorphism”, etc.
Request all states: Include hover, focus, and active states together
Build incrementally: Complex styles in steps, not all at once
Monitor usage: Track costs in OpenRouter dashboard
Use caching: Reuse styled blocks to maximize cache hits
Check accessibility: Verify contrast and focus states

Next Steps

Pattern Library Reference → - See all instant patterns
CSS Generation Details → - How CSS is created
Custom Patterns → - Add your own patterns
API Integration → - Programmatic access