loku
ROLE
Product Designer & AI-Assisted Builder
Product Designer & AI-Assisted Builder
DURATION
12 weeks
Loku AI turns a prompt, sketch, sitemap, user flow, or existing design into a real, editable UI, not a static preview.
One canvas covers the whole process: wireframes, multiple variations, prototypes, and code, editable by AI or by hand.
Unlike other AI tools, Loku gives you both, the speed of AI and the freedom and personal connect of a real design tool.
AI generation are simulated to showcase the interface and flows.
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 Problem
Today's AI UI tools generate a fast first draft, then stop there. Editing is shallow (usually just text), with no real control over structure, components, or design system.
Tools like Stitch, Lovable, Figma Make, Uizard, and Banani all hit the same wall: no version comparison, no undo, and prompts that never quite capture intent.
The result is AI speed without the freedom or control real design work actually needs.
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.
3. Sitemap/User flow to UI
Map the flow first, Loku builds the screens to match.
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.
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
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.
