# Magic Patterns (ChatGPT App)

> Get design inspiration

- Type: app
- Publisher: Magic Patterns (official)
- Categories: Development, Design
- Website: https://chatgpt.com/plugins/plugin_asdk_app_6a585f804ad08191931907c9dc46a985
- Open in ChatGPT: https://chatgpt.com/plugins/plugin_asdk_app_6a585f804ad08191931907c9dc46a985
- Version: 1.0.0
- Listed: 2026-10-04

## About

Enable your agent to prototype ideas, generate design inspiration, upload local UI, and integrate Magic Patterns designs. The Magic Patterns toolset lets you visually align with your agent on what you want to build.

## How to use

1. **Add it in ChatGPT** Open Magic Patterns in ChatGPT's Plugin directory (button above), select + to add it and sign in if asked.

2. **Use it in a chat** Type @ in the composer and pick Magic Patterns, or start your message with its name. ChatGPT may also suggest it when it fits what you ask.

## Skills

- **integrate-magic-patterns-design**: Adapt code generated by Magic Patterns (magicpatterns.com) into an existing codebase. Use when the user shares a Magic Patterns design, prototype, exported zip, "Copy Code as Prompt" output, or a magicpatterns.com URL and wants it implemented, integrated, or productionized in their project. Treats the Magic Patterns code as a design spec, not as code to copy verbatim.
- **prototype**: Prototype an idea in Magic Patterns (magicpatterns.com) starting from your local UI. Use when the user gives a prompt for something they want to prototype or explore and wants an iterable Magic Patterns design grounded in their existing code. Seeds a design by recreating the relevant local UI (recreate-as-react) and uploading it, then prompts Magic Patterns to design the new idea, returns the editor link, and opens it in the browser. Requires the Magic Patterns MCP server.
- **recreate-as-react**: Recreate a component, screen, or pasted code from any codebase as a self-contained React + TypeScript + Tailwind prototype (App.tsx / index.tsx / index.css, named exports, one component per file) that renders in the Magic Patterns prototype environment and faithfully reproduces the original's styling, colors, spacing, and fonts. Use when the user asks for a "React recreation", a "React version" of a component, "recreate X as React", or as the porting engine for the upload-to-magic-patterns and prototype skills.
- **upload-to-magic-patterns**: Upload UI you are building locally into Magic Patterns (magicpatterns.com) and return the editor link. Use when the user wants to push a component/screen they are working on in their codebase into Magic Patterns as a design — for review, stakeholder sign-off, or further iteration. Requires the Magic Patterns MCP server.

## Example prompts

- "How would you redesign our landing page?"
- "Give me design inspiration for this component"
- "Build a slide deck presenting this new feature"

## Related

- [GitHub](https://chatgptplugins.directory/apps/github.md): Triage PRs, issues and CI across your repositories
- [Canva](https://chatgptplugins.directory/apps/canva.md): Create, resize, edit and review Canva designs from a chat
- [Figma](https://chatgptplugins.directory/apps/figma.md): Create designs, diagrams and FigJam boards and ship them to code
- [MCP App Basics (Apps SDK example)](https://chatgptplugins.directory/apps/apps-sdk-mcp-app-basics.md): Eleven interactive widgets that each teach one MCP Apps API
- [Cards Against AI (Apps SDK example)](https://chatgptplugins.directory/apps/apps-sdk-cards-against-ai.md): Card game driven by ChatGPT with a real-time synced widget
- [Authenticated Server (Apps SDK example)](https://chatgptplugins.directory/apps/apps-sdk-authenticated.md): Demonstrates tools that require different levels of OAuth

---
Source: https://chatgptplugins.directory/apps/magic-patterns · Index: https://chatgptplugins.directory/llms.txt · Independent and community-run. Not affiliated with or endorsed by OpenAI. ChatGPT is a trademark of OpenAI.