← All work
AI · UI generation

Magic Markup

Annotate raw markup with natural language intent — the system transforms it into functional React components, styles, and interactive logic. AI-to-UI generation lab.

TypeScript Private repo
View example ↗

Transform your design review process with Magic Markup, a multi-tenant SaaS application that brings magic to website annotation and team collaboration.

About Magic Markup

Magic Markup revolutionizes how teams collaborate on website designs and feedback. With real-time annotation tools, seamless team management, and powerful collaboration features, Magic Markup makes design reviews feel magical.

Core Features

Magical Annotation Tools

  • Real-time website markup and annotation
  • Drawing tools with customizable colors and styles
  • Text annotations and threaded comments
  • Screenshot capture and live view synchronization

Smart Collaboration

  • Multi-tenant architecture with account management
  • Role-based access control (Owner, Admin, Editor, Viewer)
  • Real-time synchronization across team members
  • Project-based organization and sharing

Enterprise Ready

  • Comprehensive authentication and authorization
  • Data isolation and security
  • Audit trails and activity logging
  • Scalable multi-tenant infrastructure

Data Architecture

  • Accounts: Organizations/teams with billing and subscription management
  • Projects: Collections of markup sessions with shared access controls
  • Users: Individual accounts with role-based permissions
  • Markup Sessions: Individual website annotations with version history

Authentication & Authorization

  • OAuth 2.0 / OpenID Connect integration
  • Role-based access control (RBAC)
  • JWT-based session management
  • Multi-factor authentication support

Project Management

  • Project creation and configuration
  • Team member invitations
  • Access control management
  • Activity logging and audit trails

Collaboration Features

  • Real-time markup synchronization
  • Comment threads on annotations
  • Version history and rollback
  • Export and sharing capabilities

Markup Tool

  • The markup tool should be able to load a website and annotate it with text, shapes, and other annotations.
  • The markup tool should be able to save the annotations to a database.
  • The markup tool should be able to load the annotations from a database.
  • The markup tool should be able to export the annotations to a file.
  • The screenshot should be able to be annotated and scrollable.
  • The screenshot and live view should be annotated together.
  • The screenshot and live view should be annotated in real time.
  • The changes should be editable and undoable.
  • The version history should be able to be viewed and rolled back to.

Data Security

  • Tenant isolation using row-level security
  • Encrypted data storage
  • Regular security audits
  • Compliance with data protection regulations

Implementation Focus

The initial implementation will prioritize:

  1. Core authentication and authorization
  2. Basic project management
  3. Essential collaboration features
  4. Data isolation and security

Magic Markup Color Palette

Our signature dark theme creates an immersive, focused environment for design collaboration:

Primary Colors

  • Magic Blue: #2563eb (Primary accent and interactive elements)
  • Deep Purple: #5856D6 (Secondary accent and gradients)
  • Midnight: #111827 (Primary background)
  • Charcoal: #1f2937 (Secondary surfaces)
  • Slate: #374151 (Elevated surfaces and borders)

Drawing Palette

  • Magic Red: #FF3B30
  • Vibrant Orange: #FF9500
  • Golden Yellow: #FFCC00
  • Emerald Green: #34C759
  • Ocean Blue: #007AFF
  • Royal Purple: #5856D6
  • Hot Pink: #FF2D55
  • Pure White: #FFFFFF
  • Neutral Gray: #8E8E93