Step 01
Navigate and Activate the Extension
Open a product page you are allowed to capture and activate the Magic Patterns Chrome extension. Choose a self contained pattern such as a table, message, card, or navigation group.
BeginnerDesign
How to Instantly Create Reusable Components from a Live Website
Capture a useful interface pattern from a live product with the Magic Patterns extension, convert it into a reusable component, and improve the primitive once so every later prototype benefits.
Try this with your AI assistant
Download the skill for this workflow. Version 1.0.0.
Source episode · 11:36How I AI: Colin Matthews' Workflows for Prototyping with Your Brand's UI
with Claire Vo
Colin uses the Magic Patterns Chrome extension to select a live ChatPRD element, convert its HTML and styling into a reusable component, and add it to a shared library.
Before you start
What you need
- A live page you are authorized to use
- The Magic Patterns Chrome extension
- A component library in Magic Patterns
What you’ll make
A reusable component that preserves the useful structure and styling of the selected live element.
Tools used
- Magic Patterns
AI-powered design tool for creating UI components
The workflow
Follow the sequence once, then adapt the prompts, checks, and handoffs to your own setup.
4 steps
Step 02
Select and Extract a UI Element
Select the smallest useful element. Confirm that the captured HTML and styles include the structure you need without unrelated page chrome or private content.
Step 03
Convert to a Reusable Component
Choose Convert to component and add the result to the correct library. Replace hard coded content with props, preserve important layout behavior, and test it with realistic data.
This workflow is perfect for quickly building a design system from an existing product without needing access to the source code.
Step 04
Focus on Improving the Primitives
Use the component in a prototype, then improve the component itself when styling or behavior is wrong. Publish the upgraded primitive to the library so other prototypes can adopt the same fix.
Fix the reusable building block first. Repeated local tweaks make prototypes drift apart.
What good looks like
- The captured element includes the intended states and content structure.
- The generated component accepts realistic data through props.
- It can be reused in more than one prototype.
- Later library updates can flow into existing prototypes.
Build your next product with ChatPRD
Turn an idea into a PRD, user stories, and a plan.
Runbook notes
How to recover when the loop fails and where human judgment helps.
If it goes sideways
- The capture includes too much of the page
- Select the smallest meaningful UI region, then capture parent and child patterns separately if both need to be reusable.
- The generated component is a static copy
- Replace embedded sample content with props and test the component with long, short, empty, and repeated data.
- The component looks right only on the source page
- Move required styles and assets into the component library, then test it on a blank canvas before reuse.
Related workflows
intermediateDataMeta Muse
How to Use AI for Hobby Improvement and Data Analysis for Golf & Chess
Connect data from your hobbies (like golf scores or chess games) to an AI agent to get automated analysis, visual dashboards, and actionable coaching insights. Turn raw data into a story that helps you improve.
Open
beginnerPersonalMeta Muse
How to Create a Personalized Shopping Catalog from Your Instagram Saves Using AI
Turn your unstructured Instagram 'Saved' collection into a fun, personalized shopping catalog. This workflow uses an AI agent to organize your saves and present them in a nostalgic, engaging format like the SkyMall magazine.
Open
advancedContentMeta Muse
How to Revive an Old Blog or Digital Archive as a Personal AI Podcast
Resurrect your old digital content, like a forgotten blog from Blogger or Tumblr, by using an AI agent to find, consolidate, and transform it into a daily personal podcast. Reconnect with your past self in a new, listenable format.
Open
Start shipping better products.
Join 250,000+ product managers who use ChatPRD to write better docs, align teams faster, and build products users love.
Free to start · 14-day Pro trial · SOC 2 Type II
