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
- 1Add it in ChatGPT
Open Magic Patterns in ChatGPT's Plugin directory (button above), select + to add it and sign in if asked.
- 2Use 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 4
- 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.
Things to ask
- “How would you redesign our landing page?”
- “Give me design inspiration for this component”
- “Build a slide deck presenting this new feature”