Copy Paste from Figma
Copy frames and components directly from Figma into Magic Patterns. Connect your Figma account, select any element in Figma, copy it, and paste it right into your design. No importing or exporting required.Rename Versions
Fork in Share Links
New Credit System and Pricing on April 2, 2026
We’re introducing a new credit system, on-demand pricing, and restructured pricing plans. These changes take effect on Thursday, April 2, 2026. Emails have been sent to all existing customers.For existing customers, you’ll be automatically upgraded to a new equivalent plan at no additional cost. Your current pricing will be honored through June 30, 2026 or until your next renewal if you’re on an annual plan.Read the full details here. If you have any questions, we’re here to help. Feel free to reach out to our support team at support@magicpatterns.com or use our in-app chat.New MCP Tools
Our MCP server now letting you specify which design system to use when creating designs programmatically.We’ve also added several new tools:list_design_systems— Discover available design systemscreate_blank_design— Create a new blank design with default scaffold filescreate_design— Create a design from a natural language promptcreate_new_artifact— Clone the current artifact for safe editingread_files/write_files/edit_files— Read and modify files in an artifactcompile_artifact_changes— Compile after making file changesupdate_design_from_prompt— Update a design using natural language
Command K
⌘K (or Ctrl+K on Windows) to quickly access actions, navigate between designs, and search across your workspace. Command K gives you instant access to everything you need without leaving the keyboard.Submit Feedback and Get Featured
We use Magic Patterns internally to build Magic Patterns.Submitting feedback here will spin up an internal Magic Patterns prototype for us to review and implement into our codebase. If shipped, we’ll credit you here in the changelog. We’re thankful for your feedback!
Brand & Color Import for Design Systems
Color Tokens in Design Systems
Official Claude Connector
Connectors
Typography in Design Systems
Generate designs that look like your font, automatically!Upload your custom font, choose a popular Google Font, or simply paste your font URL.Typography is a dedicated section in your Design System. Learn more about using custom fonts.
Emails sent when sharing designs
For a long time, users thought our system would send an email when they invited someone to a design. This is now “fixed.” Emails are now sent when you invite someone. Thanks for your feedback!
Improved Dashboard Navigation
We’ve refreshed the navigation on the dashboard for a cleaner, more intuitive experience.Opus 4.6 Now Default in Auto
“Auto” mode now uses Claude Opus 4.6 by default, unless your organization has disabled it.Design Systems
Design Systems are the new way to keep consistent styles, colors, typography, and components across your team’s designs.Your existing presets and component libraries have been automatically migrated to Design Systems.
Visual Edit
Sometimes, you don’t need the AI. You’re now in control: select any element in your design and edit it manually. Change text, colors, spacing, and other properties from the Visual Edit panel.This feature was in beta, but is now available to everyone.
Queue Messages
You can now queue multiple prompts while a generation is in progress. Each prompt is processed in order.Queued prompts appear below the input field. You can remove any queued prompt before it starts.
MUI Default Design System
Generate components using our Material UI (MUI) Design System defaultHow it works:- Tap the Design System Selector from the Dashboard
- Select MUI
Annotate Your Canvas
Add text nodes directly to your canvas to describe user flows, label prototypes, and keep your workspace organized.How it works:- Click the text tool in the toolbar to add a text node anywhere on your canvas
- Double-click to edit the text inline
- Adjust font size, weight, and alignment using the floating controls
- Drag to reposition or resize the text box to fit your layout
Collect Feedback under Integrations
We’ve moved the “Collect External Feedback” feature to the integrations panel.You can enable external feedback collection on your designs by clicking the integrations button in the top right corner of your design, next to your profile picture.This adds a structured feedback form directly on your publish link. View more details in our Collecting External Feedback documentation.Access it via Integrations → Collect External Feedback.
Inline Preview Comments
Leave comments directly on your preview to collaborate with your team. Click anywhere on the design to start a conversation — perfect for gathering feedback without leaving the browser.We also refreshed the preview page with viewport controls, so you can see how your design looks across different screen sizes.Access it via Share → Preview Link.OAuth 2.0 Authentication for MCP Server
Our MCP Server now supports OAuth 2.0 authentication. Simply connect and authorize through your browser — no more manually copying API keys into headers.This makes setup faster and keeps your credentials more secure.
Updated Share & Publish Panels
Sharing designs with teammates and publishing to the web are two of the most popular things you do with your prototypes.We gave both panels a UI & UX upgrade to make these workflows faster and more intuitive.
Magic Patterns MCP Server
Your favorite AI tools & agents can now connect to your Magic Patterns design via our MCP Server.One of our favorite new workflows is adding the Magic Patterns MCP to Cursor. When connected, you can simply tell Cursor the link to your Magic Patterns prototype and Cursor will automatically implement it in your codebase following your codebase’s conventions.Learn how to configure the MCP Server with your favorite tools here.
Uploading a Video
Animate interactions, generate full user flows, debug issues, all from just uploading a single file.You can use a video when creating a new design or updating an existing one.
Converting Presets
You can now change the preset of an existing design to a different preset.Key benefits:- Change Presets: Switch between Wireframe, Shadcn, Chakra, Mantine, or your own Custom Presets without starting over.
- Non-destructive: Creates a new version of your design, preserving your original generation.
- Open any design and click the “Convert” button in the top bar.
- Choose a new preset (like switching between two of your custom presets with different design systems).
- Watch as a new design is generated in a separate tab.
Publishing to a Custom Website Address
Publish your designs as live websites with a custom website address or your own domain.Key features:- Custom Website Address: Create shareable URLs like
project-alex.magicpatterns.app - Custom Domains: Connect your own domain or subdomain.
- Multiple Domains: Add multiple domains to the same design
Agent Mode
Agent Mode is our new architecture designed specifically for rapid prototyping, creative inspiration, and building production interfaces.Read more about it’s capabilities in our blog post here.
Device Frames
For specific viewports, you can now display a device frame around your design. Currently, these are the supported device frames:- iPhone SE
- iPad Pro
Templates
Organize your reusable designs with Templates. Convert any design into a template and access them all from a dedicated tab in your dashboard.How it works:- Click the dropdown next to your design name and select “Publish Template”
- All your templates appear in the Templates tab on your dashboard
- Fork from any template to create a new design based on it
- Unpublish templates anytime to remove them from the Templates tab
Enhance Prompt
Get better results with AI-powered prompt enhancement. Magic Patterns now helps you refine your prompts before generating.How it works:- Click the “Enhance this prompt” button in the prompt input field
- AI automatically refines your prompt for clarity and specificity
- Get higher-quality designs with more accurate results
Figma Remote MCP
Importing from Figma got a massive upgrade. We now enrich frames and components with context from the Figma MCP automatically (you no longer need the Chrome extension + dekstop app).Read more about how we designed this feature in our latest blog post.Upgraded Personal & Workspace Settings
Our settings page was getting really long with all the features we’ve been shipping. We improved this page to help you better manage your team + customize your Magic Patterns experience.Refreshed documentation
We made it easier to find the information you need. If you have any feedback on what documentation you’d like to see, we’re all ears!
OpenAI Integration
You can now bring your own OpenAI API key to power AI generation in your designs and prototypes.Key features:- Input your OpenAI API key directly in the integrations panel
- Use AI-powered features with your own OpenAI account
- API keys are automatically available across all your designs once configured
Upgrade Component Instances
When you publish a new version of a component, you can now upgrade all instances across your designs in one place.How it works:- When you publish a new component version, a modal appears showing all designs that use that component
- Select which designs you want to upgrade and click “Upgrade Instances” to update them all at once
Sound Notifications
Enabled by default for all users!- Get a gentle chime when your design is ready
- Multitask while Magic Patterns works in the background
- Go to Settings > Preferences > Sound Notifications
- Toggle “Sound Notifications” off
Credit Rollovers
- Credits now rollover month-over-month
- See your credit history in your settings
Closed beta
Two new features are releasing under closed beta.- Agent Mode
- Integration with Figma MCP
Improved Import from Figma
- We’ve improved the Import from Figma to capture exact color values.
Other Improvements & New Features
- Improved Import from Figma
- Dashboard QoL features (renaming files, performance improvements)
- Editor QoL features (refresh preview, page dropdown, etc)
- Fixed issues with Delete Element
- Improved sync with GitHub reliability
New Fast Model
- “Fast” mode now runs on Claude Sonnet 4.
- We’ve seen major improvements in debugging issues, listening to instructions, and solving unique challenges
- We’d still recommend using “Best” for large UI changes or more “inspirational” guidance
Improved Site Hosting
- We migrated our site hosting infrastructure to a new system that loads previews 2x faster
- Sites hosted through our custom domain feature will also be faster + more stable
Other Improvements & New Features
- Import from Figma is now in early access. Coming to everyone next week.
- Default page routing
- Convert between presets
- Improved error handling for sync with Github
- Fixed preview on canvas
- Supporting more NPM packages
Referral Program
- Earn credits by inviting your teammates and friends to Magic Patterns
- Find your unique referral link on the Magic Patterns dashboard
Other Improvements & New Features
- Granular permissions on libraries
- Automatic Detach Components preference
- Support for Meta Pixels and Google Tags
- General stability and error improvements
- Improved login experience
- Lots of bug fixes
Shared with me tab
- We’ve added a new “Shared with me” section to the dashboard.
- You can now see all the designs that have been shared with you.
Other Improvements & New Features
- Granular permissions on canvases
- SAML SSO Authentication
- Improved support chat interface
- Better troubleshooting documentation
- Automatic error detection + fixing
- Improved dashboard loading performance
- Better support for mock data via xlsx and csv files
- Support for many more NPM packages
- Ability to deprecate components
- Ability to add additional context when creating a component
Bug Fixes
- Support for latest lucide icons
- Easier site navigation in canvas
- Fixed bug with versioning dropdown
- Fixed issues of infinitely hanging generations
- Fixed performance issues
- Improved platform stability and handling for outages out of our control
Invite your team, set permissions, and control read/write access
- If you click the share button in the top-right corner of any design, you can now invite your team to collaborate on the design.
- You can also control who has access to the design.
- Better error handling
- Component source code included when possible in code export
- Improved AI context handling
- Ability to rename components
- New /Debug and /Discuss commands
”Chats” renamed to “Designs” and “Projects” renamed to “Canvas”
- We revamped our dashboard: magicpatterns.com/dashboard
- We renamed “Projects” to “Canvas”
Custom components in public beta
We’re excited to announce components in public beta, read more here: Custom Components- Custom components in public beta
- Thinking is exposed
- Improved preview image generation
We’re excited to announce two major features:
- Structured feedback collection
- Password protection for shared designs
We’re excited to several new features:
- Custom domains
- Image upload improvements
- Preview links — more human-readable and shareable
- Lots and lots of bug fixes
We’re excited to several new features and improvements:
- Refresh of our core editor UI
- Previews now load 5x faster
- Page routing
- Model Mode: Fast or Quality (Sonnet 3.5 vs 3.7)
- Moved our API product to our new infrastructure
- “Copy Prompt” feature/integration on 21st.dev
We’re excited to announce Workspaces and other improvements:
- Workspaces
- Added diff-ing
- Ability to undo