AuraDesign.AI
Live PrototypeAI-Powered UI/UX Design Analyst That Closes the Gap Between Raw Analytics and Real-World Implementation.
Conceived, architected, and shipped for HackData 2026 at Shiv Nadar University. Ingests any live URL, scrapes DOM structures, benchmarks layouts against industry leaders, computes 20×20 Gaussian heatmaps from real user interaction clicks, and outputs single-click approvable code fixes.
Placed in the top 10 out of 255 participating teams at HackData 2026, Shiv Nadar University.
Full-height Puppeteer lazy-scroll capture, DOM hierarchy scrape, and 5 classical design laws evaluated.
Gaussian kernel diffusion matrix weighting initial participant clicks at 4.0× and secondary at 2.5×.
Approving any recommendation opens a streaming code chat or synthesizes a Cursor Vibe-Coding Prompt.
Five Core Intelligence Subsystems
Explore the five integrated workstations engineered to audit, compare, validate, and write code.
AI UX Consultant
A real-time streaming conversational partner pre-loaded with your website's entire context: full-page DOM structure, scraped component counts, brand style preferences, and real-user heatmap hot-zones. Features automatic fallback to Gemini 2.0 Flash upon 429 quota exhaustion.
Traditional Analytics Tell You WHAT, Never WHY
Most website owners know their landing pages feel “off” or suffer from high bounce rates, but traditional telemetry tools like Google Analytics or Hotjar only measure lagging indicators: raw pageviews, scroll depth percentages, and dead clicks.
They cannot tell you why a visitor ignored your primary call-to-action button, whether adjacent headers violate visual hierarchy, or how your layout compares against high-converting industry leaders like Stripe and Linear.
Design Tools Offer Aesthetics, Never Real-World Usage Data
Conversely, static design software and Figma plugins give feedback in a vacuum. They evaluate vector layers without live DOM rendering, without real browser performance constraints, and without actual user interaction heatmaps.
AuraDesign.AI bridges this chasm by closing the complete loop: automated DOM scraping, classical design law evaluation, vector benchmark comparison, real-user interaction click diffusion, and instant 1-click code synthesis.
The Closed-Loop UX Engine
How audit ingestion, vector benchmark RAG, recommendation cards, code implementation, and real-user heatmap validation form an unbroken learning cycle.
How audit, benchmarking, recommendation, code generation, and real user validation feed into each other.
Full-Page Ingest & Audit
A headless Puppeteer browser navigates to the target URL, triggers lazy-loaded image hydration through automated viewport scrolling, and extracts the hierarchical DOM layout alongside CSS styling matrices for five-law audit evaluation.
Target Website URL & Onboarding Preferences
Full-Page PNG, Scraped DOM Tree, Initial Law Scores
backend/src/tools/scraper.tool.js · Puppeteer Full-Page EngineFive Classical Design Laws Evaluated
AuraDesign.AI evaluates interfaces against quantitative design psychology and human-computer interaction principles.
Fitts's Law
The time required to acquire an interactive target is a function of the distance (D) to the target and the width (W) of the target.
Tiny primary CTA buttons (e.g. 28px height) buried inside crowded hero paragraphs, or mobile touch targets below the 44×44px Apple HIG threshold.
Calculates target clickability index from DOM bounding boxes; flags any primary action requiring excessive cursor travel distance or high motor precision.
Enforces minimum 48px target height, sticky bottom-sheet mobile triggers, and prominent optical anchoring inspired by Stripe checkout buttons.
Engineering Architecture & Key Algorithms
Key algorithms, streaming SSE pipelines, and database architecture built for resilience under hackathon constraints.
Zero-Latency Streaming with Automatic Quota Failover
Attempts high-speed streaming via Gemini 2.0 Flash; upon detecting HTTP 429 quota exhaustion, seamlessly transitions the stream to Groq Llama 4 Scout 17B with zero user interruption.
try {
const streamResult = await chat.sendMessageStream(message);
for await (const chunk of streamResult.stream) {
const token = chunk.text();
if (token) emit('token', { token });
}
} catch (streamErr) {
if (isQuotaError(streamErr)) {
console.log('[Chat] Gemini quota hit — failover to Groq');
fullResponse = await streamWithGroq(
systemPrompt,
chatHistory,
message,
emit
);
}
}Interaction-Order Weighted Gaussian Diffusion
Real participant click coordinates are projected onto a 20×20 matrix. First clicks receive a 4.0× attention weight, second clicks 2.5×, and subsequent clicks 1.0×, diffused with a Gaussian radius.
for (const c of clicks) {
const cx = Math.min(19, Math.floor(c.x_pct * 20));
const cy = Math.min(19, Math.floor(c.y_pct * 20));
// Weight initial clicks higher to capture first impressions
const weight = c.click_order === 1 ? 4.0 :
c.click_order === 2 ? 2.5 : 1.0;
for (let r = 0; r < 20; r++) {
for (let col = 0; col < 20; col++) {
const distSq = (col - cx) ** 2 + (r - cy) ** 2;
grid[r][col] += weight * Math.exp(-distSq / (2 * 1.5 * 1.5));
}
}
}The backend connects to Supabase PostgreSQL orchestrating 21 tables spanning user onboarding (users), multi-turn chat threads (chat_sessions, chat_messages), full-page DOM captures (scraped_pages), public survey tokens (heatmap_survey_links), raw interaction events (survey_click_events), 20×20 matrix summaries (heatmap_summaries), recommendation change cards (recommendation_cards), and user preference learning profiles (user_preference_profiles).
- React 18
- Node.js
- Express
- Supabase
- Groq API (Llama 4)
- Gemini 2.0 Flash
- Puppeteer
- Pinecone
- Tailwind CSS
- Zustand
- Remotion
- Vercel
Individual Technical Ownership
Team of 3 ("The ACE"). I originated the concept and owned product design, the backend architecture, the dual-LLM streaming pipeline (Groq Llama 4 + Gemini fallback), Puppeteer scraper, 20×20 Gaussian heatmap computation, and Vercel deployment. A teammate built the landing page.
Conceived and delivered end-to-end for HackData 2026. While the landing page was crafted by a teammate, I owned the complete product design, system architecture, backend implementation (Node.js/Express), dual-LLM streaming pipeline (Groq Llama 4 + Gemini Flash failover), Puppeteer scraper, Pinecone benchmark vector integration, 20×20 Gaussian click diffusion mathematical model, 21-table Supabase schema, and production Vercel deployment.
Experience the Live Prototype & Source Code
Try the live deployment on Vercel or review the complete full-stack repository on GitHub.