name: ui-designer description: Extract design systems from reference UI images and generate implementation-ready UI design prompts. Use when users provide UI screenshots/mockups and want to create consistent designs, generate design systems, or build MVP UIs matching reference aesthetics.

UI Designer

Overview

This skill enables systematic extraction of design systems from reference UI images through a multi-step workflow: analyze visual patterns → generate design system documentation → create PRD → produce implementation-ready UI prompts.

When to Use

User provides UI screenshots, mockups, or design references
Need to extract color palettes, typography, spacing from existing designs
Want to generate design system documentation from visual examples
Building MVP UI that should match reference aesthetics
Creating multiple UI variations following consistent design principles

Workflow

Step 1: Gather Inputs

Request from user:

**Reference images direc

Code Examples

README.md

# Skill Demonstrations

This directory contains automated demonstrations of each skill using [VHS (Video Home System)](https://github.com/charmbracelet/vhs) by Charmbracelet.

VHS allows you to write terminal recordings as code, making demos reproducible, version-controllable, and typo-free.

## 📁 Demo Structure

demos/ ├── skill-creator/ │ ├── init-skill.tape # Initialize a new skill │ ├── validate-skill.tape # Validate skill quality │ └── package-skill.tape # Package for distribution ├── github-ops/ │ └── create-pr.tape # Create pull requests ├── markdown-tools/ │ └── convert-docs.tape # Convert documents └── generate_all_demos.sh # Generate all GIFs


## 🎬 Generating Demos

### Prerequisites

Install VHS:

**macOS:**
```bash
brew install vhs

Linux (with Go):

go install github.com/charmbracelet/vhs@latest

Or download from: https://github.com/charmbracelet/vhs/releases

Generate All Demos


### generate_all_demos.sh

#!/bin/bash set -e

echo "================================================" echo "Generating Claude Code Skills Demo GIFs" echo "================================================" echo ""

Colors for output

GREEN='\033[0;32m' YELLOW='\033[1;33m' RED='\033[0;31m' NC='\033[0m' # No Color

Check if VHS is installed

if ! command -v vhs &> /dev/null; then echo -e "${RED}Error: VHS is not installed!${NC}" echo "" echo "Install VHS to generate demo GIFs:" echo "" echo "macOS:" echo " brew install vhs" echo "" echo "Linux (with Go):" echo " go install github.com/charmbracelet/vhs@latest" echo "" echo "Or download from: https://github.com/charmbracelet/vhs/releases" echo "" exit 1 fi

echo -e "${GREEN}✓ VHS found${NC}" echo ""

Find all .tape files

TAPE_FILES=$(find demos -name "*.tape" -type f | sort) TOTAL=$(echo "$TAPE_FILES" | wc -l | tr -d ' ') CURRENT=0

echo "Found $TOTAL demo tape files" echo ""

Generate each demo

for tape_fi


### index.html

Claude Code Skills Marketplace - Demo Gallery * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #333; line-height: 1.6; } .container { max-width: 1400px; margin: 0 auto; padding: 20px; } header { text-align: center; padding: 60px 20px; color: white; } header h1 { font-size: 3rem; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } header p

UI Designer

AI Skill Market Insights

Quick Start

Manual Installation

TEAR & SHARE

UX Researcher & Designer

Be Part of the 126+ Developer Community

name: ui-designer description: Extract design systems from reference UI images and generate implementation-ready UI design prompts. Use when users provide UI screenshots/mockups and want to create consistent designs, generate design systems, or build MVP UIs matching reference aesthetics.

UI Designer

Overview

When to Use

Workflow

Step 1: Gather Inputs

Code Examples

README.md

Generate All Demos

Colors for output

Check if VHS is installed

Find all .tape files

Generate each demo

HTML to PowerPoint Guide

PDF Processing Advanced Reference

Office Open XML Technical Reference

Fillable fields

Channels

Learn

Compare

Company

Agents