LumeKit

Turn rough sites into a clean, consistent design system.

LumeKit is an AI-assisted design system generator for turning existing developer-built websites into a polished mobile-first UI kit. It is meant for a UI/UX intern or product designer who needs to extract colors, spacing, radius, shadows, and text styles from a live product and document them into clear markdown files for both designers and developers. The output helps teams standardize a custom Claude-like AI product UI while keeping the design simple, minimal, and ready to ship.

Business Goals

Reduce design-system creation time from 2-3 weeks to under 2 days for a single product by the end of the first quarter after launch.
Achieve at least 60% weekly active usage among invited design teams within 90 days.
Reach 40% conversion from uploaded site audit to exported markdown package within 30 days of first use.
Cut developer clarification questions about colors, spacing, radius, and typography by 50% in teams using the output package within 60 days.
Maintain a 4.5 out of 5 average satisfaction score from designers and frontend developers after the first 100 projects.

User Goals

Extract a complete mobile-first design foundation from an existing website without starting from zero.
Generate separate markdown files for designer and developer audiences so both can work from the same source of truth.
Keep the visual language minimal, with soft whites, soft borders, subtle shadows, and a consistent blue accent.
Use Geist only for text styles so the system remains simple and consistent.
Move from mobile-first documentation to desktop expansion later without rewriting the entire foundation.

Non-Goals

Not a full design-to-code visual editor or Figma replacement.
Not a general brand identity generator for logos, naming, or marketing copy.
Not intended to redesign product IA, workflows, or feature scope beyond UI foundation.
Not meant to support arbitrary multiple brand font systems at launch; Geist is the only typography family.

UI Intern Amina, 22 - Amina has been asked to document a live AI product that was built directly by developers with no formal UI input. She needs a fast, reliable way to create a design system that feels professional and consistent before a desktop redesign begins.

UI Intern Amina, 22

As a UI intern, I want to scan the current site and extract the dominant color, radius, shadow, spacing, and type patterns, so that I can document the system quickly.
As a UI intern, I want to generate separate markdown files for designer and developer audiences, so that each team can use the format they understand best.
As a UI intern, I want mobile-first defaults and desktop extension notes, so that I can design for the current browser-only mobile experience first.

Frontend Developer Sam, 31 - Sam is responsible for rebuilding the product interface with a more polished and consistent design language. He needs implementation-ready tokens and examples that map cleanly to CSS, Tailwind, and component props.

Frontend Developer Sam, 31

As a frontend developer, I want token values in developer language, so that I can implement them without interpreting design jargon.
As a frontend developer, I want clear usage rules for buttons, cards, inputs, and chat panels, so that the UI stays visually consistent.
As a frontend developer, I want edge-case guidance for small screens and long text content, so that the interface remains usable on mobile.

Product Lead Noor, 38 - Noor needs to align the team around a custom AI chat product that should feel modern like ChatGPT or Claude, but with its own identity. She wants a small, elegant system that can ship fast and scale into desktop later.

Product Lead Noor, 38

As a product lead, I want a concise style system that explains why each decision exists, so that the team can move fast with fewer revisions.
As a product lead, I want the system to support future desktop expansion, so that we avoid rework after mobile launch.
As a product lead, I want a simple minimal visual tone, so that the product feels premium and trustworthy for AI use.

Design System Extraction · High priority

Generate the foundational tokens and style rules from an existing website, using the product's blue accent and minimal visual direction as the base.
Detect the primary brand blue as #2563EB and derive accessible tints and shades for states.
Extract a usable neutral palette centered on soft whites, light grays, and subtle text contrast.
Generate radius, spacing, border, and shadow scales suitable for mobile-first component layouts.
Normalize token names into designer-friendly and developer-friendly formats.
Flag values that fail contrast or create inconsistent visual hierarchy.

Markdown Deliverables · High priority

Create separate markdown files for color, radius, effects, spacing, and text style, with two variations in each file for designers and developers.
Produce one markdown file per topic with a consistent heading structure and examples.
Include a designer version written in visual language and a developer version written in implementation language.
Use plain text tables or bullet-like text that can be copied into docs or code comments.
Ensure the file output can be pasted into Notion, GitHub, or a design handoff doc without cleanup.
Keep naming consistent across all markdown files to avoid mismatch between tokens and prose.

Mobile-First UI Guidance · High priority

Define the style system for the current browser-only mobile experience first, then provide desktop expansion notes for future scaling.
Prioritize 320 px to 430 px mobile widths for spacing, type scale, and component density.
Define safe tap targets, stack behavior, and wrapping rules for small-screen chat interfaces.
Specify desktop extension rules that preserve the same visual tokens and hierarchy.
Document responsive adjustments for navigation, sidebar, and conversation layout.
Prevent desktop-only patterns from leaking into the mobile foundation.

Visual Style Constraints · High priority

Keep the system visually simple, modern, and minimal, inspired by clean productivity tools such as Linear and Notion, without copying them.
Use soft whites as the dominant canvas color.
Use soft borders instead of heavy dividers or dark outlines.
Use subtle shadows only for elevation and overlay states.
Maintain restrained iconography, generous whitespace, and simple line-based separators.
Avoid decorative gradients, loud accents, or dense surface layering.

AI Product Fit · Medium priority

Make the system suitable for a custom AI generative product interface with chat, prompt, and response patterns.
Support chat input, message bubbles, code blocks, suggestion chips, and loading states.
Define component rules for empty, processing, error, and success states in the AI workflow.
Allow for long assistant responses, inline citations, and copied text affordances.
Include guidance for mobile keyboard behavior and persistent composer placement.
Keep the experience distinct from generic chat apps while remaining familiar to users.

Upload and Audit First Run

User enters the web tool from a browser on mobile or desktop.
User pastes a live site URL or selects an existing product page for analysis.
System scans visible UI patterns and extracts token candidates within 30 to 60 seconds.
User reviews the suggested palette, spacing, radius, effects, and text styles.
User exports the markdown package or edits values before export.
Time to first useful output target: under 3 minutes from initial URL submission.

1. Capture Existing UI

Ingest the live site and identify the core visual language used across main screens.
Accept public URLs and authenticated previews where permitted.
Handle missing CSS variables by inferring values from computed styles and screenshot analysis.
Warn the user when the site lacks enough repetition to confidently derive a system.

2. Generate Design Tokens

Convert extracted values into a structured token set for color, radius, spacing, effects, and typography.
Anchor the palette on #2563EB and surrounding neutral surfaces.
Apply accessible contrast checks for text on soft white backgrounds.
Output token names that can map to CSS variables or Tailwind config.

3. Create Dual-Language Markdown

Write one designer-friendly and one developer-friendly version for each style guide file.
Designer copy should explain intent, mood, and usage.
Developer copy should include numeric values, naming, and implementation notes.
If a token is uncertain, label it as recommended rather than authoritative.

4. Review and Refine

Let the user adjust the system before export, especially if the current site is inconsistent or incomplete.
Show a confidence score for each token group.
Highlight conflicts such as multiple button radii or mixed font sizes.
Allow locking a value so regeneration does not overwrite it.

5. Export and Share

Export all markdown files in a clean package for handoff to design and engineering.
Export as individual .md files and a combined summary file.
Preserve heading structure for Notion, GitHub, or internal docs.
Include version and timestamp metadata in the export footer.

Power Features and Edge Cases

Token diffing between two site versions to support redesign audits.
Desktop expansion mode that derives desktop-only spacing and layout rules from the same foundation.
Accessibility checks for contrast, tap size, focus state visibility, and text scaling.
Component suggestions for chat UI patterns such as prompt composer, response blocks, and code snippets.
Fallback behavior when the site is content-light or behind authentication, using screenshot-based inference.

Visual and Usability Principles

Soft white backgrounds with restrained surface layering and minimal visual noise.
Blue accent used sparingly for primary actions, focus states, and active selection.
Subtle border and shadow system that communicates hierarchy without heaviness.
Geist-only typography with clear size, line-height, and weight rules.
Mobile-first layouts with large tap targets, simple scroll behavior, and readable line lengths.
Fast, responsive generation with progress feedback and low-friction export.

Amina, a UI intern, has been handed a browser-only AI product that was built by developers without any design system. The product works, but the interface feels inconsistent: buttons change shape, spacing shifts between screens, and the typography lacks a clear rhythm. She needs to produce a clean foundation quickly, using a simple style language that can support the current mobile experience and later scale to desktop.

With LumeKit, Amina submits the site URL and gets a structured audit of the product’s visual patterns. The tool generates markdown files for color, radius, effects, spacing, and text style, each with a designer version and a developer version. It keeps the system anchored to #2563EB, Geist, soft whites, soft borders, and subtle shadows, so the team can align on one clear direction instead of debating style details one by one.

The result is faster handoff, fewer revisions, and a more polished AI interface that feels intentional rather than patched together. Sam, the frontend developer, can implement the tokens directly, while Noor, the product lead, gets a scalable foundation for future desktop work without redoing the entire design system.

User-Centric Metrics

80% of users can export a complete style package within 5 minutes of opening the tool.
At least 70% of generated token sets are accepted without manual redesign on the first review.
Reduce style-system documentation errors to under 10% per project as measured by review feedback.
Achieve a 4.5 out of 5 average usefulness rating for designer and developer outputs.
Reach 60% of users editing fewer than 20% of generated tokens before export.

Business Metrics

40% of projects convert from URL audit to exported markdown package within the first month.
25% month-over-month growth in completed audits during the first two quarters.
50% of users return to generate a second project within 30 days.
30% of invited teams share the exported package with developers within one week.
Maintain an NPS of 35 or higher among early design and frontend users.

Technical Metrics

99.9% uptime for the audit and export workflow.
Median token-generation latency under 45 seconds for standard public sites.
All exports generated with zero data loss and deterministic file structure.
Zero critical security incidents involving stored URLs, screenshots, or credentials.

Tracking Plan

track_url_submitted when a site URL is entered.
track_audit_started when the extraction job begins.
track_audit_completed when token inference finishes.
track_token_group_edited when a user modifies color, spacing, radius, effects, or text values.
track_preview_opened when the designer or developer markdown preview is viewed.
track_export_clicked when files are exported as .md.
track_export_completed when the full package finishes downloading or saving.

Technical Needs

Frontend built with Next.js and React for fast iteration and a clean export UI.
Backend processing in Node.js or Python for HTML scraping, screenshot capture, and token inference.
Use Playwright for page rendering and Puppeteer-style browser automation where needed.
Store generated style objects in PostgreSQL with a JSONB schema for token groups.
Use object storage such as AWS S3 or Cloudflare R2 for screenshots and export bundles.
Implement job processing with a queue such as BullMQ, Redis Queue, or Cloud Tasks.
Create CSS variable and Tailwind-compatible token output templates for developer handoff.

Integration Points

URL fetching and browser rendering via Playwright in a server environment.
Auth support through Google or GitHub OAuth for team access.
Export delivery through email or share links using SendGrid or Resend.
Analytics via PostHog or Amplitude for product event tracking.
Optional webhook support for Figma, Notion, or GitHub issue creation.

Data Storage & Privacy

Store only the minimum necessary data from audited sites, and allow users to delete projects permanently.
Treat authenticated URLs and session-based previews as sensitive input and never expose them in logs.
Encrypt project data at rest and in transit using industry-standard TLS and disk encryption.
Provide GDPR and CCPA-aligned deletion, export, and consent handling for user-generated data.
Avoid retaining screenshots longer than needed for processing unless the user explicitly saves them.

Scalability & Performance

Use asynchronous job queues so audits do not block the user interface.
Cache repeated URL fetches for a short time to reduce redundant scans of the same site.
Optimize screenshot processing and token extraction to keep the median audit under one minute.
Design the export pipeline to handle batch generation for multiple markdown files at once.

Potential Challenges

Challenge: inconsistent developer-built UI may produce noisy token extraction. Mitigation: use confidence scoring, deduplication, and manual lock controls.
Challenge: mobile screenshots may miss desktop-only patterns. Mitigation: separate mobile and desktop inference modes and label inferred values clearly.
Challenge: poor contrast in the source site may lead to inaccessible defaults. Mitigation: run automated contrast checks and propose accessible alternatives.
Challenge: authenticated pages may be inaccessible to the crawler. Mitigation: support manual screenshot upload and authenticated session capture.
Challenge: users may expect a full design system platform instead of documentation output. Mitigation: keep scope focused on style foundation exports and show clear onboarding copy.

Team & resourcing - Small team - 2 engineers, 1 designer, part-time PM, and optional QA support.

Phase 1: MVP Audit and Export · Weeks 1-4

URL input and site capture flow
Basic token extraction for color, spacing, radius, effects, and typography
Single markdown export package
Designer and developer versions for each style file

Phase 2: Review and Refinement · Weeks 5-7

Editable token review screen
Confidence indicators and conflict warnings
Locked token overrides
Improved mobile-first preview

Phase 3: Team Hand-off and Sharing · Weeks 8-10

Shareable project links
Auth via Google and GitHub
Export history and versioning
Analytics instrumentation for key actions

Phase 4: Desktop Expansion and Hardening · Weeks 11-14

Desktop token inference mode
Accessibility checks and recommendations
Performance optimization for larger sites
Security review and data deletion controls

Paste this into Cursor, Bolt, Lovable, or v0 to start building.

Build a mobile-first web app called LumeKit that turns an existing website into a clean design system export for an AI chat product.

Core concept:
Users paste a live product URL. The app analyzes the site and generates markdown style guides for color, radius, effects, spacing, and text style. Each file must include two variations: one written for UX designers in visual language, and one written for developers in implementation language.

Visual direction:
The generated system should be minimal and premium, inspired by simple productivity tools. Use soft whites, soft borders, and subtle shadows. Anchor the palette on #2563EB. Typography must use Geist only. Design mobile-first first, then include desktop extension notes.

Required flows:
1. Landing page with URL input and project name.
2. Audit progress state with clear loading feedback.
3. Results page showing extracted tokens, confidence levels, and conflict warnings.
4. Editable token review screen.
5. Export screen to download individual .md files and a combined bundle.

Required outputs:
Generate these markdown files exactly: color style.md, radius style.md, effects style.md, spacing style.md, text style.md.
Each file must contain two sections: Designer Version and Developer Version.
The designer version explains mood, usage, and practical guidance.
The developer version uses precise values, token names, and implementation guidance.

Data model:
Project with id, name, sourceUrl, createdAt, updatedAt, status.
TokenGroup with type, values, confidence, notes.
ExportFile with filename, content, version.
AuditJob with status, progress, errorMessage.

Tech stack:
Use Next.js 14, React, TypeScript, Tailwind CSS, PostgreSQL, Prisma, Redis queue, and Playwright for page capture and analysis. Use PostHog for analytics and Resend for email sharing. Store screenshots in S3-compatible object storage.

Implementation details:
Use a clean dashboard layout with sidebar or top nav depending on screen size. Mobile should prioritize single-column layout, large tap targets, and sticky actions. The UI should feel like a polished internal tool, not a consumer social app.

Build the app end to end with seed data, responsive UI, mocked token generation if needed, and a real export flow that produces downloadable .md files. Include sensible empty states, error states, and a project history page.

Business Idea

I have to create a design system of preexisting sites developed by developers without any ui input. I am ui/ux intern and my task is to provide a entire design system colours #2563EB and text style guide font is Geist only.I want a claude prompt acting as a senior ux designer my deliverables are color,radius,effects style guide as md file , spacing . md, text style.md with use case for mobile first then after building we will shift to desktop . md files must have two variations one of ux designer and one for developer written in developers language . Use soft whites , soft borders and soft shadows, must simple minimal like liner, notion. The product is an ai generative tool like chat gpt and claude but different and customised ui , current state of product is its an url and in mobile it is used only through browser no app for mobile

Design by The Resonance | Powered by GPC – The AI Transformation Company

TL;DR

Goals