1import{r as g,j as t,a as e,F as w,w as k}from"./components-tbqp4LHE.js";import{B as S}from"./builder-brand-token-styles-DOsWA6zD.js";import{S as F}from"./site-nav-CKthbytF.js";import{SiteFooter as T}from"./site-footer-DTWooRWt.js";import{G as r,P as o,c as W}from"./page-grid-CoFoLrqL.js";import{b as I}from"./build-seo-head-DftSQ3gt.js";import{S as z,B}from"./back-to-top-button-CFYPZRyc.js";import{B as p}from"./button-CmTkeZsu.js";import{I as R}from"./IconDownload-Dh2KeP5U.js";import{B as s}from"./builder-image-D1_Xk8Nk.js";import{I as A}from"./IconArrowUpRight-nVy-V9wP.js";import"./index-D68R75oZ.js";import"./lib-CNBY53c5.js";import"./errorBoundaries-Cn_iLJG_.js";import"./brand-logo-svg-PpgWNNcj.js";import"./createReactComponent-C-GgH8hJ.js";import"./IconCheck-K9H8P55q.js";import"./IconX-QIM7BlpS.js";import"./copy-to-clipboard-D8SewVzt.js";import"./announcement-bar-Bxo4KJiZ.js";import"./IconCopy-DwlZeoxr.js";import"./proxy-B2oUKae0.js";import"./IconVectorBezier-By2BlqIO.js";import"./input-CfGXKYh-.js";import"./IconChevronRight-DIBgV9A0.js";import"./seo-tags-DYlASapG.js";const h=[{id:"intro",label:"Intro"},{id:"ai-infrastructure",label:"Design Systems as AI Infrastructure"},{id:"reading-vs-understanding",label:"Reading vs. Understanding"},{id:"adoption-problem",label:"The Adoption Problem"},{id:"documentation-quality",label:"Documentation Quality"},{id:"figma-alignment",label:"Figma-to-Code Alignment"},{id:"migration",label:"In Practice: Migration"},{id:"review-workflow",label:"The Review Workflow"},{id:"quality-gate",label:"From Bottleneck to Quality Gate"},{id:"conclusion",label:"The Underlying Argument"}];function H(){const[a,n]=g.useState("intro");return g.useEffect(()=>{const i=new IntersectionObserver(d=>{const c=d.filter(l=>l.isIntersecting).sort((l,y)=>l.boundingClientRect.top-y.boundingClientRect.top)[0];c&&n(c.target.id)},{rootMargin:"-20% 0px -70% 0px",threshold:0});return h.forEach(({id:d})=>{const c=document.getElementById(d);c&&i.observe(c)}),()=>i.disconnect()},[]),t("nav",{"aria-label":"On this page",css:{position:"sticky",top:0,display:"flex",flexDirection:"column",gap:"var(--spacing-1)",padding:"var(--spacing-20) 30px var(--spacing-12)"},children:[e("div",{css:{fontSize:11,fontWeight:600,letterSpacing:"0.06em",textTransform:"uppercase",color:"var(--b-text-muted)",marginBottom:"var(--spacing-2)"},children:"On this page"}),h.map(({id:i,label:d})=>e("a",{href:`#${i}`,"aria-current":a===i?"true":void 0,css:{fontSize:12,color:a===i?"var(--b-text-primary)":"var(--b-text-muted)",textDecoration:"none",padding:"4px 0",transition:"color 0.15s","&:hover":{color:"var(--b-text-primary)"}},children:d},i))]})}function C(){return e(o,{showGrid:!0,as:"div",css:{background:"var(--b-bg-page)",overflow:"visible"},children:t(r,{css:{padding:"var(--spacing-20) var(--spacing-8) var(--spacing-6)","@media (max-width: 768px)":{padding:"var(--spacing-12) var(--spacing-6) var(--spacing-4)"}},children:[e("h1",{css:{margin:"0 0 var(--spacing-6)",fontSize:"var(--b-t-heading-2)",fontWeight:500,lineHeight:1.05,letterSpacing:"-0.02em",maxWidth:820,fontFamily:"var(--b-font-sans)",background:"var(--b-gradient-blue)",WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent",backgroundClip:"text"},children:"How to Make AI Match Your Design System"}),e("p",{css:{margin:0,fontSize:22,color:"var(--b-text-highlight)",lineHeight:1.6,maxWidth:658,fontFamily:"var(--b-font-sans)"},children:"Why AI-generated code doesn't match your component library, and how to fix it."}),e("div",{css:{marginTop:"var(--spacing-6)"},children:e(p,{variant:"cta",href:"https://cdn.builder.io/o/assets%2FYJIGb4i01jvw0SRdL5Bt%2F59307d8f04bc44a88740a2e3e554f5fe?alt=media&token=8a0dff59-5e3a-4ca8-aebd-dcc76d097b2e&apiKey=YJIGb4i01jvw0SRdL5Bt",label:"DOWNLOAD PDF BRIEF",icon:R,external:!0})})]})})}const m="pOjVkH0DsdM";function D(){const[a,n]=g.useState(!1);return e(o,{showGrid:!0,id:"intro",css:{background:"var(--b-bg-page)",borderTop:"1px solid var(--b-border-subtle)"},children:t(r,{css:{padding:"var(--spacing-16) var(--spacing-8)","@media (max-width: 768px)":{padding:"var(--spacing-10) var(--spacing-6)"}},children:[t("div",{css:{display:"flex",flexDirection:"column",gap:"var(--spacing-3)",marginBottom:"var(--spacing-10)",maxWidth:780},children:[e("p",{css:{margin:0,fontSize:18,color:"var(--b-text-highlight)",lineHeight:1.8,fontFamily:"var(--b-font-sans)"},children:"An engineer opens the code and finds generic Tailwind classes, Shadcn defaults, and no trace of the component library the organization spent years building. The engineer rewrites it, absorbing most of the time the AI was supposed to save."}),e("p",{css:{margin:0,fontSize:18,color:"var(--b-text-highlight)",lineHeight:1.8,fontFamily:"var(--b-font-sans)"},children:"The instinct is to attribute this to AI capability. The actual explanation is simpler: the agent had no idea the design system existed. That distinction matters because it changes what you do about it. A capability gap requires waiting for models to improve. A context gap requires giving the agent the context it needs. Most teams are solving the wrong one."})]}),t("div",{css:{display:"flex",alignItems:"stretch",border:"1px solid var(--b-border-subtle)","@media (max-width: 700px)":{flexDirection:"column"}},children:[e("div",{css:{position:"relative",overflow:"hidden",maxWidth:480,width:"100%",aspectRatio:"16 / 9",flexShrink:0},children:a?e("iframe",{src:`https://www.youtube.com/embed/${m}
1?autoplay=1`,title:"Software engineer reviewing generated code on a tablet in a modern office.",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0,css:{display:"block",width:"100%",height:"100%",border:0}}):t("button",{type:"button",onClick:()=>n(!0),"aria-label":"Play video: watch a session where we index a real component library and open a PR within a standard engineering workflow.",css:{display:"block",position:"relative",width:"100%",height:"100%",padding:0,margin:0,border:0,cursor:"pointer",background:"var(--b-bg-raised)",font:"inherit",textAlign:"inherit"},children:[e(s,{src:`https://img.youtube.com/vi/${m}/maxresdefault.jpg`,alt:"Software engineer reviewing generated code on a tablet in a modern office.",width:1280,height:720,sizes:"(max-width: 768px) 100vw, 480px",widths:[480,640,960],css:{display:"block",width:"100%",height:"auto",aspectRatio:"16 / 9",objectFit:"cover"}}),e("div",{css:{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center",background:"linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0.35) 100%)"},children:e("div",{css:{width:44,height:44,borderRadius:"50%",background:"var(--b-action-primary-bg)",display:"flex",alignItems:"center",justifyContent:"center",boxShadow:"0 0 16px rgba(1, 200, 241, 0.5)"},children:e("svg",{width:"14",height:"17",viewBox:"0 0 20 24",fill:"var(--b-action-primary-text)","aria-hidden":"true",children:e("path",{d:"M0 0L20 12L0 24V0Z"})})})})]})}),t("div",{css:{display:"flex",flexDirection:"column",justifyContent:"center",gap:"var(--spacing-2)",flex:1,padding:"var(--spacing-6)",background:"var(--b-bg-page)",borderLeft:"1px solid var(--b-border-subtle)","@media (max-width: 700px)":{borderLeft:"none",borderTop:"1px solid var(--b-border-subtle)"}},children:[e("span",{css:{fontFamily:"var(--b-font-mono)",fontSize:13,fontWeight:600,color:"var(--b-text-eyebrow)",letterSpacing:"0.06em",textTransform:"uppercase"},children:"Watch the walkthrough"}),e("p",{css:{margin:0,fontSize:16,color:"var(--b-text-primary)",lineHeight:1.6,fontFamily:"var(--b-font-sans)"},children:"Watch a session where we index a real component library and open a PR within a standard engineering workflow."})]})]})]})})}const q="var(--c-blue-500)";function j(){return e(o,{showGrid:!0,id:"ai-infrastructure",css:{background:"var(--b-bg-page)",borderTop:"1px solid var(--b-border-subtle)"},children:t(r,{css:{padding:"var(--spacing-16) var(--spacing-8)","@media (max-width: 768px)":{padding:"var(--spacing-10) var(--spacing-6)"}},children:[e("p",{css:{margin:"0 0 var(--spacing-10)",fontSize:17,color:"var(--b-text-highlight)",lineHeight:1.7,fontFamily:"var(--b-font-sans)",maxWidth:680},children:"Treating your design system as the foundation AI builds on takes specific work to pay off. The eight parts below each tackle one piece of the problem, from how agents read your codebase to how the review workflow changes once the context is in place."}),e("span",{css:{fontFamily:"var(--b-font-mono)",fontSize:16,fontWeight:600,color:q,letterSpacing:"0.06em",display:"block",marginBottom:"var(--spacing-3)"},children:"01"}),e("h2",{css:{margin:"0 0 var(--spacing-4)",fontSize:"clamp(26px, 3.5v
1w, 44px)",fontWeight:500,letterSpacing:"-0.02em",lineHeight:1.1,color:"var(--b-text-primary)",fontFamily:"var(--b-font-sans)",maxWidth:700},children:"Design systems as AI infrastructure"}),t("div",{css:{display:"flex",flexDirection:"column",gap:"var(--spacing-3)",maxWidth:680},children:[e("p",{css:{margin:0,fontSize:17,color:"var(--b-text-highlight)",lineHeight:1.7,fontFamily:"var(--b-font-sans)"},children:"The framing most organizations use for their design system is product: something the design systems team builds and ships, with an adoption metric attached. That framing made sense when the primary consumers were human engineers who could read documentation, ask questions, and make judgment calls about which component to reach for."}),e("p",{css:{margin:0,fontSize:17,color:"var(--b-text-highlight)",lineHeight:1.7,fontFamily:"var(--b-font-sans)"},children:"AI agents can't do any of that. They work from whatever context they're given at the time of the request. Without an explicit, structured reference to your design system, the agent falls back on its training data, which skews heavily toward the most common patterns it encountered: open-source component libraries, generic token structures, and default implementations that look production-ready but don't fit any specific organization's conventions."})]}),e(s,{src:"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F1c993d902ea94e1e9ec2b2b2ecb4c416",alt:"Diagram comparing generic AI output without a design system to consistent, on-brand output when the design system feeds the AI development layer.",width:1920,height:1244,sizes:"(max-width: 768px) 100vw, 680px",widths:[480,640,960,1200],css:{display:"block",width:"100%",maxWidth:680,height:"auto",aspectRatio:"1920 / 1244",objectFit:"cover",marginTop:"var(--spacing-8)",border:"1px solid var(--b-border-subtle)"}}),e("div",{css:{background:"var(--b-bg-page)",border:"1px solid var(--b-border-subtle)",borderLeft:"3px solid var(--b-text-eyebrow)",borderRadius:0,padding:"var(--spacing-6)",marginTop:"var(--spacing-8)"},children:t("p",{css:{margin:0,fontSize:17,color:"var(--b-text-primary)",lineHeight:1.7,fontFamily:"var(--b-font-sans)"},children:[e("strong",{css:{color:"var(--b-text-eyebrow)"},children:"The teams getting the most out of AI-assisted development have made a different bet."})," ","They treat the design system as infrastructure, the layer every AI tool runs on top of, and invest in it before adopting new tooling. Every AI development tool they adopt produces better output from day one, because the foundation those tools depend on is solid. The teams still fighting with AI-generated output that doesn't match their system have usually adopted the tooling first, deferring the infrastructure question, and the cost shows up as engineering time spent correcting output that should have been right."]})})]})})}const b=[{source:"Component files",gives:"Purpose, props, available variants"},{source:"Storybook stories",gives:"Usage patterns and real examples"},{source:"Design tokens",gives:"Token names, relationships, and intended use"},{source:"Documentation",gives:"The reasoning behind key decisions"}];function E(){return e(o,{showGrid:!0,id:"reading-vs-understanding",css:{background:"var(--b-bg-page)",borderTop:"1px solid var(--b-border-subtle)"},children:t(r,{css:{padding:"var(--spacing-16) var(--spacing-8)","@media (max-width: 768px)":{padding:"var(--spacing-10) var(--spacing-6)"}},children:[e("span",{css:{fontFamily:"var(--b-font-mono)",fontSize:16,fontWeight:600,color:"var(--c-green-400)",letterSpacing:"0.06em",display:"block",marginBottom:"var(--spacing-3)"},children:"02"}),e("h2",{css:{margin:"0 0 var(--spacing-4)",fontSize:"clamp(26px, 3.5v
1w, 44px)",fontWeight:500,letterSpacing:"-0.02em",lineHeight:1.1,color:"var(--b-text-primary)",fontFamily:"var(--b-font-sans)",maxWidth:700},children:"The gap between reading and understanding"}),e("p",{css:{margin:"0 0 var(--spacing-3)",fontSize:18,color:"var(--b-text-highlight)",lineHeight:1.7,maxWidth:720,fontFamily:"var(--b-font-sans)"},children:"Coding agents can read files. Most AI development tools give agents access to your repository, and they'll scan whatever they need to answer a prompt. Reading and understanding are different things, though, and the difference shows up in the output."}),e("p",{css:{margin:"0 0 var(--spacing-8)",fontSize:17,color:"var(--b-text-highlight)",lineHeight:1.7,maxWidth:720,fontFamily:"var(--b-font-sans)"},children:"Understanding means the agent knows which components exist for which use cases, when to use each variant, what tokens control what behavior, and what the accumulated conventions look like across hundreds of decisions made over years of development. A just-in-time scan of your component files produces a surface reading. It captures what's there but not the reasoning behind it, the relationships between components, or the patterns your team has deliberately established."}),e(s,{src:"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fd55e91c6006546f9bc1c65644ca28583",alt:"Diagram illustrating the gap between reading component files and understanding a design system's established patterns.",width:1920,height:1244,sizes:"(max-width: 768px) 100vw, 680px",widths:[480,640,960,1200],css:{display:"block",width:"100%",maxWidth:680,height:"auto",aspectRatio:"1920 / 1244",objectFit:"cover",marginBottom:"var(--spacing-8)",border:"1px solid var(--b-border-subtle)"}}),e("div",{css:{background:"var(--b-bg-page)",border:"1px solid var(--b-border-subtle)",borderLeft:"3px solid var(--c-green-400)",borderRadius:0,padding:"var(--spacing-6)",marginBottom:"var(--spacing-10)"},children:e("p",{css:{margin:0,fontSize:17,color:"var(--b-text-primary)",lineHeight:1.7,fontFamily:"var(--b-font-sans)"},children:"Purpose-built indexing generates structured, LLM-friendly documentation derived from your codebase. With that in place, the agent stops reconstructing your design system from scratch on every request and starts building from what your team has actually established."})}),e("h3",{css:{margin:"0 0 var(--spacing-5)",fontSize:22,fontWeight:600,color:"var(--b-text-primary)",fontFamily:"var(--b-font-sans)",letterSpacing:"-0.01em"},children:"What gets indexed"}),t("div",{css:{border:"1px solid var(--b-border-subtle)",borderRadius:0,overflow:"hidden",marginInline:"calc(var(--spacing-8) * -1)","@media (max-width: 768px)":{marginInline:"calc(var(--spacing-6) * -1)"}},children:[e("div",{css:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:1,background:"var(--b-border-subtle)",borderBottom:"1px solid var(--b-border-subtle)","@media (max-width: 700px)":{display:"none"}},children:["Source","What it gives the agent"].map(a=>e("span",{css:{background:"var(--b-bg-prominent)",padding:"10px var(--spacing-8)",fontSize:13,fontWeight:600,letterSpacing:"0.06em",textTransform:"uppercase",color:"var(--b-text-secondary)",fontFamily:"var(--b-font-sans)"},children:a},a))}),b.map((a,n)=>{const i=n%2===0?"var(--b-bg-page)":"var(--b-bg-raised)";return t("div",{css:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:1,background:"var(--b-border-subtle)",borderBottom:n<b.length-1?"1px solid var(--b-border-subtle)":"none","@media (max-width: 700px)":{gridTemplateColumns:"1fr"}},children:[e("span",{css:{background:i,padding:"var(--spacing-4) var(--spacing-8)",fontSize:15,fontWeight:600,color:"var(--b-text-primary)",fontFamily:"var(--b-font-sans)","@media (max-width: 768px)":{padding:"var(--spacing-4) var(--spacing-6)"}},children:a.source}),e("span",{css:{background:i,padding:"var(--spacing-4) var(--spacing-8)",fontSize:15,color:"var(--b-text-highlight)",fontFamily:"var(--b-font-sans)",lineHeight:1.4,"@media (max-width: 768px)":{padding:"var(--spacing-4) var(--spacing-6)"}},children:a.gives})]},a.source)})]}),e("p",{css:{margin:"var(--spacing-8) 0 0",fontSize:16,color:"var(--b-text-highlight)",lineHeight:1.7,maxWidth:720,fontFamily:"var(--b-font-sans)"},children:"Setup is a one-time task. Once the index is created and attached to a project, it updates automatically as your design system evolves. New components, updated tokens, and revised documentation get pulled into the index in the background, keeping the agent current without ongoing maintenance from your team."})]})})}const v=[{path:"File a ticket, wait for implementation, review against spec, and merge into Storybook",time:"Multiple weeks"},{path:"Build a custom solution",time:"An afternoon"}];function G(){return e(o,{showGrid:!0,id:"adoption-problem",css:{background:"var(--b-bg-page)",borderTop:"1px solid var(--b-border-subtle)"},children:t(r,{css:{padding:"var(--spacing-16) var(--spacing-8)","@media (max-width: 768px)":{padding:"var(--spacing-10) var(--spacing-6)"}},children:[e("span",{css:{fontFamily:"var(--b-font-mono)",fontSize:16,fontWeight:600,color:"var(--c-yellow-400)",letterSpacing:"0.06em",display:"block",marginBottom:"var(--spacing-3)"},children:"03"}),e("h2",{css:{margin:"0 0 var(--spacing-4)",fontSize:"clamp(26px, 3.5v
1w, 44px)",fontWeight:500,letterSpacing:"-0.02em",lineHeight:1.1,color:"var(--b-text-primary)",fontFamily:"var(--b-font-sans)",maxWidth:700},children:"The adoption problem is an infrastructure problem"}),e("p",{css:{margin:"0 0 var(--spacing-3)",fontSize:18,color:"var(--b-text-highlight)",lineHeight:1.7,maxWidth:720,fontFamily:"var(--b-font-sans)"},children:"Design systems don't fail because of poor technical execution. They fail because adoption drops off, and teams route around the system rather than through it. Engineers hard-code values instead of using tokens, product teams build one-off components rather than contributing to the shared library, and the gap between what exists and what teams actually use widens over time."}),e("p",{css:{margin:"0 0 var(--spacing-8)",fontSize:17,color:"var(--b-text-highlight)",lineHeight:1.7,maxWidth:720,fontFamily:"var(--b-font-sans)"},children:"Adoption drops because using the design system correctly requires more coordination than going around it. Given those options, teams make a rational choice that compounds into a maintenance problem: the system falls further behind, the gap widens, and teams route around it more. This is the same backlog dynamic AI didn't solve on its own â the cost of a small item is almost the same as a full enhancement, so the small items never get done."}),e(s,{src:"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F8fcfdb4d93db4effa2ce19f2504aa26f",alt:"Diagram showing how the adoption problem in a design system is really an infrastructure problem.",width:1920,height:1244,sizes:"(max-width: 768px) 100vw, 680px",widths:[480,640,960,1200],css:{display:"block",width:"100%",maxWidth:680,height:"auto",aspectRatio:"1920 / 1244",objectFit:"cover",marginBottom:"var(--spacing-8)",border:"1px solid var(--b-border-subtle)"}}),e("div",{css:{background:"var(--b-bg-page)",border:"1px solid var(--b-border-subtle)",borderLeft:"3px solid var(--c-yellow-400)",borderRadius:0,padding:"var(--spacing-6)",marginBottom:"var(--spacing-8)"},children:t("p",{css:{margin:0,fontSize:17,color:"var(--b-text-primary)",lineHeight:1.7,fontFamily:"var(--b-font-sans)"},children:[e("strong",{css:{color:"var(--c-yellow-400)"},children:"The AI layer changes this calculation, but only if the design system is indexed."})," ","When an agent can create a new component from a Figma export, generate Storybook documentation, and open a PR in a fraction of the time the manual process takes, using the design system correctly becomes the path of least resistance. The system grows faster, stays current, and gets used."]})}),t("div",{css:{border:"1px solid var(--b-border-subtle)",borderRadius:0,overflow:"hidden",marginInline:"calc(var(--spacing-8) * -1)",marginBottom:"var(--spacing-8)","@media (max-width: 768px)":{marginInline:"calc(var(--spacing-6) * -1)"}},children:[e("div",{css:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:1,background:"var(--b-border-subtle)",borderBottom:"1px solid var(--b-border-subtle)","@media (max-width: 700px)":{display:"none"}},children:["Path","Time"].map(a=>e("span",{css:{background:"var(--b-bg-prominent)",padding:"10px var(--spacing-8)",fontSize:13,fontWeight:600,letterSpacing:"0.06em",textTransform:"uppercase",color:"var(--b-text-secondary)",fontFamily:"var(--b-font-sans)"},children:a},a))}),v.map((a,n)=>{const i=n%2===0?"var(--b-bg-page)":"var(--b-bg-raised)";return t("div",{css:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:1,background:"var(--b-border-subtle)",borderBottom:n<v.length-1?"1px solid var(--b-border-subtle)":"none","@media (max-width: 700px)":{gridTemplateColumns:"1fr"}},children:[e("span",{css:{background:i,padding:"var(--spacing-4) var(--spacing-8)",fontSize:15,color:"var(--b-text-primary)",fontFamily:"var(--b-font-sans)",lineHeight:1.4,"@media (max-width: 768px)":{padding:"var(--spacing-4) var(--spacing-6)"}},children:a.path}),e("span",{css:{background:i,padding:"var(--spacing-4) var(--spacing-8)",fontSize:15,fontWeight:600,color:"var(--c-yellow-400)",fontFamily:"var(--b-font-mono)","@media (max-width: 768px)":{padding:"var(--spacing-4) var(--spacing-6)"}},children:a.time})]},a.path)})]})]})})}const u=[{state:"Clear prop descriptions, usage guidelines, and examples",output:"Output that follows established patterns"},{state:"Minimal documentation, no usage context",output:"Output that fills gaps with generic patterns"},{state:"Old patterns documented, new preferences undocumented",output:"Output that uses patterns your team has moved away from"}];function P(){return e(o,{showGrid:!0,id:"documentation-quality",css:{background:"var(--b-bg-page)",borderTop:"1px solid var(--b-border-subtle)"},children:t(r,{css:{padding:"var(--spacing-16) var(--spacing-8)","@media (max-width: 768px)":{padding:"var(--spacing-10) var(--spacing-6)"}},children:[e("span",{css:{fontFamily:"var(--b-font-mono)",fontSize:16,fontWeight:600,color:"var(--c-violet-400)",letterSpacing:"0.06em",display:"block",marginBottom:"var(--spacing-3)"},children:"04"}),e("h2",{css:{margin:"0 0 var(--spacing-4)",fontSize:"clamp(26px, 3.5v
1w, 44px)",fontWeight:500,letterSpacing:"-0.02em",lineHeight:1.1,color:"var(--b-text-primary)",fontFamily:"var(--b-font-sans)",maxWidth:700},children:"Documentation quality determines output quality"}),e("p",{css:{margin:"0 0 var(--spacing-8)",fontSize:18,color:"var(--b-text-highlight)",lineHeight:1.7,maxWidth:720,fontFamily:"var(--b-font-sans)"},children:"One thing teams discover after setting up indexing is that the quality of the agent's output directly reflects the quality of their existing documentation. Any AI system working from your codebase will produce better output if the codebase is legible, and indexing makes the gap visible in a way that's actionable."}),e(s,{src:"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2Feead24f400fe4f23a1ee74e1475d4e04",alt:"Diagram showing how documentation quality determines the quality of AI-generated output.",width:1920,height:1244,sizes:"(max-width: 768px) 100vw, 680px",widths:[480,640,960,1200],css:{display:"block",width:"100%",maxWidth:680,height:"auto",aspectRatio:"1920 / 1244",objectFit:"cover",marginBottom:"var(--spacing-8)",border:"1px solid var(--b-border-subtle)"}}),t("div",{css:{border:"1px solid var(--b-border-subtle)",borderRadius:0,overflow:"hidden",marginInline:"calc(var(--spacing-8) * -1)",marginBottom:"var(--spacing-8)","@media (max-width: 768px)":{marginInline:"calc(var(--spacing-6) * -1)"}},children:[e("div",{css:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:1,background:"var(--b-border-subtle)",borderBottom:"1px solid var(--b-border-subtle)","@media (max-width: 700px)":{display:"none"}},children:["Documentation state","What the agent produces"].map(a=>e("span",{css:{background:"var(--b-bg-prominent)",padding:"10px var(--spacing-8)",fontSize:13,fontWeight:600,letterSpacing:"0.06em",textTransform:"uppercase",color:"var(--b-text-secondary)",fontFamily:"var(--b-font-sans)"},children:a},a))}),u.map((a,n)=>{const i=n%2===0?"var(--b-bg-page)":"var(--b-bg-raised)";return t("div",{css:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:1,background:"var(--b-border-subtle)",borderBottom:n<u.length-1?"1px solid var(--b-border-subtle)":"none","@media (max-width: 700px)":{gridTemplateColumns:"1fr"}},children:[e("span",{css:{background:i,padding:"var(--spacing-4) var(--spacing-8)",fontSize:15,color:"var(--b-text-primary)",fontFamily:"var(--b-font-sans)",lineHeight:1.4,"@media (max-width: 768px)":{padding:"var(--spacing-4) var(--spacing-6)"}},children:a.state}),e("span",{css:{background:i,padding:"var(--spacing-4) var(--spacing-8)",fontSize:15,color:"var(--b-text-highlight)",fontFamily:"var(--b-font-sans)",lineHeight:1.4,"@media (max-width: 768px)":{padding:"var(--spacing-4) var(--spacing-6)"}},children:a.output})]},a.state)})]}),e("div",{css:{background:"var(--b-bg-page)",border:"1px solid var(--b-border-subtle)",borderLeft:"3px solid var(--c-violet-400)",borderRadius:0,padding:"var(--spacing-6)"},children:t("p",{css:{margin:0,fontSize:17,color:"var(--b-text-primary)",lineHeight:1.7,fontFamily:"var(--b-font-sans)"},children:[e("strong",{css:{color:"var(--c-violet-400)"},children:"When an agent generates a component using a pattern your team has explicitly moved away from,"})," ","the most likely explanation is that the old pattern is documented and the new preference isn't. The fix is documentation. Teams that have done this work report a compounding effect: documenting the reasoning behind design decisions improves agent output, reduces the rework required during review, and frees up engineering time to further improve the documentation."]})})]})})}function L(){return e(o,{showGrid:!0,id:"figma-alignment",css:{background:"var(--b-bg-page)",borderTop:"1px solid var(--b-border-subtle)"},children:t(r,{css:{padding:"var(--spacing-16) var(--spacing-8)","@media (max-width: 768px)":{padding:"var(--spacing-10) var(--spacing-6)"}},children:[e("span",{css:{fontFamily:"var(--b-font-mono)",fontSize:16,fontWeight:600,color:"var(--c-red-400)",letterSpacing:"0.06em",display:"block",marginBottom:"var(--spacing-3)"},children:"05"}),e("h2",{css:{margin:"0 0 var(--spacing-4)",fontSize:"clamp(26px, 3.5v
1w, 44px)",fontWeight:500,letterSpacing:"-0.02em",lineHeight:1.1,color:"var(--b-text-primary)",fontFamily:"var(--b-font-sans)",maxWidth:700},children:"Figma-to-code alignment as a prerequisite"}),t("div",{css:{display:"flex",flexDirection:"column",gap:"var(--spacing-3)",maxWidth:680,marginBottom:"var(--spacing-8)"},children:[e("p",{css:{margin:0,fontSize:17,color:"var(--b-text-highlight)",lineHeight:1.7,fontFamily:"var(--b-font-sans)"},children:"A design system in which the Figma library has drifted from the coded components creates a specific failure mode: the agent receives a Figma export and generates code against a library that looks right, but doesn't match production. The designer approves the output because it matches their Figma file. The engineer flags the mismatch in review. The work goes back for correction."}),e("p",{css:{margin:0,fontSize:17,color:"var(--b-text-highlight)",lineHeight:1.7,fontFamily:"var(--b-font-sans)"},children:"Teams often experience this as an AI accuracy problem when it's a source-of-truth problem. The agent produced exactly what its context told it to produce. The context was wrong."})]}),e(s,{src:"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F19ee10b5307242149ca3971cf7265610",alt:"Diagram showing Figma-to-code alignment as a prerequisite for reliable AI output.",width:1920,height:1244,sizes:"(max-width: 768px) 100vw, 680px",widths:[480,640,960,1200],css:{display:"block",width:"100%",maxWidth:680,height:"auto",aspectRatio:"1920 / 1244",objectFit:"cover",marginBottom:"var(--spacing-8)",border:"1px solid var(--b-border-subtle)"}}),e("div",{css:{background:"var(--b-bg-page)",border:"1px solid var(--b-border-subtle)",borderLeft:"3px solid var(--c-red-400)",borderRadius:0,padding:"var(--spacing-6)"},children:t("p",{css:{margin:0,fontSize:17,color:"var(--b-text-primary)",lineHeight:1.7,fontFamily:"var(--b-font-sans)"},children:[e("strong",{css:{color:"var(--c-red-400)"},children:"The resolution:"})," ",`get the Figma library and the component library back in sync, document the mapping explicitly, and use component maps to maintain that alignment going forward. A Figma primary button maps to your codebase's Button component with the variant="primary" attribute. When that mapping exists, the agent applies it consistently. The investment in creating the maps is small relative to the cumulative cost of catching mismatches at review over time.`]})})]})})}const O=[{title:"Run plan mode first",desc:"The agent investigates the codebase and proposes an approach before executing anything. The design systems lead reviews the plan, asks clarifying questions, and approves it before changes touch the codebase."},{title:"Review the checklist",desc:"The agent builds a migration checklist before writing a single line of code: what's being deprecated, what the replacement components look like, and how they differ."},{title:"Execute against both indexes",desc:"The agent applies the correct package versions, updates component references, and preserves design system constraints throughout."},{title:"Share for sign-off",desc:"When it finishes, it flags remaining issues. The designer shares a preview link with engineering for sign-off, and the PR goes out through the standard workflow."}];function M(){return e(o,{showGrid:!0,id:"migration",css:{background:"var(--b-bg-page)",borderTop:"1px solid var(--b-border-subtle)"},children:t(r,{css:{padding:"var(--spacing-16) var(--spacing-8)","@media (max-width: 768px)":{padding:"var(--spacing-10) var(--spacing-6)"}},children:[e("span",{css:{fontFamily:"var(--b-font-mono)",fontSize:16,fontWeight:600,color:"var(--c-pink-400)",letterSpacing:"0.06em",display:"block",marginBottom:"var(--spacing-3)"},children:"06"}),e("h2",{css:{margin:"0 0 var(--spacing-4)",fontSize:"clamp(26px, 3.5v
1w, 44px)",fontWeight:500,letterSpacing:"-0.02em",lineHeight:1.1,color:"var(--b-text-primary)",fontFamily:"var(--b-font-sans)",maxWidth:700},children:"What this looks like in practice: migration"}),e("p",{css:{margin:"0 0 var(--spacing-8)",fontSize:18,color:"var(--b-text-highlight)",lineHeight:1.7,maxWidth:720,fontFamily:"var(--b-font-sans)"},children:"Moving a codebase from one version of a component library to another normally requires an engineer with deep familiarity with the design system, careful auditing of every affected component, and significant time on incremental changes to avoid regressions. With two indexes in place, one for the legacy version and one for the target version, the agent has enough context to approach the migration with real precision."}),e(s,{src:"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fe46875c6047c41719795bfef5901b10c",alt:"Diagram showing what design system migration looks like in practice with AI assistance.",width:1920,height:1244,sizes:"(max-width: 768px) 100vw, 680px",widths:[480,640,960,1200],css:{display:"block",width:"100%",maxWidth:680,height:"auto",aspectRatio:"1920 / 622",objectFit:"cover",objectPosition:"center",marginBottom:"var(--spacing-8)",border:"1px solid var(--b-border-subtle)"}}),e("div",{css:{display:"grid",gridTemplateColumns:"repeat(4, 1fr)",gap:1,marginInline:"calc(var(--spacing-8) * -1)",background:"var(--b-border-subtle)",border:"1px solid var(--b-border-subtle)",borderRadius:0,overflow:"hidden",marginBottom:"var(--spacing-8)","@media (max-width: 768px)":{marginInline:"calc(var(--spacing-6) * -1)"},"@media (max-width: 900px)":{gridTemplateColumns:"repeat(2, 1fr)"},"@media (max-width: 500px)":{gridTemplateColumns:"1fr"}},children:O.map((a,n)=>t("div",{css:{background:"var(--b-bg-page)",padding:"var(--spacing-6)",display:"flex",flexDirection:"column",gap:"var(--spacing-3)",animation:`report-slide-up 0.5s ${n*.08}s both`},children:[e("span",{css:{fontFamily:"var(--b-font-mono)",fontSize:12,fontWeight:600,color:"var(--c-pink-400)",letterSpacing:"0.08em"},children:String(n+1).padStart(2,"0")}),e("div",{css:{fontSize:16,fontWeight:600,color:"var(--b-text-primary)",lineHeight:1.3,fontFamily:"var(--b-font-sans)"},children:a.title}),e("p",{css:{margin:0,fontSize:14,color:"var(--b-text-highlight)",lineHeight:1.6,fontFamily:"var(--b-font-sans)"},children:a.desc})]},a.title))}),e("p",{css:{margin:0,fontSize:17,color:"var(--b-text-highlight)",lineHeight:1.7,maxWidth:720,fontFamily:"var(--b-font-sans)"},children:"An agent that runs ahead of its plan can produce output that looks correct and isn't, and catching that in review is more expensive than catching it before the work starts. Plan mode is a small investment that eliminates a large category of rework. The same indexed context that supports migration supports creating new components from Figma exports: a designer exports a component, attaches it to a prompt, and the agent generates the component, produces Storybook documentation alongside the code, and opens a pull request through the standard git workflow."})]})})}const f=[{before:"Engineer reviews implementation for design accuracy",after:"Design has already verified accuracy upstream"},{before:"Engineer checks component usage against the design system",after:"The index ensures correct components were used"},{before:"Back-and-forth with design on interpretation gaps",after:"Interpretation happens before the PR exists"},{before:"Engineer implements, reviews, and QA UI work",after:"Engineer evaluates code quality and architecture"}];function Y(){return e(o,{showGrid:!0,id:"review-workflow",css:{background:"var(--b-bg-page)",borderTop:"1px solid var(--b-border-subtle)"},children:t(r,{css:{padding:"var(--spacing-16) var(--spacing-8)","@media (max-width: 768px)":{padding:"var(--spacing-10) var(--spacing-6)"}},children:[e("span",{css:{fontFamily:"var(--b-font-mono)",fontSize:16,fontWeight:600,color:"var(--c-blue-500)",letterSpacing:"0.06em",display:"block",marginBottom:"var(--spacing-3)"},children:"07"}),e("h2",{css:{margin:"0 0 var(--spacing-4)",fontSize:"clamp(26px, 3.5v
1w, 44px)",fontWeight:500,letterSpacing:"-0.02em",lineHeight:1.1,color:"var(--b-text-primary)",fontFamily:"var(--b-font-sans)",maxWidth:700},children:"How the review workflow changes"}),e("p",{css:{margin:"0 0 var(--spacing-8)",fontSize:17,color:"var(--b-text-highlight)",lineHeight:1.7,maxWidth:720,fontFamily:"var(--b-font-sans)"},children:"When design system indexing is in place, and Builder requires sign-off from design and product before a PR reaches engineering, the review queue looks different. Engineers spend their time on judgment calls that actually require their expertise. When the queue is populated with PRs that have already cleared design review, throughput improves without increasing headcount."}),e(s,{src:"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F96ce03ede62c4d77b35989c0286d7756",alt:"Diagram showing how the engineering review workflow changes once design system indexing is in place.",width:1920,height:1244,sizes:"(max-width: 768px) 100vw, 680px",widths:[480,640,960,1200],css:{display:"block",width:"100%",maxWidth:680,height:"auto",aspectRatio:"1920 / 1244",objectFit:"cover",marginBottom:"var(--spacing-8)",border:"1px solid var(--b-border-subtle)"}}),t("div",{css:{border:"1px solid var(--b-border-subtle)",borderRadius:0,overflow:"hidden",marginInline:"calc(var(--spacing-8) * -1)",marginBottom:"var(--spacing-8)","@media (max-width: 768px)":{marginInline:"calc(var(--spacing-6) * -1)"}},children:[e("div",{css:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:1,background:"var(--b-border-subtle)",borderBottom:"1px solid var(--b-border-subtle)","@media (max-width: 700px)":{display:"none"}},children:["Before indexing","After indexing"].map(a=>e("span",{css:{background:"var(--b-bg-prominent)",padding:"10px var(--spacing-8)",fontSize:13,fontWeight:600,letterSpacing:"0.06em",textTransform:"uppercase",color:"var(--b-text-secondary)",fontFamily:"var(--b-font-sans)"},children:a},a))}),f.map((a,n)=>{const i=n%2===0?"var(--b-bg-page)":"var(--b-bg-raised)";return t("div",{css:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:1,background:"var(--b-border-subtle)",borderBottom:n<f.length-1?"1px solid var(--b-border-subtle)":"none","@media (max-width: 700px)":{gridTemplateColumns:"1fr"}},children:[e("span",{css:{background:i,padding:"var(--spacing-4) var(--spacing-8)",fontSize:15,color:"var(--b-text-highlight)",fontFamily:"var(--b-font-sans)",lineHeight:1.4,"@media (max-width: 768px)":{padding:"var(--spacing-4) var(--spacing-6)"}},children:a.before}),e("span",{css:{background:i,padding:"var(--spacing-4) var(--spacing-8)",fontSize:15,fontWeight:600,color:"var(--b-text-primary)",fontFamily:"var(--b-font-sans)",lineHeight:1.4,"@media (max-width: 768px)":{padding:"var(--spacing-4) var(--spacing-6)"}},children:a.after})]},a.before)})]}),e("p",{css:{margin:0,fontSize:17,color:"var(--b-text-highlight)",lineHeight:1.7,maxWidth:720,fontFamily:"var(--b-font-sans)"}
1,children:"Background agents make parallel work tractable in a way that's hard to achieve with the standard sprint model. While one agent executes a migration on a dedicated branch, additional work can be kicked off from Slack or Jira without breaking anyone's focus. Each agent operates on its own branch with its own isolated environment and a shareable preview URL."})]})})}const x=[{role:"Designer",before:"Files a ticket, waits weeks for implementation",after:"Exports from Figma, receives PR"},{role:"PM",before:"Depends on engineering for component requests",after:"Kicks off agent tasks from Slack or Jira"},{role:"Design systems engineer",before:"Implements requests, reviews everything",after:"Reviews PRs that have already cleared design sign-off"},{role:"Engineering lead",before:"Approves all UI changes",after:"Approves production-ready PRs with upstream verification"}];function U(){return e(o,{showGrid:!0,id:"quality-gate",css:{background:"var(--b-bg-page)",borderTop:"1px solid var(--b-border-subtle)"},children:t(r,{css:{padding:"var(--spacing-16) var(--spacing-8)","@media (max-width: 768px)":{padding:"var(--spacing-10) var(--spacing-6)"}},children:[e("span",{css:{fontFamily:"var(--b-font-mono)",fontSize:16,fontWeight:600,color:"var(--c-green-400)",letterSpacing:"0.06em",display:"block",marginBottom:"var(--spacing-3)"},children:"08"}),e("h2",{css:{margin:"0 0 var(--spacing-4)",fontSize:"clamp(26px, 3.5v
1w, 44px)",fontWeight:500,letterSpacing:"-0.02em",lineHeight:1.1,color:"var(--b-text-primary)",fontFamily:"var(--b-font-sans)",maxWidth:700},children:"From bottleneck to quality gate"}),e("p",{css:{margin:"0 0 var(--spacing-8)",fontSize:18,color:"var(--b-text-highlight)",lineHeight:1.7,maxWidth:720,fontFamily:"var(--b-font-sans)"},children:"The standard response to a design system backlog is to grow the design systems team. That works, but slowly, and it doesn't address the root cause: the process for creating, updating, and distributing components requires too much coordination per request. With indexed context in place, non-engineers can contribute to the coded design system using Figma exports, natural language, and the visual editor. Engineers review and approve via the standard PR flow."}),e(s,{src:"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F686e5521d2154114b12c3c7822f2ee59",alt:"Diagram showing the shift from design systems team as bottleneck to design systems team as quality gate.",width:1920,height:1244,sizes:"(max-width: 768px) 100vw, 680px",widths:[480,640,960,1200],css:{display:"block",width:"100%",maxWidth:680,height:"auto",aspectRatio:"1920 / 1244",objectFit:"cover",marginBottom:"var(--spacing-8)",border:"1px solid var(--b-border-subtle)"}}),t("div",{css:{border:"1px solid var(--b-border-subtle)",borderRadius:0,overflow:"hidden",marginInline:"calc(var(--spacing-8) * -1)",marginBottom:"var(--spacing-8)","@media (max-width: 768px)":{marginInline:"calc(var(--spacing-6) * -1)"}},children:[e("div",{css:{display:"grid",gridTemplateColumns:"1fr 1.4fr 1.4fr",gap:1,background:"var(--b-border-subtle)",borderBottom:"1px solid var(--b-border-subtle)","@media (max-width: 700px)":{display:"none"}},children:["Role","Workflow before","Workflow after"].map(a=>e("span",{css:{background:"var(--b-bg-prominent)",padding:"10px var(--spacing-8)",fontSize:13,fontWeight:600,letterSpacing:"0.06em",textTransform:"uppercase",color:"var(--b-text-secondary)",fontFamily:"var(--b-font-sans)"},children:a},a))}),x.map((a,n)=>{const i=n%2===0?"var(--b-bg-page)":"var(--b-bg-raised)";return t("div",{css:{display:"grid",gridTemplateColumns:"1fr 1.4fr 1.4fr",gap:1,background:"var(--b-border-subtle)",borderBottom:n<x.length-1?"1px solid var(--b-border-subtle)":"none","@media (max-width: 700px)":{gridTemplateColumns:"1fr"}},children:[e("span",{css:{background:i,padding:"var(--spacing-4) var(--spacing-8)",fontSize:15,fontWeight:600,color:"var(--b-text-primary)",fontFamily:"var(--b-font-sans)","@media (max-width: 768px)":{padding:"var(--spacing-4) var(--spacing-6)"}},children:a.role}),e("span",{css:{background:i,padding:"var(--spacing-4) var(--spacing-8)",fontSize:15,color:"var(--b-text-highlight)",fontFamily:"var(--b-font-sans)",lineHeight:1.4,"@media (max-width: 768px)":{padding:"var(--spacing-4) var(--spacing-6)"}},children:a.before}),e("span",{css:{background:i,padding:"var(--spacing-4) var(--spacing-8)",fontSize:15,color:"var(--b-text-highlight)",fontFamily:"var(--b-font-sans)",lineHeight:1.4,"@media (max-width: 768px)":{padding:"var(--spacing-4) var(--spacing-6)"}},children:a.after})]},a.role)})]}),e("div",{css:{background:"var(--b-bg-page)",border:"1px solid var(--b-border-subtle)",borderLeft:"3px solid var(--c-green-400)",borderRadius:0,padding:"var(--spacing-6)"},children:t("p",{css:{margin:0,fontSize:17,color:"var(--b-text-primary)",lineHeight:1.7,fontFamily:"var(--b-font-sans)"},children:[e("strong",{css:{color:"var(--c-green-400)"},children:"The organizational shift is from bottleneck to quality gate."})," ","A bottleneck creates a queue that grows over time. A quality gate processes work that arrives in better shape, reviews it faster, and ships it sooner. Design systems leads who have made this shift describe a fundamentally different job, one where setting standards, improving documentation, and evaluating new patterns get more time because the implementation work is no longer consuming most of it."]})})]})})}
1function J(){return t(w,{children:[e(o,{showGrid:!0,id:"conclusion",css:{background:"var(--b-bg-page)",borderTop:"1px solid var(--b-border-subtle)"},children:t(r,{css:{padding:"var(--spacing-16) var(--spacing-8)","@media (max-width: 768px)":{padding:"var(--spacing-10) var(--spacing-6)"}},children:[e("p",{css:{fontSize:13,fontWeight:600,letterSpacing:"0.08em",textTransform:"uppercase",color:"var(--b-text-eyebrow)",marginBottom:"var(--spacing-3)",fontFamily:"var(--b-font-sans)"},children:"The Underlying Argument"}),e("h2",{css:{margin:"0 0 var(--spacing-6)",fontSize:"clamp(26px, 3.5vw, 44px)",fontWeight:500,letterSpacing:"-0.02em",lineHeight:1.1,color:"var(--b-text-primary)",fontFamily:"var(--b-font-sans)",maxWidth:700},children:"Every AI tool your team adopts works from your design system as its foundation"}),e("p",{css:{margin:"0 0 var(--spacing-5)",fontSize:18,color:"var(--b-text-highlight)",lineHeight:1.7,maxWidth:720,fontFamily:"var(--b-font-sans)"},children:"The quality and completeness of that foundation determine the ceiling on what the AI can produce, and faster code generation doesn't improve delivery timelines if the output doesn't fit the system it's meant to merge into."}),e("p",{css:{margin:0,fontSize:18,color:"var(--b-text-highlight)",lineHeight:1.7,maxWidth:720,fontFamily:"var(--b-font-sans)"},children:"The investment required isn't new tooling. It's the design system work most teams already know they should be doing: component coverage, documentation quality, Figma-to-code alignment. What changes is the return on that investment. A well-maintained design system now also determines how well every AI tool your team adopts performs from day one."})]})}),e(o,{showGrid:!0,css:{background:"var(--b-bg-page)",borderTop:"1px solid var(--b-border-subtle)"},children:e(r,{css:{padding:"var(--spacing-16) var(--spacing-8)","@media (max-width: 768px)":{padding:"var(--spacing-10) var(--spacing-6)"}},children:t("div",{css:{display:"flex",justifyContent:"space-between",alignItems:"flex-end",gap:"var(--spacing-8)",flexWrap:"wrap","@media (max-width: 768px)":{alignItems:"flex-start"}},children:[t("div",{css:{maxWidth:620},children:[e("h3",{css:{margin:"0 0 var(--spacing-4)",fontSize:"clamp(24px, 3vw, 36px)",fontWeight:500,lineHeight:1.1,letterSpacing:"-0.02em",color:"var(--b-text-primary)",fontFamily:"var(--b-font-sans)"},children:"None of this requires reorganizing your team."}),e("p",{css:{margin:0,fontSize:17,color:"var(--b-text-highlight)",lineHeight:1.7,fontFamily:"var(--b-font-sans)"},children:"Builder indexes your real codebase, design system, and documentation, then generates code using your actual components, tokens, and patterns. Designers export from Figma, PMs kick off work from Slack or Jira, and the output arrives as a pull request that has already cleared design and product review. Engineers approve through the same git workflow they use today."})]}),t("div",{css:{display:"flex",gap:"var(--spacing-3)",flexWrap:"wrap",justifyContent:"flex-end","@media (max-width: 768px)":{justifyContent:"flex-start"}},children:[e(p,{variant:"secondary",href:"https://builder.io/signup",label:"TRY BUILDER FOR FREE",icon:A}),e(p,{variant:"cta",href:"/demo",label:"BOOK A DEMO"})]})]})})})]})}const fe=()=>[{rel:"preconnect",href:"https://fonts.googleapis.com"},{rel:"preconnect",href:"https://fonts.gstatic.com",crossOrigin:"anonymous"},{rel:"stylesheet",href:"https://fonts.googleapis.com/css2?family=Geist:[email protected]&family=Geist+Mono:[email protected]&display=swap"}],xe=()=>I(null,{title:"How to Make AI Match Your Design System â Builder.io",description:"Why AI-generated code drifts from your component library, and how indexing your design system as infrastructure closes the gap.",path:"/guides/how-to-make-ai-match-your-design-system"}).meta,ye=k(function(){return t("div",{className:"builder-brand-tokens",css:{minHeight:"100vh",background:"var(--b-bg-page)",color:"var(--b-text-primary)",fontFamily:"var(--b-font-sans)",display:"flex",flexDirection:"column",scrollBehavior:"smooth","& section[id]":{scrollMarginTop:96}},children:[e(S,{}),e(F,{}),e(z,{}),e(B,{}),e("main",{css:{flex:1},children:t("div",{css:{display:"grid",gridTemplateColumns:"repeat(5, 1fr) 260px",alignItems:"start",width:"100%",maxWidth:W,margin:"0 auto","@media (max-width: 900px)":{gridTemplateColumns:"1fr",maxWidth:"none"}},children:[t("div",{css:{gridColumn:"1 / span 5",minWidth:0,"@media (max-width: 900px)":{gridColumn:"1"}},children:[e(C,{}),e(D,{}),e(j,{}),e(E,{}),e(G,{}),e(P,{}),e(L,{}),e(M,{}),e(Y,{}),e(U,{}),e(J,{})]}),e("aside",{css:{gridColumn:"6",position:"sticky",top:70,alignSelf:"start",minHeight:"calc(100vh - 70px)",borderLeft:"1px solid var(--b-border-subtle)","@media (max-width: 900px)":{display:"none"}},children:e(H,{})})]})}),e(T,{})]})});export{ye as default,fe as links,xe as meta};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.