Fable

Inspiration

I am not a designer. Every time I sit down to wireframe an idea, I spend way too long trying to get it right in Figma and by the time I am done, I have lost half my hackathon time before writing a single line of code.

I built Fable specifically for hackathons. I wanted something faster, smarter, and more accurate than existing tools like Google Stitch. Just describe your UI in plain English and get a real, high fidelity mockup back in seconds. No design experience needed.

What it does

Fable takes a plain English description of any UI screen and generates a beautiful, high fidelity mockup powered by Google Gemini. Type something like "a luxury hotel booking app with a dark navy theme" and watch it come to life with real colors, real components, and real layouts.

How I built it

React + Vite for the frontend
Google Gemini API to parse prompts and return structured JSON component layouts
SVG rendered in React JSX to display mockups, every component drawn programmatically
Supabase Edge Functions to handle Gemini API calls securely
Tailwind CSS for the galaxy themed dark UI

Challenges I ran into

The hardest part was getting consistent high fidelity output from Gemini. Getting the AI to return perfectly structured JSON every time, with proper layouts, realistic copy, and cohesive color palettes, took a lot of prompt engineering. Building an SVG renderer that could handle every component type without anything breaking or overflowing its bounds was also genuinely tricky.

Accomplishments that I'm proud of

When I was filming the demo at the end, I typed in a prompt and watched a fully styled, realistic UI appear on screen in seconds. I thought, this is actually fire. This is something I am going to use at every hackathon from now on. Building something genuinely useful for myself, solo, in a few hours felt really good.

What I learned

Prompt engineering is everything when you are building on top of an LLM. The difference between a messy output and a beautiful one came down to how precisely I instructed Gemini. I also learned a ton about SVG rendering in React, more than I ever expected to.

What's next for Fable

Generate Code — one click to turn any mockup into real HTML/CSS or React components
Multi-screen flows — generate multiple linked screens from one prompt
Figma export — send your Fable mockup directly into Figma
Editable components — click any element to tweak it after generation