Design Description Workflow

Create detailed design documentation from screenshot/video for developer implementation.

Prerequisites

Activate ck:ui-ux-pro-max skill first
Have ck:ai-multimodal skill ready

Workflow Steps

1. Comprehensive Visual Analysis

Use ck:ai-multimodal skill to describe exhaustively:

Layout & Structure

Element positions (absolute coords or relative)
Container hierarchy
Grid/flexbox patterns
Responsive breakpoints visible

Visual Properties

Design style and aesthetic trend
Every color with hex codes
Every border (width, style, radius)
Every icon (describe or identify)
Font names (predict Google Fonts), sizes, weights
Line heights, letter spacing

Spacing System

Padding values
Margin values
Gap between elements
Section spacing

Visual Effects

Shapes and geometry
Textures and materials
Lighting direction
Shadows (offset, blur, spread, color)
Reflections and refractions
Blur effects (backdrop, gaussian)
Glow effects
Background transparency
Image treatments

Interactions (if video)

Animation sequences
Transition types and timing
Hover/focus states
Scroll behaviors

Font Prediction: Match actual fonts, avoid Inter/Poppins defaults.

2. Create Implementation Plan

Use ui-ux-designer subagent:

Create plan directory (use ## Naming pattern)
Write plan.md overview (<80 lines)
Add detailed phase-XX-name.md files

3. Report to User

Provide implementation-ready documentation:

Summary of design system
Component breakdown
Technical specifications
Suggested implementation approach

Output Format

# Design Analysis: [Name]

## Design System
- **Style**: [aesthetic direction]
- **Colors**: [palette with hex]
- **Typography**: [fonts, sizes, weights]
- **Spacing Scale**: [values]

## Component Breakdown
1. [Component] - [specs]
2. [Component] - [specs]

## Implementation Notes
- [Technical considerations]

extraction-prompts.md - Detailed prompts
extraction-output-templates.md - Output formats

2.0 KiB Raw Permalink Blame History