BrandGrid

Turn inconsistent legacy pages into one coherent system.

BrandGrid is a design system generator for UI/UX interns and designers who need to standardize existing developer-built sites with no prior design rules. It helps audit screens, define reusable tokens and components, and publish a clean style guide built around the chosen brand blue #2563EB and the Geist font family.

Business Goals

  • Reduce design system creation time by 50% within 8 weeks of adoption.
  • Cut design review and approval cycles from an average of 5 rounds to 2 rounds by week 12.
  • Enable one designer to document at least 30 legacy screens into a reusable system within 2 weeks.
  • Increase consistency score across audited pages by 40% in the first 60 days.
  • Achieve 70% weekly active usage among invited design contributors within 90 days.

User Goals

  • Identify inconsistent colors, typography, spacing, and components across existing pages.
  • Generate a usable token set centered on #2563EB and Geist without manual setup from scratch.
  • Map real pages to reusable design patterns and component variants.
  • Export a style guide that developers can implement quickly.
  • Keep the system easy to maintain when new pages are added later.

Non-Goals

  • Rebuilding the product UI from scratch.
  • Generating full visual branding beyond typography, color, spacing, and components.
  • Replacing Figma as the primary design tool.
  • Automatically fixing backend code or implementing frontend changes directly.

UI/UX Intern Aanya, 22 - Aanya has inherited a live website built by developers with no design documentation. She needs to produce a coherent design system quickly so the team can align on a cleaner visual language.

UI/UX Intern Aanya, 22

  • As a UI/UX intern, I want to audit existing screens and extract repeated UI patterns, so that I can define a practical system instead of guessing.
  • As a UI/UX intern, I want to set global tokens for color, type, spacing, and radius, so that every new component follows one standard.
  • As a UI/UX intern, I want to export a shareable style guide, so that developers and stakeholders can use the same source of truth.

Frontend Developer Rahul, 31 - Rahul owns the codebase and needs design decisions translated into clear implementation guidance. He wants token values and component rules he can use immediately in CSS or a component library.

Frontend Developer Rahul, 31

  • As a frontend developer, I want to see exact token values and usage rules, so that I can implement the design system without ambiguity.
  • As a frontend developer, I want component states and variants documented, so that I can build consistent UI faster.
  • As a frontend developer, I want to know which legacy elements map to the new system, so that I can refactor incrementally.

Design Lead Sana, 35 - Sana reviews the intern’s work and needs confidence that the system is complete, accessible, and consistent enough to scale across the product.

Design Lead Sana, 35

  • As a design lead, I want an overview of coverage and gaps, so that I can approve the system with minimal rework.
  • As a design lead, I want accessibility checks on contrast and text sizing, so that the system meets baseline usability standards.
  • As a design lead, I want versioned exports, so that changes are trackable over time.

Legacy UI Audit and Pattern Detection · High priority

  • The product must let users inspect existing site screens and identify repeated design patterns to form the basis of a design system.
  • Import screenshots, URLs, or pasted page references and group them into screens.
  • Detect recurring elements such as buttons, forms, cards, nav bars, tables, and alerts.
  • Allow manual tagging of patterns when automation misses a component.
  • Show frequency counts and example usages for each pattern.
  • Flag obvious inconsistencies such as multiple button styles or conflicting text sizes.

Design Token Management · High priority

  • The product must create and manage foundational tokens anchored to the specified blue and Geist typography rules.
  • Set primary brand color to #2563EB and generate compatible tints, shades, and semantic states.
  • Apply Geist as the only font family and define heading/body/mono usage rules within that constraint.
  • Support spacing, radius, elevation, border, and icon size tokens.
  • Allow users to edit token values and preview updates live across sample components.
  • Validate color contrast and warn when token combinations fail accessibility thresholds.

Component Library Builder · High priority

  • The product must translate patterns and tokens into a reusable component system for handoff and implementation.
  • Generate component specs for buttons, inputs, labels, cards, modals, tables, and navigation.
  • Define default, hover, active, disabled, focus, error, and loading states.
  • Support variant naming and usage guidance for size, intent, and density.
  • Link each component back to the audited legacy examples that informed it.
  • Provide implementation notes suitable for Figma, CSS variables, and React component libraries.

Style Guide Publishing and Sharing · Medium priority

  • The product must create a shareable design system document that stakeholders can review and developers can follow.
  • Publish a readable style guide with tokens, components, usage rules, and do/don’t examples.
  • Generate a public or private share link with role-based access.
  • Include export options for PDF and JSON token files.
  • Show a change log when the system is updated.
  • Support comments and approval status on core sections.

Search, Versioning, and Governance · Medium priority

  • The product must support maintenance of the system as the website evolves.
  • Version tokens and components with timestamps and author info.
  • Allow searching by component name, property, token, or page source.
  • Track approvals, drafts, and archived versions separately.
  • Warn when a page uses deprecated tokens or components.
  • Support rollback to a previous published version.

Project Setup and First Audit

  • Create a project with the site name and basic brand context.
  • Set the primary color to #2563EB and choose Geist as the font family.
  • Import existing pages through URLs, screenshots, or a small sitemap.
  • Run an automatic audit that identifies components, tokens, and inconsistencies.
  • Review the generated draft system and confirm the first component set.
  • Reach a usable first draft within 15 minutes of import.

1. Ingest existing UI

  • Users bring in the messy legacy site through screenshots, URLs, or copied page references.
  • Validate each input and show clear errors for unreachable URLs or unreadable images.
  • Group imported items by page type such as landing page, dashboard, settings, or form.
  • Preserve source links for traceability when the audit is reviewed later.

2. Detect patterns and inconsistencies

  • The system analyzes screens to surface repeated UI pieces and style drift.
  • Highlight repeated buttons, cards, inputs, tables, and alerts across screens.
  • Call out inconsistent colors, spacing, radii, and text styles.
  • Let users merge similar patterns or split false positives manually.

3. Define tokens

  • Users convert what they found into a controlled design token set based on the required brand rules.
  • Lock the primary color to #2563EB unless an admin changes it.
  • Use Geist only and auto-generate text style presets for display, heading, body, and caption.
  • Run contrast checks and warn on inaccessible combinations or insufficient hierarchy.

4. Build components

  • The product turns tokens and patterns into documented reusable components.
  • Generate component variants with usage notes and state definitions.
  • Allow users to edit naming conventions before publishing.
  • Link each component to supporting examples from the audit.

5. Publish and hand off

  • The final system is shared with developers and stakeholders as a living style guide.
  • Publish a versioned guide with exportable token JSON and PDF summaries.
  • Allow comments, approvals, and revision requests on each section.
  • Show what changed between versions to reduce rework during handoff.

Power Tools and Edge Cases

  • Bulk mapping of 20 or more screens to tokenized components.
  • Role-based access for intern, reviewer, and developer permissions.
  • Deprecated token warnings when older pages still use legacy values.
  • Theme extension support for future product areas while keeping the same core system.
  • Version comparison to show visual and token-level diffs between releases.
  • Fallback manual mode for low-quality screenshots or partially accessible pages.

Design Principles

  • Use a clean, documentation-first interface with strong hierarchy and minimal chrome.
  • Show the primary color #2563EB as the system anchor, not as decoration everywhere.
  • Keep Geist text highly legible with clear type scales and consistent line height.
  • Maintain WCAG AA contrast targets for all token combinations and component previews.
  • Make analysis progress visible with fast feedback and skeleton loading for large imports.
  • Optimize for side-by-side comparison of legacy UI versus proposed system.

Aanya, a UI/UX intern, inherits a site built entirely by developers with no design input. Every page looks slightly different, and she has only a short deadline to create a coherent design system that the team can actually use.

She uploads the existing pages into BrandGrid, sets the brand color to #2563EB, and locks the typography to Geist. The tool scans the screens, identifies repeated patterns and inconsistencies, and helps her build tokens, components, and a shareable style guide in a single workflow.

By the end of the week, Aanya has a versioned design system the developers can implement directly. The team moves faster, review cycles shrink, and the product finally feels consistent instead of patched together.

User-Centric Metrics

  • Time to first usable style guide under 15 minutes from project setup.
  • At least 80% of detected core patterns correctly mapped after manual review.
  • Reduce inconsistent token usage across audited screens by 40% within the first project.
  • Achieve a designer satisfaction score of 4.5 out of 5 on ease of handoff.
  • Cut time spent preparing developer handoff materials by 50%.

Business Metrics

  • 70% of invited users return weekly during the first 90 days.
  • At least 3 active projects per account within 60 days for teams that adopt the tool.
  • Increase export-to-share conversion to 60% of projects within the first month.
  • Reach 30% month-over-month growth in imported screen count after launch.
  • Maintain 85% project completion rate from import to published style guide.

Technical Metrics

  • 99.9% uptime for the web app.
  • Median screen analysis response under 10 seconds for up to 50 imported screens.
  • Token and component publish actions complete in under 2 seconds 95% of the time.
  • No critical security vulnerabilities in quarterly reviews; all sensitive data encrypted at rest and in transit.

Tracking Plan

  • project_created
  • screens_imported
  • audit_completed
  • pattern_detected
  • token_set_saved
  • component_published
  • style_guide_exported

Technical Needs

  • Frontend built with Next.js and TypeScript for fast interactive documentation flows.
  • Backend API using Node.js with a typed framework such as NestJS or Express with zod validation.
  • PostgreSQL for projects, tokens, components, versions, and permissions.
  • Object storage such as AWS S3 for screenshots, exports, and generated assets.
  • Background jobs with BullMQ or a managed queue for analysis and export generation.
  • Authentication and authorization with Auth0, Clerk, or NextAuth plus role-based access control.
  • Realtime preview updates using WebSockets or server-sent events for token changes and status feedback.

Integration Points

  • Figma for importing or exporting design tokens and component references.
  • Slack for review notifications and approval reminders.
  • Google Drive or Dropbox for importing screenshot bundles and exporting PDFs.
  • OAuth login via Google Workspace or GitHub for team access.
  • Optional CSS/JSON export for developers using Tailwind CSS, CSS variables, or React component libraries.

Data Storage & Privacy

  • Store screenshots and imported assets encrypted at rest with strict project isolation.
  • Support GDPR and CCPA requests for data export and deletion.
  • Limit retention of raw uploads and allow automatic purge after a configurable period.
  • Log access to shared style guides and sensitive project assets for auditability.
  • Mask any personally identifiable information detected in screenshots when possible, and warn users that manual review may still be required.

Scalability & Performance

  • Process large image batches asynchronously so the UI remains responsive.
  • Cache generated previews and token outputs to avoid recomputation on every edit.
  • Support pagination and lazy loading for projects with hundreds of screens.
  • Use CDN delivery for static exports and shared style guide assets.

Potential Challenges

  • False positives in pattern detection can create noisy component sets; mitigate with manual merge/split controls and confidence scores.
  • Legacy screenshots may be low quality or incomplete; mitigate with fallback manual tagging and image quality warnings.
  • Accessibility violations may persist if token choices are too constrained; mitigate with live contrast checks and suggested alternatives.
  • Designers may resist the generated structure; mitigate with editable outputs, clear provenance, and easy rollback.
  • Version sprawl could confuse teams; mitigate with explicit publishing workflows and archived drafts.

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

Phase 1: Audit MVP · Weeks 1–4

  • Project creation and authentication
  • Screenshot and URL import
  • Basic pattern detection for common UI elements
  • Initial token editor with primary color #2563EB and Geist font locked in
  • Simple project dashboard with source references

Phase 2: Design System Builder · Weeks 5–8

  • Component generation for core UI patterns
  • Accessibility checks for token combinations
  • Editable component states and variants
  • Style guide preview page
  • JSON token export

Phase 3: Collaboration and Publishing · Weeks 9–12

  • Comments and approval workflow
  • Version history and rollback
  • Share links with role-based permissions
  • PDF export and developer handoff summary
  • Notifications for review status

Phase 4: Scale and Integrations · Weeks 13–16

  • Figma export/import support
  • Slack notifications
  • Bulk analysis improvements for larger sites
  • Search across versions and deprecated tokens
  • Performance tuning and observability dashboards

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

Build a web app called BrandGrid for turning existing developer-built websites into a reusable design system.

Core product:
Users import legacy screens via screenshots, URLs, or page references. The app audits UI patterns, detects inconsistencies, and helps create a design system centered on primary color #2563EB and the Geist font family only. It should generate design tokens, component specs, and a shareable style guide for designers and developers.

Primary screens:
1. Auth and project creation
2. Project dashboard with imported screens, audit status, and version history
3. Import flow for screenshots and URLs
4. Audit review screen showing detected components, inconsistencies, and confidence scores
5. Token editor for color, typography, spacing, radius, and elevation
6. Component library builder for buttons, inputs, cards, tables, nav, modal, alerts
7. Published style guide with export/share actions
8. Comments, approvals, and version comparison view

Key features:
Import screenshots and URLs
Auto-detect patterns and group repeated UI elements
Lock brand color to #2563EB by default and use Geist only for typography
Generate text styles for heading/body/caption using Geist
Run contrast/accessibility checks and flag issues
Allow manual merge/split of detected patterns
Version tokens and components
Export JSON token files and PDF style guides
Share read-only links with role-based permissions

Data model:
User, Organization, Project, ImportSource, Screen, DetectedPattern, TokenSet, Token, Component, ComponentVariant, StyleGuide, Version, Comment, Approval, ExportJob

Default tech stack:
Next.js, TypeScript, Tailwind CSS, shadcn/ui, React Hook Form, zod, PostgreSQL, Prisma, NextAuth or Clerk, AWS S3, BullMQ, and a small Node.js API.

Build it with a clean documentation-first UI, responsive layouts, accessible contrast, fast loading states, and a polished side-by-side comparison experience for legacy UI versus the proposed system.

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

Make My PRD

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