DEV Community

Cover image for SketchSloth: Ditch the CSS Boilerplate with Offline Llama 3.2-Vision
Adarsh Raj
Adarsh Raj

Posted on

SketchSloth: Ditch the CSS Boilerplate with Offline Llama 3.2-Vision

#devchallenge #hf26challenge

Hacktoberfest Open-Source AI Challenge Week 3: Slow and Steady 🦥

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 3: Slow and Steady

What I Built

SketchSloth is an offline, AI-powered desktop application that translates hand-drawn wireframes directly into functional, responsive React and Tailwind TSX code. It acts as a strict Image-to-Code compiler, eliminating the need to manually scaffold frontend layouts. Anyone who sketches UI ideas on paper gets to skip the tedious CSS boilerplate phase and jump straight into logic and refinement.

Demo

You can try out the live deployment here: https://sketch-sloth.vercel.app/

Code

GitHub logo r67251491-coder / SketchSloth

🦥 SKETCHSLOTH — NAPKIN-TO-CODE

Deterministic Image-to-Code Compiler for Hand-Drawn UI Sketches.
Built with Next.js 16 (Turbopack), Tailwind CSS, Lucide Icons, React-Live, and Local Vision Models via Ollama.


âš¡ Overview

SketchSloth compiles napkin wireframes and whiteboard diagrams directly into functional, responsive, and compilable Next.js TSX components.

Core Features

  • Brutalist Tactile UI: Stark black borders (border-4 border-black), electric yellow accents (bg-yellow-400), high-contrast neo-brutalist shadows (shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]), and mechanical feedback.
  • Multi-Input Wireframe Synthesis
    1. Single-Screen Item Record: Mobile form with tactile file upload, category title, multi-line descriptions, and record submission (LOST AND FOUND ITEMS).
    2. 10-Screen Architecture Grid: Multi-screen mobile architecture blueprint (HEX CENTRAL // FIELD OPS) with responsive screen switcher tabs ([01] Log In, [02] Home, [03] Search Sites, [04] Site Details, [05] Edit Address, [06] Create Site, [07] User Menu, [08] Photos…
View on GitHub

Repository Link: https://github.com/r67251491-coder/SketchSloth.git

How I Built It

The application shell is built with Next.js App Router and Tauri v2 for native desktop performance. The core engine connects to a local Ollama endpoint running Meta's open-weight Llama 3.2-Vision model, and the real-time interactive sandbox is powered by react-live and the Tailwind CDN.

The most significant hurdle was wrestling with the vision model's underlying training. Llama 3.2-Vision aggressively defaulted to object detection, repeatedly hallucinating spatial bounding box coordinates (e.g., [0.0, 0.23, ...]) instead of writing code. To solve this "Pink Elephant" problem, I engineered a highly constrained, positive-instruction OCR prompt architecture, adjusted the temperature to break deterministic failure loops, and built a dynamic grid enforcer to guarantee accurate 1:1 visual synthesis without squishing the output.

Why Does Open Innovation Matter?

Open-weight models like Llama 3.2-Vision make offline, private, and zero-cost local AI a reality. Building this with a closed API would introduce latency, require constant internet access, force designers to upload proprietary wireframes to third-party servers, and incur continuous token costs. Open innovation allowed me to build an accessible, highly capable developer tool that runs completely on-device.

The Lazy Payoff

This completely removes the friction of turning physical ideas into digital prototypes. Instead of manually typing out nested

wrappers and translating physical margins to Tailwind classes, the application handles the structural scaffolding instantly. It saves hours of tedious boilerplate work per project. Toodles to manual layout coding!

Prize Categories

  • Slow and Steady(week 3 challenge)
  • Best Use of GitHub Copilot
  • Best Use of Sentry Agent Tracing

Thanks

Top comments (0)