aico-frontend-style-extraction

name

aico-frontend-style-extraction

description

Extract design tokens (colors, typography, spacing, effects) from reference website or screenshot to create project design system. UNIQUE VALUE: Creates standardized design-system.md file with all design tokens extracted systematically. Use this skill when: - User shares reference website URL and wants to extract its style - User provides screenshot or image and asks to "extract design", "extract style" - Running /frontend.init and need to create design system from reference - User asks to "create design system", "extract colors", "extract typography" - Need to establish consistent design tokens before starting frontend work Methods: URL (via Playwright MCP screenshot) or direct screenshot analysis Output: ALWAYS write to docs/reference/frontend/design-system.md

Style Extraction

Language Configuration

Before generating any content, check aico.json in project root for language field to determine the output language. If not set, default to English.

Process

1. Get reference material:
   • URL: Use Playwright MCP to take screenshot, then analyze
   • Screenshot: Analyze directly
   • Description: Generate tokens based on style keywords
2. Extract systematically using the checklist below
3. Save output: ALWAYS write to docs/reference/frontend/design-system.md

Extraction Checklist

Colors

• Background colors (page, card, section)
• Text colors (primary, secondary, muted)
• Accent/brand colors
• Border colors
• State colors (success, warning, error)