# ui.sh Markup From Image By **ui-sh** ยท Habilidades Claude skill that turns UI screenshots, Figma exports, and wireframes into semantic, accessible HTML or JSX, no styling included, by design. - Source: https://ui.sh/skills/markup-from-image - Install: `npx @uidotsh/install markup-from-image --token=[token]` - Tags: skill, ui, html, jsx, accessibility, semantic-markup, claude, open-source - Pricing: unknown - Upvotes: 0 ## Features - Convert screenshots, mockups, and wireframes to semantic HTML or JSX - Accessibility-aware element selection baked into the output - Deliberately omits all styling, structure only - Single slash-command invocation with an image file argument - Accepts Figma exports, wireframes, mockups, and screenshots - Integrates with the broader ui.sh agent skill suite --- ## Why it matters Jumping straight from a screenshot to styled, component-heavy code is where class-bleed and structural debt begin. Markup From Image solves this by doing exactly one thing: converting a visual reference into clean, semantic, unstyled HTML or JSX. Structure first. Styling later. That separation is the point. ## How it works Point the skill at any image file and it returns a single semantic markup block. Per the ui.sh docs, the skill "chooses appropriate semantic elements with accessibility guidelines in mind" and "intentionally omits styling and component extraction." You get the skeleton, not the skin. The workflow is a single slash command: ``` /markup-from-image zeplo-homepage.png ``` Accepted inputs include screenshots, Figma exports, mockups, and wireframes. ## How it fits the ui.sh workflow Markup From Image is the Scaffold mode inside the ui.sh design skill system. Run it first to get a clean structural layer, then pipe that output to a styling skill (like ui.sh Design or ui.sh Canonicalize Tailwind) for visual treatment. Doing it this way avoids the specific failure mode where AI-generated Tailwind classes leak into the semantic layer from the first pass, making the markup brittle and hard to restyle later. ## By the numbers The skill ships as part of the ui.sh suite, installed via the `@uidotsh/install` npm package. The parent suite covers nine distinct skills as of the current ui.sh listing, all built by the team behind Tailwind CSS and Refactoring UI. ## Yes, but The output is intentionally a starting point, not a finished UI. If you need high-fidelity pixel-matching (exact spacing, color, typography reproduction), a different tool class is more appropriate. This skill optimizes for clean structure you can style, not for replication fidelity. ## The bottom line Markup From Image is the right first move when you have a visual reference and want a clean, accessible scaffold to build on. Get a token at ui.sh to start, then layer on Design or Canonicalize Tailwind for the visual pass. ## FAQ ### What is ui.sh Markup From Image? Markup From Image is a Claude agent skill from the ui.sh suite, built by the team behind Tailwind CSS and Refactoring UI, that converts UI screenshots, Figma exports, mockups, and wireframes into semantic, unstyled HTML or JSX. It selects appropriate semantic elements with accessibility guidelines in mind and deliberately omits styling and component extraction, so the output is a clean structural scaffold ready for a visual styling pass. ### How do I install and use Markup From Image? Install it using the ui.sh npx installer with the @uidotsh/install package: run `npx @uidotsh/install markup-from-image --token=`. A ui.sh invite token is required. Once installed, invoke the skill in Claude with a single slash command, for example `/markup-from-image zeplo-homepage.png`, passing the image file as an argument. ### Is Markup From Image free or open source? No public free tier is listed on ui.sh as of the time this entry was written. Access requires a ui.sh invite token, which you can request at ui.sh. The skill is part of the ui.sh suite and the licensing terms are not detailed in the publicly available documentation. ### What is Markup From Image best for? It is best for the first step of a UI build: converting a visual reference (screenshot, Figma export, mockup, or wireframe) into a clean, accessible structural scaffold before any styling is applied. The structure-first approach enforces a clean separation between markup and visual design, which prevents AI-generated Tailwind classes from bleeding into the semantic layer during the initial pass. ### How does Markup From Image compare to tools that reproduce UIs pixel-for-pixel from images? Markup From Image is optimized for semantic correctness and accessibility, not visual fidelity. It intentionally omits styling, spacing, color, and typography reproduction. Tools like ui-from-image (a separate Codex skill) prioritize exact reference-viewport matching for layout, spacing, iconography, and color. Reach for Markup From Image when you want a clean, restyable scaffold; reach for a high-fidelity reproduction tool when 'roughly similar' is not enough. ### What are the limitations of Markup From Image? The skill outputs unstyled markup only, meaning you need a separate skill or workflow step to add visual design, Tailwind classes, or component structure. It does not attempt to match colors, typography, or spacing from the source image. A ui.sh token is required to install it, and no public free tier is currently listed. For pixel-accurate reproduction, a different toolchain is needed. --- [View on Analog](https://analoghq.ai/pt-br/ui-sh/skills/ui-sh-markup-from-image)