Skills
.Work. You
Rest

space-image2proto

Community

Turn UI screenshots into polished HTML prototypes.

Design & Creative#ui#refinement#html#prototype#screenshot#wireframe#mockup
Authorzephyrwang6
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill turns UI screenshots, mockups, and wireframes into faithful, production-quality HTML prototypes so teams can quickly recreate or refine an interface without starting from scratch.

Core Features & Use Cases

  • Screenshot-to-Prototype Conversion: Rebuilds a provided screen as a single-file HTML prototype with matching layout, spacing, typography, and component styling.
  • Iterative Refinement: Updates an existing prototype from follow-up requests such as adding fields, widening dialogs, changing labels, or applying the same pattern to another screen.
  • Design Memory and Onboarding: Collects reference screenshots, extracts a reusable design system, and records interaction history to improve future outputs.
  • Use Case: A designer shares a product screenshot and asks for an editable HTML version; this Skill generates the page and keeps improving it as feedback comes in.

Quick Start

Send a screenshot or mockup and briefly describe the changes you want, and I will produce a single-file HTML prototype that matches the design and applies your requested edits.

Dependency Matrix

Required Modules

None required

Components

references

💻 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: space-image2proto
Download link: https://github.com/zephyrwang6/allSkills/archive/main.zip#space-image2proto

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 536,000+ vetted skills library on demand.