{"id":60409,"date":"2026-07-27T00:53:42","date_gmt":"2026-07-27T07:53:42","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=60409"},"modified":"2026-07-27T00:53:42","modified_gmt":"2026-07-27T07:53:42","slug":"build-landing-page-claude-haiku-4-5-mui-uxpin-merge","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-haiku-4-5-mui-uxpin-merge\/","title":{"rendered":"How to build a landing page using Claude Haiku 4.5 + MUI  &#8211;  Use UXPin Merge!"},"content":{"rendered":"\n<p><strong>You can go from idea to a code-backed landing page in one workflow:<\/strong> use <strong><a href=\"https:\/\/www.anthropic.com\/claude\/haiku\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Claude Haiku 4.5<\/a><\/strong> for page structure and copy, use <strong><a href=\"https:\/\/mui.com\/material-ui\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">MUI<\/a><\/strong> for the <a href=\"https:\/\/en.wikipedia.org\/wiki\/React_(software)\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">React<\/a> UI parts, and use <strong><a href=\"https:\/\/www.uxpin.com\/merge\" style=\"display: inline;\">UXPin Merge<\/a><\/strong> to assemble and preview the page. In this setup, I\u2019d build <strong>6 sections<\/strong>: header, hero, feature grid, social proof, primary CTA, and signup form.<\/p>\n<p>Here\u2019s the short version:<\/p>\n<ul>\n<li><strong>Claude Haiku 4.5<\/strong> writes section-by-section copy and layout notes<\/li>\n<li><strong>MUI<\/strong> provides React parts like <code>AppBar<\/code>, <code>Grid<\/code>, <code>Card<\/code>, <code>Button<\/code>, and <code>TextField<\/code><\/li>\n<li><strong><a href=\"https:\/\/www.uxpin.com\/\" style=\"display: inline;\">UXPin<\/a> Merge<\/strong> lets me place those MUI parts on the canvas instead of drawing static screens<\/li>\n<li><strong><a href=\"https:\/\/www.uxpin.com\/forge\" style=\"display: inline;\">Forge<\/a><\/strong> helps adjust spacing, hierarchy, and layout inside the same MUI system<\/li>\n<li>The page is reviewed at <strong>375\u00d7812<\/strong>, <strong>414\u00d7896<\/strong>, <strong>1440\u00d7900<\/strong>, and <strong>1920\u00d71080<\/strong><\/li>\n<li>The article uses U.S. formats like <strong>$29\/month<\/strong> and <strong>07\/27\/2026<\/strong><\/li>\n<\/ul>\n<p>What stands out is the workflow itself. I\u2019m not starting with a flat mockup and then asking a developer to rebuild it from scratch. I\u2019m starting with copy, mapping it to MUI parts, and then building the prototype with those same parts in Merge. That helps cut <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-developers-need-from-designers-during-design-handoff\/\" style=\"display: inline;\">handoff work<\/a> and lowers the chance of layout drift.<\/p>\n<p>One stat in the article makes the point fast: in UXPin\u2019s test, a one-page prototype took <strong>over 1 hour<\/strong> in an <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/its-time-for-designers-to-switch-from-image-based-to-code-based-design\/\" style=\"display: inline;\">image-based tool<\/a> versus <strong>8 minutes<\/strong> in UXPin Merge. <em>That\u2019s the main takeaway.<\/em> <strong>Use AI for structure, use MUI for the interface, and use Merge to put both together in a form your team can review and reuse.<\/strong><\/p>\n<figure>         <img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/undefined\/6a66a0c041146ca830cf772f-1785113164350.jpg\" alt=\"Claude Haiku 4.5 + MUI + UXPin Merge: Landing Page Workflow\" style=\"width:100%;\"><figcaption style=\"font-size: 0.85em; text-align: center; margin: 8px; padding: 0;\">\n<p style=\"margin: 0; padding: 4px;\">Claude Haiku 4.5 + MUI + UXPin Merge: Landing Page Workflow<\/p>\n<\/figcaption><\/figure>\n<h2 id=\"from-prompt-to-interactive-prototype-in-under-90-seconds\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">From Prompt to Interactive Prototype in under 90 Seconds<\/h2>\n<p> <iframe class=\"sb-iframe\" src=\"https:\/\/www.youtube.com\/embed\/yWZvBS7VV0o\" frameborder=\"0\" loading=\"lazy\" allowfullscreen style=\"width: 100%; height: auto; aspect-ratio: 16\/9;\"><\/iframe><\/p>\n<h6 id=\"sbb-itb-f6354c6\" class=\"sb-banner\" style=\"display: none;color:transparent;\">sbb-itb-f6354c6<\/h6>\n<h2 id=\"set-up-uxpin-merge-and-access-the-mui-library\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Set up <a href=\"https:\/\/www.uxpin.com\/merge\" style=\"display: inline;\">UXPin Merge<\/a> and access the <a href=\"https:\/\/mui.com\/material-ui\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">MUI<\/a> library<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a66a0c041146ca830cf772f\/6a57d114fa9fc88aa57f69974960ea14.jpg\" alt=\"UXPin Merge\" style=\"width:100%;\"><\/p>\n<p>You can use the built-in MUI library right in the browser. There\u2019s no local install and no CLI setup to deal with.<\/p>\n<h3 id=\"prerequisites-for-built-in-mui-and-custom-libraries\" tabindex=\"-1\">Prerequisites for built-in MUI and custom libraries<\/h3>\n<p>To use the preloaded MUI library in UXPin Merge, you need an active UXPin account and Merge turned on for your workspace. Once Merge is on, the MUI library is available right away.  This is the fastest way to <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/meet-uxpin-merge\/\" style=\"display: inline;\">launch a design system<\/a> using production-ready components.<\/p>\n<p>If your team wants to bring in a custom component library, that\u2019s a different path. It uses a separate <a href=\"https:\/\/git-scm.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Git<\/a>-based setup with extra tooling. For this landing page, start with the built-in MUI option.<\/p>\n<h3 id=\"open-a-project-and-enable-mui\" tabindex=\"-1\">Open a project and enable MUI<\/h3>\n<p>Here\u2019s the setup flow in UXPin:<\/p>\n<ul>\n<li><strong>Sign in to UXPin<\/strong> and go to your team dashboard.<\/li>\n<li>Click <strong>&quot;Create new prototype&quot;<\/strong> and choose a <strong>Web<\/strong> canvas at <strong>1,440 px width<\/strong>. That\u2019s a common desktop breakpoint for U.S. landing pages.<\/li>\n<li>Give the project a clear name, such as <em>Claude\u2013MUI Landing Page \u2013 US Release Q4 2026<\/em>.<\/li>\n<li>Open the <strong>Design Systems<\/strong> panel from the bottom bar, or press <strong>Alt + 2<\/strong>.<\/li>\n<li>Select <strong>MUI<\/strong> to turn it on for the current prototype.<\/li>\n<\/ul>\n<p>Once MUI is active, components like <code>AppBar<\/code>, <code>Grid<\/code>, <code>Card<\/code>, <code>Button<\/code>, and <code>TextField<\/code> show up in grouped categories and are ready to drag onto the canvas.<\/p>\n<p>With MUI enabled in Merge, you&#8217;re ready to generate section-ready copy and layout in Claude Haiku 4.5.<\/p>\n<h2 id=\"generate-landing-page-structure-and-copy-with-claude-haiku-45\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Generate landing page structure and copy with <a href=\"https:\/\/www.anthropic.com\/claude\/haiku\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Claude Haiku 4.5<\/a><\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a66a0c041146ca830cf772f\/ae93df41c6a61dafa928d06235763910.jpg\" alt=\"Claude Haiku 4.5\" style=\"width:100%;\"><\/p>\n<p>Claude Haiku 4.5 works well as both a copy tool and a layout planner for MUI sections. The goal is simple: get section-by-section copy and layout notes that map straight to MUI component names, so you can move from AI output into the UXPin Merge canvas without stopping to reinterpret everything.<\/p>\n<h3 id=\"prompt-for-mui-ready-sections-and-localized-content\" tabindex=\"-1\">Prompt for MUI-ready sections and localized content<\/h3>\n<p>What Haiku gives back depends a lot on how clear your prompt is. Be specific from the start. State the tech stack, then spell out the output format you want. Here\u2019s a prompt pattern that fits this workflow:<\/p>\n<blockquote>\n<p>&quot;You are helping design a B2B SaaS landing page to be built using MUI components inside UXPin Merge. Use MUI component names in <strong>CamelCase<\/strong> (e.g., <code>AppBar<\/code>, <code>Grid<\/code>, <code>Card<\/code>, <code>Typography<\/code>, <code>Button<\/code>, <code>TextField<\/code>, <code>Paper<\/code>) &#8211; do not invent component names. Return a section outline labeled with the MUI components and the content for each. Do not output JSX or React code. Use one H1 for the main page title mapped to <code>Typography<\/code> variant <code>h1<\/code>, H2 for major sections, and H3 for subsections without skipping heading levels. Use American English spelling, U.S. dollar formatting, MM\/DD\/YYYY dates, and comma-as-thousands-separator numbers. Specify the keyboard focus order and identify sections that map to <code>header<\/code>, <code>main<\/code>, and <code>footer<\/code>.&quot;<\/p>\n<\/blockquote>\n<p>A self-check line at the end can save time. For example, add: <em>&quot;List three numbers, dates, and currency values to verify U.S. formatting.&quot;<\/em> That gives you a quick localization check before you paste anything into a <code>Typography<\/code> or <code>Button<\/code> prop.<\/p>\n<h3 id=\"request-section-by-section-output-you-can-paste-into-components\" tabindex=\"-1\">Request section-by-section output you can paste into components<\/h3>\n<p>Once the outline looks right, run a second prompt to get the actual copy. Label each line by component so you\u2019re not left guessing while building in Merge. Ask Haiku for <strong>short, named content blocks<\/strong> with character limits that fit <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/enterprise-ui-app\/\" style=\"display: inline;\">enterprise UI patterns<\/a>.<\/p>\n<blockquote>\n<p>&quot;Generate content for these sections. For each, provide a label indicating the target MUI component (e.g., &#8216;Hero H1 \u2013 Typography&#8217;, &#8216;Primary CTA \u2013 Button&#8217;). Keep headings to 1 line, subheadlines to 1\u20132 sentences, and button labels to 2\u20134 words. Use a neutral, enterprise B2B tone.&quot;<\/p>\n<\/blockquote>\n<p>This format makes it easy to drop copy right into component props:<\/p>\n<table style=\"width:100%;\">\n<thead>\n<tr>\n<th>Content block<\/th>\n<th>Target MUI component<\/th>\n<th>Example copy<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>hero.title<\/code><\/td>\n<td><code>Typography variant=&quot;h1&quot;<\/code><\/td>\n<td>&quot;Ship enterprise-ready UIs in days, not weeks.&quot;<\/td>\n<\/tr>\n<tr>\n<td><code>hero.subtitle<\/code><\/td>\n<td><code>Typography variant=&quot;subtitle1&quot;<\/code><\/td>\n<td>&quot;Use AI-assisted content, MUI components, and UXPin Merge to prototype landing pages that stay perfectly aligned with your production design system.&quot;<\/td>\n<\/tr>\n<tr>\n<td><code>hero.cta_primary<\/code><\/td>\n<td><code>Button variant=&quot;contained&quot;<\/code><\/td>\n<td>&quot;Request a demo&quot;<\/td>\n<\/tr>\n<tr>\n<td><code>features.card_1.title<\/code><\/td>\n<td><code>Typography variant=&quot;h6&quot;<\/code><\/td>\n<td>&quot;Design with real MUI components&quot;<\/td>\n<\/tr>\n<tr>\n<td><code>features.card_1.body<\/code><\/td>\n<td><code>Typography variant=&quot;body2&quot;<\/code><\/td>\n<td>&quot;Prototype using the same AppBar, Grid, Card, and Button components your developers use, so handoff stays frictionless and predictable.&quot;<\/td>\n<\/tr>\n<tr>\n<td><code>form.email.label<\/code><\/td>\n<td><code>TextField label<\/code><\/td>\n<td>&quot;Work Email&quot;<\/td>\n<\/tr>\n<tr>\n<td><code>form.email.helper<\/code><\/td>\n<td><code>TextField helperText<\/code><\/td>\n<td>&quot;Use your company email so our team can route your request appropriately.&quot;<\/td>\n<\/tr>\n<tr>\n<td><code>form.submit<\/code><\/td>\n<td><code>Button variant=&quot;contained&quot;<\/code><\/td>\n<td>&quot;Contact our team&quot;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Treat whatever Haiku returns as a <strong>first draft<\/strong>. UX writers and legal\/compliance reviewers should review the copy before it goes live, especially in regulated industries.<\/p>\n<p>With the section map and copy blocks in place, you can start dropping them into real MUI components in UXPin Merge.<\/p>\n<h2 id=\"assemble-the-landing-page-in-uxpin-merge-using-real-mui-components\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Assemble the landing page in <a href=\"https:\/\/www.uxpin.com\/\" style=\"display: inline;\">UXPin<\/a> Merge using real MUI components<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a66a0c041146ca830cf772f\/cd844a53b8c9231e065c9b8e608333fd.jpg\" alt=\"UXPin\" style=\"width:100%;\"><\/p>\n<p>Use the labeled copy blocks from Claude to fill the real MUI components. In your UXPin project, drag components from the left panel. Each one is a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/how-to-design-with-coded-components\/\" style=\"display: inline;\">code-backed MUI component<\/a>, so you can configure it right away.<\/p>\n<h3 id=\"build-the-main-sections-with-appbar-grid-card-button-and-textfield\" tabindex=\"-1\">Build the main sections with <a href=\"https:\/\/mui.com\/material-ui\/react-app-bar\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">AppBar<\/a>, Grid, Card, Button, and TextField<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a66a0c041146ca830cf772f\/67fc78f76d5c4cce7c795e9f4c2b67f6.jpg\" alt=\"AppBar\" style=\"width:100%;\"><\/p>\n<p>Build the page from top to bottom. Start with the <strong>header<\/strong>. Drag an <code>AppBar<\/code> onto the canvas, place a <code>Toolbar<\/code> inside it, then add a <code>Typography variant=&quot;h6&quot;<\/code> for the brand name and a <code>Button variant=&quot;contained&quot; color=&quot;primary&quot;<\/code> for the main nav CTA. Set <code>position=&quot;sticky&quot;<\/code> if you want it to stay in place while users scroll, or <code>position=&quot;static&quot;<\/code> if it should sit in the normal page flow.<\/p>\n<p>For the <strong>hero section<\/strong>, add a <code>Container maxWidth=&quot;lg&quot;<\/code> and place a <code>Grid container<\/code> inside it with <code>spacing={4}<\/code> and <code>alignItems=&quot;center&quot;<\/code>. Then add two <code>Grid item<\/code> children with <code>xs={12} md={6}<\/code> so the text and image sit side by side on desktop and stack on smaller screens. In the text column, use a <code>Typography variant=&quot;h2&quot;<\/code> for the headline, a <code>Typography variant=&quot;body1&quot;<\/code> for the supporting copy, and two buttons: a primary <code>Button variant=&quot;contained&quot; color=&quot;primary&quot; size=&quot;large&quot;<\/code> and a secondary <code>Button variant=&quot;text&quot; color=&quot;primary&quot;<\/code>. Use U.S. formatting for things like pricing and dates, such as <strong>Plans starting at $49\/month<\/strong> and <strong>MM\/DD\/YYYY<\/strong> dates. Use this same setup again for the feature grid and form.<\/p>\n<p>The <strong>feature grid<\/strong> uses the same container-and-grid setup. Set the <code>Grid container<\/code> to <code>spacing={3}<\/code> and make each <code>Grid item<\/code> <code>xs={12} md={4}<\/code> for a three-column layout on desktop. Inside each item, add a <code>Card<\/code> with <code>elevation={2}<\/code>, then <code>CardContent<\/code>, followed by <code>Typography variant=&quot;h6&quot;<\/code> for the feature title and <code>Typography variant=&quot;body2&quot;<\/code> for the description. Keep the text left-aligned so it&#8217;s easy to scan.<\/p>\n<p>For the <strong>form section<\/strong>, use a <code>Container<\/code> and <code>Grid<\/code>, then add these fields:<\/p>\n<ul>\n<li><code>TextField label=&quot;Work Email&quot; type=&quot;email&quot; variant=&quot;outlined&quot; fullWidth<\/code><\/li>\n<li><code>TextField label=&quot;Company Name&quot; fullWidth<\/code><\/li>\n<li><code>FormControl<\/code> with a <code>Select<\/code> for role segmentation, with options like Marketing, Product, Design, and Engineering<\/li>\n<li><code>FormControlLabel<\/code> with a <code>Checkbox<\/code> for consent copy<\/li>\n<\/ul>\n<p>Finish with a full-width <code>Button<\/code> labeled <strong>Request demo<\/strong> and a caption: <strong>No credit card required. Response time: 1\u20132 business days.<\/strong> After the core sections are in place, check each breakpoint.<\/p>\n<h3 id=\"use-responsive-settings-and-forge-to-refine-the-layout\" tabindex=\"-1\">Use responsive settings and <a href=\"https:\/\/www.uxpin.com\/forge\" style=\"display: inline;\">Forge<\/a> to refine the layout<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a66a0c041146ca830cf772f\/24d59e89e1077135bb20144c97278e0f.jpg\" alt=\"Forge\" style=\"width:100%;\"><\/p>\n<p>Review the layout at common U.S. screen sizes: <strong>375\u00d7812, 414\u00d7896, 1440\u00d7900, and 1920\u00d71080<\/strong>. The <code>xs<\/code>, <code>sm<\/code>, <code>md<\/code>, and <code>lg<\/code> props on each <code>Grid item<\/code> control when columns stack and when they spread out. Check that CTAs stay easy to spot and that forms stay easy to use at every size.<\/p>\n<p>If a section looks a little off, use <strong>Forge<\/strong> inside UXPin. Forge is UXPin&#8217;s built-in AI assistant, and it works inside your approved design system components. You can prompt it with:<\/p>\n<blockquote>\n<p>Tighten hero spacing and align the CTA buttons on one row on desktop.<\/p>\n<\/blockquote>\n<p>Forge builds the layout using only components already in your design system. That keeps the output in line with your codebase and cuts down on rework.<\/p>\n<h2 id=\"validate-the-prototype-review-workflows-and-set-up-reuse\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Validate the prototype, review workflows, and set up reuse<\/h2>\n<h3 id=\"preview-the-page-and-keep-design-aligned-with-development\" tabindex=\"-1\">Preview the page and keep <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-workflow-with-code-components\/\" style=\"display: inline;\">design aligned with development<\/a><\/h3>\n<p>When the last section is done, open the page in preview and check the full experience before handoff. This is the moment to catch the stuff that often slips through: offer clarity, card scannability, mobile form behavior, and breakpoint consistency. Then go breakpoint by breakpoint and make sure the layout still holds up.<\/p>\n<p>This step matters because preview stays close to what engineers will build. That makes feedback easier to act on. UXPin also lets you share preview links with JSX, dependencies, and functions, so engineers can review the same component structure instead of trying to read a static mockup like a blueprint.<\/p>\n<h3 id=\"comparison-table-generic-mockups-vs-code-backed-mui-components-in-merge\" tabindex=\"-1\">Comparison table: generic mockups vs. code-backed MUI components in Merge<\/h3>\n<p>You can see the gap pretty fast when you put static mockups next to code-backed components.<\/p>\n<table style=\"width:100%;\">\n<thead>\n<tr>\n<th><\/th>\n<th><strong>Generic mockups<\/strong><\/th>\n<th><strong>Code-backed MUI in Merge<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Design-dev fidelity<\/strong><\/td>\n<td>Low &#8211; spacing, states, and variants are approximated<\/td>\n<td>High &#8211; components match production props and structure<\/td>\n<\/tr>\n<tr>\n<td><strong>Speed to deployment<\/strong><\/td>\n<td>Slower &#8211; rebuilding from a mockup adds time<\/td>\n<td>Faster &#8211; the prototype is already code-compatible<\/td>\n<\/tr>\n<tr>\n<td><strong>Rework risk<\/strong><\/td>\n<td>High &#8211; visual drift is common during handoff<\/td>\n<td>Low &#8211; fewer assumptions are made between design and implementation<\/td>\n<\/tr>\n<tr>\n<td><strong>Team consistency<\/strong><\/td>\n<td>Inconsistent &#8211; depends on individual file discipline<\/td>\n<td>Governed &#8211; shared library enforces approved patterns<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3 id=\"conclusion-a-repeatable-workflow-for-faster-enterprise-landing-pages\" tabindex=\"-1\">Conclusion: a repeatable workflow for faster enterprise landing pages<\/h3>\n<p>After preview checks out, you can run the same workflow again for the next page. Start with structured copy and layout in Claude Haiku 4.5, build the page in UXPin Merge with MUI components, then review it in preview before handoff.<\/p>\n<p>The time savings can be hard to ignore. In a UXPin code-to-design experiment, the same one-page prototype took <strong>over one hour<\/strong> in an image-based tool versus <strong>8 minutes<\/strong> in UXPin Merge. And once your team starts building page after page, that difference adds up fast.<\/p>\n<h2 id=\"faqs\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">FAQs<\/h2>\n<h3 id=\"do-i-need-coding-skills-for-this-landing-page-workflow\" tabindex=\"-1\" data-faq-q>Do I need coding skills for this landing page workflow?<\/h3>\n<p>No. With <strong>UXPin Merge<\/strong>, you can drag and drop pre-built, code-backed <strong>MUI<\/strong> components and set them up in a visual properties panel instead of writing code.<\/p>\n<p>You can manage layouts, interactions, and component states right in the interface. You can also use AI to make changes with natural language prompts.<\/p>\n<p>The only part that calls for technical expertise is setting up a custom component library through <strong>Git<\/strong>. If you&#8217;re using the standard pre-integrated <strong>MUI<\/strong> library, you don&#8217;t need that.<\/p>\n<h3 id=\"can-i-use-my-teams-custom-mui-components-in-merge\" tabindex=\"-1\" data-faq-q>Can I use my team\u2019s custom MUI components in Merge?<\/h3>\n<p>Yes. You can connect your team\u2019s custom MUI components to <strong>UXPin Merge<\/strong> through Git, <a href=\"https:\/\/storybook.js.org\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Storybook<\/a>, or an npm package.<\/p>\n<p>Once connected, they sync as live, code-backed components. That means you can use your team\u2019s props and variants right on the canvas.<\/p>\n<p>Setup is pretty simple: install the UXPin CLI, create a <code>uxpin.config.js<\/code> file, and push your components with <code>uxpin-merge push<\/code>.<\/p>\n<h3 id=\"how-do-i-turn-claudes-output-into-reusable-page-sections\" tabindex=\"-1\" data-faq-q>How do I turn Claude\u2019s output into reusable page sections?<\/h3>\n<p>Ask Claude for <strong>structured JSON<\/strong> that maps straight to your approved MUI component props. A role-based prompt helps here. Add a component whitelist and a token dictionary so Claude stays inside the parts and values you allow, instead of drifting into components your system doesn\u2019t support.<\/p>\n<p>Then map each JSON field to the matching props in <strong>UXPin Merge<\/strong>. That gives you a cleaner handoff from generated content to working UI. For repeatable sections like feature grids or lead forms, save those MUI patterns as reusable templates. It keeps layouts consistent and close to what ships in production.<\/p>\n<h2>Related Blog Posts<\/h2>\n<ul>\n<li><a href=\"\/studio\/blog\/build-landing-page-claude-opus-4-5-mui-uxpin-merge\/\" style=\"display: inline;\">How to build a landing page using Claude Opus 4.5 + MUI  &#8211;  Use UXPin Merge!<\/a><\/li>\n<li><a href=\"\/studio\/blog\/build-landing-page-claude-opus-4-5-custom-design-systems-uxpin-merge\/\" style=\"display: inline;\">How to build a landing page using Claude Opus 4.5 + Custom Design Systems  &#8211;  Use UXPin Merge!<\/a><\/li>\n<li><a href=\"\/studio\/blog\/build-landing-page-claude-sonnet-4-5-mui-uxpin-merge\/\" style=\"display: inline;\">How to build a landing page using Claude Sonnet 4.5 + MUI  &#8211;  Use UXPin Merge!<\/a><\/li>\n<li><a href=\"\/studio\/blog\/build-landing-page-claude-sonnet-4-5-bootstrap-uxpin-merge\/\" style=\"display: inline;\">How to build a landing page using Claude Sonnet 4.5 + Bootstrap  &#8211;  Use UXPin Merge!<\/a><\/li>\n<\/ul>\n<p><script async type=\"text\/javascript\" src=\"https:\/\/app.seobotai.com\/banner\/banner.js?id=6a66a0c041146ca830cf772f\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Use Claude Haiku 4.5 to generate MUI-ready copy, assemble code-backed components in UXPin Merge, and preview responsive landing pages.<\/p>\n","protected":false},"author":231,"featured_media":60406,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-60409","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"yoast_title":"Landing Page Workflow: MUI + Claude Haiku","yoast_metadesc":"Use Claude Haiku 4.5 to generate MUI-ready copy, assemble code-backed components in UXPin Merge, and preview responsive landing pages.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.9 (Yoast SEO v28.1) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Landing Page Workflow: MUI + Claude Haiku<\/title>\n<meta name=\"description\" content=\"Use Claude Haiku 4.5 to generate MUI-ready copy, assemble code-backed components in UXPin Merge, and preview responsive landing pages.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-haiku-4-5-mui-uxpin-merge\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to build a landing page using Claude Haiku 4.5 + MUI - Use UXPin Merge!\" \/>\n<meta property=\"og:description\" content=\"Use Claude Haiku 4.5 to generate MUI-ready copy, assemble code-backed components in UXPin Merge, and preview responsive landing pages.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-haiku-4-5-mui-uxpin-merge\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2026-07-27T07:53:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/07\/image_a9b87fe965c2428ff250fa76794216f0.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1536\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Andrew Martin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@andrewSaaS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andrew Martin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-haiku-4-5-mui-uxpin-merge\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-haiku-4-5-mui-uxpin-merge\\\/\"},\"author\":{\"name\":\"Andrew Martin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\"},\"headline\":\"How to build a landing page using Claude Haiku 4.5 + MUI &#8211; Use UXPin Merge!\",\"datePublished\":\"2026-07-27T07:53:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-haiku-4-5-mui-uxpin-merge\\\/\"},\"wordCount\":2088,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-haiku-4-5-mui-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/image_a9b87fe965c2428ff250fa76794216f0.jpeg\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-haiku-4-5-mui-uxpin-merge\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-haiku-4-5-mui-uxpin-merge\\\/\",\"name\":\"Landing Page Workflow: MUI + Claude Haiku\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-haiku-4-5-mui-uxpin-merge\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-haiku-4-5-mui-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/image_a9b87fe965c2428ff250fa76794216f0.jpeg\",\"datePublished\":\"2026-07-27T07:53:42+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\"},\"description\":\"Use Claude Haiku 4.5 to generate MUI-ready copy, assemble code-backed components in UXPin Merge, and preview responsive landing pages.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-haiku-4-5-mui-uxpin-merge\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-haiku-4-5-mui-uxpin-merge\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-haiku-4-5-mui-uxpin-merge\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/image_a9b87fe965c2428ff250fa76794216f0.jpeg\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/image_a9b87fe965c2428ff250fa76794216f0.jpeg\",\"width\":1536,\"height\":1024,\"caption\":\"How to build a landing page using Claude Haiku 4.5 + MUI - Use UXPin Merge!\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-haiku-4-5-mui-uxpin-merge\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to build a landing page using Claude Haiku 4.5 + MUI &#8211; Use UXPin Merge!\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\",\"name\":\"Andrew Martin\",\"description\":\"Andrew is the CEO of UXPin, leading its product vision for design-to-code workflows used by product and engineering teams worldwide. He writes about responsive design, design systems, and prototyping with real components to help teams ship consistent, performant interfaces faster.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/andrewSaaS\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/andrewuxpin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Landing Page Workflow: MUI + Claude Haiku","description":"Use Claude Haiku 4.5 to generate MUI-ready copy, assemble code-backed components in UXPin Merge, and preview responsive landing pages.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-haiku-4-5-mui-uxpin-merge\/","og_locale":"en_US","og_type":"article","og_title":"How to build a landing page using Claude Haiku 4.5 + MUI - Use UXPin Merge!","og_description":"Use Claude Haiku 4.5 to generate MUI-ready copy, assemble code-backed components in UXPin Merge, and preview responsive landing pages.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-haiku-4-5-mui-uxpin-merge\/","og_site_name":"Studio by UXPin","article_published_time":"2026-07-27T07:53:42+00:00","og_image":[{"width":1536,"height":1024,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/07\/image_a9b87fe965c2428ff250fa76794216f0.jpeg","type":"image\/jpeg"}],"author":"Andrew Martin","twitter_card":"summary_large_image","twitter_creator":"@andrewSaaS","twitter_misc":{"Written by":"Andrew Martin","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-haiku-4-5-mui-uxpin-merge\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-haiku-4-5-mui-uxpin-merge\/"},"author":{"name":"Andrew Martin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b"},"headline":"How to build a landing page using Claude Haiku 4.5 + MUI &#8211; Use UXPin Merge!","datePublished":"2026-07-27T07:53:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-haiku-4-5-mui-uxpin-merge\/"},"wordCount":2088,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-haiku-4-5-mui-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/07\/image_a9b87fe965c2428ff250fa76794216f0.jpeg","articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-haiku-4-5-mui-uxpin-merge\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-haiku-4-5-mui-uxpin-merge\/","name":"Landing Page Workflow: MUI + Claude Haiku","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-haiku-4-5-mui-uxpin-merge\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-haiku-4-5-mui-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/07\/image_a9b87fe965c2428ff250fa76794216f0.jpeg","datePublished":"2026-07-27T07:53:42+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b"},"description":"Use Claude Haiku 4.5 to generate MUI-ready copy, assemble code-backed components in UXPin Merge, and preview responsive landing pages.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-haiku-4-5-mui-uxpin-merge\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-haiku-4-5-mui-uxpin-merge\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-haiku-4-5-mui-uxpin-merge\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/07\/image_a9b87fe965c2428ff250fa76794216f0.jpeg","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/07\/image_a9b87fe965c2428ff250fa76794216f0.jpeg","width":1536,"height":1024,"caption":"How to build a landing page using Claude Haiku 4.5 + MUI - Use UXPin Merge!"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-haiku-4-5-mui-uxpin-merge\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"How to build a landing page using Claude Haiku 4.5 + MUI &#8211; Use UXPin Merge!"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b","name":"Andrew Martin","description":"Andrew is the CEO of UXPin, leading its product vision for design-to-code workflows used by product and engineering teams worldwide. He writes about responsive design, design systems, and prototyping with real components to help teams ship consistent, performant interfaces faster.","sameAs":["https:\/\/x.com\/andrewSaaS"],"url":"https:\/\/www.uxpin.com\/studio\/author\/andrewuxpin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/60409","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/231"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=60409"}],"version-history":[{"count":1,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/60409\/revisions"}],"predecessor-version":[{"id":60411,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/60409\/revisions\/60411"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/60406"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=60409"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=60409"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=60409"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}