VisuDraft

• 

  Demo

Inspiration

Designers still sketch ideas on paper — but turning those sketches into working websites is slow, repetitive, and full of back-and-forth. We wanted to eliminate the gap between design intent and live code using AI that doesn’t just generate, but verifies.

What it does

VisuDraft turns hand-drawn UX sketches into live, production-ready websites. Designers upload a sketch, VisuDraft generates clean HTML and CSS, deploys it to GitHub Pages, opens it live in a browser, and verifies that the result matches the original design. If it doesn’t, the system automatically fixes itself.

How we built it

We built VisuDraft as a modular, agentic AI system: A vision agent interprets UX sketches and infers layout structure A code generation agent produces semantic HTML and modern CSS A deployment agent publishes the site to GitHub Pages A live browser agent validates rendering in real time An LLM judge compares the live site with the original sketch and triggers refinements

Each agent is independently designed and orchestrated through a controlled workflow.

Challenges we ran into

Understand the users requirements to build something unique with a value

Accomplishments that we're proud of

End-to-end automation from sketch to live URL Self-correcting design-to-code feedback loop Clean, semantic, production-quality HTML/CSS output Live browser validation instead of static previews A modular agent architecture that scales beyond the MVP

What we learned

Agentic AI systems work best when each agent has a narrow, well-defined responsibility. We also learned that verification is just as important as generation — users trust systems that can prove correctness, not just claim it.

What's next for VisuDraft

Next, we plan to add visual fidelity scoring, accessibility audits, design system mapping, and framework outputs like React and Tailwind. Longer term, VisuDraft will learn individual designer styles and support full collaborative workflows.

Built With

• css
• gemeni3
• github
• html