sketch-to-code

description = "Generate code from UI sketches, wireframes, or mockups"

prompt = """

Sketch to Code Command

Transform hand-drawn sketches, wireframes, or UI mockups into functional code using Gemini's multimodal vision.

Input: {{args}}

Supported Input Types

• Hand-drawn sketches (paper, whiteboard photos)
• Digital wireframes
• UI mockups (Figma screenshots, etc.)
• Flowcharts and diagrams
• Architecture diagrams

Workflow

1. Analyze the Visual Input

Read and understand the sketch/mockup:

!{ls -la {{args}} 2>/dev/null || echo "File not found"}

Identify:

• UI components (buttons, inputs, cards, navigation)
• Layout structure (grid, flex, sections)
• Visual hierarchy
• Interactive elements
• Data flow (if flowchart)

2. Determine Output Framework

Ask user or detect from project context:

• React (with hooks, TypeScript optional)
• Next.js (App Router)
• Vue (Composition API)
• HTML/CSS (vanilla)
• Tailwind CSS (styling)
• shadcn/ui (component library)

Check project for existing framework:

!{cat package.json 2>/dev/null | grep -E '"react"|"next"|"vue"' | head -3 || echo "No package.json found"}

3. Generate Code

Based on sketch analysis, generate:

Component Structure:

ComponentName/
├── index.tsx        # Main component
├── styles.css       # Styles (if not Tailwind)
└── types.ts         # TypeScript interfaces

Code Output:

• Semantic HTML structure
• Responsive layout (mobile-first)
• Accessibility attributes (ARIA)
• Placeholder content matching sketch
• Interactive states (hover, focus, active)

4. Output Location

Save generated code to appropriate location:

!{ls -d src/components 2>/dev/null || ls -d components 2>/dev/null || echo "./"}

Usage Examples

# From hand-drawn sketch
/media:sketch-to-code ./whiteboard-photo.jpg

# From Figma screenshot
/media:sketch-to-code ~/Downloads/figma-export.png

# From wireframe with framework hint
/media:sketch-to-code ./wireframe.png --react --tailwind

# From architecture diagram
/media:sketch-to-code ./system-diagram.png --mermaid