Skills
.Work. You
Rest

image-as-design

Community

Turn UI designs into ready-to-implement code.

Design & Creative#design-system#design-to-code#image-analysis#ui-implementation#design-token#frontend-frameworks
Authordungle-scrubs
Version1.0.0
Installs0

System Documentation

## What problem does it solve?

This Skill enables designers and developers to translate UI design images directly into implementation-ready frontend specifications, reducing manual interpretation, rework, and translation time.

## Core Features & Use Cases

  • Parallel 4-agent analysis: Spawns four specialized analyses of the same design image to accelerate discovery.
  • Consensus-driven specification: Synthesizes structure, tokens, and code-ready outputs into a cohesive document.
  • Framework-aware output: Produces implementation artifacts for React, HTML, Vue, and other frameworks.
  • Design system integration: Extracts color, typography, spacing, and component tokens and maps them to common frameworks.
  • Asset extraction: Outputs vector assets and raster references to /assets directories for reuse.
  • Use cases: Convert a marketing mockup to a production-ready UI, reproduce a hero section, or translate a design sample into code.

### Quick Start

  1. Provide a single UI design image for analysis.
  2. The skill validates single-image input, launches four parallel vision analyses, and consolidates results.
  3. It outputs an implementation-ready specification including a component tree, element specs, and design tokens, with framework-specific guidance.

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: image-as-design
Download link: https://github.com/dungle-scrubs/agent-config/archive/main.zip#image-as-design

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