saas ai design engineering tailwind

FormSense

An AI-powered form builder where users describe what they need in plain English and the AI generates a fully styled, live form instantly. Built as a design engineering project to explore natural language UI generation, real database architecture, and AI-first product thinking using Claude Code.

year

2026

role

design engineer

platform

web (Next.js)

live

formsense-app.vercel.app ↗

replace the form builder with a single sentence

every form builder asks you to drag, drop, configure, and repeat. FormSense inverts that entirely. you type what you need: "a contact form with name, email, and a budget range", and the AI generates the full form: fields, labels, validation, and Tailwind styling, ready to publish.

the framing that shaped every decision was this: the AI loop is the product, not a feature. there's no legacy builder to fall back on. the natural language interface is the only interface. that constraint forced every design and engineering choice to serve the AI output, not sit alongside it.

the goal wasn't to automate form creation. it was to explore what a product looks like when the AI is the primary mode of interaction, and what that demands from the design and architecture underneath it.

FormSense landing page
landing page — built with next.js and tailwind css using claude code

built entirely with Claude Code

the entire product was scaffolded using Claude Code. rather than writing boilerplate by hand, prompts were used to generate Next.js page structures, Tailwind component layouts, Supabase query hooks, and full UI sections in real time. iteration happened through conversation: design decisions, layout adjustments, and component refactors were all driven by prompts.

this wasn't just about speed. it was a deliberate way to stress-test agentic AI development as a production workflow: understanding where it excels (component generation, repetitive structure, typed schemas), where it needs guidance (product logic, edge cases, visual judgment), and how to write prompts that produce useful, maintainable output rather than throwaway code.

FormSense dashboard
dashboard — form cards with live stats
FormSense AI form builder
ai form builder — plain english input generates live form preview
FormSense responses dashboard
responses dashboard — ai summary card with pattern analysis

a real schema built for a real product

the database runs on Supabase Postgres with two core tables. the forms table stores the form definition: user ownership, title, a fields JSONB column for the dynamic field schema, and a is_published flag for controlling live availability. the responses table captures each submission, linking back to the form and storing answers as JSONB alongside a submitted_at timestamp.

auth is handled by Supabase's built-in email provider. no third-party auth library needed. row-level security policies ensure users can only read and write their own forms and responses. the JSONB columns were a deliberate choice: form fields are variable by nature, and a flexible schema lets the AI generate any field configuration without requiring a migration.

forms

id · user_id · title · fields (jsonb) · is_published

responses

id · form_id · answers (jsonb) · submitted_at

auth

Supabase email provider. row-level security policies scope all reads and writes to the authenticated user.

why JSONB

form fields are variable by design. JSONB lets the AI output any field schema: text, select, range, date, without a database migration for each new type.

FormSense database schema
database schema — forms and responses tables in supabase postgres

chosen for speed, type safety, and AI compatibility

the stack was chosen to keep the feedback loop as tight as possible, between prompt, generated code, and working UI, while maintaining a real production-quality architecture throughout.

Next.js 14 app router · server components · typescript
Tailwind CSS utility-first · AI-generated layouts · consistent tokens
Supabase postgres · auth · row-level security · real-time
Framer Motion page transitions · micro-interactions · form animations
Claude Code agentic scaffolding · component generation · design iteration
Vercel deployment · preview environments · edge functions

the path to a fully live product

FormSense is a working proof of concept. the architecture is real, the UI is built, and the design patterns are established. the next phase wires it all together into a live, end-to-end product.

connect the Claude API

wire the form builder prompt input to the Claude API so that plain English descriptions generate real, structured field schemas, not placeholder data.

wire up Supabase auth

activate the full auth flow: sign up, sign in, session persistence, and row-level security, so users have a real account and private form workspace.

live form publishing

build the public-facing form URL. when a user hits publish, a live shareable link is generated and responses flow back into their dashboard in real time.

response analytics

visualise submission data directly in the dashboard: completion rates, field drop-off, and a simple answer summary for each published form.