skills.rest
sablier-labs
sablier-labsOFFICIAL
Explore all skills by this author →
Website𝕏@SablierGitHub

spec-from-screenshot

Analyzes website screenshots and outputs a structured SPEC.md document.

9|1|Updated Feb 5, 2026
Search Tags:#typography#spec#screenshot#design-system#color-palette#layout-analysis#SPEC.md
One-click install
npx skills add https://github.com/sablier-labs/agent-skills --skill spec-from-screenshot
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: spec-from-screenshot
Source: https://github.com/sablier-labs/agent-skills/tree/main/skills/spec-from-screenshot
Command: npx skills add https://github.com/sablier-labs/agent-skills --skill spec-from-screenshot

SYSTEM DOCUMENTATION & REQUIREMENTS

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."

Frequently Asked Questions about spec-from-screenshot

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate implementation specs from a website screenshot?▼

Generating implementation specs from a website screenshot involves analyzing the image to extract layout architecture, typography, color palette, and spacing. This skill produces a structured SPEC.md file detailing components, accessibility, and responsive behavior from your visual reference.

What is a SPEC.md file and what should it include for frontend development?▼

A SPEC.md file is a structured specification document translating visual designs into actionable implementation instructions. It includes defined sections for Overview, Layout Architecture, Typography, Color System, Spacing, Components, Accessibility, and Implementation Considerations.

Can I extract a complete design system from an existing UI screenshot?▼

Yes, you can extract a design system from a UI screenshot. The analysis identifies the color palette, typography scales, and spacing rules, allowing you to build a comprehensive design system directly from visual references.

Does screenshot layout analysis cover responsive behavior and accessibility?▼

Screenshot layout analysis covers responsive behavior across multiple viewports and includes accessibility notes. The generated specification explicitly details these aspects within dedicated Accessibility and Implementation Considerations sections.

What is the best way to document UI components from a mockup image?▼

The best way to document UI components from a mockup image is to generate a SPEC.md. This process inventories the visual components and maps them into a structured specification alongside layout, color, and typography details.

Related Skills

Explore More Design & Creative Skills→
orthogonal-shorthogonal-sh
12

website-screenshot

Capture website screenshots via Notte or Brand.dev for documentation and QA.

Official
Intermediate
johnnyelwailerjohnnyelwailer

figma-to-code

Convert Figma designs into React components with token-based styling.

Community
Intermediate
Higashi-KotaHigashi-Kota

ui-theme

Generate CSS variables and Tailwind theme from JSON design tokens.

Community
Intermediate
StChiotisStChiotis
43

lfe-visual-check

Inspect UI surfaces for layout and rendering issues.

Community
Intermediate