Task
Generate New UI and Add Features User Story
As a product designer, I quickly generate a user interface and explore adding features to existing designs, so that I can prototype and refine my product ideas more efficiently.
Success definition: Given I am on the Magic Patterns homepage and have navigated to the UI generation section When I click on the 'Generate' button after entering my prompt Then I should see a generated UI based on my prompt displayed on the screen, indicating my request was successfully processed, and subsequently, when I click 'Add a new feature to an existing UI', I should see additional controls to describe the feature and upload an image.
Trajectory
Step 1:
Url (before/after):
https://www.magicpatterns.com/
https://www.magicpatterns.com/
Content (before/after):
RootWebArea Magic Patterns: AI Design Tool, focused, url='https://www.magicpatterns.com/'
[65] link Return to home, center=(342,28), url='https://www.magicpatterns.com/'
image Magic Patterns Logo, url='https://www.magicpatterns.com/magicpatterns_logo_light.svg'
navigation Main
list
Show more
listitem
[72] button Use Cases, center=(508,28), expanded=False
listitem
[75] link Customers, center=(614,28), url='https://www.magicpatterns.com/customers'
[79] link Catalog, center=(1495,27), url='https://www.magicpatterns.com/catalog'
button Catalog
[82] link Pricing, center=(1570,27), url='https://www.magicpatterns.com/pricing'
button Pricing
[85] button Log In, center=(1639,26)
heading Prototype your product ideas with AI.
StaticText Iterate on components & designs in our AI-native editor. Export to React or Figma.
[96] button Generate a new UI, center=(686,419)
[97] button Add a new feature to an existing UI, center=(915,419)
[98] button Apply a theme to an existing UI, center=(1189,419)
StaticText Generate a new UI from prompt and/or image. Works best for smaller components.
[105] textbox notification settings for com, center=(895,544), contenteditable=True
[106] button Generate, center=(1426,544), type=submit
image
[111] image, center=(483,624)
StaticText Add an image
[119] link Y Backed by Y Combinator, center=(960,881), inner_text=Y
Backed by Y Combinator, url='https://www.magicpatterns.com/qRH2NSSguCEwqh4LY2ebTe'
[112] span, center=(483,652), inner_text=Add an image
StaticText Loved by software teams to design faster.
[123] link Read case studies ↗, center=(1130,942), url='https://www.magicpatterns.com/customers'
[125] link Luthor Actionbase Starkfit Holacasa wonderchat demospace Party Lizza Monetr IntelliQ Inkeep Reddy Quill Luthor Actionbase Starkfit Holacasa wonderchat demospace Party Lizza Monetr IntelliQ Inkeep Reddy Quill, center=(960,1028), url='https://www.magicpatterns.com/customers'
image Luthor, url='https://www.magicpatterns.com/case-studies/luthor/luthor-logo.png'
image Actionbase, url='https://www.magicpatterns.com/teams/actionbase.png'
image Starkfit, url='https://www.magicpatterns.com/teams/starkfit.png'
image Holacasa, url='https://www.magicpatterns.com/holacasa.svg'
image wonderchat, url='https://www.magicpatterns.com/wonderchat.png'
image demospace, url='https://www.magicpatterns.com/demospace.png'
image Party, url='https://www.magicpatterns.com/teams/PPrental.png'
image Lizza, url='https://www.magicpatterns.com/lizza.png'
image Monetr, url='https://www.magicpatterns.com/monter.png'
image IntelliQ, url='https://www.magicpatterns.com/IntelliQ-horizontal.png'
image Inkeep, url='https://www.magicpatterns.com/inkeep.svg'
image Reddy, url='https://www.magicpatterns.com/reddy.png'
image Quill, url='https://www.magicpatterns.com/quill.svg'
image Luthor, url='https://www.magicpatterns.com/case-studies/luthor/luthor-logo.png'
image Actionbase, url='https://www.magicpatterns.com/teams/actionbase.png'
image Starkfit, url='https://www.magicpatterns.com/teams/starkfit.png'
image Holacasa, url='https://www.magicpatterns.com/holacasa.svg'
image wonderchat, url='https://www.magicpatterns.com/wonderchat.png'
image demospace, url='https://www.magicpatterns.com/demospace.png'
image Party, url='https://www.magicpatterns.com/teams/PPrental.png'
image Lizza, url='https://www.magicpatterns.com/lizza.png'
image Monetr, url='https://www.magicpatterns.com/monter.png'
image IntelliQ, url='https://www.magicpatterns.com/IntelliQ-horizontal.png'
image Inkeep, url='https://www.magicpatterns.com/inkeep.svg'
image Reddy, url='https://www.magicpatterns.com/reddy.png'
image Quill, url='https://www.magicpatterns.com/quill.svg'
StaticText "The tool that helps us the most on the product side is Magic Patterns. You put a UI idea in, and a great design emerges. We use it every day to help us build products and iterate quickly."
heading Jowanza Joseph
StaticText Co-founder at Parakeet Financial
link Company Logo, url='https://www.parakeetfinancial.com/'
image Company Logo, url='https://www.magicpatterns.com/parakeet.jpeg'
StaticText User story to visual design in seconds.
StaticText Copy paste your idea have Magic Patterns design it within seconds. Brainstorm easily.
link Read the case study, url='https://www.magicpatterns.com/customers/wonderchat'
button Read the case study
image
button play, disabled=True
button unmute, disabled=True
button enter full screen, disabled=True
button show more media controls, disabled=True, hasPopup='menu'
slider video time scrubber value='0', disabled=True, orientation='horizontal'
button play, disabled=True
button unmute, disabled=True
button enter full screen, disabled=True
button show more media controls, disabled=True, hasPopup='menu'
slider video time scrubber value='0', disabled=True, orientation='horizontal'
StaticText Collaborate with your team.
StaticText Use our multiplayer canvas to collaborate with your team in realtime. Connect your context and existing designs, so that you are never starting from scratch.
link Get started with projects, url='https://www.magicpatterns.com/docs/documentation/projects/getting-started'
button Get started with projects
image
StaticText Get inspiration from the Internet.
StaticText Don't know where to start? Use our Chrome extension to get design inspiration from your favorite websites.
link Download the Magic Patterns extension, url='https://chromewebstore.google.com/detail/magic-patterns-html-to-re/chgehghmhgihgmpmdjpolhkcnhkokdfp?hl=en'
button Download the Magic Patterns extension
image
button play, disabled=True
button unmute, disabled=True
button enter full screen, disabled=True
button show more media controls, disabled=True, hasPopup='menu'
slider video time scrubber value='0', disabled=True, orientation='horizontal'
heading What will you create?
StaticText 250,000+ components generated by our community.
link View more ↗, url='https://www.magicpatterns.com/catalog'
link a dark-mode glowing button, url='https://www.magicpatterns.com/ftaKbNaj2yrrYdtmYuMrTC'
image a dark-mode glowing button, url='https://www.magicpatterns.com/landing-page-showcase/Button.png'
link View a dark-mode glowing button, url='https://www.magicpatterns.com/ftaKbNaj2yrrYdtmYuMrTC'
button Like
image
StaticText 2k
link a travel itinerary for france with a map, url='https://www.magicpatterns.com/rSHEELY7MxpxLMnP3TYkBE'
image a travel itinerary for france with a map, url='https://www.magicpatterns.com/landing-page-showcase/Travel.png'
link View a travel itinerary for france with a map, url='https://www.magicpatterns.com/rSHEELY7MxpxLMnP3TYkBE'
button Like
image
StaticText 414
link Neobrutalism is back, url='https://www.magicpatterns.com/4bGXPqWHYntHWfMjp2AAcV'
image Neobrutalism is back, url='https://www.magicpatterns.com/landing-page-showcase/Neobrutalism.png'
link View Neobrutalism is back, url='https://www.magicpatterns.com/4bGXPqWHYntHWfMjp2AAcV'
button Like
image
StaticText 225
link animated progress bar, url='https://www.magicpatterns.com/23mV3bPrZzRFgcTjB2mNPP'
Iframe animated progress bar
RootWebArea Pattern Render, url='about:srcdoc'
heading Progress
paragraph
StaticText Progress bar with animated progress.
progressbar value='100'
paragraph
StaticText Completed ✨
link View animated progress bar, url='https://www.magicpatterns.com/23mV3bPrZzRFgcTjB2mNPP'
button Like
image
StaticText 789
link a list of top customers, url='https://www.magicpatterns.com/cw3XeCRpBEeGpbiGD78DyY'
image a list of top customers, url='https://www.magicpatterns.com/landing-page-showcase/Customers.png'
link View a list of top customers, url='https://www.magicpatterns.com/cw3XeCRpBEeGpbiGD78DyY'
button Like
image
StaticText 121
link terminal, url='https://www.magicpatterns.com/4oApr7qGm2LxVzQThkFKLg'
image terminal, url='https://www.magicpatterns.com/landing-page-showcase/Terminal.png'
link View terminal, url='https://www.magicpatterns.com/4oApr7qGm2LxVzQThkFKLg'
button Like
image
StaticText 6.5k
link a working calculator, url='https://www.magicpatterns.com/neW2Sf7BtzjJ34hZJAWpLe'
image a working calculator, url='https://www.magicpatterns.com/landing-page-showcase/Calculator.png'
link View a working calculator, url='https://www.magicpatterns.com/neW2Sf7BtzjJ34hZJAWpLe'
button Like
image
StaticText 8.8k
link hiring platform for the film industry, url='https://www.magicpatterns.com/rbg6RGzZNZTB2d9GFGg2d5'
image hiring platform for the film industry, url='https://www.magicpatterns.com/landing-page-showcase/Tagging.png'
link View hiring platform for the film industry, url='https://www.magicpatterns.com/rbg6RGzZNZTB2d9GFGg2d5'
button Like
image
StaticText 6k
link sticky notes, url='https://www.magicpatterns.com/7vVcq1QjTue7FLjvYjou3M'
image sticky notes, url='https://www.magicpatterns.com/landing-page-showcase/StickyNotes.png'
link View sticky notes, url='https://www.magicpatterns.com/7vVcq1QjTue7FLjvYjou3M'
button Like
image
StaticText 5.4k
link recreate the image, url='https://www.magicpatterns.com/k4wvJTCyNA26NvXSAhQjKE'
image recreate the image, url='https://www.magicpatterns.com/landing-page-showcase/Hackernews.png'
link View recreate the image, url='https://www.magicpatterns.com/k4wvJTCyNA26NvXSAhQjKE'
button Like
image
StaticText 9k
link pricing page, url='https://www.magicpatterns.com/tPaLFNtSNtFeBCS8PYUZqb'
image pricing page, url='https://www.magicpatterns.com/landing-page-showcase/PricingPage.png'
link View pricing page, url='https://www.magicpatterns.com/tPaLFNtSNtFeBCS8PYUZqb'
button Like
image
StaticText 773
link ERD diagram, url='https://www.magicpatterns.com/bmSH9Ds5YqhrmxR4KLezic'
image ERD diagram, url='https://www.magicpatterns.com/landing-page-showcase/ERD.png'
link View ERD diagram, url='https://www.magicpatterns.com/bmSH9Ds5YqhrmxR4KLezic'
button Like
image
StaticText 234
button View previous page, disabled=True
image
button View next page
image
heading Ship magic with your team designers product engineers
StaticText designers
image
image
StaticText product
image
StaticText engineers
button Get Started
link View Pricing, url='https://www.magicpatterns.com/pricing'
button View Pricing
image Magic Patterns Logo, url='https://www.magicpatterns.com/magicpatterns_logo_light.svg'
link View Magic Patterns system status, url='https://magicpatterns.statuspage.io/'
StaticText All Systems Operational
link Visit Magic Patterns' Twitter, url='https://twitter.com/magicpatterns'
button Visit Magic Patterns' Twitter
image
link Visit Magic Patterns' Github, url='https://github.com/magicpatterns'
button Visit Magic Patterns' Github
image
link Visit Magic Patterns' LinkedIn, url='https://www.linkedin.com/company/magicpatterns'
button Visit Magic Patterns' LinkedIn
image
link Join Magic Patterns' Slack community, url='https://join.slack.com/t/magic-patterns/shared_invite/zt-1ps2xtxh0-2NaixFfFzSKZbr5gw_AHfA'
button Join Magic Patterns' Slack community
image
StaticText OVERVIEW
StaticText Get Started
link Documentation, url='https://www.magicpatterns.com/docs/documentation/get-started/introduction'
link Prompting Guide, url='https://www.magicpatterns.com/docs/documentation/get-started/prompting'
StaticText PRODUCT
link Pricing, url='https://www.magicpatterns.com/pricing'
link Security, url='https://www.magicpatterns.com/docs/documentation/enterprise/security'
link Contact Sales, url='https://cal.com/adanilowicz/generating-custom-ui-with-patterns'
StaticText USE CASES
link Product, url='https://www.magicpatterns.com/teams/product'
link Designers, url='https://www.magicpatterns.com/teams/designers'
link Founders, url='https://www.magicpatterns.com/teams/startups'
link Sales, url='https://www.magicpatterns.com/teams/sales'
StaticText COMPANY
link Blog, url='https://www.magicpatterns.com/blog'
link Customers, url='https://www.magicpatterns.com/customers'
link Careers, url='https://magicpatterns.notion.site/magicpatterns/Jobs-at-Magic-Patterns-56c741e19619434daaf2968f443ee992'
link Social Media, url='https://twitter.com/magicpatterns'
StaticText LEGAL
StaticText Contact
link Acceptable Use, url='https://www.magicpatterns.com/docs/documentation/legal/acceptable-use'
link Terms, url='https://www.magicpatterns.com/docs/documentation/legal/terms'
link Privacy Policy, url='https://www.magicpatterns.com/docs/documentation/legal/privacy'
StaticText © North Park Labs 2025
alert, atomic
RootWebArea Magic Patterns: AI Design Tool, focused, url='https://www.magicpatterns.com/'
[65] link Return to home, center=(342,28), url='https://www.magicpatterns.com/'
image Magic Patterns Logo, url='https://www.magicpatterns.com/magicpatterns_logo_light.svg'
navigation Main
list
Show more
listitem
[72] button Use Cases, center=(508,28), expanded=False
listitem
[75] link Customers, center=(614,28), url='https://www.magicpatterns.com/customers'
[79] link Catalog, center=(1495,27), url='https://www.magicpatterns.com/catalog'
button Catalog
[82] link Pricing, center=(1570,27), url='https://www.magicpatterns.com/pricing'
button Pricing
[85] button Log In, center=(1639,26)
heading Prototype your product ideas with AI.
StaticText Iterate on components & designs in our AI-native editor. Export to React or Figma.
[96] button Generate a new UI, center=(686,419), focused
[97] button Add a new feature to an existing UI, center=(915,419)
[98] button Apply a theme to an existing UI, center=(1189,419)
StaticText Generate a new UI from prompt and/or image. Works best for smaller components.
[105] textbox a search input for a docs site with a mag, center=(895,544), contenteditable=True
[106] button Generate, center=(1426,544), type=submit
image
[111] image, center=(483,624)
StaticText Add an image
[119] link Y Backed by Y Combinator, center=(960,881), inner_text=Y
Backed by Y Combinator, url='https://www.magicpatterns.com/qRH2NSSguCEwqh4LY2ebTe'
[112] span, center=(483,652), inner_text=Add an image
StaticText Loved by software teams to design faster.
[123] link Read case studies ↗, center=(1130,942), url='https://www.magicpatterns.com/customers'
[125] link Luthor Actionbase Starkfit Holacasa wonderchat demospace Party Lizza Monetr IntelliQ Inkeep Reddy Quill Luthor Actionbase Starkfit Holacasa wonderchat demospace Party Lizza Monetr IntelliQ Inkeep Reddy Quill, center=(960,1028), url='https://www.magicpatterns.com/customers'
image Luthor, url='https://www.magicpatterns.com/case-studies/luthor/luthor-logo.png'
image Actionbase, url='https://www.magicpatterns.com/teams/actionbase.png'
image Starkfit, url='https://www.magicpatterns.com/teams/starkfit.png'
image Holacasa, url='https://www.magicpatterns.com/holacasa.svg'
image wonderchat, url='https://www.magicpatterns.com/wonderchat.png'
image demospace, url='https://www.magicpatterns.com/demospace.png'
image Party, url='https://www.magicpatterns.com/teams/PPrental.png'
image Lizza, url='https://www.magicpatterns.com/lizza.png'
image Monetr, url='https://www.magicpatterns.com/monter.png'
image IntelliQ, url='https://www.magicpatterns.com/IntelliQ-horizontal.png'
image Inkeep, url='https://www.magicpatterns.com/inkeep.svg'
image Reddy, url='https://www.magicpatterns.com/reddy.png'
image Quill, url='https://www.magicpatterns.com/quill.svg'
image Luthor, url='https://www.magicpatterns.com/case-studies/luthor/luthor-logo.png'
image Actionbase, url='https://www.magicpatterns.com/teams/actionbase.png'
image Starkfit, url='https://www.magicpatterns.com/teams/starkfit.png'
image Holacasa, url='https://www.magicpatterns.com/holacasa.svg'
image wonderchat, url='https://www.magicpatterns.com/wonderchat.png'
image demospace, url='https://www.magicpatterns.com/demospace.png'
image Party, url='https://www.magicpatterns.com/teams/PPrental.png'
image Lizza, url='https://www.magicpatterns.com/lizza.png'
image Monetr, url='https://www.magicpatterns.com/monter.png'
image IntelliQ, url='https://www.magicpatterns.com/IntelliQ-horizontal.png'
image Inkeep, url='https://www.magicpatterns.com/inkeep.svg'
image Reddy, url='https://www.magicpatterns.com/reddy.png'
image Quill, url='https://www.magicpatterns.com/quill.svg'
StaticText "The tool that helps us the most on the product side is Magic Patterns. You put a UI idea in, and a great design emerges. We use it every day to help us build products and iterate quickly."
heading Jowanza Joseph
StaticText Co-founder at Parakeet Financial
link Company Logo, url='https://www.parakeetfinancial.com/'
image Company Logo, url='https://www.magicpatterns.com/parakeet.jpeg'
StaticText User story to visual design in seconds.
StaticText Copy paste your idea have Magic Patterns design it within seconds. Brainstorm easily.
link Read the case study, url='https://www.magicpatterns.com/customers/wonderchat'
button Read the case study
image
button play, disabled=True
button unmute, disabled=True
button enter full screen, disabled=True
button show more media controls, disabled=True, hasPopup='menu'
slider video time scrubber value='0', disabled=True, orientation='horizontal'
button play, disabled=True
button unmute, disabled=True
button enter full screen, disabled=True
button show more media controls, disabled=True, hasPopup='menu'
slider video time scrubber value='0', disabled=True, orientation='horizontal'
StaticText Collaborate with your team.
StaticText Use our multiplayer canvas to collaborate with your team in realtime. Connect your context and existing designs, so that you are never starting from scratch.
link Get started with projects, url='https://www.magicpatterns.com/docs/documentation/projects/getting-started'
button Get started with projects
image
StaticText Get inspiration from the Internet.
StaticText Don't know where to start? Use our Chrome extension to get design inspiration from your favorite websites.
link Download the Magic Patterns extension, url='https://chromewebstore.google.com/detail/magic-patterns-html-to-re/chgehghmhgihgmpmdjpolhkcnhkokdfp?hl=en'
button Download the Magic Patterns extension
image
button play, disabled=True
button unmute, disabled=True
button enter full screen, disabled=True
button show more media controls, disabled=True, hasPopup='menu'
slider video time scrubber value='0', disabled=True, orientation='horizontal'
heading What will you create?
StaticText 250,000+ components generated by our community.
link View more ↗, url='https://www.magicpatterns.com/catalog'
link a dark-mode glowing button, url='https://www.magicpatterns.com/ftaKbNaj2yrrYdtmYuMrTC'
image a dark-mode glowing button, url='https://www.magicpatterns.com/landing-page-showcase/Button.png'
link View a dark-mode glowing button, url='https://www.magicpatterns.com/ftaKbNaj2yrrYdtmYuMrTC'
button Like
image
StaticText 2k
link a travel itinerary for france with a map, url='https://www.magicpatterns.com/rSHEELY7MxpxLMnP3TYkBE'
image a travel itinerary for france with a map, url='https://www.magicpatterns.com/landing-page-showcase/Travel.png'
link View a travel itinerary for france with a map, url='https://www.magicpatterns.com/rSHEELY7MxpxLMnP3TYkBE'
button Like
image
StaticText 414
link Neobrutalism is back, url='https://www.magicpatterns.com/4bGXPqWHYntHWfMjp2AAcV'
image Neobrutalism is back, url='https://www.magicpatterns.com/landing-page-showcase/Neobrutalism.png'
link View Neobrutalism is back, url='https://www.magicpatterns.com/4bGXPqWHYntHWfMjp2AAcV'
button Like
image
StaticText 225
link animated progress bar, url='https://www.magicpatterns.com/23mV3bPrZzRFgcTjB2mNPP'
Iframe animated progress bar
RootWebArea Pattern Render, url='about:srcdoc'
heading Progress
paragraph
StaticText Progress bar with animated progress.
progressbar value='100'
paragraph
StaticText Completed ✨
link View animated progress bar, url='https://www.magicpatterns.com/23mV3bPrZzRFgcTjB2mNPP'
button Like
image
StaticText 789
link a list of top customers, url='https://www.magicpatterns.com/cw3XeCRpBEeGpbiGD78DyY'
image a list of top customers, url='https://www.magicpatterns.com/landing-page-showcase/Customers.png'
link View a list of top customers, url='https://www.magicpatterns.com/cw3XeCRpBEeGpbiGD78DyY'
button Like
image
StaticText 121
link terminal, url='https://www.magicpatterns.com/4oApr7qGm2LxVzQThkFKLg'
image terminal, url='https://www.magicpatterns.com/landing-page-showcase/Terminal.png'
link View terminal, url='https://www.magicpatterns.com/4oApr7qGm2LxVzQThkFKLg'
button Like
image
StaticText 6.5k
link a working calculator, url='https://www.magicpatterns.com/neW2Sf7BtzjJ34hZJAWpLe'
image a working calculator, url='https://www.magicpatterns.com/landing-page-showcase/Calculator.png'
link View a working calculator, url='https://www.magicpatterns.com/neW2Sf7BtzjJ34hZJAWpLe'
button Like
image
StaticText 8.8k
link hiring platform for the film industry, url='https://www.magicpatterns.com/rbg6RGzZNZTB2d9GFGg2d5'
image hiring platform for the film industry, url='https://www.magicpatterns.com/landing-page-showcase/Tagging.png'
link View hiring platform for the film industry, url='https://www.magicpatterns.com/rbg6RGzZNZTB2d9GFGg2d5'
button Like
image
StaticText 6k
link sticky notes, url='https://www.magicpatterns.com/7vVcq1QjTue7FLjvYjou3M'
image sticky notes, url='https://www.magicpatterns.com/landing-page-showcase/StickyNotes.png'
link View sticky notes, url='https://www.magicpatterns.com/7vVcq1QjTue7FLjvYjou3M'
button Like
image
StaticText 5.4k
link recreate the image, url='https://www.magicpatterns.com/k4wvJTCyNA26NvXSAhQjKE'
image recreate the image, url='https://www.magicpatterns.com/landing-page-showcase/Hackernews.png'
link View recreate the image, url='https://www.magicpatterns.com/k4wvJTCyNA26NvXSAhQjKE'
button Like
image
StaticText 9k
link pricing page, url='https://www.magicpatterns.com/tPaLFNtSNtFeBCS8PYUZqb'
image pricing page, url='https://www.magicpatterns.com/landing-page-showcase/PricingPage.png'
link View pricing page, url='https://www.magicpatterns.com/tPaLFNtSNtFeBCS8PYUZqb'
button Like
image
StaticText 773
link ERD diagram, url='https://www.magicpatterns.com/bmSH9Ds5YqhrmxR4KLezic'
image ERD diagram, url='https://www.magicpatterns.com/landing-page-showcase/ERD.png'
link View ERD diagram, url='https://www.magicpatterns.com/bmSH9Ds5YqhrmxR4KLezic'
button Like
image
StaticText 234
button View previous page, disabled=True
image
button View next page
image
heading Ship magic with your team designers product engineers
StaticText designers
image
image
StaticText product
image
StaticText engineers
button Get Started
link View Pricing, url='https://www.magicpatterns.com/pricing'
button View Pricing
image Magic Patterns Logo, url='https://www.magicpatterns.com/magicpatterns_logo_light.svg'
link View Magic Patterns system status, url='https://magicpatterns.statuspage.io/'
StaticText All Systems Operational
link Visit Magic Patterns' Twitter, url='https://twitter.com/magicpatterns'
button Visit Magic Patterns' Twitter
image
link Visit Magic Patterns' Github, url='https://github.com/magicpatterns'
button Visit Magic Patterns' Github
image
link Visit Magic Patterns' LinkedIn, url='https://www.linkedin.com/company/magicpatterns'
button Visit Magic Patterns' LinkedIn
image
link Join Magic Patterns' Slack community, url='https://join.slack.com/t/magic-patterns/shared_invite/zt-1ps2xtxh0-2NaixFfFzSKZbr5gw_AHfA'
button Join Magic Patterns' Slack community
image
StaticText OVERVIEW
StaticText Get Started
link Documentation, url='https://www.magicpatterns.com/docs/documentation/get-started/introduction'
link Prompting Guide, url='https://www.magicpatterns.com/docs/documentation/get-started/prompting'
StaticText PRODUCT
link Pricing, url='https://www.magicpatterns.com/pricing'
link Security, url='https://www.magicpatterns.com/docs/documentation/enterprise/security'
link Contact Sales, url='https://cal.com/adanilowicz/generating-custom-ui-with-patterns'
StaticText USE CASES
link Product, url='https://www.magicpatterns.com/teams/product'
link Designers, url='https://www.magicpatterns.com/teams/designers'
link Founders, url='https://www.magicpatterns.com/teams/startups'
link Sales, url='https://www.magicpatterns.com/teams/sales'
StaticText COMPANY
link Blog, url='https://www.magicpatterns.com/blog'
link Customers, url='https://www.magicpatterns.com/customers'
link Careers, url='https://magicpatterns.notion.site/magicpatterns/Jobs-at-Magic-Patterns-56c741e19619434daaf2968f443ee992'
link Social Media, url='https://twitter.com/magicpatterns'
StaticText LEGAL
StaticText Contact
link Acceptable Use, url='https://www.magicpatterns.com/docs/documentation/legal/acceptable-use'
link Terms, url='https://www.magicpatterns.com/docs/documentation/legal/terms'
link Privacy Policy, url='https://www.magicpatterns.com/docs/documentation/legal/privacy'
StaticText © North Park Labs 2025
alert, atomic
Reasoning for action: By clicking the 'Generate a new UI' button, I am starting the UI generation process, which will allow the user to input their prompt for design. This is a critical first step in the user story, as it directly supports the user's need to generate a user interface quickly. Once the UI is generated, I can proceed to the next step of adding features to the created UI, which further meets the user's goals.
Action: click('96') # Click on the 'Generate a new UI' button to see what happens.
Change Description: After clicking the 'Generate a new UI' button, the focus moved to the button itself, and the output of a search input for a docs site with a 'mag' prefix was generated, changing the textbox content from being empty to editable with suggested content.
Screenshot before:Screenshot after:---
Step 2:
Url (before/after):
https://www.magicpatterns.com/
https://www.magicpatterns.com/
Content (before/after):
RootWebArea Magic Patterns: AI Design Tool, focused, url='https://www.magicpatterns.com/'
[65] link Return to home, center=(342,28), url='https://www.magicpatterns.com/'
image Magic Patterns Logo, url='https://www.magicpatterns.com/magicpatterns_logo_light.svg'
navigation Main
list
Show more
listitem
[72] button Use Cases, center=(508,28), expanded=False
listitem
[75] link Customers, center=(614,28), url='https://www.magicpatterns.com/customers'
[79] link Catalog, center=(1495,27), url='https://www.magicpatterns.com/catalog'
button Catalog
[82] link Pricing, center=(1570,27), url='https://www.magicpatterns.com/pricing'
button Pricing
[85] button Log In, center=(1639,26)
heading Prototype your product ideas with AI.
StaticText Iterate on components & designs in our AI-native editor. Export to React or Figma.
[96] button Generate a new UI, center=(686,419), focused
[97] button Add a new feature to an existing UI, center=(915,419)
[98] button Apply a theme to an existing UI, center=(1189,419)
StaticText Generate a new UI from prompt and/or image. Works best for smaller components.
[105] textbox a search input for a docs site with a mag, center=(895,544), contenteditable=True
[106] button Generate, center=(1426,544), type=submit
image
[111] image, center=(483,624)
StaticText Add an image
[119] link Y Backed by Y Combinator, center=(960,881), inner_text=Y
Backed by Y Combinator, url='https://www.magicpatterns.com/qRH2NSSguCEwqh4LY2ebTe'
[112] span, center=(483,652), inner_text=Add an image
StaticText Loved by software teams to design faster.
[123] link Read case studies ↗, center=(1130,942), url='https://www.magicpatterns.com/customers'
[125] link Luthor Actionbase Starkfit Holacasa wonderchat demospace Party Lizza Monetr IntelliQ Inkeep Reddy Quill Luthor Actionbase Starkfit Holacasa wonderchat demospace Party Lizza Monetr IntelliQ Inkeep Reddy Quill, center=(960,1028), url='https://www.magicpatterns.com/customers'
image Luthor, url='https://www.magicpatterns.com/case-studies/luthor/luthor-logo.png'
image Actionbase, url='https://www.magicpatterns.com/teams/actionbase.png'
image Starkfit, url='https://www.magicpatterns.com/teams/starkfit.png'
image Holacasa, url='https://www.magicpatterns.com/holacasa.svg'
image wonderchat, url='https://www.magicpatterns.com/wonderchat.png'
image demospace, url='https://www.magicpatterns.com/demospace.png'
image Party, url='https://www.magicpatterns.com/teams/PPrental.png'
image Lizza, url='https://www.magicpatterns.com/lizza.png'
image Monetr, url='https://www.magicpatterns.com/monter.png'
image IntelliQ, url='https://www.magicpatterns.com/IntelliQ-horizontal.png'
image Inkeep, url='https://www.magicpatterns.com/inkeep.svg'
image Reddy, url='https://www.magicpatterns.com/reddy.png'
image Quill, url='https://www.magicpatterns.com/quill.svg'
image Luthor, url='https://www.magicpatterns.com/case-studies/luthor/luthor-logo.png'
image Actionbase, url='https://www.magicpatterns.com/teams/actionbase.png'
image Starkfit, url='https://www.magicpatterns.com/teams/starkfit.png'
image Holacasa, url='https://www.magicpatterns.com/holacasa.svg'
image wonderchat, url='https://www.magicpatterns.com/wonderchat.png'
image demospace, url='https://www.magicpatterns.com/demospace.png'
image Party, url='https://www.magicpatterns.com/teams/PPrental.png'
image Lizza, url='https://www.magicpatterns.com/lizza.png'
image Monetr, url='https://www.magicpatterns.com/monter.png'
image IntelliQ, url='https://www.magicpatterns.com/IntelliQ-horizontal.png'
image Inkeep, url='https://www.magicpatterns.com/inkeep.svg'
image Reddy, url='https://www.magicpatterns.com/reddy.png'
image Quill, url='https://www.magicpatterns.com/quill.svg'
StaticText "The tool that helps us the most on the product side is Magic Patterns. You put a UI idea in, and a great design emerges. We use it every day to help us build products and iterate quickly."
heading Jowanza Joseph
StaticText Co-founder at Parakeet Financial
link Company Logo, url='https://www.parakeetfinancial.com/'
image Company Logo, url='https://www.magicpatterns.com/parakeet.jpeg'
StaticText User story to visual design in seconds.
StaticText Copy paste your idea have Magic Patterns design it within seconds. Brainstorm easily.
link Read the case study, url='https://www.magicpatterns.com/customers/wonderchat'
button Read the case study
image
button play, disabled=True
button unmute, disabled=True
button enter full screen, disabled=True
button show more media controls, disabled=True, hasPopup='menu'
slider video time scrubber value='0', disabled=True, orientation='horizontal'
button play, disabled=True
button unmute, disabled=True
button enter full screen, disabled=True
button show more media controls, disabled=True, hasPopup='menu'
slider video time scrubber value='0', disabled=True, orientation='horizontal'
StaticText Collaborate with your team.
StaticText Use our multiplayer canvas to collaborate with your team in realtime. Connect your context and existing designs, so that you are never starting from scratch.
link Get started with projects, url='https://www.magicpatterns.com/docs/documentation/projects/getting-started'
button Get started with projects
image
StaticText Get inspiration from the Internet.
StaticText Don't know where to start? Use our Chrome extension to get design inspiration from your favorite websites.
link Download the Magic Patterns extension, url='https://chromewebstore.google.com/detail/magic-patterns-html-to-re/chgehghmhgihgmpmdjpolhkcnhkokdfp?hl=en'
button Download the Magic Patterns extension
image
button play, disabled=True
button unmute, disabled=True
button enter full screen, disabled=True
button show more media controls, disabled=True, hasPopup='menu'
slider video time scrubber value='0', disabled=True, orientation='horizontal'
heading What will you create?
StaticText 250,000+ components generated by our community.
link View more ↗, url='https://www.magicpatterns.com/catalog'
link a dark-mode glowing button, url='https://www.magicpatterns.com/ftaKbNaj2yrrYdtmYuMrTC'
image a dark-mode glowing button, url='https://www.magicpatterns.com/landing-page-showcase/Button.png'
link View a dark-mode glowing button, url='https://www.magicpatterns.com/ftaKbNaj2yrrYdtmYuMrTC'
button Like
image
StaticText 2k
link a travel itinerary for france with a map, url='https://www.magicpatterns.com/rSHEELY7MxpxLMnP3TYkBE'
image a travel itinerary for france with a map, url='https://www.magicpatterns.com/landing-page-showcase/Travel.png'
link View a travel itinerary for france with a map, url='https://www.magicpatterns.com/rSHEELY7MxpxLMnP3TYkBE'
button Like
image
StaticText 414
link Neobrutalism is back, url='https://www.magicpatterns.com/4bGXPqWHYntHWfMjp2AAcV'
image Neobrutalism is back, url='https://www.magicpatterns.com/landing-page-showcase/Neobrutalism.png'
link View Neobrutalism is back, url='https://www.magicpatterns.com/4bGXPqWHYntHWfMjp2AAcV'
button Like
image
StaticText 225
link animated progress bar, url='https://www.magicpatterns.com/23mV3bPrZzRFgcTjB2mNPP'
Iframe animated progress bar
RootWebArea Pattern Render, url='about:srcdoc'
heading Progress
paragraph
StaticText Progress bar with animated progress.
progressbar value='100'
paragraph
StaticText Completed ✨
link View animated progress bar, url='https://www.magicpatterns.com/23mV3bPrZzRFgcTjB2mNPP'
button Like
image
StaticText 789
link a list of top customers, url='https://www.magicpatterns.com/cw3XeCRpBEeGpbiGD78DyY'
image a list of top customers, url='https://www.magicpatterns.com/landing-page-showcase/Customers.png'
link View a list of top customers, url='https://www.magicpatterns.com/cw3XeCRpBEeGpbiGD78DyY'
button Like
image
StaticText 121
link terminal, url='https://www.magicpatterns.com/4oApr7qGm2LxVzQThkFKLg'
image terminal, url='https://www.magicpatterns.com/landing-page-showcase/Terminal.png'
link View terminal, url='https://www.magicpatterns.com/4oApr7qGm2LxVzQThkFKLg'
button Like
image
StaticText 6.5k
link a working calculator, url='https://www.magicpatterns.com/neW2Sf7BtzjJ34hZJAWpLe'
image a working calculator, url='https://www.magicpatterns.com/landing-page-showcase/Calculator.png'
link View a working calculator, url='https://www.magicpatterns.com/neW2Sf7BtzjJ34hZJAWpLe'
button Like
image
StaticText 8.8k
link hiring platform for the film industry, url='https://www.magicpatterns.com/rbg6RGzZNZTB2d9GFGg2d5'
image hiring platform for the film industry, url='https://www.magicpatterns.com/landing-page-showcase/Tagging.png'
link View hiring platform for the film industry, url='https://www.magicpatterns.com/rbg6RGzZNZTB2d9GFGg2d5'
button Like
image
StaticText 6k
link sticky notes, url='https://www.magicpatterns.com/7vVcq1QjTue7FLjvYjou3M'
image sticky notes, url='https://www.magicpatterns.com/landing-page-showcase/StickyNotes.png'
link View sticky notes, url='https://www.magicpatterns.com/7vVcq1QjTue7FLjvYjou3M'
button Like
image
StaticText 5.4k
link recreate the image, url='https://www.magicpatterns.com/k4wvJTCyNA26NvXSAhQjKE'
image recreate the image, url='https://www.magicpatterns.com/landing-page-showcase/Hackernews.png'
link View recreate the image, url='https://www.magicpatterns.com/k4wvJTCyNA26NvXSAhQjKE'
button Like
image
StaticText 9k
link pricing page, url='https://www.magicpatterns.com/tPaLFNtSNtFeBCS8PYUZqb'
image pricing page, url='https://www.magicpatterns.com/landing-page-showcase/PricingPage.png'
link View pricing page, url='https://www.magicpatterns.com/tPaLFNtSNtFeBCS8PYUZqb'
button Like
image
StaticText 773
link ERD diagram, url='https://www.magicpatterns.com/bmSH9Ds5YqhrmxR4KLezic'
image ERD diagram, url='https://www.magicpatterns.com/landing-page-showcase/ERD.png'
link View ERD diagram, url='https://www.magicpatterns.com/bmSH9Ds5YqhrmxR4KLezic'
button Like
image
StaticText 234
button View previous page, disabled=True
image
button View next page
image
heading Ship magic with your team designers product engineers
StaticText designers
image
image
StaticText product
image
StaticText engineers
button Get Started
link View Pricing, url='https://www.magicpatterns.com/pricing'
button View Pricing
image Magic Patterns Logo, url='https://www.magicpatterns.com/magicpatterns_logo_light.svg'
link View Magic Patterns system status, url='https://magicpatterns.statuspage.io/'
StaticText All Systems Operational
link Visit Magic Patterns' Twitter, url='https://twitter.com/magicpatterns'
button Visit Magic Patterns' Twitter
image
link Visit Magic Patterns' Github, url='https://github.com/magicpatterns'
button Visit Magic Patterns' Github
image
link Visit Magic Patterns' LinkedIn, url='https://www.linkedin.com/company/magicpatterns'
button Visit Magic Patterns' LinkedIn
image
link Join Magic Patterns' Slack community, url='https://join.slack.com/t/magic-patterns/shared_invite/zt-1ps2xtxh0-2NaixFfFzSKZbr5gw_AHfA'
button Join Magic Patterns' Slack community
image
StaticText OVERVIEW
StaticText Get Started
link Documentation, url='https://www.magicpatterns.com/docs/documentation/get-started/introduction'
link Prompting Guide, url='https://www.magicpatterns.com/docs/documentation/get-started/prompting'
StaticText PRODUCT
link Pricing, url='https://www.magicpatterns.com/pricing'
link Security, url='https://www.magicpatterns.com/docs/documentation/enterprise/security'
link Contact Sales, url='https://cal.com/adanilowicz/generating-custom-ui-with-patterns'
StaticText USE CASES
link Product, url='https://www.magicpatterns.com/teams/product'
link Designers, url='https://www.magicpatterns.com/teams/designers'
link Founders, url='https://www.magicpatterns.com/teams/startups'
link Sales, url='https://www.magicpatterns.com/teams/sales'
StaticText COMPANY
link Blog, url='https://www.magicpatterns.com/blog'
link Customers, url='https://www.magicpatterns.com/customers'
link Careers, url='https://magicpatterns.notion.site/magicpatterns/Jobs-at-Magic-Patterns-56c741e19619434daaf2968f443ee992'
link Social Media, url='https://twitter.com/magicpatterns'
StaticText LEGAL
StaticText Contact
link Acceptable Use, url='https://www.magicpatterns.com/docs/documentation/legal/acceptable-use'
link Terms, url='https://www.magicpatterns.com/docs/documentation/legal/terms'
link Privacy Policy, url='https://www.magicpatterns.com/docs/documentation/legal/privacy'
StaticText © North Park Labs 2025
alert, atomic
RootWebArea Magic Patterns: AI Design Tool, focused, url='https://www.magicpatterns.com/'
[65] link Return to home, center=(342,28), url='https://www.magicpatterns.com/'
image Magic Patterns Logo, url='https://www.magicpatterns.com/magicpatterns_logo_light.svg'
navigation Main
list
Show more
listitem
[72] button Use Cases, center=(508,28), expanded=False
listitem
[75] link Customers, center=(614,28), url='https://www.magicpatterns.com/customers'
[79] link Catalog, center=(1495,27), url='https://www.magicpatterns.com/catalog'
button Catalog
[82] link Pricing, center=(1570,27), url='https://www.magicpatterns.com/pricing'
button Pricing
[85] button Log In, center=(1639,26)
heading Prototype your product ideas with AI.
StaticText Iterate on components & designs in our AI-native editor. Export to React or Figma.
[96] button Generate a new UI, center=(686,419)
[97] button Add a new feature to an existing UI, center=(915,419)
[98] button Apply a theme to an existing UI, center=(1189,419)
StaticText Generate a new UI from prompt and/or image. Works best for smaller components.
[105] textbox an advertisement for a software product that helps people code., center=(895,544), contenteditable=True
[106] button Generate, center=(1426,544), focused, type=submit
image
[111] image, center=(483,624)
StaticText Add an image
[119] link Y Backed by Y Combinator, center=(960,881), inner_text=Y
Backed by Y Combinator, url='https://www.magicpatterns.com/qRH2NSSguCEwqh4LY2ebTe'
[112] span, center=(483,652), inner_text=Add an image
StaticText Loved by software teams to design faster.
[123] link Read case studies ↗, center=(1130,942), url='https://www.magicpatterns.com/customers'
[125] link Luthor Actionbase Starkfit Holacasa wonderchat demospace Party Lizza Monetr IntelliQ Inkeep Reddy Quill Luthor Actionbase Starkfit Holacasa wonderchat demospace Party Lizza Monetr IntelliQ Inkeep Reddy Quill, center=(960,1028), url='https://www.magicpatterns.com/customers'
image Luthor, url='https://www.magicpatterns.com/case-studies/luthor/luthor-logo.png'
image Actionbase, url='https://www.magicpatterns.com/teams/actionbase.png'
image Starkfit, url='https://www.magicpatterns.com/teams/starkfit.png'
image Holacasa, url='https://www.magicpatterns.com/holacasa.svg'
image wonderchat, url='https://www.magicpatterns.com/wonderchat.png'
image demospace, url='https://www.magicpatterns.com/demospace.png'
image Party, url='https://www.magicpatterns.com/teams/PPrental.png'
image Lizza, url='https://www.magicpatterns.com/lizza.png'
image Monetr, url='https://www.magicpatterns.com/monter.png'
image IntelliQ, url='https://www.magicpatterns.com/IntelliQ-horizontal.png'
image Inkeep, url='https://www.magicpatterns.com/inkeep.svg'
image Reddy, url='https://www.magicpatterns.com/reddy.png'
image Quill, url='https://www.magicpatterns.com/quill.svg'
image Luthor, url='https://www.magicpatterns.com/case-studies/luthor/luthor-logo.png'
image Actionbase, url='https://www.magicpatterns.com/teams/actionbase.png'
image Starkfit, url='https://www.magicpatterns.com/teams/starkfit.png'
image Holacasa, url='https://www.magicpatterns.com/holacasa.svg'
image wonderchat, url='https://www.magicpatterns.com/wonderchat.png'
image demospace, url='https://www.magicpatterns.com/demospace.png'
image Party, url='https://www.magicpatterns.com/teams/PPrental.png'
image Lizza, url='https://www.magicpatterns.com/lizza.png'
image Monetr, url='https://www.magicpatterns.com/monter.png'
image IntelliQ, url='https://www.magicpatterns.com/IntelliQ-horizontal.png'
image Inkeep, url='https://www.magicpatterns.com/inkeep.svg'
image Reddy, url='https://www.magicpatterns.com/reddy.png'
image Quill, url='https://www.magicpatterns.com/quill.svg'
StaticText "The tool that helps us the most on the product side is Magic Patterns. You put a UI idea in, and a great design emerges. We use it every day to help us build products and iterate quickly."
heading Jowanza Joseph
StaticText Co-founder at Parakeet Financial
link Company Logo, url='https://www.parakeetfinancial.com/'
image Company Logo, url='https://www.magicpatterns.com/parakeet.jpeg'
StaticText User story to visual design in seconds.
StaticText Copy paste your idea have Magic Patterns design it within seconds. Brainstorm easily.
link Read the case study, url='https://www.magicpatterns.com/customers/wonderchat'
button Read the case study
image
button play, disabled=True
button unmute, disabled=True
button enter full screen, disabled=True
button show more media controls, disabled=True, hasPopup='menu'
slider video time scrubber value='0', disabled=True, orientation='horizontal'
button play, disabled=True
button unmute, disabled=True
button enter full screen, disabled=True
button show more media controls, disabled=True, hasPopup='menu'
slider video time scrubber value='0', disabled=True, orientation='horizontal'
StaticText Collaborate with your team.
StaticText Use our multiplayer canvas to collaborate with your team in realtime. Connect your context and existing designs, so that you are never starting from scratch.
link Get started with projects, url='https://www.magicpatterns.com/docs/documentation/projects/getting-started'
button Get started with projects
image
StaticText Get inspiration from the Internet.
StaticText Don't know where to start? Use our Chrome extension to get design inspiration from your favorite websites.
link Download the Magic Patterns extension, url='https://chromewebstore.google.com/detail/magic-patterns-html-to-re/chgehghmhgihgmpmdjpolhkcnhkokdfp?hl=en'
button Download the Magic Patterns extension
image
button play, disabled=True
button unmute, disabled=True
button enter full screen, disabled=True
button show more media controls, disabled=True, hasPopup='menu'
slider video time scrubber value='0', disabled=True, orientation='horizontal'
heading What will you create?
StaticText 250,000+ components generated by our community.
link View more ↗, url='https://www.magicpatterns.com/catalog'
link a dark-mode glowing button, url='https://www.magicpatterns.com/ftaKbNaj2yrrYdtmYuMrTC'
image a dark-mode glowing button, url='https://www.magicpatterns.com/landing-page-showcase/Button.png'
link View a dark-mode glowing button, url='https://www.magicpatterns.com/ftaKbNaj2yrrYdtmYuMrTC'
button Like
image
StaticText 2k
link a travel itinerary for france with a map, url='https://www.magicpatterns.com/rSHEELY7MxpxLMnP3TYkBE'
image a travel itinerary for france with a map, url='https://www.magicpatterns.com/landing-page-showcase/Travel.png'
link View a travel itinerary for france with a map, url='https://www.magicpatterns.com/rSHEELY7MxpxLMnP3TYkBE'
button Like
image
StaticText 414
link Neobrutalism is back, url='https://www.magicpatterns.com/4bGXPqWHYntHWfMjp2AAcV'
image Neobrutalism is back, url='https://www.magicpatterns.com/landing-page-showcase/Neobrutalism.png'
link View Neobrutalism is back, url='https://www.magicpatterns.com/4bGXPqWHYntHWfMjp2AAcV'
button Like
image
StaticText 225
link animated progress bar, url='https://www.magicpatterns.com/23mV3bPrZzRFgcTjB2mNPP'
Iframe animated progress bar
RootWebArea Pattern Render, url='about:srcdoc'
heading Progress
paragraph
StaticText Progress bar with animated progress.
progressbar value='100'
paragraph
StaticText Completed ✨
link View animated progress bar, url='https://www.magicpatterns.com/23mV3bPrZzRFgcTjB2mNPP'
button Like
image
StaticText 789
link a list of top customers, url='https://www.magicpatterns.com/cw3XeCRpBEeGpbiGD78DyY'
image a list of top customers, url='https://www.magicpatterns.com/landing-page-showcase/Customers.png'
link View a list of top customers, url='https://www.magicpatterns.com/cw3XeCRpBEeGpbiGD78DyY'
button Like
image
StaticText 121
link terminal, url='https://www.magicpatterns.com/4oApr7qGm2LxVzQThkFKLg'
image terminal, url='https://www.magicpatterns.com/landing-page-showcase/Terminal.png'
link View terminal, url='https://www.magicpatterns.com/4oApr7qGm2LxVzQThkFKLg'
button Like
image
StaticText 6.5k
link a working calculator, url='https://www.magicpatterns.com/neW2Sf7BtzjJ34hZJAWpLe'
image a working calculator, url='https://www.magicpatterns.com/landing-page-showcase/Calculator.png'
link View a working calculator, url='https://www.magicpatterns.com/neW2Sf7BtzjJ34hZJAWpLe'
button Like
image
StaticText 8.8k
link hiring platform for the film industry, url='https://www.magicpatterns.com/rbg6RGzZNZTB2d9GFGg2d5'
image hiring platform for the film industry, url='https://www.magicpatterns.com/landing-page-showcase/Tagging.png'
link View hiring platform for the film industry, url='https://www.magicpatterns.com/rbg6RGzZNZTB2d9GFGg2d5'
button Like
image
StaticText 6k
link sticky notes, url='https://www.magicpatterns.com/7vVcq1QjTue7FLjvYjou3M'
image sticky notes, url='https://www.magicpatterns.com/landing-page-showcase/StickyNotes.png'
link View sticky notes, url='https://www.magicpatterns.com/7vVcq1QjTue7FLjvYjou3M'
button Like
image
StaticText 5.4k
link recreate the image, url='https://www.magicpatterns.com/k4wvJTCyNA26NvXSAhQjKE'
image recreate the image, url='https://www.magicpatterns.com/landing-page-showcase/Hackernews.png'
link View recreate the image, url='https://www.magicpatterns.com/k4wvJTCyNA26NvXSAhQjKE'
button Like
image
StaticText 9k
link pricing page, url='https://www.magicpatterns.com/tPaLFNtSNtFeBCS8PYUZqb'
image pricing page, url='https://www.magicpatterns.com/landing-page-showcase/PricingPage.png'
link View pricing page, url='https://www.magicpatterns.com/tPaLFNtSNtFeBCS8PYUZqb'
button Like
image
StaticText 773
link ERD diagram, url='https://www.magicpatterns.com/bmSH9Ds5YqhrmxR4KLezic'
image ERD diagram, url='https://www.magicpatterns.com/landing-page-showcase/ERD.png'
link View ERD diagram, url='https://www.magicpatterns.com/bmSH9Ds5YqhrmxR4KLezic'
button Like
image
StaticText 234
button View previous page, disabled=True
image
button View next page
image
heading Ship magic with your team designers product engineers
StaticText designers
image
image
StaticText product
image
StaticText engineers
button Get Started
link View Pricing, url='https://www.magicpatterns.com/pricing'
button View Pricing
image Magic Patterns Logo, url='https://www.magicpatterns.com/magicpatterns_logo_light.svg'
link View Magic Patterns system status, url='https://magicpatterns.statuspage.io/'
StaticText All Systems Operational
link Visit Magic Patterns' Twitter, url='https://twitter.com/magicpatterns'
button Visit Magic Patterns' Twitter
image
link Visit Magic Patterns' Github, url='https://github.com/magicpatterns'
button Visit Magic Patterns' Github
image
link Visit Magic Patterns' LinkedIn, url='https://www.linkedin.com/company/magicpatterns'
button Visit Magic Patterns' LinkedIn
image
link Join Magic Patterns' Slack community, url='https://join.slack.com/t/magic-patterns/shared_invite/zt-1ps2xtxh0-2NaixFfFzSKZbr5gw_AHfA'
button Join Magic Patterns' Slack community
image
StaticText OVERVIEW
StaticText Get Started
link Documentation, url='https://www.magicpatterns.com/docs/documentation/get-started/introduction'
link Prompting Guide, url='https://www.magicpatterns.com/docs/documentation/get-started/prompting'
StaticText PRODUCT
link Pricing, url='https://www.magicpatterns.com/pricing'
link Security, url='https://www.magicpatterns.com/docs/documentation/enterprise/security'
link Contact Sales, url='https://cal.com/adanilowicz/generating-custom-ui-with-patterns'
StaticText USE CASES
link Product, url='https://www.magicpatterns.com/teams/product'
link Designers, url='https://www.magicpatterns.com/teams/designers'
link Founders, url='https://www.magicpatterns.com/teams/startups'
link Sales, url='https://www.magicpatterns.com/teams/sales'
StaticText COMPANY
link Blog, url='https://www.magicpatterns.com/blog'
link Customers, url='https://www.magicpatterns.com/customers'
link Careers, url='https://magicpatterns.notion.site/magicpatterns/Jobs-at-Magic-Patterns-56c741e19619434daaf2968f443ee992'
link Social Media, url='https://twitter.com/magicpatterns'
StaticText LEGAL
StaticText Contact
link Acceptable Use, url='https://www.magicpatterns.com/docs/documentation/legal/acceptable-use'
link Terms, url='https://www.magicpatterns.com/docs/documentation/legal/terms'
link Privacy Policy, url='https://www.magicpatterns.com/docs/documentation/legal/privacy'
StaticText © North Park Labs 2025
alert, atomic
Reasoning for action: By clicking on the 'Generate' button, I am triggering the backend functionality to process the input provided in the textbox and generate a user interface component based on that prompt. This is a crucial step toward achieving the user’s goal of quickly generating a UI, allowing them to prototype their product ideas efficiently.
Action: click('106') # Click on the 'Generate' button to see if it produces a UI based on the prompt entered.
Change Description: After clicking the 'Generate' button, the content of the text box was updated to an advertisement for a software product that helps people code, indicating that the UI generation process is initiated based on the entered prompt.
Screenshot before:Screenshot after:---
Step 3:
Url (before/after):
https://www.magicpatterns.com/
https://www.magicpatterns.com/
Content (before/after):
RootWebArea Magic Patterns: AI Design Tool, focused, url='https://www.magicpatterns.com/'
[65] link Return to home, center=(342,28), url='https://www.magicpatterns.com/'
image Magic Patterns Logo, url='https://www.magicpatterns.com/magicpatterns_logo_light.svg'
navigation Main
list
Show more
listitem
[72] button Use Cases, center=(508,28), expanded=False
listitem
[75] link Customers, center=(614,28), url='https://www.magicpatterns.com/customers'
[79] link Catalog, center=(1495,27), url='https://www.magicpatterns.com/catalog'
button Catalog
[82] link Pricing, center=(1570,27), url='https://www.magicpatterns.com/pricing'
button Pricing
[85] button Log In, center=(1639,26)
heading Prototype your product ideas with AI.
StaticText Iterate on components & designs in our AI-native editor. Export to React or Figma.
[96] button Generate a new UI, center=(686,419)
[97] button Add a new feature to an existing UI, center=(915,419)
[98] button Apply a theme to an existing UI, center=(1189,419)
StaticText Generate a new UI from prompt and/or image. Works best for smaller components.
[105] textbox an advertisement for a software product that helps people code., center=(895,544), contenteditable=True
[106] button Generate, center=(1426,544), focused, type=submit
image
[111] image, center=(483,624)
StaticText Add an image
[119] link Y Backed by Y Combinator, center=(960,881), inner_text=Y
Backed by Y Combinator, url='https://www.magicpatterns.com/qRH2NSSguCEwqh4LY2ebTe'
[112] span, center=(483,652), inner_text=Add an image
StaticText Loved by software teams to design faster.
[123] link Read case studies ↗, center=(1130,942), url='https://www.magicpatterns.com/customers'
[125] link Luthor Actionbase Starkfit Holacasa wonderchat demospace Party Lizza Monetr IntelliQ Inkeep Reddy Quill Luthor Actionbase Starkfit Holacasa wonderchat demospace Party Lizza Monetr IntelliQ Inkeep Reddy Quill, center=(960,1028), url='https://www.magicpatterns.com/customers'
image Luthor, url='https://www.magicpatterns.com/case-studies/luthor/luthor-logo.png'
image Actionbase, url='https://www.magicpatterns.com/teams/actionbase.png'
image Starkfit, url='https://www.magicpatterns.com/teams/starkfit.png'
image Holacasa, url='https://www.magicpatterns.com/holacasa.svg'
image wonderchat, url='https://www.magicpatterns.com/wonderchat.png'
image demospace, url='https://www.magicpatterns.com/demospace.png'
image Party, url='https://www.magicpatterns.com/teams/PPrental.png'
image Lizza, url='https://www.magicpatterns.com/lizza.png'
image Monetr, url='https://www.magicpatterns.com/monter.png'
image IntelliQ, url='https://www.magicpatterns.com/IntelliQ-horizontal.png'
image Inkeep, url='https://www.magicpatterns.com/inkeep.svg'
image Reddy, url='https://www.magicpatterns.com/reddy.png'
image Quill, url='https://www.magicpatterns.com/quill.svg'
image Luthor, url='https://www.magicpatterns.com/case-studies/luthor/luthor-logo.png'
image Actionbase, url='https://www.magicpatterns.com/teams/actionbase.png'
image Starkfit, url='https://www.magicpatterns.com/teams/starkfit.png'
image Holacasa, url='https://www.magicpatterns.com/holacasa.svg'
image wonderchat, url='https://www.magicpatterns.com/wonderchat.png'
image demospace, url='https://www.magicpatterns.com/demospace.png'
image Party, url='https://www.magicpatterns.com/teams/PPrental.png'
image Lizza, url='https://www.magicpatterns.com/lizza.png'
image Monetr, url='https://www.magicpatterns.com/monter.png'
image IntelliQ, url='https://www.magicpatterns.com/IntelliQ-horizontal.png'
image Inkeep, url='https://www.magicpatterns.com/inkeep.svg'
image Reddy, url='https://www.magicpatterns.com/reddy.png'
image Quill, url='https://www.magicpatterns.com/quill.svg'
StaticText "The tool that helps us the most on the product side is Magic Patterns. You put a UI idea in, and a great design emerges. We use it every day to help us build products and iterate quickly."
heading Jowanza Joseph
StaticText Co-founder at Parakeet Financial
link Company Logo, url='https://www.parakeetfinancial.com/'
image Company Logo, url='https://www.magicpatterns.com/parakeet.jpeg'
StaticText User story to visual design in seconds.
StaticText Copy paste your idea have Magic Patterns design it within seconds. Brainstorm easily.
link Read the case study, url='https://www.magicpatterns.com/customers/wonderchat'
button Read the case study
image
button play, disabled=True
button unmute, disabled=True
button enter full screen, disabled=True
button show more media controls, disabled=True, hasPopup='menu'
slider video time scrubber value='0', disabled=True, orientation='horizontal'
button play, disabled=True
button unmute, disabled=True
button enter full screen, disabled=True
button show more media controls, disabled=True, hasPopup='menu'
slider video time scrubber value='0', disabled=True, orientation='horizontal'
StaticText Collaborate with your team.
StaticText Use our multiplayer canvas to collaborate with your team in realtime. Connect your context and existing designs, so that you are never starting from scratch.
link Get started with projects, url='https://www.magicpatterns.com/docs/documentation/projects/getting-started'
button Get started with projects
image
StaticText Get inspiration from the Internet.
StaticText Don't know where to start? Use our Chrome extension to get design inspiration from your favorite websites.
link Download the Magic Patterns extension, url='https://chromewebstore.google.com/detail/magic-patterns-html-to-re/chgehghmhgihgmpmdjpolhkcnhkokdfp?hl=en'
button Download the Magic Patterns extension
image
button play, disabled=True
button unmute, disabled=True
button enter full screen, disabled=True
button show more media controls, disabled=True, hasPopup='menu'
slider video time scrubber value='0', disabled=True, orientation='horizontal'
heading What will you create?
StaticText 250,000+ components generated by our community.
link View more ↗, url='https://www.magicpatterns.com/catalog'
link a dark-mode glowing button, url='https://www.magicpatterns.com/ftaKbNaj2yrrYdtmYuMrTC'
image a dark-mode glowing button, url='https://www.magicpatterns.com/landing-page-showcase/Button.png'
link View a dark-mode glowing button, url='https://www.magicpatterns.com/ftaKbNaj2yrrYdtmYuMrTC'
button Like
image
StaticText 2k
link a travel itinerary for france with a map, url='https://www.magicpatterns.com/rSHEELY7MxpxLMnP3TYkBE'
image a travel itinerary for france with a map, url='https://www.magicpatterns.com/landing-page-showcase/Travel.png'
link View a travel itinerary for france with a map, url='https://www.magicpatterns.com/rSHEELY7MxpxLMnP3TYkBE'
button Like
image
StaticText 414
link Neobrutalism is back, url='https://www.magicpatterns.com/4bGXPqWHYntHWfMjp2AAcV'
image Neobrutalism is back, url='https://www.magicpatterns.com/landing-page-showcase/Neobrutalism.png'
link View Neobrutalism is back, url='https://www.magicpatterns.com/4bGXPqWHYntHWfMjp2AAcV'
button Like
image
StaticText 225
link animated progress bar, url='https://www.magicpatterns.com/23mV3bPrZzRFgcTjB2mNPP'
Iframe animated progress bar
RootWebArea Pattern Render, url='about:srcdoc'
heading Progress
paragraph
StaticText Progress bar with animated progress.
progressbar value='100'
paragraph
StaticText Completed ✨
link View animated progress bar, url='https://www.magicpatterns.com/23mV3bPrZzRFgcTjB2mNPP'
button Like
image
StaticText 789
link a list of top customers, url='https://www.magicpatterns.com/cw3XeCRpBEeGpbiGD78DyY'
image a list of top customers, url='https://www.magicpatterns.com/landing-page-showcase/Customers.png'
link View a list of top customers, url='https://www.magicpatterns.com/cw3XeCRpBEeGpbiGD78DyY'
button Like
image
StaticText 121
link terminal, url='https://www.magicpatterns.com/4oApr7qGm2LxVzQThkFKLg'
image terminal, url='https://www.magicpatterns.com/landing-page-showcase/Terminal.png'
link View terminal, url='https://www.magicpatterns.com/4oApr7qGm2LxVzQThkFKLg'
button Like
image
StaticText 6.5k
link a working calculator, url='https://www.magicpatterns.com/neW2Sf7BtzjJ34hZJAWpLe'
image a working calculator, url='https://www.magicpatterns.com/landing-page-showcase/Calculator.png'
link View a working calculator, url='https://www.magicpatterns.com/neW2Sf7BtzjJ34hZJAWpLe'
button Like
image
StaticText 8.8k
link hiring platform for the film industry, url='https://www.magicpatterns.com/rbg6RGzZNZTB2d9GFGg2d5'
image hiring platform for the film industry, url='https://www.magicpatterns.com/landing-page-showcase/Tagging.png'
link View hiring platform for the film industry, url='https://www.magicpatterns.com/rbg6RGzZNZTB2d9GFGg2d5'
button Like
image
StaticText 6k
link sticky notes, url='https://www.magicpatterns.com/7vVcq1QjTue7FLjvYjou3M'
image sticky notes, url='https://www.magicpatterns.com/landing-page-showcase/StickyNotes.png'
link View sticky notes, url='https://www.magicpatterns.com/7vVcq1QjTue7FLjvYjou3M'
button Like
image
StaticText 5.4k
link recreate the image, url='https://www.magicpatterns.com/k4wvJTCyNA26NvXSAhQjKE'
image recreate the image, url='https://www.magicpatterns.com/landing-page-showcase/Hackernews.png'
link View recreate the image, url='https://www.magicpatterns.com/k4wvJTCyNA26NvXSAhQjKE'
button Like
image
StaticText 9k
link pricing page, url='https://www.magicpatterns.com/tPaLFNtSNtFeBCS8PYUZqb'
image pricing page, url='https://www.magicpatterns.com/landing-page-showcase/PricingPage.png'
link View pricing page, url='https://www.magicpatterns.com/tPaLFNtSNtFeBCS8PYUZqb'
button Like
image
StaticText 773
link ERD diagram, url='https://www.magicpatterns.com/bmSH9Ds5YqhrmxR4KLezic'
image ERD diagram, url='https://www.magicpatterns.com/landing-page-showcase/ERD.png'
link View ERD diagram, url='https://www.magicpatterns.com/bmSH9Ds5YqhrmxR4KLezic'
button Like
image
StaticText 234
button View previous page, disabled=True
image
button View next page
image
heading Ship magic with your team designers product engineers
StaticText designers
image
image
StaticText product
image
StaticText engineers
button Get Started
link View Pricing, url='https://www.magicpatterns.com/pricing'
button View Pricing
image Magic Patterns Logo, url='https://www.magicpatterns.com/magicpatterns_logo_light.svg'
link View Magic Patterns system status, url='https://magicpatterns.statuspage.io/'
StaticText All Systems Operational
link Visit Magic Patterns' Twitter, url='https://twitter.com/magicpatterns'
button Visit Magic Patterns' Twitter
image
link Visit Magic Patterns' Github, url='https://github.com/magicpatterns'
button Visit Magic Patterns' Github
image
link Visit Magic Patterns' LinkedIn, url='https://www.linkedin.com/company/magicpatterns'
button Visit Magic Patterns' LinkedIn
image
link Join Magic Patterns' Slack community, url='https://join.slack.com/t/magic-patterns/shared_invite/zt-1ps2xtxh0-2NaixFfFzSKZbr5gw_AHfA'
button Join Magic Patterns' Slack community
image
StaticText OVERVIEW
StaticText Get Started
link Documentation, url='https://www.magicpatterns.com/docs/documentation/get-started/introduction'
link Prompting Guide, url='https://www.magicpatterns.com/docs/documentation/get-started/prompting'
StaticText PRODUCT
link Pricing, url='https://www.magicpatterns.com/pricing'
link Security, url='https://www.magicpatterns.com/docs/documentation/enterprise/security'
link Contact Sales, url='https://cal.com/adanilowicz/generating-custom-ui-with-patterns'
StaticText USE CASES
link Product, url='https://www.magicpatterns.com/teams/product'
link Designers, url='https://www.magicpatterns.com/teams/designers'
link Founders, url='https://www.magicpatterns.com/teams/startups'
link Sales, url='https://www.magicpatterns.com/teams/sales'
StaticText COMPANY
link Blog, url='https://www.magicpatterns.com/blog'
link Customers, url='https://www.magicpatterns.com/customers'
link Careers, url='https://magicpatterns.notion.site/magicpatterns/Jobs-at-Magic-Patterns-56c741e19619434daaf2968f443ee992'
link Social Media, url='https://twitter.com/magicpatterns'
StaticText LEGAL
StaticText Contact
link Acceptable Use, url='https://www.magicpatterns.com/docs/documentation/legal/acceptable-use'
link Terms, url='https://www.magicpatterns.com/docs/documentation/legal/terms'
link Privacy Policy, url='https://www.magicpatterns.com/docs/documentation/legal/privacy'
StaticText © North Park Labs 2025
alert, atomic
RootWebArea Magic Patterns: AI Design Tool, focused, url='https://www.magicpatterns.com/'
[65] link Return to home, center=(342,28), url='https://www.magicpatterns.com/'
image Magic Patterns Logo, url='https://www.magicpatterns.com/magicpatterns_logo_light.svg'
navigation Main
list
Show more
listitem
[72] button Use Cases, center=(508,28), expanded=False
listitem
[75] link Customers, center=(614,28), url='https://www.magicpatterns.com/customers'
[79] link Catalog, center=(1495,27), url='https://www.magicpatterns.com/catalog'
button Catalog
[82] link Pricing, center=(1570,27), url='https://www.magicpatterns.com/pricing'
button Pricing
[85] button Log In, center=(1639,26)
heading Prototype your product ideas with AI.
StaticText Iterate on components & designs in our AI-native editor. Export to React or Figma.
[96] button Generate a new UI, center=(686,419)
[97] button Add a new feature to an existing UI, center=(915,419), focused
[98] button Apply a theme to an existing UI, center=(1189,419)
StaticText Import your existing UI
[537] image, center=(570,585)
StaticText Add an image or screenshot
StaticText Describe what to add to the existing UI
[547] textbox e.g. add an error state, center=(982,541), contenteditable=True
[538] span, center=(570,604), inner_text=Add an image or screenshot
[550] image, center=(847,597)
StaticText (Optional) Include an image
[558] button Generate, center=(1372,581)
image
[551] span, center=(847,624), inner_text=(Optional) Include an image
[119] link Y Backed by Y Combinator, center=(960,871), inner_text=Y
Backed by Y Combinator, url='https://www.magicpatterns.com/qRH2NSSguCEwqh4LY2ebTe'
StaticText Loved by software teams to design faster.
[123] link Read case studies ↗, center=(1130,932), url='https://www.magicpatterns.com/customers'
[125] link Luthor Actionbase Starkfit Holacasa wonderchat demospace Party Lizza Monetr IntelliQ Inkeep Reddy Quill Luthor Actionbase Starkfit Holacasa wonderchat demospace Party Lizza Monetr IntelliQ Inkeep Reddy Quill, center=(960,1018), url='https://www.magicpatterns.com/customers'
image Luthor, url='https://www.magicpatterns.com/case-studies/luthor/luthor-logo.png'
image Actionbase, url='https://www.magicpatterns.com/teams/actionbase.png'
image Starkfit, url='https://www.magicpatterns.com/teams/starkfit.png'
image Holacasa, url='https://www.magicpatterns.com/holacasa.svg'
image wonderchat, url='https://www.magicpatterns.com/wonderchat.png'
image demospace, url='https://www.magicpatterns.com/demospace.png'
image Party, url='https://www.magicpatterns.com/teams/PPrental.png'
image Lizza, url='https://www.magicpatterns.com/lizza.png'
image Monetr, url='https://www.magicpatterns.com/monter.png'
image IntelliQ, url='https://www.magicpatterns.com/IntelliQ-horizontal.png'
image Inkeep, url='https://www.magicpatterns.com/inkeep.svg'
image Reddy, url='https://www.magicpatterns.com/reddy.png'
image Quill, url='https://www.magicpatterns.com/quill.svg'
image Luthor, url='https://www.magicpatterns.com/case-studies/luthor/luthor-logo.png'
image Actionbase, url='https://www.magicpatterns.com/teams/actionbase.png'
image Starkfit, url='https://www.magicpatterns.com/teams/starkfit.png'
image Holacasa, url='https://www.magicpatterns.com/holacasa.svg'
image wonderchat, url='https://www.magicpatterns.com/wonderchat.png'
image demospace, url='https://www.magicpatterns.com/demospace.png'
image Party, url='https://www.magicpatterns.com/teams/PPrental.png'
image Lizza, url='https://www.magicpatterns.com/lizza.png'
image Monetr, url='https://www.magicpatterns.com/monter.png'
image IntelliQ, url='https://www.magicpatterns.com/IntelliQ-horizontal.png'
image Inkeep, url='https://www.magicpatterns.com/inkeep.svg'
image Reddy, url='https://www.magicpatterns.com/reddy.png'
image Quill, url='https://www.magicpatterns.com/quill.svg'
StaticText "The tool that helps us the most on the product side is Magic Patterns. You put a UI idea in, and a great design emerges. We use it every day to help us build products and iterate quickly."
heading Jowanza Joseph
StaticText Co-founder at Parakeet Financial
link Company Logo, url='https://www.parakeetfinancial.com/'
image Company Logo, url='https://www.magicpatterns.com/parakeet.jpeg'
StaticText User story to visual design in seconds.
StaticText Copy paste your idea have Magic Patterns design it within seconds. Brainstorm easily.
link Read the case study, url='https://www.magicpatterns.com/customers/wonderchat'
button Read the case study
image
button play, disabled=True
button unmute, disabled=True
button enter full screen, disabled=True
button show more media controls, disabled=True, hasPopup='menu'
slider video time scrubber value='0', disabled=True, orientation='horizontal'
button play, disabled=True
button unmute, disabled=True
button enter full screen, disabled=True
button show more media controls, disabled=True, hasPopup='menu'
slider video time scrubber value='0', disabled=True, orientation='horizontal'
StaticText Collaborate with your team.
StaticText Use our multiplayer canvas to collaborate with your team in realtime. Connect your context and existing designs, so that you are never starting from scratch.
link Get started with projects, url='https://www.magicpatterns.com/docs/documentation/projects/getting-started'
button Get started with projects
image
StaticText Get inspiration from the Internet.
StaticText Don't know where to start? Use our Chrome extension to get design inspiration from your favorite websites.
link Download the Magic Patterns extension, url='https://chromewebstore.google.com/detail/magic-patterns-html-to-re/chgehghmhgihgmpmdjpolhkcnhkokdfp?hl=en'
button Download the Magic Patterns extension
image
button play, disabled=True
button unmute, disabled=True
button enter full screen, disabled=True
button show more media controls, disabled=True, hasPopup='menu'
slider video time scrubber value='0', disabled=True, orientation='horizontal'
heading What will you create?
StaticText 250,000+ components generated by our community.
link View more ↗, url='https://www.magicpatterns.com/catalog'
link a dark-mode glowing button, url='https://www.magicpatterns.com/ftaKbNaj2yrrYdtmYuMrTC'
image a dark-mode glowing button, url='https://www.magicpatterns.com/landing-page-showcase/Button.png'
link View a dark-mode glowing button, url='https://www.magicpatterns.com/ftaKbNaj2yrrYdtmYuMrTC'
button Like
image
StaticText 2k
link a travel itinerary for france with a map, url='https://www.magicpatterns.com/rSHEELY7MxpxLMnP3TYkBE'
image a travel itinerary for france with a map, url='https://www.magicpatterns.com/landing-page-showcase/Travel.png'
link View a travel itinerary for france with a map, url='https://www.magicpatterns.com/rSHEELY7MxpxLMnP3TYkBE'
button Like
image
StaticText 414
link Neobrutalism is back, url='https://www.magicpatterns.com/4bGXPqWHYntHWfMjp2AAcV'
image Neobrutalism is back, url='https://www.magicpatterns.com/landing-page-showcase/Neobrutalism.png'
link View Neobrutalism is back, url='https://www.magicpatterns.com/4bGXPqWHYntHWfMjp2AAcV'
button Like
image
StaticText 225
link animated progress bar, url='https://www.magicpatterns.com/23mV3bPrZzRFgcTjB2mNPP'
Iframe animated progress bar
RootWebArea Pattern Render, url='about:srcdoc'
heading Progress
paragraph
StaticText Progress bar with animated progress.
progressbar value='74'
paragraph
StaticText 74
StaticText %
link View animated progress bar, url='https://www.magicpatterns.com/23mV3bPrZzRFgcTjB2mNPP'
button Like
image
StaticText 789
link a list of top customers, url='https://www.magicpatterns.com/cw3XeCRpBEeGpbiGD78DyY'
image a list of top customers, url='https://www.magicpatterns.com/landing-page-showcase/Customers.png'
link View a list of top customers, url='https://www.magicpatterns.com/cw3XeCRpBEeGpbiGD78DyY'
button Like
image
StaticText 121
link terminal, url='https://www.magicpatterns.com/4oApr7qGm2LxVzQThkFKLg'
image terminal, url='https://www.magicpatterns.com/landing-page-showcase/Terminal.png'
link View terminal, url='https://www.magicpatterns.com/4oApr7qGm2LxVzQThkFKLg'
button Like
image
StaticText 6.5k
link a working calculator, url='https://www.magicpatterns.com/neW2Sf7BtzjJ34hZJAWpLe'
image a working calculator, url='https://www.magicpatterns.com/landing-page-showcase/Calculator.png'
link View a working calculator, url='https://www.magicpatterns.com/neW2Sf7BtzjJ34hZJAWpLe'
button Like
image
StaticText 8.8k
link hiring platform for the film industry, url='https://www.magicpatterns.com/rbg6RGzZNZTB2d9GFGg2d5'
image hiring platform for the film industry, url='https://www.magicpatterns.com/landing-page-showcase/Tagging.png'
link View hiring platform for the film industry, url='https://www.magicpatterns.com/rbg6RGzZNZTB2d9GFGg2d5'
button Like
image
StaticText 6k
link sticky notes, url='https://www.magicpatterns.com/7vVcq1QjTue7FLjvYjou3M'
image sticky notes, url='https://www.magicpatterns.com/landing-page-showcase/StickyNotes.png'
link View sticky notes, url='https://www.magicpatterns.com/7vVcq1QjTue7FLjvYjou3M'
button Like
image
StaticText 5.4k
link recreate the image, url='https://www.magicpatterns.com/k4wvJTCyNA26NvXSAhQjKE'
image recreate the image, url='https://www.magicpatterns.com/landing-page-showcase/Hackernews.png'
link View recreate the image, url='https://www.magicpatterns.com/k4wvJTCyNA26NvXSAhQjKE'
button Like
image
StaticText 9k
link pricing page, url='https://www.magicpatterns.com/tPaLFNtSNtFeBCS8PYUZqb'
image pricing page, url='https://www.magicpatterns.com/landing-page-showcase/PricingPage.png'
link View pricing page, url='https://www.magicpatterns.com/tPaLFNtSNtFeBCS8PYUZqb'
button Like
image
StaticText 773
link ERD diagram, url='https://www.magicpatterns.com/bmSH9Ds5YqhrmxR4KLezic'
image ERD diagram, url='https://www.magicpatterns.com/landing-page-showcase/ERD.png'
link View ERD diagram, url='https://www.magicpatterns.com/bmSH9Ds5YqhrmxR4KLezic'
button Like
image
StaticText 234
button View previous page, disabled=True
image
button View next page
image
heading Ship magic with your team designers product engineers
StaticText designers
image
image
StaticText product
image
StaticText engineers
button Get Started
link View Pricing, url='https://www.magicpatterns.com/pricing'
button View Pricing
image Magic Patterns Logo, url='https://www.magicpatterns.com/magicpatterns_logo_light.svg'
link View Magic Patterns system status, url='https://magicpatterns.statuspage.io/'
StaticText All Systems Operational
link Visit Magic Patterns' Twitter, url='https://twitter.com/magicpatterns'
button Visit Magic Patterns' Twitter
image
link Visit Magic Patterns' Github, url='https://github.com/magicpatterns'
button Visit Magic Patterns' Github
image
link Visit Magic Patterns' LinkedIn, url='https://www.linkedin.com/company/magicpatterns'
button Visit Magic Patterns' LinkedIn
image
link Join Magic Patterns' Slack community, url='https://join.slack.com/t/magic-patterns/shared_invite/zt-1ps2xtxh0-2NaixFfFzSKZbr5gw_AHfA'
button Join Magic Patterns' Slack community
image
StaticText OVERVIEW
StaticText Get Started
link Documentation, url='https://www.magicpatterns.com/docs/documentation/get-started/introduction'
link Prompting Guide, url='https://www.magicpatterns.com/docs/documentation/get-started/prompting'
StaticText PRODUCT
link Pricing, url='https://www.magicpatterns.com/pricing'
link Security, url='https://www.magicpatterns.com/docs/documentation/enterprise/security'
link Contact Sales, url='https://cal.com/adanilowicz/generating-custom-ui-with-patterns'
StaticText USE CASES
link Product, url='https://www.magicpatterns.com/teams/product'
link Designers, url='https://www.magicpatterns.com/teams/designers'
link Founders, url='https://www.magicpatterns.com/teams/startups'
link Sales, url='https://www.magicpatterns.com/teams/sales'
StaticText COMPANY
link Blog, url='https://www.magicpatterns.com/blog'
link Customers, url='https://www.magicpatterns.com/customers'
link Careers, url='https://magicpatterns.notion.site/magicpatterns/Jobs-at-Magic-Patterns-56c741e19619434daaf2968f443ee992'
link Social Media, url='https://twitter.com/magicpatterns'
StaticText LEGAL
StaticText Contact
link Acceptable Use, url='https://www.magicpatterns.com/docs/documentation/legal/acceptable-use'
link Terms, url='https://www.magicpatterns.com/docs/documentation/legal/terms'
link Privacy Policy, url='https://www.magicpatterns.com/docs/documentation/legal/privacy'
StaticText © North Park Labs 2025
alert, atomic
Reasoning for action: I clicked on the 'Add a new feature to an existing UI' button because the user story indicated that after generating a UI, the next step is to add features to it. This action aligns perfectly with the user's goal of exploring ways to enhance their UI design by providing the necessary interface to input feature descriptions and upload images.
Action: click('97') # Click on the 'Add a new feature to an existing UI' button to explore additional options.
Change Description: After clicking the 'Add a new feature to an existing UI' button, the browser's state updated to reveal new interactive elements, including a textbox for describing the feature to add, an option to include an image or screenshot, and an updated static text prompt indicating users can import their existing UI.
Screenshot before:Screenshot after:---