{"id":60394,"date":"2026-07-24T01:33:00","date_gmt":"2026-07-24T08:33:00","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=60394"},"modified":"2026-07-24T01:33:00","modified_gmt":"2026-07-24T08:33:00","slug":"build-landing-page-claude-sonnet-4-5-ant-design-uxpin-merge","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-ant-design-uxpin-merge\/","title":{"rendered":"How to build a landing page using Claude Sonnet 4.5 + Ant Design  &#8211;  Use UXPin Merge!"},"content":{"rendered":"\n<p><strong>If I want to build a landing page with less back-and-forth, I can split the job into 3 parts:<\/strong> <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> plans the page, <a href=\"https:\/\/ant.design\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Ant Design<\/a> provides the React components, and <a href=\"https:\/\/www.uxpin.com\/merge\" style=\"display: inline;\">UXPin Merge<\/a> lets me place those code-backed parts into a prototype.<\/p>\n<p>In this workflow, I\u2019m not starting from a blank mockup. I\u2019m starting with a page outline, section copy, CTA labels, a component map, and a build checklist. The article walks through a landing page with <strong>7 sections<\/strong>: <strong>hero<\/strong>, <strong>feature cards<\/strong>, <strong>social proof<\/strong>, <strong>pricing<\/strong>, <strong>signup form<\/strong>, <strong>navigation<\/strong>, and <strong>footer<\/strong>.<\/p>\n<p>Here\u2019s the short version:<\/p>\n<ul>\n<li><strong>Claude Sonnet 4.5<\/strong>: I use it to outline sections, draft copy, format pricing like <strong>$29\/month<\/strong>, and map each section to Ant Design components.<\/li>\n<li><strong>Ant Design<\/strong>: I use it for React UI parts like <strong>Button<\/strong>, <strong>Card<\/strong>, <strong>Form<\/strong>, <strong>Input<\/strong>, <strong>Layout<\/strong>, and <strong>Menu<\/strong>.<\/li>\n<li><strong><a href=\"https:\/\/www.uxpin.com\/\" style=\"display: inline;\">UXPin<\/a> Merge<\/strong>: I use it to assemble those parts on canvas with actual props, spacing, and behavior.<\/li>\n<li><strong>Build setup<\/strong>: The page uses a <strong>12-column grid<\/strong>, <strong>24 px gutters<\/strong>, and breakpoints at <strong>375 px<\/strong>, <strong>768 px<\/strong>, <strong>1,024 px<\/strong>, and <strong>1,440 px<\/strong>.<\/li>\n<li><strong>Review step<\/strong>: I test anchors, CTA actions, form states, spacing, and breakpoint behavior before handoff.<\/li>\n<\/ul>\n<p>What stands out is the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-can-designers-do-to-ensure-a-smooth-design-handoff\/\" style=\"display: inline;\">smooth design handoff<\/a> angle. The article argues that when the prototype uses the same component set engineers use, teams spend less time redoing layouts, states, and props.<\/p>\n<figure>         <img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/undefined\/6a62af5941146ca830cf4b45-1784856374121.jpg\" alt=\"From Prompt to Prototype: Claude + Ant Design + UXPin Merge 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 Prompt to Prototype: Claude + Ant Design + UXPin Merge Workflow<\/p>\n<\/figcaption><\/figure>\n<h2 id=\"design-using-your-favorite-react-ui-libraries\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Design Using Your Favorite React UI Libraries<\/h2>\n<p> <iframe class=\"sb-iframe\" src=\"https:\/\/www.youtube.com\/embed\/0qAFWWrQCoI\" 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=\"quick-comparison\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Quick comparison<\/h2>\n<table style=\"width:100%;\">\n<thead>\n<tr>\n<th>Tool<\/th>\n<th>What I use it for<\/th>\n<th>Output<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Claude Sonnet 4.5<\/strong><\/td>\n<td>Page outline, copy, CTA labels, component mapping<\/td>\n<td>JSON plan and component checklist<\/td>\n<\/tr>\n<tr>\n<td><strong>Ant Design<\/strong><\/td>\n<td>UI building blocks<\/td>\n<td>React components like <code>Button<\/code>, <code>Card<\/code>, <code>Form<\/code>, <code>Menu<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>UXPin Merge<\/strong><\/td>\n<td>Page assembly and interaction setup<\/td>\n<td>Code-backed prototype<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>In short:<\/strong> this article shows me how to go from prompt to prototype in a step-by-step way, using AI for planning, Ant Design for UI parts, and UXPin Merge for the actual <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-with-code-tutorial\/\" style=\"display: inline;\">page build using code components<\/a>.<\/p>\n<h2 id=\"step-1-set-up-uxpin-merge-and-ant-design\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Step 1: Set up <a href=\"https:\/\/www.uxpin.com\/merge\" style=\"display: inline;\">UXPin Merge<\/a> and <a href=\"https:\/\/ant.design\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Ant Design<\/a><\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a62af5941146ca830cf4b45\/6a57d114fa9fc88aa57f69974960ea14.jpg\" alt=\"UXPin Merge\" style=\"width:100%;\"><\/p>\n<p>Start by setting up <strong>UXPin Merge<\/strong> and <strong>Ant Design<\/strong>. Open a UXPin project with Merge enabled, then load the built-in <strong>Ant Design<\/strong> library from the Merge panel.<\/p>\n<h3 id=\"use-ant-design-directly-inside-uxpin\" tabindex=\"-1\">Use Ant Design directly inside <a href=\"https:\/\/www.uxpin.com\/\" style=\"display: inline;\">UXPin<\/a><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a62af5941146ca830cf4b45\/ecdfb3297c7ab1af5f0dd0c238749e0e.jpg\" alt=\"UXPin\" style=\"width:100%;\"><\/p>\n<p>UXPin comes with <strong>Ant Design<\/strong> built in. Open a new or existing project, choose <strong>Ant Design<\/strong> from the libraries in the Merge panel, and drag components onto the canvas.<\/p>\n<p>You\u2019ll get components like <strong>Button<\/strong>, <strong>Input<\/strong>, <strong>Form<\/strong>, <strong>Card<\/strong>, <strong>Layout<\/strong>, <strong>Menu<\/strong>, and <strong>Typography<\/strong>. These are real React components, not static mockups. You can edit props and states, then adjust things like size, variant, or color in the <strong>Properties Panel<\/strong>. Those changes connect back to the code behind the component. Merge helps keep imported components in line with production behavior, interactions, and data handling.<\/p>\n<p>Once Ant Design is loaded, you can turn Claude\u2019s page plan into actual components in the next step.<\/p>\n<h3 id=\"when-to-connect-a-custom-ant-design-based-library\" tabindex=\"-1\">When to connect a custom Ant Design-based library<\/h3>\n<p>For most landing page work, the built-in library is enough. But if your team uses a themed Ant Design system with custom tokens or its own component logic, connect that React library through Merge instead.<\/p>\n<p>That way, your prototype components stay in sync with the code your team already uses. After you connect it, UXPin can document the library in the <strong>Design System<\/strong> area, so designers can browse components, review props, and check usage notes without leaving the tool. <\/p>\n<p>For this guide, stick with the built-in library, then move to Step 2 to map Claude\u2019s output to components. After that, use <strong>Claude Sonnet 4.5<\/strong> to define the landing page structure and component map.<\/p>\n<h2 id=\"step-2-use-claude-sonnet-45-to-plan-the-landing-page\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Step 2: 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 plan the landing page<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a62af5941146ca830cf4b45\/751fa6f29e3f98cc80c570363d68f43c.jpg\" alt=\"Claude Sonnet 4.5\" style=\"width:100%;\"><\/p>\n<p>With <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ant-design-introduction\/\" style=\"display: inline;\">Ant Design in place<\/a>, use Claude Sonnet 4.5 to shape your goals into a landing page outline, copy, and a component map for UXPin Merge. At this stage, you&#8217;re turning the setup into a page plan you can actually build from.<\/p>\n<h3 id=\"prompt-claude-for-sections-copy-and-component-mapping\" tabindex=\"-1\">Prompt Claude for sections, copy, and component mapping<\/h3>\n<p>Give Claude a prompt that spells out the page goal, the sections you need, and the Ant Design components it should use. The output becomes your build spec for UXPin Merge.<\/p>\n<blockquote>\n<p>&quot;Act as a UX designer working with <strong>Ant Design<\/strong> and <strong>UXPin Merge<\/strong> for a SaaS analytics product. Context: We&#8217;re building a single-page <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/landing-pages-guide\/\" style=\"display: inline;\">marketing landing page<\/a> for U.S. business customers. The goal is to drive free trial sign-ups. Task:<\/p>\n<ol>\n<li>Propose a landing page structure with these sections: hero, feature grid, testimonials, pricing, contact form, footer.<\/li>\n<li>For each section, provide: an <code>id<\/code> name, 1 headline or section title, 1\u20132 short body copy paragraphs (max ~160 characters each), and 1\u20132 CTA button labels (max 24 characters).<\/li>\n<li>Map every part of each section to <strong>Ant Design components<\/strong> from this set: <code>Layout<\/code>, <code>Row<\/code>, <code>Col<\/code>, <code>Typography<\/code>, <code>Button<\/code>, <code>Card<\/code>, <code>Form<\/code>, <code>Input<\/code>, <code>Menu<\/code>. Format: Return JSON with one object per section containing <code>sectionId<\/code>, <code>sectionTitle<\/code>, <code>copy<\/code>, <code>primaryCTA<\/code>, <code>secondaryCTA<\/code> (optional), <code>antdComponents<\/code> (array), and layout notes.&quot;<\/li>\n<\/ol>\n<\/blockquote>\n<p>That prompt does two jobs at once. It gives you page copy, and it tells you which UI parts to use. So instead of staring at a blank canvas in UXPin Merge, you start with a draft that already has structure.<\/p>\n<p>Example hero output:<\/p>\n<ul>\n<li><strong>Headline:<\/strong> &quot;Turn your sales data into clear insights&quot;<\/li>\n<li><strong>Subcopy:<\/strong> &quot;Connect your CRM and see real-time pipeline metrics in one dashboard.&quot;<\/li>\n<li><strong>Primary CTA:<\/strong> &quot;Start free trial&quot; | <strong>Secondary CTA:<\/strong> &quot;Book a demo&quot;<\/li>\n<li><strong>Components:<\/strong> <code>Layout<\/code>, <code>Row<\/code>, <code>Col<\/code>, <code>Typography.Title<\/code>, <code>Typography.Paragraph<\/code>, <code>Button<\/code><\/li>\n<\/ul>\n<h3 id=\"refine-the-output-for-en-us-formatting-and-production-use\" tabindex=\"-1\">Refine the output for en-US formatting and production use<\/h3>\n<p>Then run a second prompt to tighten the copy so it fits the layout and follows U.S. formatting rules.<\/p>\n<blockquote>\n<p>&quot;Refine all text to fit the specified character limits, use en-US formatting throughout, price plans in USD (e.g., $29\/month, $59\/month, $99\/month), format any dates as MM\/DD\/YYYY, and remove generic marketing phrases. Return only the updated copy and component mapping.&quot;<\/p>\n<\/blockquote>\n<p>This pass helps clean things up before you build. It keeps pricing in USD, trims lines that might wrap awkwardly, and makes labels easier to use in a live UI.<\/p>\n<p>Use USD pricing such as <strong>$29\/month<\/strong>, <strong>$59\/month<\/strong>, and <strong>$99\/month<\/strong>, and keep form labels short:<\/p>\n<ul>\n<li>Name<\/li>\n<li>Work Email<\/li>\n<li>Company<\/li>\n<li>Preferred demo date (MM\/DD\/YYYY)<\/li>\n<\/ul>\n<h3 id=\"turn-claude-output-into-a-component-checklist\" tabindex=\"-1\">Turn Claude output into a component checklist<\/h3>\n<p>Next, turn Claude&#8217;s response into a <code>componentsChecklist<\/code> array so building in UXPin Merge goes faster. Ask Claude to return each item with the <code>sectionId<\/code>, <code>componentName<\/code>, its <code>role<\/code> on the page, <code>recommendedProps<\/code>, and a short <code>interaction<\/code> note.<\/p>\n<blockquote>\n<p><em>Example checklist item:<\/em> <code>Button<\/code> \u2192 role: &quot;Hero primary CTA&quot; \u2192 props: <code>type: &quot;primary&quot;, size: &quot;large&quot;<\/code> \u2192 interaction: &quot;onClick scroll to #pricing&quot;<\/p>\n<\/blockquote>\n<p>This is the part that saves time. You\u2019re no longer just working from copy or a rough wireframe. You now have a section-by-section parts list tied to purpose and behavior.<\/p>\n<p>Before moving into Step 3, check Claude&#8217;s component names against your Ant Design library so the spec matches what you can build in UXPin Merge.<\/p>\n<h2 id=\"step-3-build-the-landing-page-in-uxpin-merge-with-ant-design-components\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Step 3: Build the landing page in UXPin Merge with Ant Design components<\/h2>\n<p>Open your UXPin project and start placing <strong>real Ant Design components<\/strong> on the canvas. The goal here is simple: take Claude&#8217;s outline and turn it into a working page, one section at a time. Follow the checklist so you can place each component in UXPin without changing the structure halfway through.<\/p>\n<h3 id=\"build-each-section-with-ant-design-components\" tabindex=\"-1\">Build each section with Ant Design components<\/h3>\n<p>Start with layout first. Don\u2019t worry about polish yet. Drop a <code>Layout<\/code> component onto the canvas for each section, then place <code>Row<\/code> and <code>Col<\/code> inside it to set up the grid. Use a <strong>12-column grid<\/strong> with <strong>24 px gutters<\/strong> on a <strong>1,440 px desktop canvas<\/strong>, then adjust it for <strong>375 px<\/strong>, <strong>768 px<\/strong>, <strong>1,024 px<\/strong>, and <strong>1,440 px<\/strong> breakpoints.<\/p>\n<p>Each component below comes straight from Claude&#8217;s plan and should be added as a real Ant Design element in UXPin:<\/p>\n<ul>\n<li><strong>Hero<\/strong>: Use <code>Typography.Title<\/code> for the headline, <code>Typography.Text<\/code> or <code>Paragraph<\/code> for short subcopy, and two buttons: a primary CTA like <code>Start Free Trial<\/code> and a secondary <code>Schedule Demo<\/code>.<\/li>\n<li><strong>Features<\/strong>: Use <code>Card<\/code> components inside a three-column <code>Row<\/code> on desktop. Each card can use <code>Card.Meta<\/code> for the title and short description. If Claude&#8217;s outline calls for a feature list instead, use <code>List<\/code> with <code>List.Item.Meta<\/code>.<\/li>\n<li><strong>Testimonials<\/strong>: Combine <code>Card<\/code> with <code>Avatar<\/code> for the customer image or initials, <code>Typography.Text<\/code> for the name and role, and <code>Paragraph<\/code> for the testimonial text.<\/li>\n<li><strong>Pricing<\/strong>: Use three <code>Col<\/code> elements, each with a <code>Card<\/code>. Add <code>Typography.Title<\/code> for the price, <code>Tag<\/code> for labels like <code>Most Popular<\/code> or <code>Best Value<\/code>, and set the recommended plan&#8217;s button to <code>type=&quot;primary&quot;<\/code> while the others stay <code>type=&quot;default&quot;<\/code>.<\/li>\n<li><strong>Signup<\/strong>: Add a <code>Form<\/code> with <code>layout=&quot;vertical&quot;<\/code>, then wrap each field in <code>Form.Item<\/code>. Use <code>Input<\/code> for Name, Work Email, and Company, plus a <code>Select<\/code> for Team Size with options like <code>1\u201310<\/code>, <code>11\u201350<\/code>, <code>51\u2013200<\/code>, and <code>200+<\/code>. Add a <code>Checkbox<\/code> for terms consent and a primary <code>Button<\/code> to submit.<\/li>\n<li><strong>Navigation and footer<\/strong>: Place <code>Menu<\/code> in <code>Layout.Header<\/code> and link each <code>Menu.Item<\/code> to its section. Build the footer inside <code>Layout.Footer<\/code> with footer links.<\/li>\n<\/ul>\n<h3 id=\"set-props-styles-and-interactions-in-uxpin\" tabindex=\"-1\">Set props, styles, and interactions in UXPin<\/h3>\n<p>Set Ant Design props in UXPin the same way you would in code. That means using the exact props your build would use later. For example, set <code>Button<\/code> props like <code>type=&quot;primary&quot;<\/code> and <code>size=&quot;large&quot;<\/code>. Set <code>Typography.Title<\/code> <code>level<\/code> to <strong>1<\/strong> for the hero headline and <strong>2\u20133<\/strong> for section headings. Use <code>Row<\/code> <code>gutter<\/code> to control spacing between columns, and set <code>justify<\/code> and <code>align<\/code> to match Ant Design&#8217;s responsive layout behavior.<\/p>\n<p>Here\u2019s a useful rule of thumb: avoid custom styles that override Ant Design defaults unless your design system says otherwise. If you stay close to Ant Design&#8217;s default behavior, the prototype will map to production code with less CSS cleanup later. That saves time and cuts back on back-and-forth with engineering.<\/p>\n<p>For interactions, use UXPin&#8217;s built-in events right on the components. Connect the hero <code>Button<\/code>&#8216;s <code>onClick<\/code> to scroll or jump to the <code>#signup<\/code> section. Link each <code>Menu.Item<\/code> to its anchor. On submit, show a loading state, then display a <code>Result<\/code> or <code>Alert<\/code> with confirmation copy. You can also toggle <code>Form.Item<\/code> error states to mimic validation when required fields are left blank.<\/p>\n<h3 id=\"static-mockups-vs-merge-based-landing-pages-a-comparison\" tabindex=\"-1\">Static mockups vs. Merge-based landing pages: a comparison<\/h3>\n<p>The gap between a static mockup and a Merge-based prototype shows up fast the moment someone clicks around. One looks finished. The other <em>acts<\/em> finished. That difference matters a lot for product and engineering teams.<\/p>\n<table style=\"width:100%;\">\n<thead>\n<tr>\n<th>Aspect<\/th>\n<th>Static Design-Only Mockups<\/th>\n<th>UXPin Merge + Ant Design<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Visual Fidelity<\/strong><\/td>\n<td>High, but not guaranteed to match production components exactly<\/td>\n<td>High, using real Ant Design components identical to production<\/td>\n<\/tr>\n<tr>\n<td><strong>Interaction Realism<\/strong><\/td>\n<td>Limited; interactions are annotated, not experienced<\/td>\n<td>Full; clicks, navigation, and form states behave like production UI<\/td>\n<\/tr>\n<tr>\n<td><strong>Design-System Compliance<\/strong><\/td>\n<td>Depends on designer discipline; easy to drift from system tokens<\/td>\n<td>Strong; code-backed library enforces design-system rules automatically<\/td>\n<\/tr>\n<tr>\n<td><strong>Developer Rework<\/strong><\/td>\n<td>High; devs must translate visuals into components and resolve mismatches<\/td>\n<td>Low; devs reuse component choices, props, and layout patterns directly<\/td>\n<\/tr>\n<tr>\n<td><strong>Handoff Effort<\/strong><\/td>\n<td>Heavy reliance on redlines, documentation, and clarification meetings<\/td>\n<td>Reduced; prototype doubles as a living spec with inspectable props<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Once the page matches the checklist, it&#8217;s ready for review and handoff.<\/p>\n<h2 id=\"step-4-review-hand-off-and-keep-design-and-development-aligned\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Step 4: Review, hand off, and keep design and development aligned<\/h2>\n<p>Once the page is assembled, the next move is to make sure it works the way it should before handoff.<\/p>\n<h3 id=\"validate-the-prototype-and-share-it-with-stakeholders\" tabindex=\"-1\">Validate the prototype and share it with stakeholders<\/h3>\n<p>Review the full page in preview mode before you share it. Test the navigation links. Make sure the primary CTA stands out. Check that form fields respond the right way, card layouts and spacing stay in place, and the page <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/guide-to-responsive-design\/\" style=\"display: inline;\">works well across breakpoints<\/a>. Since the page uses <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/guide-front-end-prototyping\/\" style=\"display: inline;\">real Ant Design components<\/a>, reviewers are looking at the same system engineers will ship.<\/p>\n<p>Use the section IDs, component names, and props from Steps 2 and 3 as a review checklist. It helps to check content hierarchy, CTA priority, and form behavior as separate passes. Tag teammates directly on components with comments. That keeps feedback tied to the actual component instead of a screenshot, which makes revisions faster and cuts down on inconsistencies.<\/p>\n<p>Once the page passes review, package the component list and prop notes for engineering.<\/p>\n<h3 id=\"traditional-handoff-vs-merge-based-handoff-a-comparison\" tabindex=\"-1\">Traditional handoff vs. Merge-based handoff: a comparison<\/h3>\n<p>After the preview pass, capture only the implementation details engineers need. Merge-based handoff gives engineers inspectable components, props, and structure. They can inspect the component structure and reference the exact Ant Design elements used, with no redlines to decode.<\/p>\n<h3 id=\"key-takeaways-for-faster-cleaner-landing-page-delivery\" tabindex=\"-1\">Key takeaways for faster, cleaner landing page delivery<\/h3>\n<p>Claude defines the plan, Ant Design supplies the components, and UXPin Merge turns both into an implementation-ready prototype. That cuts rework and keeps design aligned with code.<\/p>\n<h2 id=\"faqs\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">FAQs<\/h2>\n<h3 id=\"how-much-of-the-page-can-claude-plan-for-me\" tabindex=\"-1\" data-faq-q>How much of the page can Claude plan for me?<\/h3>\n<p>Claude can map out your entire landing page, from the page structure to the copy and component choices. If you share your design system inventory, it can put together a section-by-section brief that lines up with your Ant Design components.<\/p>\n<p>It can also write headlines, subheadlines, benefit-driven copy, and CTA labels that fit your layout limits. That helps keep the page implementation-ready before you build it in UXPin Merge.<\/p>\n<h3 id=\"when-should-i-use-a-custom-ant-design-library-in-merge\" tabindex=\"-1\" data-faq-q>When should I use a custom Ant Design library in Merge?<\/h3>\n<p>Use a custom Ant Design library in Merge <strong>only<\/strong> if you\u2019re working with a modified or proprietary version that\u2019s different from the standard Ant Design package.<\/p>\n<p>For standard use, you don\u2019t need to import anything manually because UXPin already includes a built-in Ant Design library.<\/p>\n<p>You can also use a custom npm import if you need to match a specific version or add custom settings that aren\u2019t included in the default library.<\/p>\n<h3 id=\"what-should-i-test-before-handing-off-the-landing-page\" tabindex=\"-1\" data-faq-q>What should I test before handing off the landing page?<\/h3>\n<p>Before handoff, review the page in Preview Mode to make sure it works the way it should on both desktop and mobile.<\/p>\n<p>Test the main interaction points, including:<\/p>\n<ul>\n<li>Navigation links<\/li>\n<li>Calls to action<\/li>\n<li>Form validation<\/li>\n<li>Keyboard tab order<\/li>\n<li>Hover, active, error, and success states<\/li>\n<\/ul>\n<p>Then check the layout at <strong>375 px<\/strong>, <strong>768 px<\/strong>, <strong>1,024 px<\/strong>, and <strong>1,440 px<\/strong>.<\/p>\n<p>At each breakpoint, confirm that:<\/p>\n<ul>\n<li>Headlines stay above the fold<\/li>\n<li>Cards stack cleanly without horizontal scrolling<\/li>\n<li>Text contrast meets accessibility rules<\/li>\n<li>Tap targets are at least <strong>44&#215;44 px<\/strong><\/li>\n<\/ul>\n<p>This step helps catch small issues before they turn into big ones after launch.<\/p>\n<h2>Related Blog Posts<\/h2>\n<ul>\n<li><a href=\"\/studio\/blog\/prototype-claude-sonnet-4-5-ant-design-uxpin-merge\/\" style=\"display: inline;\">How to prototype using Claude Sonnet 4.5 + Ant Design  &#8211;  Use UXPin Merge!<\/a><\/li>\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-ui-claude-sonnet-4-5-ant-design-uxpin-merge\/\" style=\"display: inline;\">How to build UI using Claude Sonnet 4.5 + Ant Design  &#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=6a62af5941146ca830cf4b45\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Plan and build a production-ready landing page with AI-driven outlines, Ant Design React components, and UXPin Merge prototypes.<\/p>\n","protected":false},"author":231,"featured_media":60391,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-60394","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"yoast_title":"Landing Page with Ant Design & UXPin Merge","yoast_metadesc":"Plan and build a production-ready landing page with AI-driven outlines, Ant Design React components, and UXPin Merge prototypes.","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 with Ant Design &amp; UXPin Merge<\/title>\n<meta name=\"description\" content=\"Plan and build a production-ready landing page with AI-driven outlines, Ant Design React components, and UXPin Merge prototypes.\" \/>\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-ant-design-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 + Ant Design - Use UXPin Merge!\" \/>\n<meta property=\"og:description\" content=\"Plan and build a production-ready landing page with AI-driven outlines, Ant Design React components, and UXPin Merge prototypes.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-ant-design-uxpin-merge\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2026-07-24T08:33:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/07\/image_2398f9fcd9b44a4ec39ba03afa8bebae.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=\"12 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-ant-design-uxpin-merge\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-sonnet-4-5-ant-design-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 + Ant Design &#8211; Use UXPin Merge!\",\"datePublished\":\"2026-07-24T08:33:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-sonnet-4-5-ant-design-uxpin-merge\\\/\"},\"wordCount\":2326,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-sonnet-4-5-ant-design-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/image_2398f9fcd9b44a4ec39ba03afa8bebae.jpeg\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-sonnet-4-5-ant-design-uxpin-merge\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-sonnet-4-5-ant-design-uxpin-merge\\\/\",\"name\":\"Landing Page with Ant Design & 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-ant-design-uxpin-merge\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-sonnet-4-5-ant-design-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/image_2398f9fcd9b44a4ec39ba03afa8bebae.jpeg\",\"datePublished\":\"2026-07-24T08:33:00+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\"},\"description\":\"Plan and build a production-ready landing page with AI-driven outlines, Ant Design React components, and UXPin Merge prototypes.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-sonnet-4-5-ant-design-uxpin-merge\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-sonnet-4-5-ant-design-uxpin-merge\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-sonnet-4-5-ant-design-uxpin-merge\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/image_2398f9fcd9b44a4ec39ba03afa8bebae.jpeg\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/image_2398f9fcd9b44a4ec39ba03afa8bebae.jpeg\",\"width\":1536,\"height\":1024,\"caption\":\"How to build a landing page using Claude Sonnet 4.5 + Ant Design - Use UXPin Merge!\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-sonnet-4-5-ant-design-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 + Ant Design &#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 with Ant Design & UXPin Merge","description":"Plan and build a production-ready landing page with AI-driven outlines, Ant Design React components, and UXPin Merge prototypes.","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-ant-design-uxpin-merge\/","og_locale":"en_US","og_type":"article","og_title":"How to build a landing page using Claude Sonnet 4.5 + Ant Design - Use UXPin Merge!","og_description":"Plan and build a production-ready landing page with AI-driven outlines, Ant Design React components, and UXPin Merge prototypes.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-ant-design-uxpin-merge\/","og_site_name":"Studio by UXPin","article_published_time":"2026-07-24T08:33:00+00:00","og_image":[{"width":1536,"height":1024,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/07\/image_2398f9fcd9b44a4ec39ba03afa8bebae.jpeg","type":"image\/jpeg"}],"author":"Andrew Martin","twitter_card":"summary_large_image","twitter_creator":"@andrewSaaS","twitter_misc":{"Written by":"Andrew Martin","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-ant-design-uxpin-merge\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-ant-design-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 + Ant Design &#8211; Use UXPin Merge!","datePublished":"2026-07-24T08:33:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-ant-design-uxpin-merge\/"},"wordCount":2326,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-ant-design-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/07\/image_2398f9fcd9b44a4ec39ba03afa8bebae.jpeg","articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-ant-design-uxpin-merge\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-ant-design-uxpin-merge\/","name":"Landing Page with Ant Design & 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-ant-design-uxpin-merge\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-ant-design-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/07\/image_2398f9fcd9b44a4ec39ba03afa8bebae.jpeg","datePublished":"2026-07-24T08:33:00+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b"},"description":"Plan and build a production-ready landing page with AI-driven outlines, Ant Design React components, and UXPin Merge prototypes.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-ant-design-uxpin-merge\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-ant-design-uxpin-merge\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-ant-design-uxpin-merge\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/07\/image_2398f9fcd9b44a4ec39ba03afa8bebae.jpeg","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/07\/image_2398f9fcd9b44a4ec39ba03afa8bebae.jpeg","width":1536,"height":1024,"caption":"How to build a landing page using Claude Sonnet 4.5 + Ant Design - Use UXPin Merge!"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-ant-design-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 + Ant Design &#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\/60394","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=60394"}],"version-history":[{"count":1,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/60394\/revisions"}],"predecessor-version":[{"id":60395,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/60394\/revisions\/60395"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/60391"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=60394"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=60394"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=60394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}