Sign in

Markup From Image

Turn screenshots, mockups, and wireframes into semantic markup.

Installation

Run the ui.sh installer to add this skill in your project:

npx @uidotsh/install markup-from-image --token=[token]

To install multiple skills at once, omit the skill name from the command:

npx @uidotsh/install --token=[token]

Create markup from images

Use the markup-from-image skill to turn a UI screenshot, Figma export, mockup, or wireframe into plain HTML or JSX:

/markup-from-image zeplo-homepage.png

The skill creates a single semantic, unstyled markup block with accessible structure, leaving visual styling for later.

What this skill does

  • Turns screenshots, mockups, wireframes, or Figma exports into semantic markup.
  • Chooses appropriate semantic elements with accessibility guidelines in mind.
  • Intentionally omits styling and component extraction to be added later.
Skills