SketchSite

Project Overview

Transform your hand-drawn UI sketches into real code instantly with SketchSite

SketchSite is an innovative iOS app that lets you sketch user interface layouts by hand and instantly convert them into structured, code-ready UI descriptions. Using PencilKit for drawing, Vision for shape and text detection, and GPT for code generation, SketchSite bridges the gap between freeform design and real, usable code.

KEY FEATURES:

• Full-Screen Drawing Canvas - Professional edge-to-edge design experience
• AI Component Detection - Automatically recognizes buttons, forms, navigation, and more
• Smart Code Generation - Generates clean HTML/CSS with GPT-4o and Claude AI
• Interactive Components - Tap, drag, resize, and inspect every element
• Component Library - 24+ pre-built templates across 6 categories
• Live Preview - See your generated code in action with built-in browser
• Camera Integration - Analyze existing UI screenshots and mockups

PERFECT FOR:

- UI/UX Designers creating rapid prototypes

- Developers sketching app layouts

- Product teams collaborating on designs

- Students learning web development

- Anyone who thinks better by drawing

HOW IT WORKS:

1. Draw your UI layout with finger or Apple Pencil
2. Tap Generate to detect components automatically
3. Edit component types and properties with the inspector
4. Generate professional HTML/CSS code with AI
5. Preview your design live in the built-in browser
6. Export and share your code

SketchSite bridges the gap between creative sketching and technical implementation, making UI design accessible to everyone. No complex tools, no learning curve - just draw and create.

Privacy: All sketches stored locally on your device. AI features optional.