skills.rest
yoshida55
yoshida55COMMUNITY
Explore all skills by this author →
GitHub

mockup

Generate annotated SVG design blueprints with CSS layout details from screenshots.

Updated Aug 23, 2026
Search Tags:#wireframing#svg#ui design#screenshot analysis#design blueprint#css layout
One-click install
npx skills add https://github.com/yoshida55/skills --skill mockup-yoshida55
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mockup
Source: https://github.com/yoshida55/skills/tree/main/mockup
Command: npx skills add https://github.com/yoshida55/skills --skill mockup-yoshida55

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill transforms flat screenshots into structured SVG design blueprints, complete with CSS layout information, making design communication and implementation more efficient.

Core Features & Use Cases

  • Screenshot Analysis: Interprets visual layout from screenshots.
  • SVG Blueprint Generation: Creates detailed SVG files annotating element placement, positioning (absolute, relative, flex, grid), and styling hints.
  • CSS Design Information: Embeds CSS layout principles directly into the SVG annotations.
  • Use Case: Provide a screenshot of a webpage section, and receive an SVG that visually represents the layout, indicating which elements are absolutely positioned, which use flexbox, and their relative sizes and colors.

Quick Start

Analyze the provided screenshot and generate an SVG blueprint.

Frequently Asked Questions about mockup

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

FAQPage Schema
How do I generate an SVG blueprint from a screenshot?▼

To generate an SVG blueprint from a screenshot, you provide the image to the tool, which analyzes the visual layout and outputs an annotated SVG file detailing element positioning, flexbox usage, and color coding.

What is SVG wireframing for CSS layout analysis?▼

SVG wireframing for CSS layout analysis is the process of creating structured design blueprints that visually represent element placement, infer layout strategies like flexbox or grid, and embed styling hints directly within the SVG annotations.

Can I extract CSS design information like flexbox usage from a screenshot?▼

Yes, you can extract CSS design information from a screenshot. The tool interprets visual elements to infer layout strategies, generating an SVG file that annotates absolute positioning, flexbox, grid usage, and relative sizes.

How do I visualize UI design positioning strategies from an existing image?▼

You visualize UI design positioning by using screenshot analysis to infer layout strategies. The tool outputs a structured SVG file that clearly annotates elements, indicating which use flexbox, grid, or absolute positioning.

What are the limitations of generating design blueprints from screenshots?▼

A limitation of generating design blueprints from screenshots is that the tool prioritizes simple layout representations and adheres to specific SVG writing rules, meaning highly complex or non-standard visual layouts may not be fully captured.

Does this screenshot analysis tool support color coding for layout elements?▼

Yes, this screenshot analysis tool supports color coding for layout elements. It adheres to specific color-coding conventions to visually distinguish inferred CSS layout principles like positioning and relative sizes in the SVG output.

Related Skills

Explore More Design & Creative Skills→
AllBeingsFutureAllBeingsFuture
9

browser-screenshot

Capture browser page screenshots and output a file_path.

Community
Basic
Mathews-TomMathews-Tom
310

concept-to-image

Convert concept descriptions into self-contained HTML/CSS/SVG visuals and export as PNG or SVG files.

Community
Advanced
HuuBarHuuBar

ui-designer

Extract design systems from reference UI images into structured documentation.

Community
Advanced
maplin-comaplin-co

mockup-to-code

Convert UI mockups and design files into React, Vue, or HTML/CSS code.

Official
Advanced