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
advancedPersonalClaude
Create a Meta-Workflow to Continuously Improve Your AI Assistant's Performance
Design a weekly meta-workflow that analyzes your interactions with your AI assistant to make it smarter. This system learns your writing style from edits, suggests new automations for repetitive tasks, and helps you filter valuable AI techniques from hype.
Open
intermediateProductClaudeGranola
Build a Self-Improving AI Morning Brief to Capture Action Items and Learn Company Jargon
Create a daily AI workflow that summarizes yesterday's meetings, identifies urgent tasks, and proactively learns internal company terms it doesn't understand. This keeps your AI assistant's knowledge current and highly relevant to your work.
Open
intermediateProductClaudeNotion+1
Automate Your Weekly Planning with an AI-Powered PM Assistant
Build a recurring AI task that automatically gathers updates from your calendar, Slack, and notes to suggest weekly priorities and prepare you for upcoming meetings. Start every Monday with a clear, comprehensive plan without the manual effort.
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