{"id":60329,"date":"2026-07-09T01:04:06","date_gmt":"2026-07-09T08:04:06","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=60329"},"modified":"2026-07-09T01:04:06","modified_gmt":"2026-07-09T08:04:06","slug":"build-landing-page-claude-opus-4-5-ant-design-uxpin-merge","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-opus-4-5-ant-design-uxpin-merge\/","title":{"rendered":"How to build a landing page using Claude Opus 4.5 + Ant Design  &#8211;  Use UXPin Merge!"},"content":{"rendered":"\n<p><strong>You can go from idea to a code-backed landing page in one flow:<\/strong> use <a href=\"https:\/\/www.anthropic.com\/claude-opus-4-5-system-card\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Claude Opus 4.5<\/a> for page copy and structure, then build with <a href=\"https:\/\/ant.design\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Ant Design<\/a> components in <a href=\"https:\/\/www.uxpin.com\/merge\" style=\"display: inline;\">UXPin Merge<\/a> so the prototype stays close to what developers will ship.<\/p>\n<p>I\u2019d sum up the article like this: <strong>plan first, map each section to components, build with the same <a href=\"https:\/\/react.dev\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">React<\/a>-based UI library, then test before handoff<\/strong>. The page in this guide includes <strong>5 parts<\/strong>: navigation, hero, feature grid, CTA block, and a sign-up form. It also keeps copy in <strong>en-US format<\/strong>, with examples like <strong>July 9, 2026<\/strong>, <strong>10,000<\/strong>, and <strong>$29\/month<\/strong>.<\/p>\n<p>Here\u2019s the core process:<\/p>\n<ul>\n<li><strong>Use Claude Opus 4.5<\/strong> to draft headlines, body copy, CTA labels, and section order<\/li>\n<li><strong>Turn that output into a component list<\/strong> for Ant Design<\/li>\n<li><strong>Build in <a href=\"https:\/\/www.uxpin.com\/\" style=\"display: inline;\">UXPin<\/a> Merge<\/strong> with <code>Layout<\/code>, <code>Row<\/code>, <code>Col<\/code>, <code>Card<\/code>, <code>Button<\/code>, <code>Form<\/code>, <code>Input<\/code>, and <code>Menu<\/code><\/li>\n<li><strong>Test at 375px, 768px, 1,024px, and 1,440px<\/strong><\/li>\n<li><strong>Document props and component mapping<\/strong> for engineering handoff<\/li>\n<\/ul>\n<p>A few points stood out to me:<\/p>\n<ul>\n<li>Ant Design is <strong>open-source<\/strong> and uses the <strong><a href=\"https:\/\/en.wikipedia.org\/wiki\/MIT_License\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">MIT license<\/a><\/strong><\/li>\n<li>The form example includes fields like <strong>First name<\/strong>, <strong>Last name<\/strong>, and <strong>Work email<\/strong><\/li>\n<li>The feature grid uses <strong>3 cards<\/strong><\/li>\n<li>The review step checks states like <strong>hover<\/strong>, <strong>active<\/strong>, <strong>error<\/strong>, and <strong>success<\/strong><\/li>\n<\/ul>\n<p><strong>Bottom line:<\/strong> I see this article as a simple workflow for teams that want fewer rebuilds, less mismatch between design and code, and a cleaner handoff.<\/p>\n<table style=\"width:100%;\">\n<thead>\n<tr>\n<th>Step<\/th>\n<th>What I\u2019d do<\/th>\n<th>Output<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>1<\/td>\n<td>Set up Ant Design in UXPin Merge<\/td>\n<td>Component library ready<\/td>\n<\/tr>\n<tr>\n<td>2<\/td>\n<td>Prompt Claude with section and copy rules<\/td>\n<td>Landing page outline<\/td>\n<\/tr>\n<tr>\n<td>3<\/td>\n<td>Map sections to Ant Design parts<\/td>\n<td>Build checklist<\/td>\n<\/tr>\n<tr>\n<td>4<\/td>\n<td>Assemble the page in UXPin<\/td>\n<td>Working prototype<\/td>\n<\/tr>\n<tr>\n<td>5<\/td>\n<td>Review layout, states, and form rules<\/td>\n<td>Handoff-ready file<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>If I were starting today, I\u2019d begin with one landing page, keep the structure tight, and use the prototype review to catch layout or form issues before sharing it with developers.<\/p>\n<figure>         <img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/undefined\/6a4ee5a221d1dee3314b7f53-1783558586660.jpg\" alt=\"Mockup-First vs. 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;\">Mockup-First vs. 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 <a href=\"https:\/\/react.dev\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">React<\/a> UI Libraries<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a4ee5a221d1dee3314b7f53\/6c46949dab85a3f6d821fe9a13e6ad3c.jpg\" alt=\"React\" style=\"width:100%;\"><\/p>\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<h2 id=\"1-set-up-your-stack-in-uxpin\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">1. Set up your stack in <a href=\"https:\/\/www.uxpin.com\/\" style=\"display: inline;\">UXPin<\/a><\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a4ee5a221d1dee3314b7f53\/32f4bf6cc40c52b0fa454ff5ce17d703.jpg\" alt=\"UXPin\" style=\"width:100%;\"><\/p>\n<p>Before you prompt Claude or place a single component, make sure your setup is ready. Doing this up front helps you avoid broken layouts and missing components later.<\/p>\n<h3 id=\"enable-ant-design-components-in-uxpin-merge\" tabindex=\"-1\">Enable <a href=\"https:\/\/ant.design\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Ant Design<\/a> components in <a href=\"https:\/\/www.uxpin.com\/merge\" style=\"display: inline;\">UXPin Merge<\/a><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a4ee5a221d1dee3314b7f53\/14ea0c7f22247e4cf13ed52e83d11088.jpg\" alt=\"Ant Design\" style=\"width:100%;\"><\/p>\n<p>Create a UXPin project, open <strong>Design System Libraries<\/strong>, and enable <strong>Ant Design<\/strong>. <\/p>\n<p>Think of this component set as your checklist for the hero, feature grid, CTA block, and sign-up form:<\/p>\n<table style=\"width:100%;\">\n<thead>\n<tr>\n<th>Component<\/th>\n<th>Landing Page Use<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Layout, Row, Col<\/td>\n<td>Page structure and responsive grid<\/td>\n<\/tr>\n<tr>\n<td>Typography<\/td>\n<td>Headlines, subheads, body copy<\/td>\n<\/tr>\n<tr>\n<td>Button<\/td>\n<td>CTAs and form submission<\/td>\n<\/tr>\n<tr>\n<td>Card<\/td>\n<td>Feature grid items<\/td>\n<\/tr>\n<tr>\n<td>Menu<\/td>\n<td>Navigation header<\/td>\n<\/tr>\n<tr>\n<td>Form, Input<\/td>\n<td>Sign-up and lead capture<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Use the <strong>Merge<\/strong> version so each component maps to real code. <\/p>\n<h3 id=\"choose-between-claude-opus-45-and-forge-inside-uxpin\" tabindex=\"-1\">Choose between <a href=\"https:\/\/www.anthropic.com\/claude-opus-4-5-system-card\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Claude Opus 4.5<\/a> and <a href=\"https:\/\/www.uxpin.com\/forge\" style=\"display: inline;\">Forge<\/a> inside UXPin<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a4ee5a221d1dee3314b7f53\/e1d685ba959219698eb90160a96c8d8c.jpg\" alt=\"Claude Opus 4.5\" style=\"width:100%;\"><\/p>\n<p>Use <strong>Claude Opus 4.5<\/strong> to plan the page. Use <strong>Forge<\/strong> to build the layout inside UXPin. <\/p>\n<p>A simple way to think about it: Claude handles the content, while Forge helps you put the layout together faster.<\/p>\n<h3 id=\"plan-and-account-notes\" tabindex=\"-1\">Plan and account notes<\/h3>\n<p>Check that the project owner or admin can enable <strong>Design System Libraries<\/strong>. Editors also need a seat to place and edit components.<\/p>\n<p>Once the stack is ready, you can use Claude to generate the landing page structure and copy.<\/p>\n<h2 id=\"2-use-claude-opus-45-to-generate-landing-page-structure-and-copy\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">2. Use Claude Opus 4.5 to generate landing page structure and copy<\/h2>\n<p>With your Ant Design library turned on in UXPin Merge, use Claude Opus 4.5 to turn a rough page idea into a clear brief you can build from in UXPin Merge. Then take that brief and turn it into a component checklist.<\/p>\n<h3 id=\"write-a-prompt-that-maps-content-to-ant-design-sections\" tabindex=\"-1\">Write a prompt that maps content to Ant Design sections<\/h3>\n<p>Claude gives you a usable structure when the prompt is specific. If you ask it to &quot;write copy for a SaaS landing page&quot;, you&#8217;ll usually get generic marketing copy. If you give it structure, you&#8217;ll get something you can build.<\/p>\n<p>Here\u2019s a prompt template that fits this workflow well:<\/p>\n<blockquote>\n<p><em>&quot;You are helping me design a SaaS landing page for a US audience, built with Ant Design in UXPin Merge. Propose a structured outline with these sections in order: 1) Top navigation, 2) Hero, 3) Feature grid, 4) Primary CTA block, 5) Email sign-up form. For each section, list: a) the purpose in one sentence, b) suggested Ant Design primitives such as Layout.Header, Row, Col, Typography.Title, Typography.Text, Button, Card, Form, Input, and Checkbox, c) 2\u20133 headline options, d) supporting body copy of 2\u20133 sentences, e) CTA label text, f) layout notes such as 2-column or left copy\/right image. Use US English spelling and price examples in USD such as $29\/month. Use clear bullets so each line maps to a component in Merge.&quot;<\/em><\/p>\n<\/blockquote>\n<p>That level of detail gives you a component-ready outline for your Merge library. More importantly, it keeps Claude\u2019s output tied to the parts you\u2019ll place next.<\/p>\n<h3 id=\"format-copy-for-a-us-english-audience\" tabindex=\"-1\">Format copy for a US English audience<\/h3>\n<p>Add formatting rules right into the prompt so the output is closer to production-ready and needs less cleanup. Set locale rules up front: USD prices like $29\/month, US dates like July 9, 2026, comma-separated numbers like 10,000, and US spelling like color and optimize.<\/p>\n<p>For forms, be specific. Ask Claude to use <strong>separate First name and Last name fields<\/strong>, one Work email field, and a primary button labeled <strong>&quot;Get started&quot;<\/strong> or <strong>&quot;Start free trial.&quot;<\/strong> That maps neatly to Ant Design\u2019s <code>Form<\/code> and <code>Input<\/code> components.<\/p>\n<h3 id=\"convert-the-outline-into-a-component-checklist\" tabindex=\"-1\">Convert the outline into a component checklist<\/h3>\n<p>Once Claude gives you the outline, resist the urge to jump into design. First, turn each section into a plain list of Ant Design components. That\u2019s the link between AI output and Merge build work.<\/p>\n<table style=\"width:100%;\">\n<thead>\n<tr>\n<th>AI-Generated Section<\/th>\n<th>Ant Design Components<\/th>\n<th>Key Props to Note<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Navigation<\/td>\n<td><code>Layout.Header<\/code>, <code>Menu<\/code>, <code>Button<\/code><\/td>\n<td><code>Button type=&quot;primary&quot;<\/code> for the header CTA<\/td>\n<\/tr>\n<tr>\n<td>Hero<\/td>\n<td><code>Row<\/code>, <code>Col<\/code>, <code>Typography.Title<\/code>, <code>Typography.Paragraph<\/code>, <code>Button<\/code><\/td>\n<td><code>Row align=&quot;middle&quot;<\/code>, two <code>Col<\/code> spans for split layout<\/td>\n<\/tr>\n<tr>\n<td>Feature grid<\/td>\n<td><code>Row<\/code>, <code>Col<\/code>, <code>Card<\/code>, <code>Typography.Title<\/code>, <code>Typography.Text<\/code><\/td>\n<td><code>Col span={8}<\/code> for a 3-column grid<\/td>\n<\/tr>\n<tr>\n<td>CTA block<\/td>\n<td><code>Layout.Content<\/code>, <code>Typography.Title<\/code>, <code>Button<\/code><\/td>\n<td><code>Button type=&quot;primary&quot; size=&quot;large&quot;<\/code><\/td>\n<\/tr>\n<tr>\n<td>Sign-up form<\/td>\n<td><code>Form<\/code>, <code>Form.Item<\/code>, <code>Input<\/code>, <code>Checkbox<\/code>, <code>Button<\/code><\/td>\n<td>Separate <code>Form.Item<\/code> for First name, Last name, Work email<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>A quick review against four checks helps keep things on course: <strong>clarity<\/strong> (does each section have a clear job?), <strong>mappability<\/strong> (can each line of copy attach to a specific component?), <strong>localization<\/strong> (are prices in USD, dates in Month Day, Year format, and spelling in US English?), and <strong>feasibility<\/strong> (can you build the interaction with basic Ant Design components in a first pass?).<\/p>\n<p>If something doesn\u2019t map cleanly, ask Claude to revise it. For example:<\/p>\n<blockquote>\n<p><em>&quot;Rewrite the feature section so it uses exactly 3 cards, each with a title under 5 words and one sentence of description.&quot;<\/em><\/p>\n<\/blockquote>\n<p>With the outline set, build it section by section in UXPin Merge.<\/p>\n<h6 id=\"sbb-itb-f6354c6\" class=\"sb-banner\" style=\"display: none;color:transparent;\">sbb-itb-f6354c6<\/h6>\n<h2 id=\"3-build-the-landing-page-in-uxpin-merge-with-ant-design-components\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">3. Build the landing page in UXPin Merge with Ant Design components<\/h2>\n<p>Build each section right in UXPin Merge with Ant Design components and props. Start with the header and hero, then move down the page section by section.<\/p>\n<h3 id=\"build-the-global-layout-header-and-hero-section\" tabindex=\"-1\">Build the global layout, header, and hero section<\/h3>\n<p>Start by dragging the <strong>Layout<\/strong> component onto the canvas. Then add <strong>Layout.Header<\/strong>, <strong>Layout.Content<\/strong>, and <strong>Layout.Footer<\/strong> as subcomponents. That gives you a page shell that matches the kind of structure teams often use in production.<\/p>\n<p>In <code>Layout.Header<\/code>, place the brand on the left, a horizontal <code>Menu<\/code> on the right, and a primary CTA at the far right. A common U.S. SaaS nav includes Product, Pricing, Resources, and Log in. Keep Pricing visible since this is a high-intent page. Use <code>type=&quot;link&quot;<\/code> for Log in so the visual hierarchy stays clear.<\/p>\n<p>For the hero, add a <strong>Row<\/strong> inside <strong>Layout.Content<\/strong> and split it into two <strong>Col<\/strong> components with <code>xs={24}<\/code> and <code>md={12}<\/code>. That way, the layout stacks on mobile and sits side by side on desktop. In the left column, use <code>Typography.Title level={1}<\/code> for the headline, <code>Typography.Paragraph<\/code> for a short value statement, and a <strong>Button<\/strong> set to <code>size=&quot;large&quot;<\/code> and <code>type=&quot;primary&quot;<\/code>. Handle spacing with the <code>gutter<\/code> prop on <strong>Row<\/strong> and with column spans instead of drawing static mockups.<\/p>\n<h3 id=\"add-a-feature-grid-cta-block-and-sign-up-form\" tabindex=\"-1\">Add a feature grid, CTA block, and sign-up form<\/h3>\n<p>For the feature grid, use a <strong>Row<\/strong> with <code>gutter={[24, 24]}<\/code> and three <strong>Col<\/strong> components set to <code>span={8}<\/code>. Inside each column, place a <strong>Card<\/strong> with <code>hoverable={true}<\/code>. Build the first card with an icon or small image at the top, <code>Typography.Title level={4}<\/code> for the feature name, and <code>Typography.Paragraph<\/code> for a one-sentence description. Then duplicate it twice. Reusing the first card helps keep spacing and hierarchy aligned.<\/p>\n<p>The CTA block goes below the feature grid. Use a <strong>Row<\/strong> with <code>justify=&quot;center&quot;<\/code> and a single <strong>Col<\/strong> to center the content. Add <code>Typography.Title level={2}<\/code> for the headline, a short <code>Typography.Paragraph<\/code> under it, and one <strong>Button<\/strong> set to <code>type=&quot;primary&quot;<\/code> and <code>size=&quot;large&quot;<\/code>. Stick to one primary CTA so the block stays focused.<\/p>\n<p>For the sign-up form, wrap the section in a <strong>Form<\/strong> component set to <code>layout=&quot;vertical&quot;<\/code>. Use <strong>Form.Item<\/strong> for each field with clear U.S.-friendly labels:<\/p>\n<ul>\n<li>First name<\/li>\n<li>Last name<\/li>\n<li>Work email<\/li>\n<li>Company<\/li>\n<li>Role (<code>Select<\/code>)<\/li>\n<li>Team size (<code>Select<\/code>)<\/li>\n<\/ul>\n<p>Add a <strong>Checkbox<\/strong> for marketing consent: I agree to receive product updates and marketing emails, with a link to your Privacy Policy. Finish with a <strong>Button<\/strong> set to <code>htmlType=&quot;submit&quot;<\/code> and <code>type=&quot;primary&quot;<\/code>. Add <code>rules<\/code> for required fields and email validation on Work email.<\/p>\n<h3 id=\"use-forge-to-speed-up-layout-without-leaving-the-design-system\" tabindex=\"-1\">Use Forge to speed up layout without leaving the design system<\/h3>\n<p>If you want a faster first pass, paste the same outline into Forge. Be specific about the components you want. For example:<\/p>\n<blockquote>\n<p>Use Ant Design Layout, Header, Row, Col, Card, Form, Input, and Button components already available in this UXPin project. Create a responsive landing page with a hero, feature grid, CTA block, and sign-up form based on this outline.<\/p>\n<\/blockquote>\n<p>Forge generates the first layout from the same Ant Design library, so each element stays aligned with your design system and production codebase. After that, review spacing, responsiveness, and prop behavior in the next step.<\/p>\n<h2 id=\"4-review-the-prototype-and-prepare-for-handoff\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">4. Review the prototype and prepare for handoff<\/h2>\n<p>Once the layout is built, switch to review mode and check the prototype before handing it off. This is the point where you make sure the page works the way it looks like it should.<\/p>\n<h3 id=\"check-behavior-props-and-responsiveness\" tabindex=\"-1\">Check behavior, props, and responsiveness<\/h3>\n<p>In Preview Mode, test the full flow. Click navigation links and CTAs. Run through form validation. Tab through the page to check keyboard flow. Also review hover, active, error, and success states to make sure each one behaves the way you expect.<\/p>\n<p>For responsive checks, resize the canvas to <strong>375px<\/strong>, <strong>768px<\/strong>, <strong>1,024px<\/strong>, and <strong>1,440px<\/strong>. At each width, confirm a few core things:<\/p>\n<ul>\n<li>The hero headline stays above the fold<\/li>\n<li>The feature cards stack cleanly<\/li>\n<li>The form fields don\u2019t force horizontal scrolling<\/li>\n<\/ul>\n<p>If a CTA slips below the fold, adjust the <code>Col<\/code> spans or the padding.<\/p>\n<p>Then review the main props across each section. Check <code>Button type=&quot;primary&quot; size=&quot;large&quot;<\/code>, <code>Typography.Title level={1}<\/code>, responsive <code>Row<\/code> gutters and <code>Col<\/code> spans, and the form validation rules. These should line up with how the engineering team will set up the same components in React.<\/p>\n<p>Once those checks are done, capture the component mapping for handoff.<\/p>\n<h3 id=\"document-section-to-component-mapping-for-your-team\" tabindex=\"-1\">Document section-to-component mapping for your team<\/h3>\n<p>Use the table below as the handoff record for engineering.<\/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<\/th>\n<th>UXPin Notes<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Hero<\/strong><\/td>\n<td><code>Layout<\/code>, <code>Row<\/code>, <code>Col<\/code><\/td>\n<td><code>Title level={1}<\/code>, <code>Button type=&quot;primary&quot; size=&quot;large&quot;<\/code>, <code>Col xs={24} md={14}<\/code><\/td>\n<td>Use shared Hero component; bind headline and subcopy to text tokens<\/td>\n<\/tr>\n<tr>\n<td><strong>Feature Grid<\/strong><\/td>\n<td><code>Row<\/code>, <code>Col<\/code>, <code>Card<\/code><\/td>\n<td><code>gutter<\/code> on <code>Row<\/code>, <code>Col xs={24} sm={12} md={8}<\/code><\/td>\n<td>Duplicate FeatureCard component; use content overrides for icon, title, description<\/td>\n<\/tr>\n<tr>\n<td><strong>CTA Block<\/strong><\/td>\n<td><code>Row<\/code>, <code>Col<\/code><\/td>\n<td><code>Row justify=&quot;center&quot;<\/code>, <code>Col xs={22} sm={16} md={12}<\/code>, single <code>type=&quot;primary&quot;<\/code> button<\/td>\n<td>One primary CTA only; reuse as GlobalCTA component<\/td>\n<\/tr>\n<tr>\n<td><strong>Sign-up 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>rules<\/code> for required fields and email, <code>htmlType=&quot;submit&quot;<\/code><\/td>\n<td>Mirror production validation rules; connect submit to success state<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Keep this table under version control alongside the prototype. That way, the design system stays tied to the product as it grows, instead of drifting over time.<\/p>\n<p>With the handoff map set, the workflow difference becomes easy to spot.<\/p>\n<h3 id=\"compare-this-workflow-with-a-mockup-based-process\" tabindex=\"-1\">Compare this workflow with a mockup-based process<\/h3>\n<p>In a mockup-first process, engineers look at visual specs and rebuild the layout from scratch. That often leads to small gaps between the design and the shipped product. With <strong>Claude Opus 4.5 + Ant Design + UXPin Merge<\/strong>, the prototype uses the same React components engineering will use later. So handoff becomes much simpler: share prop values instead of a pile of redlines.<\/p>\n<table style=\"width:100%;\">\n<thead>\n<tr>\n<th>Dimension<\/th>\n<th>Mockup-First Workflow<\/th>\n<th>Claude + Ant Design + UXPin Merge<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Speed to prototype<\/strong><\/td>\n<td>Days to weeks (manual layout, separate copy rounds)<\/td>\n<td>Hours (AI-generated structure + pre-built components)<\/td>\n<\/tr>\n<tr>\n<td><strong>Rebuild risk<\/strong><\/td>\n<td>High  &#8211;  engineers recreate visuals from scratch<\/td>\n<td>Low  &#8211;  same Ant Design components used in both prototype and code<\/td>\n<\/tr>\n<tr>\n<td><strong>Handoff effort<\/strong><\/td>\n<td>High  &#8211;  redlines, asset exports, clarification threads<\/td>\n<td>Low  &#8211;  component names, props, and the mapping table<\/td>\n<\/tr>\n<tr>\n<td><strong>Design system alignment<\/strong><\/td>\n<td>Manual  &#8211;  prone to drift over iterations<\/td>\n<td>Built-in  &#8211;  constrained to production Ant Design library from the start<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>At this stage, you have a tested prototype, checked props, and a clear section-to-component map. That gives engineering what they need without extra guesswork.<\/p>\n<h2 id=\"conclusion-a-repeatable-path-from-ai-ideas-to-code-backed-landing-pages\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">Conclusion: A repeatable path from AI ideas to code-backed landing pages<\/h2>\n<p>This workflow works because everything stays in one system. Claude Opus 4.5 handles the copy, Ant Design supplies the UI components, and UXPin Merge turns the result into a code-backed prototype.<\/p>\n<p>And this isn&#8217;t limited to one kind of page. The same pattern fits pricing pages, onboarding flows, and feature pages too. The flow stays the same: prompt, map, build, validate, hand off.<\/p>\n<p>A few mistakes can throw things off fast. Vague prompts lead to messy output. Styling outside Ant Design can create drift. Skipping Preview Mode checks makes handoff riskier than it needs to be.<\/p>\n<p>The best way to start is simple: use one live project. Track the time you save, ask developers what worked and what didn&#8217;t, and tighten the workflow from there. That first project gives you a clear baseline for speed, quality, and handoff clarity.<\/p>\n<h2 id=\"faqs\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">FAQs<\/h2>\n<h3 id=\"do-i-need-to-know-react-to-use-this-workflow\" tabindex=\"-1\" data-faq-q>Do I need to know React to use this workflow?<\/h3>\n<p>No. You don\u2019t need to know React to use this workflow.<\/p>\n<p>Ant Design components are already built into the UXPin Merge library. That means you can drag and drop them onto the canvas, then set up props, states, and layouts in the Properties Panel &#8211; all without writing code.<\/p>\n<h3 id=\"how-detailed-should-my-claude-prompt-be\" tabindex=\"-1\" data-faq-q>How detailed should my Claude prompt be?<\/h3>\n<p>Be specific and structured. Don\u2019t stay broad.<\/p>\n<p>Include these six factors in your prompt or brief:<\/p>\n<ul>\n<li><strong>Product name<\/strong><\/li>\n<li><strong>Target audience<\/strong><\/li>\n<li><strong>User goals<\/strong><\/li>\n<li><strong>Required Ant Design components<\/strong><\/li>\n<li><strong>Desired data density<\/strong><\/li>\n<li><strong>Branding or accessibility constraints<\/strong><\/li>\n<\/ul>\n<p>Give step-by-step directions so the output doesn\u2019t drift. Spell out the campaign objective, the tone of voice, and U.S. localization rules. For example, use <strong>$29\/month<\/strong>, not another currency format, and <strong>mm\/dd\/yyyy<\/strong> for dates.<\/p>\n<p>It also helps to ask for a section-by-section outline before the full draft. That way, you can check the structure early instead of fixing a long response later.<\/p>\n<p>Set limits for each section so the copy fits the UI component it\u2019s meant for. For example:<\/p>\n<ul>\n<li>Hero headline: 40 to 60 characters<\/li>\n<li>Subheading: 90 to 140 characters<\/li>\n<li>Card description: 120 to 180 characters<\/li>\n<li>Table cell text: keep it short and scannable<\/li>\n<li>CTA button: 2 to 5 words<\/li>\n<\/ul>\n<p>If you\u2019re using Ant Design, be direct about where the copy will live. A banner, modal, card, table, tooltip, and form all need different copy lengths and levels of detail. Short version: tell the model what it\u2019s writing, who it\u2019s for, and how much space it gets.<\/p>\n<h3 id=\"what-should-i-hand-off-to-developers\" tabindex=\"-1\" data-faq-q>What should I hand off to developers?<\/h3>\n<p>With UXPin Merge and Ant Design, you often don\u2019t need a standard handoff. That\u2019s because your prototype is already built with the same production-ready React components your developers use.<\/p>\n<p>For development, switch to <strong>Spec Mode<\/strong>. Engineers can inspect the exact JSX, dependencies, and logic, along with token-based values like spacing, colors, and CSS properties. So instead of translating designs or rebuilding mockups, they can work from what\u2019s already there.<\/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-gpt-5-1-ant-design-uxpin-merge\/\" style=\"display: inline;\">How to build a landing page using GPT-5.1 + Ant Design  &#8211;  Use UXPin Merge!<\/a><\/li>\n<\/ul>\n<p><script async type=\"text\/javascript\" src=\"https:\/\/app.seobotai.com\/banner\/banner.js?id=6a4ee5a221d1dee3314b7f53\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Use AI to write copy, map sections to Ant Design, and build a responsive, code-backed landing page in UXPin Merge.<\/p>\n","protected":false},"author":231,"featured_media":60326,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-60329","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"yoast_title":"Landing Page with Ant Design & UXPin","yoast_metadesc":"Use AI to write copy, map sections to Ant Design, and build a responsive, code-backed landing page in UXPin Merge.","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>Landing Page with Ant Design &amp; UXPin<\/title>\n<meta name=\"description\" content=\"Use AI to write copy, map sections to Ant Design, and build a responsive, code-backed landing page in UXPin Merge.\" \/>\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-opus-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 Opus 4.5 + Ant Design - Use UXPin Merge!\" \/>\n<meta property=\"og:description\" content=\"Use AI to write copy, map sections to Ant Design, and build a responsive, code-backed landing page in UXPin Merge.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-opus-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-09T08:04:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/07\/image_1355596efcd5a2a294ae4c2b827f4726.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=\"14 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-opus-4-5-ant-design-uxpin-merge\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-opus-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 Opus 4.5 + Ant Design &#8211; Use UXPin Merge!\",\"datePublished\":\"2026-07-09T08:04:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-opus-4-5-ant-design-uxpin-merge\\\/\"},\"wordCount\":2593,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-opus-4-5-ant-design-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/image_1355596efcd5a2a294ae4c2b827f4726.jpeg\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-opus-4-5-ant-design-uxpin-merge\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-opus-4-5-ant-design-uxpin-merge\\\/\",\"name\":\"Landing Page with Ant Design & UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-opus-4-5-ant-design-uxpin-merge\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-opus-4-5-ant-design-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/image_1355596efcd5a2a294ae4c2b827f4726.jpeg\",\"datePublished\":\"2026-07-09T08:04:06+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\"},\"description\":\"Use AI to write copy, map sections to Ant Design, and build a responsive, code-backed landing page in UXPin Merge.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-opus-4-5-ant-design-uxpin-merge\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-opus-4-5-ant-design-uxpin-merge\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-opus-4-5-ant-design-uxpin-merge\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/image_1355596efcd5a2a294ae4c2b827f4726.jpeg\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/image_1355596efcd5a2a294ae4c2b827f4726.jpeg\",\"width\":1536,\"height\":1024,\"caption\":\"How to build a landing page using Claude Opus 4.5 + Ant Design - Use UXPin Merge!\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-opus-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 Opus 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","description":"Use AI to write copy, map sections to Ant Design, and build a responsive, code-backed landing page in UXPin Merge.","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-opus-4-5-ant-design-uxpin-merge\/","og_locale":"en_US","og_type":"article","og_title":"How to build a landing page using Claude Opus 4.5 + Ant Design - Use UXPin Merge!","og_description":"Use AI to write copy, map sections to Ant Design, and build a responsive, code-backed landing page in UXPin Merge.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-opus-4-5-ant-design-uxpin-merge\/","og_site_name":"Studio by UXPin","article_published_time":"2026-07-09T08:04:06+00:00","og_image":[{"width":1536,"height":1024,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/07\/image_1355596efcd5a2a294ae4c2b827f4726.jpeg","type":"image\/jpeg"}],"author":"Andrew Martin","twitter_card":"summary_large_image","twitter_creator":"@andrewSaaS","twitter_misc":{"Written by":"Andrew Martin","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-opus-4-5-ant-design-uxpin-merge\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-opus-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 Opus 4.5 + Ant Design &#8211; Use UXPin Merge!","datePublished":"2026-07-09T08:04:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-opus-4-5-ant-design-uxpin-merge\/"},"wordCount":2593,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-opus-4-5-ant-design-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/07\/image_1355596efcd5a2a294ae4c2b827f4726.jpeg","articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-opus-4-5-ant-design-uxpin-merge\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-opus-4-5-ant-design-uxpin-merge\/","name":"Landing Page with Ant Design & UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-opus-4-5-ant-design-uxpin-merge\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-opus-4-5-ant-design-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/07\/image_1355596efcd5a2a294ae4c2b827f4726.jpeg","datePublished":"2026-07-09T08:04:06+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b"},"description":"Use AI to write copy, map sections to Ant Design, and build a responsive, code-backed landing page in UXPin Merge.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-opus-4-5-ant-design-uxpin-merge\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-opus-4-5-ant-design-uxpin-merge\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-opus-4-5-ant-design-uxpin-merge\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/07\/image_1355596efcd5a2a294ae4c2b827f4726.jpeg","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/07\/image_1355596efcd5a2a294ae4c2b827f4726.jpeg","width":1536,"height":1024,"caption":"How to build a landing page using Claude Opus 4.5 + Ant Design - Use UXPin Merge!"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-opus-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 Opus 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\/60329","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=60329"}],"version-history":[{"count":1,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/60329\/revisions"}],"predecessor-version":[{"id":60330,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/60329\/revisions\/60330"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/60326"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=60329"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=60329"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=60329"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}