Live at tela.jtdigital.si

Tela
Project Analysis

A visual design tool for crafting UI layouts with Tailwind CSS, powered by AI. Unlike Figma, the design is the code — eliminating the developer handoff entirely.

Try it live →
41.5K
Lines of Code
122
TypeScript Files
344
Tests (10 suites)
54
Days to Build

Feature Set

A production-ready design tool with AI, real-time collaboration, organisations, comments, and full Tailwind CSS support. What you design is what ships.

Visual Editor

WYSIWYG canvas with scroll, pan, zoom. 50+ HTML5 tags, layers panel, drag-and-drop, multi-select, element locking, 50-state undo/redo.

Tailwind Styling

7 style panels, bidirectional class mapping, visual Flex & Grid builders, full color picker (220+ colors), 6 responsive breakpoints.

AI-Powered Design

Chat-based generation with Claude Sonnet. Multi-step AI wizard with dynamic questions, SSE streaming, 9 project templates.

Real-Time Collaboration

Multi-user editing via WebSocket + Redis pub/sub. Presence indicators, live activity feed.

Organisations & Teams

Multi-tenant workspaces with role hierarchy (owner/admin/editor/viewer). Email invitations, project folders, member management.

Comments & Discussions

Threaded comments on design elements with @mentions, email notifications, resolve/unresolve threads.

Auth & Onboarding

Email/password + GitHub + Google OAuth. JWT sessions, guided onboarding, welcome emails, CSRF protection.

Import / Export

Import HTML files (preserves fonts, stylesheets). Export clean code + download. Image uploads.

MCP Server

Model Context Protocol integration. AI agents can list, read, and update designs programmatically via REST API.

Architecture

Server-rendered with HTMX. No SPA bloat. Redis-cached for instant response, debounced to PostgreSQL for durability. Multi-tenant with org-level isolation.

User Action HTMX Request Controller Service
Redis (instant) PostgreSQL (3s debounce)
Render HTML Broadcast via WebSocket All Clients
Fastify 5 TypeScript PostgreSQL 16 + Prisma 7 Redis 7 HTMX Tailwind CSS Claude SDK WebSockets Nodemailer MCP Docker PM2

Development Cost

~1,800 hours of skilled developer work. Excludes design/UX, product management, and infrastructure.

Rate Tier Cost Range
Junior / Mid ($60-80/hr) $108,000 – $144,000
Senior Freelancer ($100-120/hr) $180,000 – $216,000
Agency ($150-200/hr) $270,000 – $360,000
US/EU Product Studio ($175-250/hr) $315,000 – $450,000

Built in 54 days by a solo developer — a pace only possible with deep domain expertise and AI-assisted development.

Revenue Potential

SaaS pricing model with low variable costs. Primary expense is Claude API at ~$0.01-0.05 per AI generation.

Free
$0
1-2 projects, no AI
Team
$50/seat
Orgs, comments, collab
Enterprise
Custom
SSO + dedicated hosting
$150K
Annual Recurring Revenue
500 paying users × $25/mo avg.
$720K
Annual Recurring Revenue
2,000 paying users × $30/mo avg.

The Design-to-Code Handoff is Broken

The most painful bottleneck in software development. Figma designs look perfect — then developers spend hours manually translating them into code, losing fidelity every time.

FIGMA (today's standard)
Design → Specs → Developer interprets → Code
Lossy. Slow. Frustrating.
TELA
Design = Production Tailwind Code
Zero handoff. What you design is what ships.

Competitive Position

The UI design tools market is ~$15B and growing 12%+ annually. Figma alone reached a $20B valuation. Tailwind has 500K+ weekly npm downloads — no dedicated design tool serves this audience.

Zero Handoff

The design is the code. No interpretation, no fidelity loss, no wasted developer hours.

Tailwind-Native

Speaks the language developers already use. Not generic CSS — purpose-built for the Tailwind ecosystem.

AI-First Design

Competitors bolt AI on. Tela builds around it — wizard + chat + SSE streaming + dynamic generation.

Multi-Tenant Orgs

Role-based workspaces with invitations, project folders, and member management. Enterprise-ready out of the box.

Comments & Collaboration

Threaded discussions, @mentions, real-time editing. Designers and developers in the same tool.

AI Tooling (MCP)

MCP server lets AI agents interact with Tela. Future-proof integration with the AI ecosystem.

Agency Productivity

Reduces UI build time from days to hours. 200+ hours/year saved per designer.

AI Flywheel

More usage → better prompts → better designs → more usage. Template marketplace potential.

Figma
$20B valuation
Penpot
$12M raised
Anima
$17M raised
Tela
AI + Tailwind + Zero Handoff

Risks & Mitigations

Claude API cost at scale
Cache common generations, usage limits per tier, smaller models for simple tasks.
Figma's dominance
Don't compete on general design — own the Tailwind-to-code niche Figma can't serve.
Solo developer dependency
Architecture well-documented, 344 tests, clean MVC separation. Ready for team expansion.
No payment system yet
Stripe integration is ~1-2 weeks of work with Fastify.

The Bottom Line

$180K-$360K
Asset Value
$150K-$720K
ARR Potential (Annual Recurring Revenue)

Figma dominates design but can't solve the handoff. Tela can. AI-native design that outputs production Tailwind code, with multi-tenant organisations, threaded comments, email notifications, and MCP integration — in a $15B market growing 12% annually. Already live at tela.jtdigital.si. Next step: Stripe billing, free tier, and the Tailwind developer community.