Akriti.ai
Doodle, Generate, Launch
The problem Akriti.ai solves
The substantial gap between an innovative concept and a useful website is addressed by Akriti.ai. Great ideas on a whiteboard or napkin are currently "dead ends" that need to be manually translated by a developer.
The complicated nature of prototyping tools results in a sluggish and prone to errors "handoff" to developers. It takes far too long to write HTML and CSS from scratch for quick iterations and brainstorming.
Testing new layouts becomes a tedious task due to this friction, which also kills creativity. This is resolved by Akriti.ai, which builds a simple, instantaneous bridge from a low-fidelity doodle to functional, live code. It makes rapid prototyping genuinely quick by removing the "translation gap" and enabling developers to transform a basic sketch into a working webpage in a matter of seconds.
Challenges we ran into
The main challenge was getting a vision model, such as Gemini or GPT-4V, to consistently convert a jumbled, low-fidelity tldraw sketch into neat, production-ready HTML and Tailwind CSS. The live preview was the next obstacle.
It was challenging to dynamically update the AI's HTML, CSS, and JS output without requiring complete reloads and to render it safely inside an iframe. The "refinement" feature's design presented yet another formidable obstacle.
Instead of starting from scratch, this calls for a far more advanced AI prompt that can comprehend the current code and a text prompt to generate only the change. Lastly, careful engineering was needed to manage the intricate UI state between the preview panel, refinement panel, and resizable canvas in Next.js.
Tracks Applied (2)
Base44 Innovation Challenge
Base44
Best Use of Gemini API
Major League Hacking