Design Context

Transform your React, Next.js, or Tailwind project's UI using design language extracted from reference websites.

This is not an AI website builder or a chatbot. It is a Design Context Engine — a pipeline that captures visual design systems from high-quality reference sites and applies them to your existing project while preserving all functionality.

How It Works

Upload Project → Add Reference URLs → Capture Screenshots → 
Extract Design Context → Rewrite UI → Preview → Download

1. Upload — Drop a ZIP or paste a GitHub repo URL. The framework is auto-detected.
2. Reference — Paste 1–5 URLs of websites with the design language you want.
3. Analyze — Puppeteer captures desktop screenshots, then a vision AI extracts the design system into structured JSON (typography, colors, spacing, borders, buttons, cards, animations, principles).
4. Rewrite — A coding model rewrites your UI files applying the extracted design context. All functionality, routing, API logic, and state management are preserved.
5. Preview — Toggle between before and after file views.
6. Download — Get a ZIP of the transformed project.

Product Philosophy

AI produces significantly better UI when given structured design context extracted from high-quality reference websites.

The emphasis is on the Design Context workflow — extracting reusable design principles rather than generating prompts or building sites from scratch.

Architecture

src/
├── app/
│   ├── api/
│   │   ├── upload/       # ZIP upload + framework detection
│   │   ├── analyze/      # Screenshot capture + vision analysis
│   │   ├── rewrite/      # AI-powered UI transformation
│   │   └── download/     # Transformed project ZIP export
│   ├── page.tsx          # Main UI
│   └── layout.tsx
├── components/
│   ├── UploadZone.tsx        # Drag-and-drop ZIP upload
│   ├── ReferenceUrls.tsx     # URL input (1–5)
│   ├── DesignContextView.tsx # Extracted design system display
│   └── Preview.tsx           # Before/after file diff
├── hooks/
│   └── usePipeline.ts   # State machine driving the full flow
└── lib/
    ├── ai/
    │   ├── provider.ts         # AIProvider interface
    │   └── groq-provider.ts    # Groq API (qwen3.6-27b)
    ├── modules/
    │   ├── upload/             # ZIP extraction + framework detection
    │   ├── screenshot/         # Puppeteer screenshot capture
    │   ├── design-context/     # Vision AI → Design Context JSON
    │   ├── rewrite/            # Coding AI → UI transformation
    │   ├── preview/            # Before/after snippet generation
    │   └── export/             # ZIP packaging
    ├── types.ts
    ├── config.ts
    └── storage.ts

AI Provider Abstraction

The AI layer is abstracted behind a single AIProvider interface in src/lib/ai/provider.ts. Swap models or providers without changing application code:

export interface AIProvider {
  analyzeScreenshots(screenshots: string[]): Promise<DesignContext>;
  rewriteProject(files, designContext, framework): Promise<ProjectFile[]>;
}

Tech Stack

• Framework — Next.js (App Router)
• Language — TypeScript
• Styling — Tailwind CSS v4 (dark mode, Linear-inspired)
• AI — Groq API (qwen3.6-27b)
• Screenshots — Puppeteer
• ZIP — adm-zip

Getting Started

Prerequisites

• Node.js 18+
• A Groq API key

Setup

git clone https://github.com/Parithosh-Varma/DESIGNcontext.git
cd DESIGNcontext
npm install

Create .env.local:

GROQ_API_KEY=gsk_your_key_here
AI_MODEL=qwen3.6-27b

Start the dev server:

npm run dev

Open http://localhost:3000.

Usage

1. Export your React/Next.js/Tailwind project as a ZIP, or use a GitHub repository URL.
2. Drop the ZIP on the upload area, or switch to GitHub Repo mode and paste the URL.
3. Paste 1–5 reference website URLs.
4. Click Analyze — screenshots are captured and the design system is extracted.
5. Review the extracted Design Context.
6. Click Transform UI — the AI rewrites your UI.
7. Toggle Before/After to compare.
8. Click Download Transformed Project.

Design of the UI

The app's own interface follows the principles it encodes:

• No emojis
• No gradients
• One accent color (blue)
• Large whitespace
• Excellent typography (Geist)
• Dark mode by default
• Purposeful animations only