sablier-labs/agent-skills/spec-from-screenshot

Screenshot Analysis & Spec Generation

Analyze website screenshots and generate detailed implementation specifications. This skill guides creation of comprehensive SPEC.md files that document design systems extracted from visual references.

When to Use

• User provides website screenshots or design mockups
• Request for implementation specifications from visual references
• Need to extract design systems (colors, typography, spacing) from images
• Creating detailed component inventories from UI screenshots

Workflow

Step 1: Validate Prerequisites

Ensure screenshots are available in the conversation. If no images are present, request them before proceeding.

Step 2: Perform Ultra-Detailed Analysis

Analyze all provided screenshots covering these aspects:

1. Layout Architecture

• Overall page structure (header, navigation, hero, main content, sidebars, footer)
• Grid system and column layouts
• Container widths and max-widths
• Section hierarchy and nesting

2. Typography System

• Font families (identify primary, secondary, monospace)
• Font sizes for each text level (h1-h6, body, small, etc.)
• Font weights used (light, regular, medium, semibold, bold)
• Line heights and letter spacing
• Text colors and contrast ratios

3. Color Palette

• Primary brand colors
• Secondary/accent colors
• Background colors (main, sections, cards)
• Text colors (headings, body, muted, links)
• Border colors
• State colors (success, error, warning, info)
• Color codes in hex/rgb (best approximation)

4. Spacing System

• Margins between major sections
• Padding within components
• Gap spacing in flex/grid layouts
• Consistent spacing scale (e.g., 4px, 8px, 16px, 24px, 32px)
• Vertical rhythm patterns

5. Component Inventory

• Buttons (styles, sizes, states)
• Input fields and forms
• Cards and containers
• Navigation elements
• Icons and their style
• Badges, tags, labels
• Modals, tooltips, dropdowns
• List items and data tables

6. Visual Design Details

• Border radius values
• Shadow styles (box-shadow parameters)
• Border styles and thicknesses
• Background patterns or gradients
• Opacity/transparency effects

7. Images and Media

• Image locations and dimensions
• Image aspect ratios
• Icon sets (SVG, font icons, or images)
• Logo placement and size
• Decorative vs content images
• Note which images need to be sourced/created

8. Interactive Elements (if discernible)

• Hover states visible
• Active/focus states
• Transition/animation hints
• Interactive feedback patterns

9. Responsive Design (if multiple viewports shown)

• Breakpoints observable
• Layout changes per breakpoint
• Component behavior changes
• Mobile-specific patterns

10. Accessibility Considerations

• Color contrast issues
• Heading hierarchy
• Interactive element sizes
• Text readability

Step 3: Generate Comprehensive SPEC.md

Write the specification to ./SPEC.md using this structure:

# Website Implementation Specification
 
> Generated from screenshot analysis on [DATE]
 
## Overview
[2-3 sentence summary of the website's purpose and design style]
 
## Layout Architecture
### Page Structure
### Grid System
 
## Typography
### Font Families
### Text Styles
 
## Color System
 
## Spacing System
 
## Component Inventory
[Document each component with properties]
 
## Images and Assets
 
## Responsive Behavior
 
## Interactive Elements and States
 
## Implementation Considerations
### Design Complexity Assessment
### Observable Technical Requirements
### Accessibility Observations
### Cannot Determine from Screenshots
 
## Open Questions / Assumptions
 
## Next Steps

Step 4: Present Summary

After writing SPEC.md, provide a concise summary:

## Screenshot Analysis Complete
 
### Overview
[1-2 sentence description]
 
### Key Findings
- **Layout**: [brief description]
- **Components**: [count] distinct components identified
- **Color Palette**: [count] colors in system
- **Typography**: [primary font family], [count] type levels
- **Spacing**: [spacing scale summary]
- **Assets**: [count] images/icons to source
 
### Output
Full specification: `SPEC.md`
 
### Recommendations
[1-2 key technical recommendations]

Analysis Tips

• Start with high-level layout observations
• Progressively zoom into details
• Measure or estimate dimensions
• Identify patterns and systems
• Note uncertainties or assumptions
• Cross-reference across multiple screenshots if provided
• Higher resolution screenshots provide more accurate measurements

Notes

• All measurements are approximations; verify during implementation
• Running this analysis multiple times will overwrite existing SPEC.md
• Multi-screenshot analysis is supported and recommended for comprehensive specs
• Be explicit about states and behaviors that cannot be determined from static images