Claude skill that turns UI screenshots, Figma exports, and wireframes into semantic, accessible HTML or JSX, no styling included, by design.
Qué hace
ui.sh Markup From Image is a Claude skill that converts screenshots, Figma exports, mockups, and wireframes into semantic, unstyled HTML or JSX. It prioritizes accessible structure first, deliberately leaving visual styling for a separate pass. Made by the team behind Tailwind CSS and Refactoring UI
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.
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.
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.
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.
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.
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.
Características
Notas de campo
Revisado el Jun 26, 2026
Ideal para
Resultados para creadores
Ten cuidado
Probado con
Costo
A token from ui.sh is required to use the skill. Specific pricing details are not provided in the entry content.
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.
Install it using the ui.sh npx installer with the @uidotsh/install package: run `npx @uidotsh/install markup-from-image --token=<your-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.
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.
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.
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.
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.
Una habilidad de diseño para Claude Code, Cursor y Codex que se niega a parecer generada por IA: elige una macroestructura para el encargo, aplica uno de veinte temas y ejecuta decenas de filtros anti-repetición antes de emitir el resultado.
Best for Diseñar UI que no parezca generada por IAUna habilidad de IA que proporciona a los agentes de codificación inteligencia de diseño, reglas de razonamiento y estilos de interfaz para generar UI/UX profesional en distintas plataformas y frameworks.
Best for Arrancar un sistema de diseño a partir de la descripción de un proyecto.La colección pública de Agent Skills de ejemplo para Claude de Anthropic: carpetas autocontenidas de instrucciones, scripts y recursos que abarcan tareas creativas, técnicas y empresariales, incluidas las skills de documentos que impulsan las capacidades de archivos de Claude.
Best for Aprender a crear Agent SkillsOpen-source collection of 45+ AI agent skills for marketing, CRO, SEO, copywriting, analytics, and growth, built for Claude Code, Cursor, and any Agent Skills-compatible agent.
Best for Technical marketers and founders using Claude Code, Cursor, Windsurf, or OpenAI Codex who want marketing domain knowledge baked inOpen-source PM skills marketplace: 68 AI skills and 42 workflows across 9 Claude plugins for product managers doing discovery, strategy, execution, and launch.
Best for PMs using Claude Code or Claude Cowork who want framework-driven decisions baked into daily AI workflowsA catalog of repeatable AI agent workflows with built-in feedback loops, plus an installable skill for finding, adapting, and designing your own loops.
Best for Teams using Codex, Cursor, or Claude Code who want agents to iterate reliably instead of making one-shot guesses