Skills
.Work. You
Rest

spec-from-screenshot

Official

From screenshots to precise implementation specs.

Design & Creative#typography#spec#screenshot#design-system#color-palette#layout-analysis#SPEC.md
Authorsablier-labs
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This skill helps you translate visual design references (screenshots) into actionable implementation specifications, saving time and reducing misinterpretation during frontend development.

Core Features & Use Cases

  • Screenshot to SPEC: Analyze screenshots to extract layout architecture, typography, color palette, spacing, and component inventory, producing a comprehensive SPEC.md.
  • Design System Extraction: Build a design system from visual references including colors, typography, and spacing scales.
  • Use Case: Given a UI mockup screenshot, generate a SPEC.md outlining layout, components, accessibility notes, and responsive behavior.

Quick Start

Provide a design screenshot and ask: "Generate SPEC.md detailing layout, typography, color, spacing, components, accessibility, and responsive behavior."

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: spec-from-screenshot
Download link: https://github.com/sablier-labs/agent-skills/archive/main.zip#spec-from-screenshot

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.