{"id":60404,"date":"2026-07-26T00:49:37","date_gmt":"2026-07-26T07:49:37","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=60404"},"modified":"2026-07-26T00:49:37","modified_gmt":"2026-07-26T07:49:37","slug":"build-landing-page-claude-sonnet-4-5-custom-design-systems-uxpin-merge","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/","title":{"rendered":"How to build a landing page using Claude Sonnet 4.5 + Custom Design Systems  &#8211;  Use UXPin Merge!"},"content":{"rendered":"\n<p><strong>You can cut design-to-dev back-and-forth by writing the page with <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> and building it with code-backed components in <a href=\"https:\/\/www.uxpin.com\/merge\" style=\"display: inline;\">UXPin Merge<\/a>.<\/strong> Instead of starting with a static mockup, I\u2019d start with a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ui-systems\/\" style=\"display: inline;\">UI design system<\/a>, generate section copy that fits component props, assemble the page from those parts, and then test the prototype before handoff.<\/p>\n<p>Here\u2019s the whole flow in plain English:<\/p>\n<ul>\n<li><strong>Connect your design system first<\/strong>\n<ul>\n<li>Use a built-in library like <a href=\"https:\/\/mui.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">MUI<\/a> for a fast start<\/li>\n<li>Or connect your own React\/TypeScript component library in Merge for a closer match to shipped UI<\/li>\n<\/ul>\n<\/li>\n<li><strong>Prompt Claude with structure<\/strong>\n<ul>\n<li>Ask for a landing page outline with sections like hero, features, testimonials, pricing, CTA, and form<\/li>\n<li>Set copy limits like <strong>6\u201312 words<\/strong> for headlines and <strong>2\u20134 words<\/strong> for button labels<\/li>\n<\/ul>\n<\/li>\n<li><strong>Build with <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-workflow-with-code-components\/\" style=\"display: inline;\">code-backed components<\/a><\/strong>\n<ul>\n<li>Map Claude\u2019s output to props and content slots<\/li>\n<li>Save finished sections as reusable patterns<\/li>\n<li>Use <a href=\"https:\/\/www.uxpin.com\/docs\/forge\/what-is-forge\/\" style=\"display: inline;\">Forge<\/a> in <a href=\"https:\/\/www.uxpin.com\/\" style=\"display: inline;\">UXPin<\/a> to adjust layout and spacing on canvas<\/li>\n<\/ul>\n<\/li>\n<li><strong><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-developers-need-from-designers-during-design-handoff\/\" style=\"display: inline;\">Validate before handoff<\/a><\/strong>\n<ul>\n<li>Test at <strong>375 px<\/strong>, <strong>768 px<\/strong>, and <strong>1,440 px<\/strong><\/li>\n<li>Check form errors, keyboard navigation, CTA states, pricing format, dates, and legal copy<\/li>\n<li>Use <strong><a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">WCAG 2.1<\/a> AA<\/strong> as the baseline<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>A few numbers stand out. The article notes that <a href=\"https:\/\/www.paypal.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">PayPal<\/a>\u2019s internal tools team cut prototyping time by <strong>90%<\/strong> with UXPin Merge. It also gives hard limits for copy so text fits UI without overflow.<\/p>\n<p>If I had to boil it down, it\u2019s this: <strong>Claude writes the structure and copy, UXPin Merge turns that into a prototype built from the same component logic engineers use, and the last step is QA.<\/strong><\/p>\n<table style=\"width:100%;\">\n<thead>\n<tr>\n<th>Step<\/th>\n<th>What I\u2019d do<\/th>\n<th>Main outcome<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>1<\/td>\n<td>Connect built-in or custom design system<\/td>\n<td>Components and props are ready<\/td>\n<\/tr>\n<tr>\n<td>2<\/td>\n<td>Prompt Claude for section-based copy<\/td>\n<td>Copy fits each UI slot<\/td>\n<\/tr>\n<tr>\n<td>3<\/td>\n<td>Assemble sections in Merge<\/td>\n<td>Prototype matches component structure<\/td>\n<\/tr>\n<tr>\n<td>4<\/td>\n<td>Test layout, access, and content<\/td>\n<td>Handoff is cleaner<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>That\u2019s the core idea of the article: <em>start from the system, keep copy tied to components, and hand off a prototype that matches how the page will be built.<\/em><\/p>\n<figure>         <img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/undefined\/6a654f0241146ca830cf66b0-1785026394573.jpg\" alt=\"Claude Sonnet 4.5 + UXPin Merge: Landing Page Workflow\" style=\"width:100%;\"><figcaption style=\"font-size: 0.85em; text-align: center; margin: 8px; padding: 0;\">\n<p style=\"margin: 0; padding: 4px;\">Claude Sonnet 4.5 + UXPin Merge: Landing Page 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\/6a654f0241146ca830cf66b0\/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=\"1-set-up-uxpin-merge-with-your-design-system\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">1. Set up <a href=\"https:\/\/www.uxpin.com\/\" style=\"display: inline;\">UXPin<\/a> Merge with your design system<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a654f0241146ca830cf66b0\/9920614086ce739b9210b45cb2d1c98b.jpg\" alt=\"UXPin\" style=\"width:100%;\"><\/p>\n<p>Set up your design system in UXPin Merge before you prompt Claude Sonnet 4.5. This step shapes how close your prototype gets to the shipped product.<\/p>\n<h3 id=\"choose-a-built-in-library-or-connect-a-custom-component-system\" tabindex=\"-1\">Choose a built-in library or connect a custom component system<\/h3>\n<p>UXPin gives you two setup paths.<\/p>\n<p>The first is a built-in coded library like MUI, <a href=\"https:\/\/ant.design\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Ant Design<\/a>, <a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Bootstrap<\/a>, or <a href=\"https:\/\/ui.shadcn.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">shadcn\/ui<\/a>. These are already inside UXPin, so you can move fast. This route works well for concept testing and early layout work.<\/p>\n<p>The second is to connect your own React\/TypeScript component library through Merge. Pick this when the landing page needs to match production UI exactly. When designers work with the same components engineers ship, the prototype stays in sync with the final UI.<\/p>\n<p>Once your workspace is connected, you can map Claude&#8217;s output to actual component props.<\/p>\n<h3 id=\"prepare-components-tokens-and-permissions-before-you-start\" tabindex=\"-1\">Prepare components, tokens, and permissions before you start<\/h3>\n<p>If you&#8217;re using a custom system, you&#8217;ll need a Merge-enabled UXPin workspace, a hosted repository on <a href=\"https:\/\/github.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">GitHub<\/a>, <a href=\"https:\/\/bitbucket.org\/product\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Bitbucket<\/a>, or <a href=\"https:\/\/about.gitlab.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">GitLab<\/a>, and at least one developer or system owner with admin rights in both UXPin and the repo. Your component library should have a clean structure like <code>\/components<\/code>, <code>\/tokens<\/code>, and <code>\/themes<\/code>, plus a stable build pipeline so Merge can pull updates without issues.<\/p>\n<p>Before you begin, document each component&#8217;s props, variants, and states. That includes landing-page sections such as hero banners, feature grids, CTAs, testimonials, and forms. For example, a <code>HeroSection<\/code> might use props like <code>title<\/code>, <code>subtitle<\/code>, <code>primaryCTA<\/code>, <code>backgroundImage<\/code>, and <code>themeVariant<\/code>.<\/p>\n<p>That prep work matters. It lets you map Claude Sonnet 4.5&#8217;s output straight to real component attributes. UXPin reads props from PropTypes, TypeScript interfaces, or Flow types, so clear prop definitions also make the editor easier for the design team to use.<\/p>\n<p>Set governance before design work starts. In many U.S. enterprise teams, System Owners handle the Merge configuration, Component Maintainers manage updates through pull requests, and Design Leads can request new components but don&#8217;t change the codebase directly. Changes to high-impact components like hero, CTA, and pricing sections should go through pull request, approval, testing, and visual QA. Store the UXPin Auth token in CI variables, not in source-controlled files, and keep repo access read-only.<\/p>\n<h3 id=\"built-in-library-vs-custom-design-system-a-side-by-side-comparison\" tabindex=\"-1\">Built-in library vs. custom design system: a side-by-side comparison<\/h3>\n<table style=\"width:100%;\">\n<thead>\n<tr>\n<th>Aspect<\/th>\n<th>Built-in library (e.g., MUI)<\/th>\n<th>Custom system via Merge<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Setup time<\/strong><\/td>\n<td>Minutes; enable and start immediately<\/td>\n<td>Days to weeks for repo setup and integration<\/td>\n<\/tr>\n<tr>\n<td><strong>Branding control<\/strong><\/td>\n<td>Limited to library theme customization<\/td>\n<td>Full alignment with your brand tokens<\/td>\n<\/tr>\n<tr>\n<td><strong>Production alignment<\/strong><\/td>\n<td>High (real, production-grade code)<\/td>\n<td>Identical (your production code)<\/td>\n<\/tr>\n<tr>\n<td><strong>Maintenance<\/strong><\/td>\n<td>Managed by UXPin and library authors<\/td>\n<td>Managed by your engineering team<\/td>\n<\/tr>\n<tr>\n<td><strong>Governance<\/strong><\/td>\n<td>Less restrictive; available to workspace editors<\/td>\n<td>Git-based PRs, version control, role-based access<\/td>\n<\/tr>\n<tr>\n<td><strong>Best fit<\/strong><\/td>\n<td>Startups, MVPs, concept validation<\/td>\n<td>Enterprise products, regulated industries<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>If you need exact production parity, use Merge with your custom system, then prompt Claude against those components. After that, use Claude Sonnet 4.5 to generate the landing page structure and section copy.<\/p>\n<h2 id=\"2-use-claude-sonnet-45-to-generate-landing-page-structure-and-copy\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">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 generate landing page structure and copy<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a654f0241146ca830cf66b0\/751fa6f29e3f98cc80c570363d68f43c.jpg\" alt=\"Claude Sonnet 4.5\" style=\"width:100%;\"><\/p>\n<p>With your design system connected in UXPin Merge, you can turn a landing page brief into content that&#8217;s ready for each section. Claude Sonnet 4.5 works best when you give it tight, structured instructions that line up with your component slots. After you have the outline, trim each block so it fits the props in Merge.<\/p>\n<h3 id=\"prompt-for-a-section-by-section-landing-page-outline\" tabindex=\"-1\">Prompt for a section-by-section <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/landing-pages-guide\/\" style=\"display: inline;\">landing page outline<\/a><\/h3>\n<p>Start with a clear role and goal statement. Then add product context, required sections, and localization rules. A prompt that works well looks like this:<\/p>\n<pre><code class=\"language-text\">You are a senior UX copywriter specializing in SaaS landing pages for a U.S. audience. Based on the following product brief, create a section-by-section outline for a landing page, including: hero, feature grid, primary CTA, testimonials, pricing, and a demo request form. For each section, provide a short title, a 1\u20132 sentence description, and bullets where appropriate. Use en-US spelling and USD pricing (e.g., $29\/month). Focus on clear, conversion-oriented messaging. <\/code><\/pre>\n<p>State your main conversion goal right away, whether that&#8217;s <strong>Start your free 14-day trial<\/strong>, <strong>Book a live demo<\/strong>, or <strong>Subscribe from $29\/month<\/strong>. You can also add social proof hooks like <strong>Trusted by 1,500+ U.S. product teams<\/strong> and risk reducers like <strong>Cancel anytime<\/strong> or <strong>No setup fees<\/strong>. Those patterns line up neatly with specific component slots in your design system.<\/p>\n<h3 id=\"refine-prompts-so-output-fits-reusable-components\" tabindex=\"-1\">Refine prompts so output fits reusable components<\/h3>\n<p>Component-specific prompts help you get copy you can paste straight into UXPin Merge.<\/p>\n<p>For a <strong>3-column feature grid<\/strong>, tell Claude exactly what each column should include: a <code>featureTitle<\/code> (max 6 words), a <code>featureDescription<\/code> (max 30 words), and one outcome-focused bullet (max 12 words, such as <strong>Cut handoff time by 40%<\/strong>). For <strong>testimonial cards<\/strong>, ask for three entries, each with a <code>quote<\/code> under 35 words, plus <code>name<\/code>, <code>title<\/code>, <code>company<\/code>, and an optional metric. For a <strong>demo request form<\/strong>, list the fields by name &#8211; <code>fullName<\/code>, <code>workEmail<\/code>, <code>companySize<\/code>, <code>role<\/code>, <code>message<\/code> &#8211; and ask for placeholder text and validation microcopy like <strong>Please use a valid work email<\/strong>.<\/p>\n<p>Hero headlines should stay within 6\u201312 words. Subheadlines should land around 15\u201325 words. Button labels should fit in 2\u20134 words. These limits help you avoid text overflow in Merge components and cut down on cleanup later. It also helps to ask Claude for descriptions that still read well when stacked into a single mobile column. That can save you one more editing pass when you <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/guide-to-responsive-design\/\" style=\"display: inline;\">test breakpoints<\/a>.<\/p>\n<h3 id=\"generic-prompts-vs-component-aware-prompts-a-side-by-side-comparison\" tabindex=\"-1\">Generic prompts vs. component-aware prompts: a side-by-side comparison<\/h3>\n<p>The table below shows how more detail in the prompt changes the shape of each section.<\/p>\n<table style=\"width:100%;\">\n<thead>\n<tr>\n<th>Section<\/th>\n<th>Generic prompt output<\/th>\n<th>Component-specific prompt output<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Hero<\/strong><\/td>\n<td>Long paragraph mixing headline, body copy, and multiple CTAs<\/td>\n<td><code>headline<\/code> (9 words), <code>subheadline<\/code> (22 words), <code>primaryCtaLabel<\/code> (Start free trial), <code>supportingText<\/code> (1 line)<\/td>\n<\/tr>\n<tr>\n<td><strong>Feature grid<\/strong><\/td>\n<td>Narrative description of 5\u20136 features with no consistent format<\/td>\n<td>3 features, each with <code>featureTitle<\/code> (\u22646 words), <code>featureDescription<\/code> (\u226430 words), 1 outcome bullet<\/td>\n<\/tr>\n<tr>\n<td><strong>Testimonials<\/strong><\/td>\n<td>Narrative copy with no attribution structure<\/td>\n<td>3 cards: <code>quote<\/code> (\u226435 words), <code>name<\/code>, <code>title<\/code>, <code>company<\/code>, optional metric<\/td>\n<\/tr>\n<tr>\n<td><strong>Primary CTA band<\/strong><\/td>\n<td>Multiple competing calls-to-action across two paragraphs<\/td>\n<td><code>title<\/code> (\u22648 words), 1 supporting sentence, single <code>primaryCtaLabel<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Demo request form<\/strong><\/td>\n<td>Generic contact copy with no field-level detail<\/td>\n<td>Field placeholders, form headline, button label, and validation messages per field<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Once the copy fits each component slot, you&#8217;re ready to assemble the page in Merge.<\/p>\n<h2 id=\"3-assemble-the-landing-page-in-uxpin-merge-with-code-backed-components\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">3. Assemble the landing page in UXPin Merge with code-backed components<\/h2>\n<p>Once Claude&#8217;s copy is mapped to sections, build the page in Merge using components that match production. With the page structure set, assemble each section right on the canvas.<\/p>\n<h3 id=\"build-hero-feature-grid-testimonials-ctas-and-forms-as-reusable-sections\" tabindex=\"-1\">Build hero, feature grid, testimonials, CTAs, and forms as reusable sections<\/h3>\n<p>Build the page from top to bottom on the canvas: hero, feature grid, testimonials, CTA strip, and form. Use your connected components for each part. Then map Claude&#8217;s output to component props and content slots. Put the headline into Typography, the main CTA text into Button, and feature descriptions into each Card content area.<\/p>\n<p>Use <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-are-design-tokens\/\" style=\"display: inline;\">design tokens for spacing, color, and type<\/a> instead of hardcoded values. That keeps the prototype tied to your system and helps prevent drift.<\/p>\n<p>Once a section is done, group it and save it as a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-patterns-how-to\/\" style=\"display: inline;\">reusable pattern<\/a>. Later, you can bring back the same structure and swap only the content.<\/p>\n<h3 id=\"use-forge-inside-uxpin-to-generate-and-refine-layouts\" tabindex=\"-1\">Use <a href=\"https:\/\/www.uxpin.com\/docs\/forge\/what-is-forge\/\" style=\"display: inline;\">Forge<\/a> inside UXPin to generate and refine layouts<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/assets.seobotai.com\/uxpin.com\/6a654f0241146ca830cf66b0\/aa0c94c1bc307f334b19cfac8c6fcd14.jpg\" alt=\"Forge\" style=\"width:100%;\"><\/p>\n<p>Forge is UXPin&#8217;s AI assistant inside the canvas. When you describe a layout, Forge builds it from approved components already available in the canvas.<\/p>\n<p>Use Forge to fine-tune spacing, hierarchy, and component variants without breaking system rules. This is most useful in CTA strips and forms, where spacing and button placement can change conversion.<\/p>\n<h3 id=\"component-driven-prototyping-vs-static-mockup-a-side-by-side-comparison\" tabindex=\"-1\"><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-component-driven-prototyping\/\" style=\"display: inline;\">Component-driven prototyping<\/a> vs. static mockup: a side-by-side comparison<\/h3>\n<p>The tradeoff is pretty clear:<\/p>\n<table style=\"width:100%;\">\n<thead>\n<tr>\n<th>Dimension<\/th>\n<th>Static mockup<\/th>\n<th>Component-driven prototype in Merge<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Reusability<\/strong><\/td>\n<td>Built as one-off screens<\/td>\n<td>Sections can be saved and reused as patterns<\/td>\n<\/tr>\n<tr>\n<td><strong>Design-dev alignment<\/strong><\/td>\n<td>Engineers interpret static visuals<\/td>\n<td>Components map to the underlying code structure<\/td>\n<\/tr>\n<tr>\n<td><strong>Speed to handoff<\/strong><\/td>\n<td>Needs a manual rebuild in code<\/td>\n<td>Already aligned with production components<\/td>\n<\/tr>\n<tr>\n<td><strong>Risk of design drift<\/strong><\/td>\n<td>Higher as specs change<\/td>\n<td>Lower because tokens and components stay in sync<\/td>\n<\/tr>\n<tr>\n<td><strong>Engineering handoff<\/strong><\/td>\n<td>Requires extra interpretation and translation<\/td>\n<td>Shares the same component structure engineers will build<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>The biggest difference is handoff quality. When design and code line up this early, the next step gets a lot easier.<\/p>\n<p>Next, validate responsiveness, accessibility, and handoff details.<\/p>\n<h2 id=\"4-validate-the-prototype-and-prepare-it-for-handoff\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">4. Validate the prototype and prepare it for handoff<\/h2>\n<p>Once the page is built in Merge, it\u2019s time to pressure-test it before engineering picks it up. Start with the layout and interactions. Then move into content, accessibility, and handoff details.<\/p>\n<h3 id=\"check-responsiveness-interactions-accessibility-and-content-accuracy\" tabindex=\"-1\"><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/responsive-design-merge\/\" style=\"display: inline;\">Check responsiveness<\/a>, interactions, accessibility, and content accuracy<\/h3>\n<p>Test the layout at <strong>375 px<\/strong>, <strong>768 px<\/strong>, and <strong>1440 px<\/strong> to make sure the page reflows cleanly.<\/p>\n<p>Then click through the <strong>primary and secondary CTAs<\/strong>, navigation links, and any other interactive controls. You want to confirm each state and behavior works the way it should. After that, tab through the page with a keyboard to check focus order and confirm focus indicators are visible.<\/p>\n<p>For forms, try invalid or incomplete submissions. Error messages should be specific, easy to see, and tied to the right field. Use <strong>WCAG 2.1 AA<\/strong> as your baseline, and apply any ADA rules that fit your use case.<\/p>\n<p>Content needs its own QA pass too, especially for U.S. details. A few things to check:<\/p>\n<ul>\n<li>Pricing should use the <strong>$<\/strong> symbol before the amount, with a clear billing period like <strong>$49\/month<\/strong> or <strong>$499\/year<\/strong><\/li>\n<li>Dates should follow <strong>MM\/DD\/YYYY<\/strong> or a spelled-out style like <strong>July 26, 2026<\/strong><\/li>\n<li>Privacy and compliance copy, including <strong><a href=\"https:\/\/oag.ca.gov\/privacy\/ccpa\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">CCPA<\/a><\/strong> language for California residents, should match your company\u2019s approved U.S. templates<\/li>\n<\/ul>\n<p>Use <strong>Claude Sonnet 4.5<\/strong> to flag tone issues, spelling, CTA clarity, and U.S. locale mistakes in the final copy. Once the copy is clean, move from content QA into <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/better-design-handoff\/\" style=\"display: inline;\">engineering handoff<\/a>.<\/p>\n<h3 id=\"share-with-engineering-using-component-structure-and-system-aligned-specs\" tabindex=\"-1\">Share with engineering using <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-handoff-with-merge\/\" style=\"display: inline;\">component structure and system-aligned specs<\/a><\/h3>\n<p>Engineers can inspect variant names, props, and layout choices right inside <strong>UXPin<\/strong>. Review the prototype with them, call out custom configurations, and annotate any layout exceptions.<\/p>\n<p>Also document spacing tokens, typography scales, and breakpoint rules in <strong>UXPin<\/strong> itself. That gives engineers a direct path to map those decisions to theme objects or CSS utilities in the codebase. It also helps keep the landing page tied to the design system, even if copy or layout shifts late in the process.<\/p>\n<h3 id=\"final-validation-checklist-and-next-steps\" tabindex=\"-1\">Final validation checklist and next steps<\/h3>\n<p>Use this checklist before review:<\/p>\n<table style=\"width:100%;\">\n<thead>\n<tr>\n<th>Checkpoint<\/th>\n<th>Owner<\/th>\n<th>Pass criteria<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Responsive layout at 375\/768\/1440 px<\/td>\n<td>Designer<\/td>\n<td>No clipped text, correct reflow per system docs<\/td>\n<\/tr>\n<tr>\n<td>CTA, form, and interaction states<\/td>\n<td>UX<\/td>\n<td>Primary and secondary flows work; hover, focus, active, and disabled states confirmed<\/td>\n<\/tr>\n<tr>\n<td>Accessibility: labels, errors, keyboard nav<\/td>\n<td>UX \/ Engineering<\/td>\n<td>WCAG 2.1 AA met; error messages specific and field-linked<\/td>\n<\/tr>\n<tr>\n<td>USD pricing and billing period display<\/td>\n<td>Product \/ Marketing<\/td>\n<td>Follows $XX.XX format; matches current billing system<\/td>\n<\/tr>\n<tr>\n<td>Legal and privacy copy<\/td>\n<td>Legal \/ Product<\/td>\n<td>Matches approved U.S. templates; CCPA language current<\/td>\n<\/tr>\n<tr>\n<td>Date formatting<\/td>\n<td>UX \/ Content<\/td>\n<td>MM\/DD\/YYYY or spelled-out format used consistently<\/td>\n<\/tr>\n<tr>\n<td>Component variants aligned with system<\/td>\n<td>Designer \/ Engineering<\/td>\n<td>No unauthorized variants; tokens used throughout<\/td>\n<\/tr>\n<tr>\n<td>Claims, metrics, and testimonials verified<\/td>\n<td>Marketing \/ Legal<\/td>\n<td>Attributable, approved, and factually accurate<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>The full workflow looks like this: use <strong>Claude Sonnet 4.5<\/strong> to generate landing page content section by section, build in <strong>UXPin Merge<\/strong> with approved code-backed components, refine layouts and copy with <strong>Forge<\/strong>, and then run this checklist before handoff.<\/p>\n<h2 id=\"faqs\" tabindex=\"-1\" class=\"sb h2-sbb-cls\">FAQs<\/h2>\n<h3 id=\"do-i-need-a-custom-design-system-to-use-this-workflow\" tabindex=\"-1\" data-faq-q>Do I need a custom design system to use this workflow?<\/h3>\n<p>No. You can use this workflow without a custom design system by working with pre-integrated, production-ready libraries in UXPin Merge, such as MUI, Bootstrap, Ant Design, or shadcn\/ui.<\/p>\n<p>If your team has a proprietary design system, you can connect it through Git, <a href=\"https:\/\/storybook.js.org\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" style=\"display: inline;\">Storybook<\/a>, or npm so your prototypes stay aligned with production code.<\/p>\n<h3 id=\"how-should-i-structure-prompts-so-claudes-copy-fits-my-components\" tabindex=\"-1\" data-faq-q>How should I structure prompts so Claude\u2019s copy fits my components?<\/h3>\n<p>Treat Claude like a UX writer working inside your design system. Give it a <strong>whitelist<\/strong> of approved components and tokens, and state plainly that it must <strong>not invent new UI patterns<\/strong>.<\/p>\n<p>Map each piece of text to a named component prop. For each prop, set a character limit so the output fits the UI instead of spilling past it.<\/p>\n<p>Ask for <strong>structured JSON<\/strong> that matches your component props exactly. Include a <code>used_components<\/code> array so you can check, at a glance, which approved components the draft uses.<\/p>\n<p>A simple setup might look like this:<\/p>\n<pre><code class=\"language-json\">{   &quot;used_components&quot;: [&quot;hero_banner&quot;, &quot;cta_button&quot;, &quot;feature_card&quot;],   &quot;hero_banner&quot;: {     &quot;eyebrow&quot;: &quot;&quot;,     &quot;headline&quot;: &quot;&quot;,     &quot;body&quot;: &quot;&quot;   },   &quot;cta_button&quot;: {     &quot;label&quot;: &quot;&quot;   },   &quot;feature_card&quot;: [     {       &quot;title&quot;: &quot;&quot;,       &quot;description&quot;: &quot;&quot;     }   ] } <\/code><\/pre>\n<p>Be explicit about limits at the prompt level, like:<\/p>\n<ul>\n<li><code>hero_banner.eyebrow<\/code>: 30 characters max<\/li>\n<li><code>hero_banner.headline<\/code>: 60 characters max<\/li>\n<li><code>hero_banner.body<\/code>: 140 characters max<\/li>\n<li><code>cta_button.label<\/code>: 24 characters max<\/li>\n<li><code>feature_card.title<\/code>: 40 characters max<\/li>\n<li><code>feature_card.description<\/code>: 100 characters max<\/li>\n<\/ul>\n<p>Also tell Claude to use <strong>only<\/strong> the listed components, props, and tokens. No extra fields. No made-up patterns. No side comments outside the JSON.<\/p>\n<h3 id=\"what-should-i-validate-before-handing-the-prototype-to-engineering\" tabindex=\"-1\" data-faq-q>What should I validate before handing the prototype to engineering?<\/h3>\n<p>Before you hand a prototype to engineering, check both the <strong>structure<\/strong> and the <strong>function<\/strong> so the handoff goes smoothly. Make sure components match the production library, use <strong>design tokens<\/strong> instead of hard-coded values, and review state changes like <strong>hover, active, disabled, loading, and error<\/strong>.<\/p>\n<p>You\u2019ll also want to check accessibility against <strong>WCAG 2.1 AA<\/strong> and U.S. requirements. That includes color contrast, keyboard navigation, and screen reader support.<\/p>\n<p>Then review U.S. localization details:<\/p>\n<ul>\n<li>Currency: <strong>$1,234.56<\/strong><\/li>\n<li>Dates: <strong>MM\/DD\/YYYY<\/strong><\/li>\n<li>Numbers and spelling: use U.S. conventions<\/li>\n<\/ul>\n<p>Finally, use <strong>Spec Mode<\/strong> to inspect the final <strong>JSX<\/strong> and <strong>CSS<\/strong> details.<\/p>\n<h2>Related Blog Posts<\/h2>\n<ul>\n<li><a href=\"\/studio\/blog\/build-landing-page-claude-opus-4-5-custom-design-systems-uxpin-merge\/\" style=\"display: inline;\">How to build a landing page using Claude Opus 4.5 + Custom Design Systems  &#8211;  Use UXPin Merge!<\/a><\/li>\n<li><a href=\"\/studio\/blog\/build-landing-page-claude-sonnet-4-5-shadcn-ui-uxpin-merge\/\" style=\"display: inline;\">How to build a landing page using Claude Sonnet 4.5 + shadcn\/ui  &#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-sonnet-4-5-bootstrap-uxpin-merge\/\" style=\"display: inline;\">How to build a landing page using Claude Sonnet 4.5 + Bootstrap  &#8211;  Use UXPin Merge!<\/a><\/li>\n<\/ul>\n<p><script async type=\"text\/javascript\" src=\"https:\/\/app.seobotai.com\/banner\/banner.js?id=6a654f0241146ca830cf66b0\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Start from your design system: use Claude Sonnet 4.5 for sectioned copy, assemble in UXPin Merge with code-backed components, then validate.<\/p>\n","protected":false},"author":231,"featured_media":60401,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-60404","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"yoast_title":"Landing Page with UXPin Merge & AI","yoast_metadesc":"Start from your design system: use Claude Sonnet 4.5 for sectioned copy, assemble in UXPin Merge with code-backed components, then validate.","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 UXPin Merge &amp; AI<\/title>\n<meta name=\"description\" content=\"Start from your design system: use Claude Sonnet 4.5 for sectioned copy, assemble in UXPin Merge with code-backed components, then validate.\" \/>\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-custom-design-systems-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 + Custom Design Systems - Use UXPin Merge!\" \/>\n<meta property=\"og:description\" content=\"Start from your design system: use Claude Sonnet 4.5 for sectioned copy, assemble in UXPin Merge with code-backed components, then validate.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2026-07-26T07:49:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/07\/image_4304621ae5c8332324341a470269c463.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1536\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Andrew Martin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@andrewSaaS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andrew Martin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-sonnet-4-5-custom-design-systems-uxpin-merge\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-sonnet-4-5-custom-design-systems-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 + Custom Design Systems &#8211; Use UXPin Merge!\",\"datePublished\":\"2026-07-26T07:49:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-sonnet-4-5-custom-design-systems-uxpin-merge\\\/\"},\"wordCount\":2518,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-sonnet-4-5-custom-design-systems-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/image_4304621ae5c8332324341a470269c463.jpeg\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-sonnet-4-5-custom-design-systems-uxpin-merge\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-sonnet-4-5-custom-design-systems-uxpin-merge\\\/\",\"name\":\"Landing Page with UXPin Merge & AI\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-sonnet-4-5-custom-design-systems-uxpin-merge\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-sonnet-4-5-custom-design-systems-uxpin-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/image_4304621ae5c8332324341a470269c463.jpeg\",\"datePublished\":\"2026-07-26T07:49:37+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/ac635ff03bf09bee5701f6f38ce9b16b\"},\"description\":\"Start from your design system: use Claude Sonnet 4.5 for sectioned copy, assemble in UXPin Merge with code-backed components, then validate.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-sonnet-4-5-custom-design-systems-uxpin-merge\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-sonnet-4-5-custom-design-systems-uxpin-merge\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-sonnet-4-5-custom-design-systems-uxpin-merge\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/image_4304621ae5c8332324341a470269c463.jpeg\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/image_4304621ae5c8332324341a470269c463.jpeg\",\"width\":1536,\"height\":1024,\"caption\":\"How to build a landing page using Claude Sonnet 4.5 + Custom Design Systems - Use UXPin Merge!\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/build-landing-page-claude-sonnet-4-5-custom-design-systems-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 + Custom Design Systems &#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 UXPin Merge & AI","description":"Start from your design system: use Claude Sonnet 4.5 for sectioned copy, assemble in UXPin Merge with code-backed components, then validate.","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-custom-design-systems-uxpin-merge\/","og_locale":"en_US","og_type":"article","og_title":"How to build a landing page using Claude Sonnet 4.5 + Custom Design Systems - Use UXPin Merge!","og_description":"Start from your design system: use Claude Sonnet 4.5 for sectioned copy, assemble in UXPin Merge with code-backed components, then validate.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/","og_site_name":"Studio by UXPin","article_published_time":"2026-07-26T07:49:37+00:00","og_image":[{"width":1536,"height":1024,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/07\/image_4304621ae5c8332324341a470269c463.jpeg","type":"image\/jpeg"}],"author":"Andrew Martin","twitter_card":"summary_large_image","twitter_creator":"@andrewSaaS","twitter_misc":{"Written by":"Andrew Martin","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-custom-design-systems-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 + Custom Design Systems &#8211; Use UXPin Merge!","datePublished":"2026-07-26T07:49:37+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/"},"wordCount":2518,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/07\/image_4304621ae5c8332324341a470269c463.jpeg","articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/","name":"Landing Page with UXPin Merge & AI","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/07\/image_4304621ae5c8332324341a470269c463.jpeg","datePublished":"2026-07-26T07:49:37+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/ac635ff03bf09bee5701f6f38ce9b16b"},"description":"Start from your design system: use Claude Sonnet 4.5 for sectioned copy, assemble in UXPin Merge with code-backed components, then validate.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-custom-design-systems-uxpin-merge\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/07\/image_4304621ae5c8332324341a470269c463.jpeg","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2026\/07\/image_4304621ae5c8332324341a470269c463.jpeg","width":1536,"height":1024,"caption":"How to build a landing page using Claude Sonnet 4.5 + Custom Design Systems - Use UXPin Merge!"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/build-landing-page-claude-sonnet-4-5-custom-design-systems-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 + Custom Design Systems &#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\/60404","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=60404"}],"version-history":[{"count":1,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/60404\/revisions"}],"predecessor-version":[{"id":60405,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/60404\/revisions\/60405"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/60401"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=60404"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=60404"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=60404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}