{"id":60358,"date":"2026-07-12T00:48:28","date_gmt":"2026-07-12T07:48:28","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=60358"},"modified":"2026-07-12T00:48:28","modified_gmt":"2026-07-12T07:48:28","slug":"build-landing-page-claude-sonnet-4-5-mui-uxpin-merge","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-mui-uxpin-merge\/","title":{"rendered":"How to build a landing page using Claude Sonnet 4.5 + MUI  &#8211;  Use UXPin Merge!"},"content":{"rendered":"\n<p><strong>You can go from prompt to a code-backed landing page without doing the same work twice.<\/strong> I\u2019d use <a href=\"https:\/\/www.anthropic.com\/news\/claude-sonnet-4-5\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Claude Sonnet 4.5<\/a> to draft section copy and <a href=\"https:\/\/mui.com\/material-ui\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">MUI<\/a> component mapping, then place those parts in <a href=\"https:\/\/www.uxpin.com\/merge\" style=\"display: inline;\">UXPin Merge<\/a> so design and <a href=\"https:\/\/react.dev\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">React<\/a> stay aligned from day one.<\/p>\n<p>Here\u2019s the short version:<\/p>\n<ul>\n<li>I\u2019d keep the page to <strong>4 sections<\/strong>: hero, feature grid, CTA, and lead form<\/li>\n<li>I\u2019d give Claude a strict <strong>MUI component whitelist<\/strong><\/li>\n<li>I\u2019d ask for <strong>JSON output<\/strong> tied to props like <code>variant<\/code>, <code>color<\/code>, and <code>xs={12} md={6}<\/code><\/li>\n<li>I\u2019d build the page in <a href=\"https:\/\/www.uxpin.com\/\" style=\"display: inline;\">UXPin<\/a> Merge using <strong>actual MUI components<\/strong><\/li>\n<li>I\u2019d test breakpoints at <strong>375 px, 768 px, and 1,440 px<\/strong><\/li>\n<li>I\u2019d check copy, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-are-design-tokens\/\" style=\"display: inline;\">design tokens<\/a>, spacing, form states, and handoff specs before review<\/li>\n<\/ul>\n<p>In other words: instead of writing copy in one place, mocking up in another, and rebuilding in React later, I\u2019d use one flow that keeps structure, props, and layout in sync.<\/p>\n<p>A few details stand out:<\/p>\n<ul>\n<li>Claude is used for <strong>copy + layout guidance<\/strong><\/li>\n<li>MUI provides parts like <code>Container<\/code>, <code>Grid<\/code>, <code>Card<\/code>, <code>Typography<\/code>, <code>Button<\/code>, and <code>TextField<\/code><\/li>\n<li>UXPin Merge lets me assemble the page with those same React-backed parts<\/li>\n<li>US rules matter, so I\u2019d keep formats like <strong>$29\/month<\/strong>, <strong>07\/12\/2026<\/strong>, and <strong>1,250 users<\/strong><\/li>\n<\/ul>\n<p><strong>That matters because <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/landing-pages-guide\/\" style=\"display: inline;\">landing pages often fail in handoff<\/a>, not in concept.<\/strong> Teams lose time when spacing, variants, and section logic drift between design and code.<\/p>\n<p>I also like that the article stays practical. It doesn\u2019t ask Claude for vague \u201cmarketing copy.\u201d It tells the model exactly what to return, such as:<\/p>\n<ul>\n<li>a hero headline under <strong>60 characters<\/strong><\/li>\n<li><strong>4<\/strong> feature cards<\/li>\n<li>form field labels, types, helper text, and required states<\/li>\n<li>a <code>used_components<\/code> array to catch off-list parts before build<\/li>\n<\/ul>\n<p><em>One useful point:<\/em> the page\u2019s responsive behavior is set with MUI breakpoints, so the same layout logic can carry into production.<\/p>\n<p>If I were summarizing the article in one sentence, it would be this: <strong>use Claude to plan the page, use MUI to define the parts, and use UXPin Merge to build a prototype that maps straight to React.<\/strong><\/p>\n<figure>         <img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/undefined\/6a52d9f921d1dee3314ba755-1783816848951.jpg\" alt=\"From Claude Prompt to Production Landing Page: 4-Step Workflow\" style=\"width:100%;\"><figcaption style=\"font-size: 0.85em; text-align: center; margin: 8px; padding: 0;\">\n<p style=\"margin: 0; padding: 4px;\">From Claude Prompt to Production Landing Page: 4-Step Workflow<\/p>\n<\/figcaption><\/figure>\n<h2 id=\"design-to-react-code-components\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Design To <a href=\"https:\/\/react.dev\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">React<\/a> Code Components<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a52d9f921d1dee3314ba755\/6c46949dab85a3f6d821fe9a13e6ad3c.jpg\" alt=\"React\" style=\"width:100%;\"><\/p>\n<p> <iframe class=\"sb-iframe\" src=\"https:\/\/www.youtube.com\/embed\/PsxwVAjMtqI\" 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=\"step-1-set-up-uxpin-merge-mui-and-your-landing-page-constraints\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Step 1: Set up <a href=\"https:\/\/www.uxpin.com\/merge\" style=\"display: inline;\">UXPin Merge<\/a>, <a href=\"https:\/\/mui.com\/material-ui\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">MUI<\/a>, and your landing page constraints<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a52d9f921d1dee3314ba755\/6a57d114fa9fc88aa57f69974960ea14.jpg\" alt=\"UXPin Merge\" style=\"width:100%;\"><\/p>\n<p>Before you prompt Claude or drop a single component onto the canvas, make sure two things are in place: access to a Merge-enabled UXPin account and a clear plan for how the page will be built.<\/p>\n<h3 id=\"use-mui-inside-uxpin-merge\" tabindex=\"-1\">Use MUI inside <a href=\"https:\/\/www.uxpin.com\/\" style=\"display: inline;\">UXPin<\/a> Merge<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a52d9f921d1dee3314ba755\/4dc54cefd72724cef6fd8b265d578364.jpg\" alt=\"UXPin\" style=\"width:100%;\"><\/p>\n<p>Merge\u2019s Libraries panel includes MUI components backed by React code. That means you can place components on the canvas and edit props like <code>variant<\/code>, <code>color<\/code>, and <code>size<\/code> right there or <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/mui-customization\/\" style=\"display: inline;\">personalize MUI components<\/a> to fit your brand.<\/p>\n<p>If your team uses a custom MUI system, <a href=\"https:\/\/www.uxpin.com\/merge\/git-integration\" style=\"display: inline;\">sync your repo through Merge<\/a> so the prototype uses the same components your team ships in production.<\/p>\n<p>For early layout work, start with the built-in library. Once the page structure is in place, switch over to your synced library.<\/p>\n<p>After the component source is locked, set the content rules Claude needs to follow.<\/p>\n<h3 id=\"define-the-page-structure-and-us-localization-rules\" tabindex=\"-1\">Define the page structure and US localization rules<\/h3>\n<p>Decide on your page sections and content rules before you open Claude. Keep the scope tight: four sections only.<\/p>\n<ul>\n<li>Hero<\/li>\n<li>Feature grid<\/li>\n<li>CTA<\/li>\n<li>Lead form<\/li>\n<\/ul>\n<p>Pass those in as clear constraints so the model doesn\u2019t generate UI you won\u2019t use.<\/p>\n<p>Do the same for your en-US localization rules. Be explicit:<\/p>\n<ul>\n<li>Format pricing with the dollar sign first: <code>$29\/month<\/code><\/li>\n<li>Write dates as <code>MM\/DD\/YYYY<\/code>, like <code>07\/12\/2026<\/code><\/li>\n<li>Use commas for thousand separators: <code>1,250 users<\/code><\/li>\n<li>Stick to American spelling: <em>color<\/em>, <em>customize<\/em>, <em>optimize<\/em><\/li>\n<li>Use US-friendly CTA labels: <strong>&quot;Book a demo&quot;, &quot;Start free trial,&quot;<\/strong> or <strong>&quot;Contact sales.&quot;<\/strong><\/li>\n<\/ul>\n<p>Feed these rules into Claude now, not later. That way, its copy and layout will fit your MUI components without extra cleanup.<\/p>\n<p>These constraints become the prompt input for Step 2.<\/p>\n<h2 id=\"step-2-prompt-claude-sonnet-45-for-copy-layout-and-mui-component-guidance\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Step 2: Prompt <a href=\"https:\/\/www.anthropic.com\/news\/claude-sonnet-4-5\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Claude Sonnet 4.5<\/a> for copy, layout, and MUI component guidance<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a52d9f921d1dee3314ba755\/751fa6f29e3f98cc80c570363d68f43c.jpg\" alt=\"Claude Sonnet 4.5\" style=\"width:100%;\"><\/p>\n<p>With the constraints from Step 1 set, open Claude. The aim here is NOT generic marketing copy. You want output that fits straight into your MUI component structure in UXPin Merge with little cleanup. Use the section map and locale rules from Step 1 as the base for your prompt.<\/p>\n<h3 id=\"write-prompts-that-map-content-to-mui-sections\" tabindex=\"-1\">Write prompts that map content to MUI sections<\/h3>\n<p>Prompt Claude like a UX writer working inside your MUI component set. Don\u2019t ask for \u201ca hero section\u201d in loose terms. Tell Claude which MUI components to use and how the output should be shaped.<\/p>\n<p>Start with a <strong>role-based, context-rich prompt<\/strong> that covers four things: what the product does, who it\u2019s for, the page goal, and the MUI components allowed. Here\u2019s a working example for a B2B SaaS data observability platform:<\/p>\n<blockquote>\n<p>&quot;Act as a UX writer and front-end designer helping build a B2B SaaS landing page in UXPin Merge using MUI. Our product is a data observability platform for US-based engineering teams. The primary goal is to drive demo requests. Using only the following MUI components: Container, Grid, Card, Typography, Button, TextField, Box, Stack, define the content and layout for: hero, feature_grid, primary_cta, lead_form. For each section, provide copy and recommended MUI components and props. Follow the en-US rules from Step 1. Return your answer as JSON.&quot;<\/p>\n<\/blockquote>\n<p>For the hero, tie each piece of copy to a component and prop. Ask Claude to return <code>hero_title<\/code> for <code>Typography variant=&quot;h2&quot; align=&quot;left&quot;<\/code>, <code>hero_subtitle<\/code> for <code>Typography variant=&quot;subtitle1&quot; color=&quot;text.secondary&quot;<\/code>, and two CTA labels: one for <code>Button variant=&quot;contained&quot; color=&quot;primary&quot;<\/code> and one for <code>Button variant=&quot;outlined&quot; color=&quot;primary&quot;<\/code>. Return the hero copy and component props in JSON. <strong>Keep the headline under 60 characters<\/strong> so it displays cleanly at all breakpoints.<\/p>\n<p>For the feature grid, ask for four cards, each with:<\/p>\n<ul>\n<li>a <code>title<\/code> (max 40 characters, <code>Typography variant=&quot;h6&quot;<\/code>)<\/li>\n<li>a <code>description<\/code> (1\u20132 sentences, <code>Typography variant=&quot;body2&quot;<\/code>)<\/li>\n<li>a <code>benefit_tag<\/code> (<code>Typography variant=&quot;caption&quot;<\/code>)<\/li>\n<\/ul>\n<p>Also ask Claude to suggest a responsive <code>Grid<\/code> layout: <code>Grid container spacing={3}<\/code> with <code>Grid item xs={12} md={6}<\/code>.<\/p>\n<p>For the lead form, use U.S.-formatted examples for phone, price, and date fields. Ask each <code>TextField<\/code> to include <code>name<\/code>, <code>label<\/code>, <code>type<\/code>, <code>required<\/code>, and <code>helperText<\/code>, plus suggested props: <code>fullWidth<\/code>, <code>size=&quot;small&quot;<\/code>, <code>margin=&quot;normal&quot;<\/code>, <code>variant=&quot;outlined&quot;<\/code>.<\/p>\n<h3 id=\"limit-claude-output-to-your-approved-component-set\" tabindex=\"-1\">Limit Claude output to your approved component set<\/h3>\n<p>A component whitelist keeps Claude inside the MUI set you\u2019ve shipped. Without it, Claude may suggest components like <code>Accordion<\/code> or <code>Alert<\/code> that aren\u2019t in your synced Merge library. That means extra work for both design and dev.<\/p>\n<p>Paste your <strong>approved component list<\/strong> at the top of every session: <code>Button<\/code>, <code>Typography<\/code>, <code>Card<\/code>, <code>Grid<\/code>, <code>Container<\/code>, <code>Box<\/code>, <code>Stack<\/code>, <code>TextField<\/code>, <code>Chip<\/code>.<\/p>\n<p>Then add a token dictionary: colors like <code>color.primary.main<\/code> and <code>color.text.secondary<\/code>, spacing values like <code>spacing.2<\/code> and <code>spacing.4<\/code>, and typography variants from <code>h2<\/code> through <code>body1<\/code>.<\/p>\n<p>Tell Claude plainly: <em>&quot;Do not invent new components or tokens. If you would normally use something outside this list, map it to the closest approved component instead.&quot;<\/em><\/p>\n<p>To check compliance, ask Claude to include a <code>used_components<\/code> array at the end of each section. That makes it easy to spot anything that slipped through before you start building in UXPin Merge.<\/p>\n<p>Once Claude returns structured JSON, build the page in Merge with real MUI components.<\/p>\n<h2 id=\"step-3-build-the-landing-page-in-uxpin-merge-with-real-mui-components\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Step 3: Build the landing page in UXPin Merge with real MUI components<\/h2>\n<p>Take Claude&#8217;s output and build the page straight in Merge. The key idea is simple: use the JSON fields from Claude to fill each MUI prop.<\/p>\n<h3 id=\"assemble-the-hero-feature-grid-and-cta\" tabindex=\"-1\">Assemble the hero, feature grid, and CTA<\/h3>\n<p>Start by dragging a <strong>Container<\/strong> onto the canvas. Set <code>maxWidth=&quot;lg&quot;<\/code> and <code>sx={{ py: 8 }}<\/code>. Inside that, add a <strong>Box<\/strong> with <code>display=&quot;flex&quot;<\/code> and <code>flexDirection=&quot;column&quot;<\/code> to act as your layout frame.<\/p>\n<p>For the hero section, create a two-column <strong>Grid container<\/strong> with <code>spacing={4}<\/code> and <code>alignItems=&quot;center&quot;<\/code>. In the left <code>Grid item xs={12} md={6}<\/code>, paste Claude&#8217;s headline into <code>Typography variant=&quot;h2&quot;<\/code>, the subheading into <code>variant=&quot;subtitle1&quot;<\/code>, and add a short trust note in <code>Typography variant=&quot;body2&quot;<\/code>.<\/p>\n<p>Place your main <strong>Button<\/strong> with <code>variant=&quot;contained&quot; color=&quot;primary&quot;<\/code> and a second <strong>Button<\/strong> with <code>variant=&quot;outlined&quot;<\/code> right below it. Use a <strong>Stack<\/strong> with <code>direction=&quot;row&quot;<\/code> and <code>spacing={2}<\/code> so the buttons sit neatly side by side. In the right <code>Grid item xs={12} md={6}<\/code>, add a product screenshot or illustration with a <strong>Box<\/strong> or <strong>Card<\/strong>.<\/p>\n<p>After the hero is done, use the same component mapping for the feature cards. Create another <strong>Grid container<\/strong> with <code>spacing={4}<\/code> and <code>justifyContent=&quot;center&quot;<\/code>. Add four <strong>Grid items<\/strong> set to <code>xs={12} md={3}<\/code>, each with a <strong>Card<\/strong> inside.<\/p>\n<p>Map Claude&#8217;s output straight into the props:<\/p>\n<ul>\n<li><code>Typography variant=&quot;h6&quot;<\/code> for the feature title<\/li>\n<li><code>variant=&quot;body2&quot;<\/code> for the description<\/li>\n<li><code>variant=&quot;subtitle2&quot;<\/code> for short benefit tags<\/li>\n<\/ul>\n<p>Update the copy right in the component props. If you need more features, duplicate a Card. That keeps the setup clean, and developers still get the same MUI <code>Card<\/code> with matching props.<\/p>\n<p>For the CTA band, wrap the section in a <code>Box<\/code> with <code>bgcolor: 'primary.main'<\/code> and <code>py: 6<\/code>. Use <code>Typography variant=&quot;h4&quot;<\/code> in white for the headline and <code>variant=&quot;body1&quot;<\/code> for the supporting copy. Then place the main Button with <code>variant=&quot;contained&quot; color=&quot;secondary&quot;<\/code> and a second Button with <code>variant=&quot;text&quot;<\/code> inside a <strong>Stack<\/strong> set to <code>direction={{ xs: 'column', sm: 'row' }}<\/code> and <code>spacing={2}<\/code>.<\/p>\n<h3 id=\"add-a-lead-form-and-responsive-layout-behavior\" tabindex=\"-1\">Add a lead form and responsive layout behavior<\/h3>\n<p>After the CTA, finish with the form users will use. Build the lead capture area inside a dedicated <strong>Card<\/strong> or <strong>Container<\/strong>. Add a <strong>Grid container<\/strong> with <code>spacing={2}<\/code> to arrange the <strong>TextField<\/strong> components: Work email with <code>type=&quot;email&quot;<\/code> and placeholder <code>jane.doe@example.com<\/code>, Full name, Company, and Team size.<\/p>\n<p>Set <code>fullWidth={true}<\/code> on each field so they stack cleanly on mobile. Add <code>required<\/code> and <code>helperText<\/code> props right in the props panel. For example: <code>We'll never share your email.<\/code> For consent, add a <code>Typography variant=&quot;body2&quot;<\/code> line with your compliance copy. End the section with a main <strong>Button<\/strong> using <code>variant=&quot;contained&quot; color=&quot;primary&quot;<\/code> and the label <strong>Get demo access<\/strong>.<\/p>\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/best-practices-examples-of-excellent-responsive-design\/\" style=\"display: inline;\">Responsive behavior<\/a> comes from MUI breakpoint props, which you set right in UXPin&#8217;s inspector. Set hero image columns to <code>xs={12} md={6}<\/code>, feature cards to <code>xs={12} sm={6} md={3}<\/code>, and use <code>sx={{ px: { xs: 2, md: 4 }, py: { xs: 4, md: 8 } }}<\/code> on section wrappers.<\/p>\n<p>Test the page at 375 px for small phones, 768 px for tablets, and 1,440 px for desktop in UXPin&#8217;s preview. Those breakpoint props carry straight into production.<\/p>\n<h3 id=\"where-uxpin-forge-fits-in\" tabindex=\"-1\">Where <a href=\"https:\/\/www.uxpin.com\/forge\" style=\"display: inline;\">UXPin Forge<\/a> fits in<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a52d9f921d1dee3314ba755\/82b43b77ddeaaa1eb3d395bd335c9c81.jpg\" alt=\"UXPin Forge\" style=\"width:100%;\"><\/p>\n<p>Use Forge only when you need alternate layouts, not for the core build. It&#8217;s best for trying quick layout variations inside the same approved MUI library.<\/p>\n<h2 id=\"step-4-refine-validate-and-hand-off-without-rebuilds\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Step 4: Refine, validate, and hand off without rebuilds<\/h2>\n<p>Before engineering review, tighten the copy, clean up props, check spacing, and make sure the page lines up with your theme.<\/p>\n<h3 id=\"refine-copy-props-and-system-consistency\" tabindex=\"-1\">Refine copy, props, and system consistency<\/h3>\n<p>Take your current hero headline, subheading, CTA labels, and form helper text and paste them back into Claude Sonnet 4.5. Use a tight prompt like this: <em>&quot;Rewrite this SaaS landing page copy for a US B2B audience. Keep the hero headline under 60 characters and return 3 variants for each section.&quot;<\/em><\/p>\n<p>Then choose the strongest option and drop it into the matching MUI component prop in UXPin Merge.<\/p>\n<p>While you&#8217;re in the properties panel, do a quick theme check. Make sure:<\/p>\n<ul>\n<li>Headings use approved <code>Typography<\/code> variants<\/li>\n<li>Colors come from <a href=\"https:\/\/www.uxpin.com\/docs\/design-systems\/color-design-tokens\/\" style=\"display: inline;\">theme design tokens<\/a><\/li>\n<li>Spacing uses theme values instead of custom pixel settings<\/li>\n<\/ul>\n<p>That last part matters more than it seems. A page can look fine at a glance, then start to drift once one-off values pile up.<\/p>\n<p>Next, test the prototype like an actual visitor.<\/p>\n<h3 id=\"validate-handoff-quality-with-code-backed-prototypes\" tabindex=\"-1\">Validate handoff quality with code-backed prototypes<\/h3>\n<p>Open UXPin preview and move through the page from top to bottom. Click into the form. Check focus states. Make sure <code>TextField<\/code> components show the right <code>helperText<\/code> and <code>error<\/code> states. Then confirm the CTA button triggers the intended interaction.<\/p>\n<p>Because Merge uses real MUI components, the preview stays in line with production props, states, and interactions.<\/p>\n<p>Once preview checks look good, open Spec Mode. Review each component&#8217;s variant, color token, and spacing prop before handoff. That gives engineering a component-accurate prototype with no rebuild step.<\/p>\n<h2 id=\"conclusion-turn-ai-generated-ideas-into-landing-pages-your-team-can-ship\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Conclusion: Turn AI-generated ideas into landing pages your team can ship<\/h2>\n<p>Once the build steps are done, the big win is <strong>speed without drift<\/strong>. This setup closes the gap between design and development by turning Claude output into real MUI components in Merge.<\/p>\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/building-component-library-guide\/\" style=\"display: inline;\">Building component libraries<\/a> cut translation mistakes and trim rework during handoff. When your prototype uses the same MUI components your engineers will ship, review cycles get shorter, and the prototype starts to act as the source of truth for handoff.<\/p>\n<p>That same component-based setup works across the sections teams build again and again. Claude Sonnet 4.5 can help draft the copy and map out section logic, but it still needs a human pass. Tighten the copy, check breakpoints, and keep props aligned with the approved theme. You can use this same flow for product launches, campaign sign-ups, and lead forms.<\/p>\n<p>From prompt to production, Merge keeps both teams working in the same component language and makes handoff faster.<\/p>\n<h2 id=\"faqs\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">FAQs<\/h2>\n<h3 id=\"how-do-i-write-a-good-claude-prompt-for-this-workflow\" tabindex=\"-1\" data-faq-q>How do I write a good Claude prompt for this workflow?<\/h3>\n<p>Be specific and structured.<\/p>\n<p>Define the <strong>user type<\/strong>, <strong>goals<\/strong>, <strong>platform<\/strong>, and <strong>constraints<\/strong> up front. For example, mention mid-sized U.S. companies, the product context, and the MUI components you plan to use, such as <code>Grid<\/code>, <code>Card<\/code>, <code>Stack<\/code>, or <code>Button<\/code>.<\/p>\n<p>Use U.S. formatting in your prompt and examples:<\/p>\n<ul>\n<li>Currency: <code>$1,234.56<\/code><\/li>\n<li>Date: <code>MM\/DD\/YYYY<\/code><\/li>\n<li>Numbers: <code>1,234.56<\/code><\/li>\n<\/ul>\n<p>Ask for <strong>structured output<\/strong>, like JSON, so the content maps cleanly to component props and is easier to plug into your UI.<\/p>\n<p>For layout-heavy prompts, call out the exact MUI components and responsive breakpoints you need, such as <code>xs={12}<\/code> and <code>md={6}<\/code>. That keeps the response implementation-ready for <strong>UXPin Merge<\/strong> instead of sounding like loose mockup copy.<\/p>\n<h3 id=\"can-i-use-my-teams-custom-mui-components-in-uxpin-merge\" tabindex=\"-1\" data-faq-q>Can I use my team\u2019s custom MUI components in UXPin Merge?<\/h3>\n<p>Yes. You can connect your team\u2019s MUI-based component repository to UXPin Merge through Git, <a href=\"https:\/\/storybook.js.org\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Storybook<\/a>, or npm.<\/p>\n<p>Once it\u2019s connected, your custom components sync as live, code-backed elements. That means you can use your team\u2019s props and variants directly on the canvas instead of rebuilding them by hand.<\/p>\n<p>You can also manage component behavior with <code>uxpin.config.js<\/code> and track changes through your Git audit trail.<\/p>\n<h3 id=\"what-should-i-validate-before-handing-the-page-to-engineering\" tabindex=\"-1\" data-faq-q>What should I validate before handing the page to engineering?<\/h3>\n<p>Validate both structure and function before handoff. Check key states like loading, empty, and error. Review role-based logic, accessibility, and page hierarchy too.<\/p>\n<p>Make sure the hero sits above the fold, headlines scale in a clear way, and navigation stays tied to the main conversion goal. If the top of the page feels crowded or the menu pulls people in five directions at once, that&#8217;s usually a sign something needs to be trimmed.<\/p>\n<p>Also confirm U.S. formatting, such as <strong>$9,999.99<\/strong> and <strong>MM\/DD\/YYYY<\/strong>, and keep CTA labels consistent. A button that says <strong>Start Free Trial<\/strong> in one spot and <strong>Get Started<\/strong> in another can create friction fast.<\/p>\n<p>In UXPin, test component behavior in Preview Mode, then use Spec Mode so developers can review JSX and CSS details.<\/p>\n<h2>Related Blog Posts<\/h2>\n<ul>\n<li><a href=\"\/studio\/blog\/build-ui-claude-sonnet-4-5-shadcn-ui-uxpin-merge\/\" style=\"display: inline;\">How to build UI using Claude Sonnet 4.5 + shadcn\/ui  &#8211;  Use UXPin Merge!<\/a><\/li>\n<li><a href=\"\/studio\/blog\/build-landing-page-gpt-4-1-mui-uxpin-merge\/\" style=\"display: inline;\">How to build a landing page using GPT-4.1 + MUI  &#8211;  Use UXPin Merge!<\/a><\/li>\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<\/ul>\n<p><script async type=\"text\/javascript\" src=\"https:\/\/app.seobotai.com\/banner\/banner.js?id=6a52d9f921d1dee3314ba755\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Map AI-written copy to MUI components and build a production-ready landing page in UXPin Merge to avoid design-to-code drift.<\/p>\n","protected":false},"author":231,"featured_media":60355,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-60358","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"yoast_title":"MUI Landing Page with UXPin Merge","yoast_metadesc":"Map AI-written copy to MUI components and build a production-ready landing page in UXPin Merge to avoid design-to-code drift.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.9 (Yoast SEO v28.0) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>MUI Landing Page with UXPin Merge<\/title>\n<meta name=\"description\" content=\"Map AI-written copy to MUI components and build a production-ready landing page in UXPin Merge to avoid design-to-code drift.\" \/>\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-sonnet-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 Sonnet 4.5 + MUI - Use UXPin Merge!\" \/>\n<meta property=\"og:description\" content=\"Map AI-written copy to MUI components and build a production-ready landing page in UXPin Merge to avoid design-to-code drift.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-mui-uxpin-merge\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2026-07-12T07:48:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/07\/image_ab05705fb4035afd23e014f6d3ec4ca7.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=\"13 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-sonnet-4-5-mui-uxpin-merge\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-sonnet-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 Sonnet 4.5 + MUI &#8211; Use UXPin Merge!\",\"datePublished\":\"2026-07-12T07:48:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-sonnet-4-5-mui-uxpin-merge\\\/\"},\"wordCount\":2361,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-sonnet-4-5-mui-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/image_ab05705fb4035afd23e014f6d3ec4ca7.jpeg\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-sonnet-4-5-mui-uxpin-merge\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-sonnet-4-5-mui-uxpin-merge\\\/\",\"name\":\"MUI Landing Page with UXPin Merge\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-sonnet-4-5-mui-uxpin-merge\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-sonnet-4-5-mui-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/image_ab05705fb4035afd23e014f6d3ec4ca7.jpeg\",\"datePublished\":\"2026-07-12T07:48:28+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\"},\"description\":\"Map AI-written copy to MUI components and build a production-ready landing page in UXPin Merge to avoid design-to-code drift.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-sonnet-4-5-mui-uxpin-merge\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-sonnet-4-5-mui-uxpin-merge\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-sonnet-4-5-mui-uxpin-merge\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/image_ab05705fb4035afd23e014f6d3ec4ca7.jpeg\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/image_ab05705fb4035afd23e014f6d3ec4ca7.jpeg\",\"width\":1536,\"height\":1024,\"caption\":\"How to build a landing page using Claude Sonnet 4.5 + MUI - Use UXPin Merge!\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-sonnet-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 Sonnet 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":"MUI Landing Page with UXPin Merge","description":"Map AI-written copy to MUI components and build a production-ready landing page in UXPin Merge to avoid design-to-code drift.","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-sonnet-4-5-mui-uxpin-merge\/","og_locale":"en_US","og_type":"article","og_title":"How to build a landing page using Claude Sonnet 4.5 + MUI - Use UXPin Merge!","og_description":"Map AI-written copy to MUI components and build a production-ready landing page in UXPin Merge to avoid design-to-code drift.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-mui-uxpin-merge\/","og_site_name":"Studio by UXPin","article_published_time":"2026-07-12T07:48:28+00:00","og_image":[{"width":1536,"height":1024,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/07\/image_ab05705fb4035afd23e014f6d3ec4ca7.jpeg","type":"image\/jpeg"}],"author":"Andrew Martin","twitter_card":"summary_large_image","twitter_creator":"@andrewSaaS","twitter_misc":{"Written by":"Andrew Martin","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-mui-uxpin-merge\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-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 Sonnet 4.5 + MUI &#8211; Use UXPin Merge!","datePublished":"2026-07-12T07:48:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-mui-uxpin-merge\/"},"wordCount":2361,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-mui-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/07\/image_ab05705fb4035afd23e014f6d3ec4ca7.jpeg","articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-mui-uxpin-merge\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-mui-uxpin-merge\/","name":"MUI Landing Page with UXPin Merge","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-mui-uxpin-merge\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-mui-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/07\/image_ab05705fb4035afd23e014f6d3ec4ca7.jpeg","datePublished":"2026-07-12T07:48:28+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b"},"description":"Map AI-written copy to MUI components and build a production-ready landing page in UXPin Merge to avoid design-to-code drift.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-mui-uxpin-merge\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-mui-uxpin-merge\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-mui-uxpin-merge\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/07\/image_ab05705fb4035afd23e014f6d3ec4ca7.jpeg","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/07\/image_ab05705fb4035afd23e014f6d3ec4ca7.jpeg","width":1536,"height":1024,"caption":"How to build a landing page using Claude Sonnet 4.5 + MUI - Use UXPin Merge!"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-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 Sonnet 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\/60358","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=60358"}],"version-history":[{"count":1,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/60358\/revisions"}],"predecessor-version":[{"id":60359,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/60358\/revisions\/60359"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/60355"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=60358"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=60358"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=60358"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}