loku
ROLE
Product Designer & AI-Assisted Builder
Product Designer & AI-Assisted Builder
DURATION
12 weeks
The Problem
It's hard to put a visual idea into words, sketching it should be easier. But AI design tools only understand prompts, not sketches, sitemaps, or flows, so designers end up re-explaining in words what they'd already sketched, mapped, or planned.
Editing stays shallow, mostly text and color swaps. Real control still means exporting to Figma, so nothing gets built in one place.
What Loku does
Loku AI closes both gaps in one canvas. Start from a sketch, a sitemap, or a user flow and it generates directly into a working prototype, no re-explaining your idea in text.
Once it's generated, you get full editing freedom right there, by AI prompt or by hand, exactly like Figma, so you never have to leave to make it real
AI generation are simulated to showcase the interface and flows.
Achievement
Best Exhibit Award — Loku AI
Dakshin Design Conclave, VIT Vellore | 21-22 August 2026
Loku AI was recognized with the Best Exhibit Award at Dakshin Design Conclave, a platform celebrating standout design thinking and innovation. The recognition came for identifying a real gap in how UI/UX designers work with AI tools — and building a solution that gives them the freedom to sketch, generate, and edit without breaking their creative flow.
Process
Research
Analyzed 5 AI UI tools, mapped the gaps
Define
Finalized the feature set and the full sitemap
Figma Design
Every screen, flow, and prototype
Claude Code
Using Claude MCP, built the real product
GitHub
Version-controlled the full build
Vercel
Shipped live on Vercel
The Research
I ran the same single prompt through all five tools and logged every UX and UI issue, screen by screen. Then I had two designers do the same task while I observed, pinpointing exactly where they struggled and how it felt to use.
"If I could just sketch this, it'd explain itself."
"I described it perfectly. It still came out wrong."
"Back to Figma, I guess."
"It heard my words, not my idea."
"Sketching this took five seconds. Explaining it took five minutes."
Key Features
1. Start from Template:
Launch from a real, pre-built app and make it yours.
2. Sketch to UI
Draw it by hand; Loku turns the sketch into a working screen.
Why Loku?
Other tools read your sketch as a picture. Loku reads it as structure.
3. Sitemap/User flow to UI
Map the flow first, Loku builds the screens to match.
Why Loku?
Other tools jump straight to screens. Loku builds from the structure you planned first.
4. Start with your design
Import an existing design and keep building with AI.
5. Start from Scratch
Blank canvas, design and prototype manually, full control from the first pixel.
Why Loku?
Start from Scratch gives full manual control by default, with AI still one click away on any selection.
Key Decision
1. The Full Layout
Undo/redo
pipeline switcher dead center
Mode switch bar
Color theme, Export/Share top right
Change variations
Right vertical bar for properties and tools
Left rail for viewing screens, Ai chat and direct to dashboard
AI chat collapsible at the bottom
Change canvas color, help and zoom info
2. Left Rail
Split view pins two of these open side by side when you need to drag between them
The rail itself opens one panel per click instead of showing everything at once
Dashboard, Screens and AI Chat sit on the left because that's where your eyes start
3. Pipeline Switcher
Which mode you're in is the single biggest state in the app, so it gets the most visible spot, dead center, not a buried menu.
The active mode shows its icon and name; every other mode shows just an icon, so you always know exactly where you are, and it still fits in one compact row instead of seven full-width tabs.
4. Sketch / Canvas / Present mode Switch
Sits right next to the pipeline switcher because it's a sub-choice of Design mode, not a separate destination. Flipping between a raw sketch and its generated result should feel like turning one page, not leaving the mode.
5. Present Mode + Variations
testing a flow feels like using the real product. From here: inline text edits, AI touch-ups without leaving the flow
Variations panel showing 2-3 alternate takes on a screen side by side
Edit using AI
6. AI Mode
Click any button, text, or icon on a generated screen and it's selected and tagged automatically, ready to refine.
Edit Multiple variations at a time
7. Prototype Mode
Edit Multiple variations at a time
Edit real interactions between screens
Selecting the exact element as a trigger, not the whole screen, means one screen can send five different buttons to five different places.
Edit All action or All elements or selected elements interaction
8. Wireframe Mode
Abstract boxes, bars, and circles standing in for real UI, deliberately unstyled. Structural decisions happen before visual polish decisions, so the two never get tangled.
9. User Flow & Sitemap
Map screens and the paths between them before a single pixel exists. Once the shape is right, generate real screens directly into that same structure.
Tool bar needed to create flow
Flow box to know map summary
Edit flows using AI
10. Design Mode (Manual Edit)
Have the complete Freedom to edit manually
Components, variants & Boolean operations
All screen + Layer panel
The full property system: Position, Layout, Appearance, Fill, Typography, Stroke, Effects, each icon-only until clicked, each pinnable.
Marquee-select, shift-click, drag, copy-paste, so it feels like real design software.
11. Code mode
Code and the live screen side by side, so you always see what you're reading.
Change variations and Stacks
Get code, assets, API and inspect components
Select any element on the screen and jump straight to its code, no hunting through files.
Copy your code and use it anywhere
Ask for changes in the code
Sitemap
The full structure, end to end: landing and auth, the dashboard's five entry points, and the canvas itself with its seven working modes.
From Figma to Product
Every screen started in Figma: full flows, components, and a real prototype before a line of code existed.
Using the Figma MCP server, I fed those exact frames to AI and had it build the actual product straight from the design.
MCP
MAIN SCREENS (Designed in Figma)
User Testing
Put Loku in front of 4 people who'd never seen it, watched them build a screen end-to-end, and noted every comments.
User 1
Beginner UI/UX Designer
"There's a learning curve at first, but I really want to learn to use this product."
User 2
Experienced UI/UX Designer
"I feel like I have all the freedom. I don't need to switch between any platforms."
User 3
UI Designer
"The interface across every screen looks so impressive."
User 4
Frontend Developer
"This code section, as a frontend developer, makes me easily find the code for any selected element.
Key Learnings
-
AI-generated and manually-edited content need one shared data model from day one. Retrofitting it later is expensive.
-
Small interaction details (snapping, multi-select, copy-paste) do more for "this feels real" than any single AI feature.
-
Testing competitors before building saved months of solving problems nobody actually had.
What's Next
-
Real accounts and backend, so projects persist beyond a session.
-
True design-token import, not visual approximation.
-
Multiplayer editing on the same canvas.
