design-analysis

Design Analysis

When to Use

Use this skill when the user asks to:

• Analyze a website's design
• Audit visual coherence or accessibility
• Reverse-engineer a design system
• Compare two websites' design approaches
• Get raw design data from a page

Available Tools

Tool	Purpose	When to use
copiatore_extract	Extract raw design data: color palette + contrasts, typography scale + heading sizes, spacing + grid, layout + sections, content (headings/CTAs/images), navigation, interaction	When you need structured raw data about a page's design properties
copiatore_a11y_extract	Extract accessibility data: heading hierarchy, ARIA landmarks, contrast issues, focus order, alt text, touch targets, form labels	When auditing accessibility or WCAG compliance
copiatore_design_tokens	Reverse-engineer the implicit design system: color roles, typography scale pattern, spacing grid, CSS :root {} variables block	When extracting the underlying design rules as reusable tokens
copiatore_snapshot	Full snapshot: all extraction data + a11y + design tokens + performance metrics + desktop/mobile screenshots	When doing a comprehensive analysis that needs everything in one call

Workflow

1. Quick data: Use copiatore_extract for raw design data without scoring
2. Accessibility audit: Use copiatore_a11y_extract for WCAG checks
3. Design tokens: Use copiatore_design_tokens to get CSS-ready design system tokens
4. Full analysis: Use copiatore_snapshot for everything combined — best for deep audits
5. Comparison: Navigate to URL A, call copiatore_extract, navigate to URL B, call copiatore_extract, compare the two results

Important Notes

• All tools require the browser to be on a page first — call puppeteer_navigate before using any copiatore tool
• Screenshots from copiatore_snapshot are saved to ~/.copiatore/screenshots/{timestamp}/
• v2 tools return raw structured data — the LLM does the analysis, not the tool
• For the full /copiatore workflow with Teams and autodebug, use the copiatore skill instead