list_styles

List all available style presets. Each preset defines a complete visual theme — colors, fonts, spacing, border radius, and shadows — that is applied to all blocks in a composed page.

Annotations

Annotation	Value
readOnlyHint	true
destructiveHint	false
openWorldHint	false

Parameters

None.

Available Styles

Style ID	Name	Vibe
dark-minimal	Dark Minimal	Dark background, clean typography, subtle accents, no shadows
gradient-bold	Gradient Bold	Vibrant gradients, large typography, bold CTAs
clean-corporate	Clean Corporate	White background, blue accents, professional and trustworthy
playful	Playful	Rounded corners, bright colors, fun and approachable
elegant	Elegant	Serif fonts, muted palette, generous whitespace

Return format

Returns each style preset with:

• ID — used in compose_page
• Name — human-readable label
• Description — the visual direction
• Fonts — heading and body font families
• Colors — primary, background, and text colors

Example

You: "What styles are available?"

Claude: Calls list_styles and presents the five preset options with their descriptions and color palettes.

You: "Use the dark minimal style for my page"

Claude: Passes style: "dark-minimal" to compose_page.

Notes

• Styles use the Tailwind CSS CDN with custom configuration. Colors are mapped to semantic tokens (bg-primary, text-textMuted, etc.) so blocks automatically adapt to any style.
• Google Fonts are loaded automatically based on the style's font families.
• You can combine any style with any set of blocks — they're fully interchangeable.
• If you need something beyond the presets, Claude can generate custom HTML with any design you describe. Styles are a shortcut, not a constraint.