Skip to content

DesignNorth Park Labs

Magic Patterns

AI prototyping for product teams — generate UI in your own design system.

Category
Design
Pricing
FREEMIUM
Source
Proprietary
Hosting
Cloud
Platforms
Web
Verified
Jun 11, 2026

An AI design tool that turns prompts into working UI prototypes product teams can test with users and hand to engineering. Version 2.0 imports components from Figma, Storybook, or any website via its Chrome extension, so generated screens match your real design system rather than generic mockups. Includes real-time collaboration and a free tier to start.

Capabilities 3

What it actually does — grouped by capability family.

  • Code generation (secondary capability)
  • AI app builder (secondary capability)
  • UI design / design-to-code (primary capability)

Pros & cons

  • Prototypes you can test and hand off
  • Figma and Storybook component import
  • Free tier to start
  • Built for team collaboration
  • Business tier jumps to $100/seat/month
  • Web-only, no desktop app

Tags

Alternatives to Magic Patterns (4)

View all Design →
  • View v0 details
    AgentFREEMIUM

    v0

    Vercel

    Prompt-to-UI generator from Vercel. Outputs React + Tailwind + shadcn.

    Vercel's generative UI surface. Type a description, get a working React component using Tailwind and shadcn primitives — copy the code or fork into a v0 project for iteration.

    Uses production shadcn/ui primitives
    Opinionated toward shadcn/Tailwind
    • ui-gen
    • react
    • tailwind
    • shadcn
    Open
  • View Uizard details
    DesignFREEMIUM

    Uizard

    Miro

    AI UI design: generate editable wireframes, mockups, and prototypes from a prompt.

    A browser-based UI design tool that turns text prompts, hand-drawn sketches, and screenshots into editable mockups and clickable prototypes. Its Autodesigner generates whole multi-screen projects with themes, and a Screenshot Scanner converts existing app screens into editable designs. Aimed at non-designers and PMs who want usable UI fast.

    Screenshot-to-editable-mockup
    Lower fidelity than Figma output
    • ui-design
    • wireframing
    • prototyping
    • no-code
    • +1
    Open
  • View Figma AI details
    DesignFREEMIUM

    Figma AI

    Figma

    AI design and prompt-to-code built into Figma.

    Figma's AI layer for product design: First Draft generates editable layouts from a prompt, content tools fill real copy, and a canvas Design Agent edits via natural language. Figma Make turns prompts into working prototypes, and the Figma MCP server pipes design context into coding tools.

    Native to existing Figma files
    AI tied to a Figma subscription
    • design
    • ui-design
    • prototyping
    • prompt-to-code
    • +1
    Open
  • View Lovable details
    AgentFREEMIUM

    Lovable

    Lovable

    Prompt a full-stack app into existence — UI, backend, and deploy.

    An AI app builder that turns prompts into full-stack web apps — React UI, Supabase backend, GitHub sync, and one-click publish. Popular for going from idea to shipped product fast.

    Built-in Supabase backend
    Can burn credits on complex apps
    • app-builder
    • full-stack
    • no-code
    • supabase
    Open
Open Magic Patterns