Step01
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.
Source episode · 11:36
How I AI: Colin Matthews' Workflows for Prototyping with Your Brand's UIwith 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
Step by step
The workflow
Follow the sequence once, then adapt the prompts, checks, and handoffs to your own setup.
4 steps
Step02
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.
Step03
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.
Step04
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.
After the steps
Runbook notes
How to recover when the loop fails and where human judgment helps.
Recover
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.
Keep building
Related workflows
beginnerPersonalClaude
Create an Automated Workout Tracker with a Simple Claude Voice Note
Log your workouts effortlessly without ever opening a spreadsheet. This workflow uses the Claude mobile app to parse a simple voice note and automatically update your workout tracking spreadsheet in the background.
Open
advancedOperationsClaude
How to Rebuild Your Gmail Inbox Inside Claude to Manage Email
Create a custom email management interface within Claude to read, triage, and draft replies without opening the Gmail tab. This workflow helps you reclaim focus and compound your learnings by training your AI on every interaction.
Open
intermediateSalesClaude
Automate Client Proposals and Onboarding with a Claude 'Pipeline Operator'
Build a fully automated system in Claude to generate personalized, interactive HTML proposals and client onboarding materials, saving hours on administrative work and creating a high-touch experience.
Open
Start shipping
better products.
Join 100,000+ product managers who use ChatPRD to write better docs, align teams faster, and build products users love.
Free to start
No credit card
SOC 2 certified
Enterprise ready