styles

Slidev Styles

Brand discovery, theme generation, and style validation for Slidev presentations.

Brand Discovery Pipeline Overview

The full brand discovery workflow has four stages:

1. Navigate to the brand site using Playwright MCP tools
2. Extract CSS variables and computed styles via browser_evaluate
3. Parse extracted values into a brand config JSON object
4. Generate the Slidev theme from the brand config

For step-by-step Playwright extraction details, see references/discovery-pipeline.md. For theme generation details, see references/theme-generation.md. For validation details, see references/validation-checklist.md.

Playwright MCP Tools

Use these tools during brand extraction:

Tool	Purpose
browser_navigate	Open the brand site URL
browser_evaluate	Run JavaScript to extract CSS vars and computed styles
browser_take_screenshot	Capture rendered slides or pages for visual validation
browser_snapshot	Get accessibility tree snapshot for structural inspection
browser_close	Close the browser session when extraction is complete

Always call browser_close after extraction to release resources.

Brand Config JSON Schema

Produce a brand config JSON object after extraction. All fields are optional; populate what is available.

{
  "colors": {
    "primary": "#hex",
    "secondary": "#hex",
    "accent": "#hex",
    "background": "#hex",
    "text": "#hex",
    "error": "#hex",
    "success": "#hex"
  },
  "fonts": {
    "heading": "Font Name",
    "body": "Font Name",
    "code": "Monospace Font"
  },
  "spacing": {
    "slide-padding": "value",
    "section-gap": "value"
  },
  "logo": {
    "url": "path/to/logo",
    "position": "top-left|top-right"
  }
}

Save the brand config as brand-config.json in the project root before proceeding to theme generation.

Theme Generation Overview

Convert the brand config to a Slidev theme by:

1. Creating styles/index.css with CSS custom properties mapped from brand config colors and spacing
2. Configuring UnoCSS theme extensions in uno.config.ts (or vite.config.ts) with brand colors and font stacks
3. Adding UnoCSS shortcut classes for common slide patterns (headings, callouts, code blocks)
4. Loading fonts via Google Fonts import in styles/index.css or placing font files in public/fonts/
5. Creating a global components/Logo.vue component for logo placement