{"id":60422,"date":"2026-07-29T01:43:54","date_gmt":"2026-07-29T08:43:54","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=60422"},"modified":"2026-07-29T01:43:54","modified_gmt":"2026-07-29T08:43:54","slug":"build-landing-page-claude-haiku-4-5-ant-design-uxpin-merge","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-haiku-4-5-ant-design-uxpin-merge\/","title":{"rendered":"How to build a landing page using Claude Haiku 4.5 + Ant Design  &#8211;  Use UXPin Merge!"},"content":{"rendered":"\n<p><strong>You can go from prompt to prototype with one simple flow:<\/strong> use <a href=\"https:\/\/www.anthropic.com\/claude\/haiku\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Claude Haiku 4.5<\/a> for page copy and section structure, <a href=\"https:\/\/ant.design\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Ant Design<\/a> for <a href=\"https:\/\/react.dev\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">React<\/a> UI parts, and <a href=\"https:\/\/www.uxpin.com\/merge\" style=\"display: inline;\">UXPin Merge<\/a> to build the page with the same code-backed components your dev team uses.<\/p>\n<p>I\u2019d sum it up like this: <strong>Claude writes the page, Ant Design supplies the UI, and <a href=\"https:\/\/www.uxpin.com\/\" style=\"display: inline;\">UXPin<\/a> Merge puts both on a shared canvas.<\/strong> That cuts <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-workflow-with-code-components\/\" style=\"display: inline;\">mismatch between design and code<\/a> and gives teams a clearer <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-developers-need-from-designers-during-design-handoff\/\" style=\"display: inline;\">design handoff path<\/a>.<\/p>\n<p>Here\u2019s the full idea in plain English:<\/p>\n<ul>\n<li><strong>Claude Haiku 4.5<\/strong> drafts the landing page sections and short UI copy<\/li>\n<li><strong>Ant Design<\/strong> gives you ready-made React parts like <code>Button<\/code>, <code>Card<\/code>, <code>Form<\/code>, <code>Input<\/code>, and <code>Select<\/code><\/li>\n<li><strong>UXPin Merge<\/strong> lets me place those coded parts on a design canvas<\/li>\n<li>The page includes <strong>4 sections<\/strong>:\n<ul>\n<li>hero<\/li>\n<li>features grid<\/li>\n<li>CTA band<\/li>\n<li>lead form<\/li>\n<\/ul>\n<\/li>\n<li>The form collects:\n<ul>\n<li>First Name<\/li>\n<li>Last Name<\/li>\n<li>Work Email<\/li>\n<li>Job Title<\/li>\n<li>Company Name<\/li>\n<li>Team Size<\/li>\n<li>marketing consent<\/li>\n<\/ul>\n<\/li>\n<li>The example target is a <strong>B2B marketing analytics platform<\/strong><\/li>\n<li>The main conversion goal is <strong>Book a live demo<\/strong><\/li>\n<\/ul>\n<p>A few details stand out. The guide keeps copy short enough for UI use, uses responsive Ant Design grid settings like <strong><code>xs={24}<\/code><\/strong>, <strong><code>sm={12}<\/code><\/strong>, and <strong><code>md={8}<\/code> or <code>md={12}<\/code><\/strong>, and recommends a content width around <strong>1,200 px<\/strong>. It also uses U.S. formatting like <strong>$249 per month<\/strong>, <strong>1,200 campaigns<\/strong>, and <strong>3.5x ROI<\/strong>.<\/p>\n<p>What I like most is the job split. <em>One tool writes. One tool supplies components. One tool handles layout and handoff.<\/em> That makes the workflow easier to follow and easier to repeat.<\/p>\n<p>If you want a short version, it\u2019s this:<\/p>\n<ul>\n<li><strong>Start with a labeled prompt in Claude<\/strong><\/li>\n<li><strong>Map each section to Ant Design components<\/strong><\/li>\n<li><strong>Build the page in UXPin Merge<\/strong><\/li>\n<li><strong>Use Forge for more layout versions<\/strong><\/li>\n<li><strong>Hand off a prototype tied to the same component system devs inspect<\/strong><\/li>\n<\/ul>\n<p><strong>In other words: this article is a step-by-step way to build a landing page that stays close to production from the first prompt.<\/strong><\/p>\n<figure>         <img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/undefined\/6a6948432f6aeb480bfe8d38-1785288947838.jpg\" alt=\"From AI Prompt to Landing Page: 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 AI Prompt to Landing Page: Claude + Ant Design + UXPin Merge Workflow<\/p>\n<\/figcaption><\/figure>\n<h2 id=\"uxpin-merge-ai-smarter-ui-generation-that-follows-your-design-system\" tabindex=\"-1\" class=\"sb h2-sbb-cls\"><a href=\"https:\/\/www.uxpin.com\/merge\" style=\"display: inline;\">UXPin Merge<\/a> AI: Smarter UI Generation That Follows Your Design System<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a6948432f6aeb480bfe8d38\/6a57d114fa9fc88aa57f69974960ea14.jpg\" alt=\"UXPin Merge\" style=\"width:100%;\"><\/p>\n<p> <iframe class=\"sb-iframe\" src=\"https:\/\/www.youtube.com\/embed\/QY7xfXBTVn4\" 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-generate-landing-page-structure-and-copy-with-claude-haiku-45\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Step 1: 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\/6a6948432f6aeb480bfe8d38\/ae93df41c6a61dafa928d06235763910.jpg\" alt=\"Claude Haiku 4.5\" style=\"width:100%;\"><\/p>\n<p>Claude Haiku 4.5 does best when you give it a short, labeled brief that leads to UI-ready output. Think short text fields that can drop straight into Ant Design props. Then, in Step 2, you\u2019ll map each section to Ant Design components.<\/p>\n<h3 id=\"write-a-prompt-for-sections-audience-and-conversion-goal\" tabindex=\"-1\">Write a prompt for sections, audience, and conversion goal<\/h3>\n<p>Start by setting three inputs: product, audience, and one conversion goal. In this walkthrough, the product is a <strong>B2B marketing analytics platform<\/strong> that helps U.S. marketing teams track real-time campaign ROI across channels. The audience is marketing managers and directors at midmarket tech companies with 50\u2013500 employees. The conversion goal is a single action: <strong>Book a live demo.<\/strong><\/p>\n<p>Put those inputs into a labeled design brief at the top of your prompt. Then tell Claude which sections to generate and the order to use. The prompt pattern that tends to work best is <strong>Role \u2192 Brief \u2192 Sections \u2192 Output Format<\/strong>:<\/p>\n<blockquote>\n<p>Act as a UX copy assistant helping design a B2B SaaS landing page implemented with Ant Design components inside UXPin Merge. Product: a marketing analytics platform for U.S. marketing teams. Audience: U.S.-based marketing managers at midmarket tech companies (50\u2013500 employees). Primary CTA: Book a live demo. Format prices as $249 per month. Use commas for thousands and periods for decimals (e.g., 1,200 campaigns, 3.5x ROI). Output a structured JSON-style output with these sections: Hero, Features, PrimaryCtaBand, ContactForm. For each section, include only short, UI-ready text fields &#8211; title, subtitle, bullets, buttonLabel, field labels and types. No long paragraphs. Avoid any code syntax that might break JSON.<\/p>\n<\/blockquote>\n<p>After Claude returns the structure, tighten the copy before you turn it into components.<\/p>\n<h3 id=\"refine-headlines-microcopy-and-form-fields\" tabindex=\"-1\">Refine headlines, microcopy, and form fields<\/h3>\n<p>The first pass gives you a strong skeleton. The second pass is where the copy gets tight enough to use. Take just the hero block from Claude\u2019s output and run a follow-up prompt with strict length limits: <strong>headline under 10 words<\/strong>, subtitle under 160 characters, and each benefit bullet under 80 characters. Those limits help keep the copy compact inside Ant Design Typography.<\/p>\n<p>Ask Claude for <strong>3 alternative hero variants<\/strong> labeled A, B, and C in the same structured format. That way, you get actual options to compare instead of one draft you\u2019re stuck tweaking.<\/p>\n<p>For the form section, your second-pass prompt should clearly ask for U.S.-standard field labels:<\/p>\n<ul>\n<li><em>Work Email<\/em><\/li>\n<li><em>First Name<\/em><\/li>\n<li><em>Last Name<\/em><\/li>\n<li><em>Job Title<\/em><\/li>\n<li><em>Company Name<\/em><\/li>\n<li>a <code>Select<\/code> field for <em>Team Size<\/em><\/li>\n<li>a <code>Checkbox<\/code> for marketing consent<\/li>\n<\/ul>\n<p>These field names and types map straight to Ant Design <code>Form.Item<\/code>, <code>Input<\/code>, <code>Select<\/code>, and <code>Checkbox<\/code> components.<\/p>\n<p>Next, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-with-code-tutorial\/\" style=\"display: inline;\">map the approved sections to Ant Design layout and form components<\/a> to finalize your prototype.<\/p>\n<h2 id=\"step-2-map-claudes-output-to-ant-design-components\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Step 2: Map Claude&#8217;s output to <a href=\"https:\/\/ant.design\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Ant Design<\/a> components<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a6948432f6aeb480bfe8d38\/7eec148e4712bef56952d5e458e90374.jpg\" alt=\"Ant Design\" style=\"width:100%;\"><\/p>\n<p>Before you open UXPin Merge, map each part of the page to <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-components\/\" style=\"display: inline;\">essential design system components<\/a> from Ant Design. That gives you a clean build plan and cuts down on rework later.<\/p>\n<p>Use this table as the reference point:<\/p>\n<table style=\"width:100%;\">\n<thead>\n<tr>\n<th>Landing page section<\/th>\n<th>Ant Design components<\/th>\n<th>Key props and notes<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Hero<\/strong><\/td>\n<td><code>Layout<\/code>, <code>Layout.Content<\/code>, <code>Row<\/code>, <code>Col<\/code>, <code>Space<\/code>, <code>Typography.Title<\/code>, <code>Typography.Text<\/code>, <code>Button<\/code><\/td>\n<td><code>xs={24}<\/code> \/ <code>md={12}<\/code> on each <code>Col<\/code>; <code>Button type=&quot;primary&quot; size=&quot;large&quot;<\/code> for &quot;Request demo&quot;<\/td>\n<\/tr>\n<tr>\n<td><strong>Features grid<\/strong><\/td>\n<td><code>Layout.Content<\/code>, <code>Row<\/code>, <code>Col<\/code>, <code>Card<\/code>, <code>Typography.Title<\/code>, <code>Typography.Text<\/code>, <code>Space<\/code><\/td>\n<td><code>xs={24}<\/code> \/ <code>sm={12}<\/code> \/ <code>md={8}<\/code> for a 3-column grid; <code>gutter={{ xs: 8, sm: 16, md: 24 }}<\/code> on <code>Row<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Primary CTA band<\/strong><\/td>\n<td><code>Layout.Content<\/code>, <code>Row<\/code>, <code>Col<\/code>, <code>Space<\/code>, <code>Typography.Title<\/code>, <code>Button<\/code><\/td>\n<td>Centered single <code>Col<\/code>; <code>Button type=&quot;primary&quot;<\/code> for the main action, <code>type=&quot;default&quot;<\/code> for a secondary action<\/td>\n<\/tr>\n<tr>\n<td><strong>Lead form<\/strong><\/td>\n<td><code>Form<\/code>, <code>Form.Item<\/code>, <code>Input<\/code>, <code>Select<\/code>, <code>Checkbox<\/code>, <code>Button<\/code><\/td>\n<td><code>layout=&quot;vertical&quot;<\/code>; match each <code>Form.Item name<\/code> to the backend field key<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Build the sections in that order. It keeps the page structure clear and makes implementation much less messy.<\/p>\n<h3 id=\"convert-hero-features-and-cta-sections-into-layout-components\" tabindex=\"-1\">Convert hero, features, and CTA sections into layout components<\/h3>\n<p>For the hero, use one <code>Row<\/code> with two <code>Col<\/code> blocks: the left side for text, the right side for the product visual. Set both columns to <code>xs={24}<\/code> and <code>md={12}<\/code> so the layout stacks on mobile and splits evenly on larger screens. Inside the text column, use <code>Space direction=&quot;vertical&quot;<\/code> to stack the headline, subtitle, and buttons without fiddling with one-off spacing.<\/p>\n<p>The features area should use three <code>Card<\/code> components inside a single <code>Row<\/code>. Set each <code>Col<\/code> to <code>xs={24}<\/code>, <code>sm={12}<\/code>, and <code>md={8}<\/code> so the layout shifts from one column to two, then three. Add <code>gutter={{ xs: 8, sm: 16, md: 24 }}<\/code> on the <code>Row<\/code> to keep spacing even across breakpoints. Each <code>Card<\/code> should include a <code>Typography.Title<\/code> at level 4 for the feature name and <code>Typography.Text<\/code> for the supporting copy Claude produced.<\/p>\n<p>For the CTA band, place a centered <code>Col<\/code> inside the section and add a <code>Typography.Title<\/code> plus a primary <code>Button<\/code> labeled <strong>&quot;Request demo.&quot;<\/strong> If the copy includes a second action, such as <strong>&quot;Get pricing,&quot;<\/strong> add a <code>Button type=&quot;default&quot;<\/code> next to it.<\/p>\n<p>Once those layout sections are mapped, move to the lead form.<\/p>\n<h3 id=\"build-the-lead-form-with-ant-design-form-inputs\" tabindex=\"-1\">Build the lead form with Ant Design form inputs<\/h3>\n<p>Set the <code>Form<\/code> to <code>layout=&quot;vertical&quot;<\/code>. Each <code>Form.Item name<\/code> should match the backend field key exactly. For example, use <code>name=&quot;workEmail&quot;<\/code> if that&#8217;s the field your backend expects. That way, developers don&#8217;t have to remap fields during handoff.<\/p>\n<p>A few form details matter here:<\/p>\n<ul>\n<li>Add required and email validation rules to the email field.<\/li>\n<li>For the <strong>Team Size<\/strong> <code>Select<\/code>, use these U.S.-friendly ranges:\n<ul>\n<li><code>1\u201310<\/code><\/li>\n<li><code>11\u201350<\/code><\/li>\n<li><code>51\u2013200<\/code><\/li>\n<li><code>201\u20131,000<\/code><\/li>\n<li><code>1,000+<\/code><\/li>\n<\/ul>\n<\/li>\n<li>For the consent checkbox, use <code>Form.Item<\/code> with <code>valuePropName=&quot;checked&quot;<\/code> and a custom <code>validator<\/code> that confirms the value is <code>true<\/code> before submission. <\/li>\n<\/ul>\n<p>The submit button should read <strong>&quot;Request demo.&quot;<\/strong><\/p>\n<p>With those sections mapped to Ant Design, you&#8217;re ready to assemble them in UXPin Merge.  This workflow allows you to <a href=\"https:\/\/www.uxpin.com\/merge\/developers\" style=\"display: inline;\">design UI with coded components<\/a> much faster than traditional methods.<\/p>\n<h2 id=\"step-3-assemble-the-page-in-uxpin-merge-using-ant-design-components\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Step 3: Assemble the page in <a href=\"https:\/\/www.uxpin.com\/\" style=\"display: inline;\">UXPin<\/a> Merge using Ant Design components<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a6948432f6aeb480bfe8d38\/9920614086ce739b9210b45cb2d1c98b.jpg\" alt=\"UXPin\" style=\"width:100%;\"><\/p>\n<p>Open UXPin Merge and build the landing page right on the canvas with Ant Design components. This is the point where Claude\u2019s copy turns into a working Ant Design prototype. Work section by section, and keep the component setup matched to Claude\u2019s output.<\/p>\n<h3 id=\"set-up-the-page-structure-in-the-merge-canvas\" tabindex=\"-1\">Set up the page structure in the Merge canvas<\/h3>\n<p>Drag a <code>Layout<\/code> onto the canvas and use <code>Content<\/code> for the landing page sections. Add the sections in this order:<\/p>\n<ul>\n<li>hero<\/li>\n<li>features<\/li>\n<li>CTA band<\/li>\n<li>lead form<\/li>\n<\/ul>\n<h3 id=\"add-copy-set-props-and-adjust-for-responsive-layouts\" tabindex=\"-1\">Add copy, set props, and adjust for responsive layouts<\/h3>\n<p>Paste Claude\u2019s copy into the right component props: <code>Typography.Title<\/code> for headlines, <code>Typography.Text<\/code> for supporting copy, and <code>Button<\/code> labels for CTAs.<\/p>\n<p>Set the hero to <code>xs={24}<\/code> and <code>md={12}<\/code>. Set the feature cards to <code>xs={24}<\/code> and <code>md={8}<\/code>. Use <code>Typography.Title<\/code> levels and <code>strong<\/code> to create a clear hierarchy. Cap <code>Content<\/code> at about 1,200 px so the page stays easy to read.<\/p>\n<p>Once the layout feels stable, keep that same component setup for fast variations later. It\u2019s a simple way to make updates without rebuilding the whole page each time.<\/p>\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-patterns-how-to\/\" style=\"display: inline;\">Save finished sections as Patterns for reuse<\/a>. That keeps page assembly fast and cuts out the hassle of rebuilding shared sections from scratch.<\/p>\n<h3 id=\"check-the-code-backed-output-for-design-dev-alignment\" tabindex=\"-1\">Check the code-backed output for design-dev alignment<\/h3>\n<p>Developers can inspect the exact component tree and props. Preview each breakpoint, fix any spacing or column-span issues in the props panel, and use those updates to get the prototype ready for <a href=\"https:\/\/www.uxpin.com\/handoff\" style=\"display: inline;\">design handoff<\/a>.<\/p>\n<p>After the layout passes breakpoint checks, move to the next iteration pass.<\/p>\n<h2 id=\"step-4-speed-up-iteration-with-uxpin-forge-and-prepare-for-handoff\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Step 4: Speed up iteration with <a href=\"https:\/\/www.uxpin.com\/forge\" style=\"display: inline;\">UXPin Forge<\/a> and prepare for handoff<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a6948432f6aeb480bfe8d38\/82b43b77ddeaaa1eb3d395bd335c9c81.jpg\" alt=\"UXPin Forge\" style=\"width:100%;\"><\/p>\n<p>After you build the first Ant Design layout in UXPin Merge, <strong>UXPin Forge<\/strong> helps you move faster without rebuilding what\u2019s already done. Forge is UXPin\u2019s built-in AI assistant. It creates and edits layouts using only approved design system components, so the versions it generates stay code-compatible and on-system.<\/p>\n<h3 id=\"use-forge-to-build-ant-design-layouts-from-prompts\" tabindex=\"-1\">Use Forge to build Ant Design layouts from prompts<\/h3>\n<p>Once the layout is in place and the copy is ready, use Forge to spin up new versions without leaving the same Ant Design system. From this point on, Forge handles the visual layout work. Prompt Forge directly inside UXPin with the structured section outline Claude produced earlier.<\/p>\n<p>A good Forge prompt is specific. For example:<\/p>\n<blockquote>\n<p><em>&quot;Using our Ant Design library, build a responsive landing page with a left-aligned hero, a three-column feature grid, a CTA band, and a right-sided signup form capturing name, email, company size, and job title. Stack to a single column below 768 px.&quot;<\/em><\/p>\n<\/blockquote>\n<p>That kind of prompt gives Forge a clear lane to follow, which makes the output much easier to use.<\/p>\n<p>After Forge generates the first layout, drop Claude\u2019s copy into the matching props &#8211; <code>Typography.Title<\/code> for headlines, <code>Typography.Text<\/code> for supporting copy, and <code>Button<\/code> labels for CTAs. Then adjust breakpoints and column spans on the canvas. Developers can inspect the component tree and props directly.<\/p>\n<p>At this stage, the goal is simple: move through iterations faster while keeping the prototype lined up with production components. That gives you a shorter path from approved copy to a developer-ready landing page.<\/p>\n<h3 id=\"conclusion-from-ai-prompt-to-a-functional-landing-page\" tabindex=\"-1\">Conclusion: From AI prompt to a functional landing page<\/h3>\n<p>This workflow keeps content, components, and handoff aligned.<\/p>\n<h2 id=\"faqs\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">FAQs<\/h2>\n<h3 id=\"how-do-i-connect-claudes-output-to-ant-design-components\" tabindex=\"-1\" data-faq-q>How do I connect Claude\u2019s output to Ant Design components?<\/h3>\n<p>Treat Claude\u2019s output as a <strong>structural brief<\/strong>, not a visual design.<\/p>\n<p>Ask for a structured outline that maps each section to Ant Design components like <strong>Layout<\/strong>, <strong>Row<\/strong>, <strong>Col<\/strong>, <strong>Typography<\/strong>, <strong>Card<\/strong>, and <strong>Form<\/strong>.<\/p>\n<p>Then turn that output into a simple component list and use it as a checklist in <strong>UXPin Merge<\/strong>. Drag in the matching Ant Design components and set their props in the <strong>Properties Panel<\/strong> so they match the AI-generated brief.<\/p>\n<h3 id=\"what-makes-uxpin-merge-better-for-design-dev-handoff\" tabindex=\"-1\" data-faq-q>What makes UXPin Merge better for design-dev handoff?<\/h3>\n<p>UXPin Merge makes design-dev handoff smoother by letting designers use the same production-ready React components that developers already work with. That keeps both sides in sync and cuts down on the usual back-and-forth.<\/p>\n<p>Because these prototypes are code-backed instead of static mockups, developers can inspect props, variants, and responsive behavior right away. In plain English, they\u2019re not guessing how something should work from a flat screen. That means less friction during handoff, less rework, and a faster path to deployment.<\/p>\n<h3 id=\"how-should-i-validate-the-lead-form-before-handoff\" tabindex=\"-1\" data-faq-q>How should I validate the lead form before handoff?<\/h3>\n<p>Test the full submission flow in <strong>Preview Mode<\/strong> and make sure both error and success states behave the way they should.<\/p>\n<p>Check that <strong>Form<\/strong>, <strong>Form.Item<\/strong>, <strong>Input<\/strong>, <strong>Select<\/strong>, and <strong>Checkbox<\/strong> use the right Ant Design props and line up with production validation rules. That means field rules, error messages, required states, default values, disabled states, and any edge cases should match what users will see in the live product.<\/p>\n<p>Also confirm:<\/p>\n<ul>\n<li>the submit action fires correctly<\/li>\n<li>the form stays usable across breakpoints<\/li>\n<li>any issues are logged in UXPin comments<\/li>\n<li>any loading-state needs are noted in UXPin comments<\/li>\n<\/ul>\n<p>If something feels off, call it out plainly in the comments so the next person doesn\u2019t have to guess what went wrong.<\/p>\n<h2>Related Blog Posts<\/h2>\n<ul>\n<li><a href=\"\/studio\/blog\/prototype-claude-haiku-4-5-ant-design-uxpin-merge\/\" style=\"display: inline;\">How to prototype using Claude Haiku 4.5 + Ant Design  &#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-sonnet-4-5-ant-design-uxpin-merge\/\" style=\"display: inline;\">How to build a landing page using Claude Sonnet 4.5 + Ant Design  &#8211;  Use UXPin Merge!<\/a><\/li>\n<li><a href=\"\/studio\/blog\/build-landing-page-claude-haiku-4-5-mui-uxpin-merge\/\" style=\"display: inline;\">How to build a landing page using Claude Haiku 4.5 + MUI  &#8211;  Use UXPin Merge!<\/a><\/li>\n<\/ul>\n<p><script async type=\"text\/javascript\" src=\"https:\/\/app.seobotai.com\/banner\/banner.js?id=6a6948432f6aeb480bfe8d38\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Turn AI prompts into a code-backed landing page using Ant Design and UXPin Merge for fast, production-ready prototypes.<\/p>\n","protected":false},"author":231,"featured_media":60419,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-60422","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"yoast_title":"Landing Page Workflow: AI Copy + Ant Design","yoast_metadesc":"Turn AI prompts into a code-backed landing page using Ant Design and UXPin Merge for fast, production-ready 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 Workflow: AI Copy + Ant Design<\/title>\n<meta name=\"description\" content=\"Turn AI prompts into a code-backed landing page using Ant Design and UXPin Merge for fast, production-ready 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-haiku-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 Haiku 4.5 + Ant Design - Use UXPin Merge!\" \/>\n<meta property=\"og:description\" content=\"Turn AI prompts into a code-backed landing page using Ant Design and UXPin Merge for fast, production-ready prototypes.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-haiku-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-29T08:43:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/07\/image_b8859bca4fd243b8b3b9c671250cded5.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-ant-design-uxpin-merge\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-haiku-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 Haiku 4.5 + Ant Design &#8211; Use UXPin Merge!\",\"datePublished\":\"2026-07-29T08:43:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-haiku-4-5-ant-design-uxpin-merge\\\/\"},\"wordCount\":2089,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-haiku-4-5-ant-design-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/image_b8859bca4fd243b8b3b9c671250cded5.jpeg\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-haiku-4-5-ant-design-uxpin-merge\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-haiku-4-5-ant-design-uxpin-merge\\\/\",\"name\":\"Landing Page Workflow: AI Copy + Ant Design\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-haiku-4-5-ant-design-uxpin-merge\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-haiku-4-5-ant-design-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/image_b8859bca4fd243b8b3b9c671250cded5.jpeg\",\"datePublished\":\"2026-07-29T08:43:54+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\"},\"description\":\"Turn AI prompts into a code-backed landing page using Ant Design and UXPin Merge for fast, production-ready prototypes.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-haiku-4-5-ant-design-uxpin-merge\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-haiku-4-5-ant-design-uxpin-merge\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-haiku-4-5-ant-design-uxpin-merge\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/image_b8859bca4fd243b8b3b9c671250cded5.jpeg\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/image_b8859bca4fd243b8b3b9c671250cded5.jpeg\",\"width\":1536,\"height\":1024,\"caption\":\"How to build a landing page using Claude Haiku 4.5 + Ant Design - Use UXPin Merge!\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-haiku-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 Haiku 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 Workflow: AI Copy + Ant Design","description":"Turn AI prompts into a code-backed landing page using Ant Design and UXPin Merge for fast, production-ready 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-haiku-4-5-ant-design-uxpin-merge\/","og_locale":"en_US","og_type":"article","og_title":"How to build a landing page using Claude Haiku 4.5 + Ant Design - Use UXPin Merge!","og_description":"Turn AI prompts into a code-backed landing page using Ant Design and UXPin Merge for fast, production-ready prototypes.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-haiku-4-5-ant-design-uxpin-merge\/","og_site_name":"Studio by UXPin","article_published_time":"2026-07-29T08:43:54+00:00","og_image":[{"width":1536,"height":1024,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/07\/image_b8859bca4fd243b8b3b9c671250cded5.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-ant-design-uxpin-merge\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-haiku-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 Haiku 4.5 + Ant Design &#8211; Use UXPin Merge!","datePublished":"2026-07-29T08:43:54+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-haiku-4-5-ant-design-uxpin-merge\/"},"wordCount":2089,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-haiku-4-5-ant-design-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/07\/image_b8859bca4fd243b8b3b9c671250cded5.jpeg","articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-haiku-4-5-ant-design-uxpin-merge\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-haiku-4-5-ant-design-uxpin-merge\/","name":"Landing Page Workflow: AI Copy + Ant Design","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-haiku-4-5-ant-design-uxpin-merge\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-haiku-4-5-ant-design-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/07\/image_b8859bca4fd243b8b3b9c671250cded5.jpeg","datePublished":"2026-07-29T08:43:54+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b"},"description":"Turn AI prompts into a code-backed landing page using Ant Design and UXPin Merge for fast, production-ready prototypes.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-haiku-4-5-ant-design-uxpin-merge\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-haiku-4-5-ant-design-uxpin-merge\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-haiku-4-5-ant-design-uxpin-merge\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/07\/image_b8859bca4fd243b8b3b9c671250cded5.jpeg","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/07\/image_b8859bca4fd243b8b3b9c671250cded5.jpeg","width":1536,"height":1024,"caption":"How to build a landing page using Claude Haiku 4.5 + Ant Design - Use UXPin Merge!"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-haiku-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 Haiku 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\/60422","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=60422"}],"version-history":[{"count":1,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/60422\/revisions"}],"predecessor-version":[{"id":60423,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/60422\/revisions\/60423"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/60419"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=60422"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=60422"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=60422"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}