Skills
.Work. You
Rest

markup-from-image

Community

Instantly transform UI images into semantic markup.

Design & Creative#web development#semantic HTML#markup generation#UI conversion#image to markup
Authornkabbara
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill converts visual UI designs into semantic HTML or JSX markup, eliminating the need for manual code translation and reducing the time spent on UI development.

Core Features & Use Cases

  • Convert UI Images: Transforms screenshots, Figma exports, mockups, and wireframes into structured markup.
  • Semantic HTML: Generates code that adheres to web standards and can be easily styled.
  • Use Case: With a simple activation, turn a design into unstyled markup, providing a solid foundation for UI development.

Quick Start

Run 'markup-from-image --input=ui-design.png --output=markup.html'

Dependency Matrix

Required Modules

None required

Components

scripts

💻 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: markup-from-image
Download link: https://github.com/nkabbara/dotfiles/archive/main.zip#markup-from-image

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