Architect
Architect is an AI-powered design reverse-engineering system.
Core trick
Playwright captures full-page screenshots, Gemini extracts design tokens from them, and generated static HTML deploys via Vercel's API.
Description
Architect is an AI-powered design reverse-engineering system. Paste any public URL and it automatically: (1) captures full-page screenshots using Playwright, (2) extracts the complete design system using Gemini 2.5 Flash — colors, typography, spacing, components, and user flows, (3) generates a pixel-perfect HTML clone from the analysis, and (4) deploys it live to Vercel as a static site — all in under 2 minutes. The web app streams real-time progress via SSE so you watch each pipeline step happen live. Features include downloadable design tokens (JSON + CSS), full component mapping, user flow analysis, and one-click clone deployment. Built with Next.js, Tailwind CSS, Playwright, Gemini 2.5 Flash, and Vercel Deploy API. Targets Problem Statement 2 (Multi-Modal Agents) and Statement 3 (AI Applications).
README excerpt
# Architect Agent AI that reverse-engineers any app and deploys a working clone. ## Setup ### 1. Install dependencies ```bash npm install npx playwright install chromium npm install -g @mermaid-js/mermaid-cli ``` ### 2. Configure environment ```bash cp .env.example .env # Fill in all keys in .env ``` ### 3. Get your API keys | Key | Where to get it | |-----|----------------| | `DISCORD_TOKEN` | https://discord.com/developers/applications → New App → Bot → Token | | `DISCORD_CLIENT_ID` | Same page → OAuth2 → Client ID | | `GEMINI_API_KEY` | https://aistudio.google.com/app/apikey | | `ANTHROPIC_API_KEY` | https://console.anthropic.com | | `VERCEL_TOKEN` | https://vercel.com/account/tokens | ### 4. Invite bot to your Discord server ``` https://discord.com/api/oauth2/authorize?client_id=YOUR_CLIENT_ID&permissions=274877906944&scope=bot ``` Replace `YOUR_CLIENT_ID` with your actual client ID. ## Run ### Start the bot ```bash npm start # or for dev with auto-reload: npm run dev ``` ### Test without Discord (fastest way to iterate) ```bash # Test full pipeline node src/test.js https://stripe.com/billing # Test just scraper node src/scraper/test.js https://stripe.com # Test just Gemini analyzer node src/analyzer/test.js output/scraper-test/full.png ``` ## Discord Usage In any channel your bot can read: ``` reverse engineer stripe.com/billing reverse engineer linear.app reverse engineer https://vercel.com/pricing ``` The bot will: 1. Screenshot the page 2. Analyze with G