CINXE.COM
<!doctype html><html lang="en"><head><title data-rh="true">Building Design Systems with AI in 2025 | by Ashan Fernando | Bits and Pieces</title><meta data-rh="true" charset="utf-8"/><meta data-rh="true" name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,maximum-scale=1"/><meta data-rh="true" name="theme-color" content="#000000"/><meta data-rh="true" name="twitter:app:name:iphone" content="Medium"/><meta data-rh="true" name="twitter:app:id:iphone" content="828256236"/><meta data-rh="true" property="al:ios:app_name" content="Medium"/><meta data-rh="true" property="al:ios:app_store_id" content="828256236"/><meta data-rh="true" property="al:android:package" content="com.medium.reader"/><meta data-rh="true" property="fb:app_id" content="542599432471018"/><meta data-rh="true" property="og:site_name" content="Medium"/><meta data-rh="true" property="og:type" content="article"/><meta data-rh="true" property="article:published_time" content="2024-11-22T20:02:07.431Z"/><meta data-rh="true" name="title" content="Building Design Systems with AI in 2025 | by Ashan Fernando | Bits and Pieces"/><meta data-rh="true" property="og:title" content="Building Design Systems with AI in 2025"/><meta data-rh="true" property="al:android:url" content="medium://p/57a23b9c318b"/><meta data-rh="true" property="al:ios:url" content="medium://p/57a23b9c318b"/><meta data-rh="true" property="al:android:app_name" content="Medium"/><meta data-rh="true" name="description" content="Building cohesive and reusable design systems has always been a challenging task. It requires balancing creative design efforts, selecting the right UI libraries, and ensuring everything aligns with…"/><meta data-rh="true" property="og:description" content="How to build a modern design system using AI tools and technologies"/><meta data-rh="true" property="og:url" content="https://blog.bitsrc.io/building-design-systems-with-ai-in-2025-57a23b9c318b"/><meta data-rh="true" property="al:web:url" content="https://blog.bitsrc.io/building-design-systems-with-ai-in-2025-57a23b9c318b"/><meta data-rh="true" property="og:image" content="https://miro.medium.com/v2/resize:fit:1200/1*W_aF4StMRSFtNDvXy9WWXQ.jpeg"/><meta data-rh="true" property="article:author" content="https://medium.com/@ashan.fernando"/><meta data-rh="true" name="author" content="Ashan Fernando"/><meta data-rh="true" name="robots" content="index,noarchive,follow,max-image-preview:large"/><meta data-rh="true" name="referrer" content="unsafe-url"/><meta data-rh="true" property="twitter:title" content="Building Design Systems with AI in 2025"/><meta data-rh="true" name="twitter:site" content="@bitnpcs"/><meta data-rh="true" name="twitter:app:url:iphone" content="medium://p/57a23b9c318b"/><meta data-rh="true" property="twitter:description" content="How to build a modern design system using AI tools and technologies"/><meta data-rh="true" name="twitter:image:src" content="https://miro.medium.com/v2/resize:fit:1200/1*W_aF4StMRSFtNDvXy9WWXQ.jpeg"/><meta data-rh="true" name="twitter:card" content="summary_large_image"/><meta data-rh="true" name="twitter:label1" content="Reading time"/><meta data-rh="true" name="twitter:data1" content="6 min read"/><link data-rh="true" rel="icon" href="https://miro.medium.com/v2/resize:fill:256:256/1*72WvVp4NqCU_4bfE6wCBEQ.png"/><link data-rh="true" rel="search" type="application/opensearchdescription+xml" title="Medium" href="/osd.xml"/><link data-rh="true" rel="apple-touch-icon" sizes="152x152" href="https://miro.medium.com/v2/resize:fill:304:304/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="apple-touch-icon" sizes="120x120" href="https://miro.medium.com/v2/resize:fill:240:240/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="apple-touch-icon" sizes="76x76" href="https://miro.medium.com/v2/resize:fill:152:152/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="apple-touch-icon" sizes="60x60" href="https://miro.medium.com/v2/resize:fill:120:120/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="mask-icon" href="https://miro.medium.com/v2/resize:fill:1000:1000/7*GAOKVe--MXbEJmV9230oOQ.png" color="#171717"/><link data-rh="true" id="glyph_preload_link" rel="preload" as="style" type="text/css" href="https://glyph.medium.com/css/unbound.css"/><link data-rh="true" id="glyph_link" rel="stylesheet" type="text/css" href="https://glyph.medium.com/css/unbound.css"/><link data-rh="true" rel="author" href="https://medium.com/@ashan.fernando"/><link data-rh="true" rel="canonical" href="https://blog.bitsrc.io/building-design-systems-with-ai-in-2025-57a23b9c318b"/><link data-rh="true" rel="alternate" href="android-app://com.medium.reader/https/medium.com/p/57a23b9c318b"/><script data-rh="true" type="application/ld+json">{"@context":"http:\u002F\u002Fschema.org","@type":"NewsArticle","image":["https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1200\u002F1*W_aF4StMRSFtNDvXy9WWXQ.jpeg"],"url":"https:\u002F\u002Fblog.bitsrc.io\u002Fbuilding-design-systems-with-ai-in-2025-57a23b9c318b","dateCreated":"2024-11-22T20:02:07.431Z","datePublished":"2024-11-22T20:02:07.431Z","dateModified":"2024-11-23T02:59:23.872Z","headline":"Building Design Systems with AI in 2025 - Bits and Pieces","name":"Building Design Systems with AI in 2025 - Bits and Pieces","description":"Building cohesive and reusable design systems has always been a challenging task. It requires balancing creative design efforts, selecting the right UI libraries, and ensuring everything aligns with…","identifier":"57a23b9c318b","author":{"@type":"Person","name":"Ashan Fernando","url":"https:\u002F\u002Fblog.bitsrc.io\u002F@ashan.fernando"},"creator":["Ashan Fernando"],"publisher":{"@type":"Organization","name":"Bits and Pieces","url":"blog.bitsrc.io","logo":{"@type":"ImageObject","width":241,"height":60,"url":"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:482\u002F1*yzhMNPxbUKEaqPSNsbgNCg.png"}},"mainEntityOfPage":"https:\u002F\u002Fblog.bitsrc.io\u002Fbuilding-design-systems-with-ai-in-2025-57a23b9c318b"}</script><style type="text/css" data-fela-rehydration="638" data-fela-type="STATIC">html{box-sizing:border-box;-webkit-text-size-adjust:100%}*, *:before, *:after{box-sizing:inherit}body{margin:0;padding:0;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:rgba(0,0,0,0.8);position:relative;min-height:100vh}h1, h2, h3, h4, h5, h6, dl, dd, ol, ul, menu, figure, blockquote, p, pre, form{margin:0}menu, ol, ul{padding:0;list-style:none;list-style-image:none}main{display:block}a{color:inherit;text-decoration:none}a, button, input{-webkit-tap-highlight-color:transparent}img, svg{vertical-align:middle}button{background:transparent;overflow:visible}button, input, optgroup, select, textarea{margin:0}:root{--reach-tabs:1;--reach-menu-button:1}#speechify-root{font-family:Sohne, sans-serif}div[data-popper-reference-hidden="true"]{visibility:hidden;pointer-events:none}.grecaptcha-badge{visibility:hidden} /*XCode style (c) Angel Garcia <angelgarcia.mail@gmail.com>*/.hljs {background: #fff;color: black; }/* Gray DOCTYPE selectors like WebKit */ .xml .hljs-meta {color: #c0c0c0; }.hljs-comment, .hljs-quote {color: #007400; }.hljs-tag, .hljs-attribute, .hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-name {color: #aa0d91; }.hljs-variable, .hljs-template-variable {color: #3F6E74; }.hljs-code, .hljs-string, .hljs-meta .hljs-string {color: #c41a16; }.hljs-regexp, .hljs-link {color: #0E0EFF; }.hljs-title, .hljs-symbol, .hljs-bullet, .hljs-number {color: #1c00cf; }.hljs-section, .hljs-meta {color: #643820; }.hljs-title.class_, .hljs-class .hljs-title, .hljs-type, .hljs-built_in, .hljs-params {color: #5c2699; }.hljs-attr {color: #836C28; }.hljs-subst {color: #000; }.hljs-formula {background-color: #eee;font-style: italic; }.hljs-addition {background-color: #baeeba; }.hljs-deletion {background-color: #ffc8bd; }.hljs-selector-id, .hljs-selector-class {color: #9b703f; }.hljs-doctag, .hljs-strong {font-weight: bold; }.hljs-emphasis {font-style: italic; } </style><style type="text/css" data-fela-rehydration="638" data-fela-type="KEYFRAME">@-webkit-keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}@-moz-keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}@keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}</style><style type="text/css" data-fela-rehydration="638" data-fela-type="RULE">.a{font-family:medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif}.b{font-weight:400}.c{background-color:rgba(255, 255, 255, 1)}.l{display:block}.m{position:sticky}.n{top:0}.o{z-index:500}.p{padding:0 24px}.q{align-items:center}.r{border-bottom:solid 1px #F2F2F2}.y{height:41px}.z{line-height:20px}.ab{display:flex}.ac{height:57px}.ae{flex:1 0 auto}.af{color:inherit}.ag{fill:inherit}.ah{font-size:inherit}.ai{border:inherit}.aj{font-family:inherit}.ak{letter-spacing:inherit}.al{font-weight:inherit}.am{padding:0}.an{margin:0}.ao{cursor:pointer}.ap:disabled{cursor:not-allowed}.aq:disabled{color:#6B6B6B}.ar:disabled{fill:#6B6B6B}.au{width:auto}.av path{fill:#242424}.aw{height:25px}.ax{margin-left:16px}.ay{border:none}.az{border-radius:20px}.ba{width:240px}.bb{background:#F9F9F9}.bc path{fill:#6B6B6B}.be{outline:none}.bf{font-family:sohne, "Helvetica Neue", Helvetica, Arial, sans-serif}.bg{font-size:14px}.bh{width:100%}.bi{padding:10px 20px 10px 0}.bj{background-color:transparent}.bk{color:#242424}.bl::placeholder{color:#6B6B6B}.bm{display:inline-block}.bn{margin-left:12px}.bo{margin-right:12px}.bp{border-radius:4px}.bq{margin-left:24px}.br{height:24px}.bx{background-color:#F9F9F9}.by{border-radius:50%}.bz{height:32px}.ca{width:32px}.cb{justify-content:center}.ch{max-width:680px}.ci{min-width:0}.cj{animation:k1 1.2s ease-in-out infinite}.ck{height:100vh}.cl{margin-bottom:16px}.cm{margin-top:48px}.cn{align-items:flex-start}.co{flex-direction:column}.cp{justify-content:space-between}.cq{margin-bottom:24px}.cw{width:80%}.cx{background-color:#F2F2F2}.dd{height:44px}.de{width:44px}.df{margin:auto 0}.dg{margin-bottom:4px}.dh{height:16px}.di{width:120px}.dj{width:80px}.dp{margin-bottom:8px}.dq{width:96%}.dr{width:98%}.ds{width:81%}.dt{margin-left:8px}.du{color:#6B6B6B}.dv{font-size:13px}.dw{height:100%}.ep{color:#FFFFFF}.eq{fill:#FFFFFF}.er{background:rgba(144, 128, 125, 1)}.es{border-color:rgba(144, 128, 125, 1)}.ew:disabled{cursor:inherit !important}.ex:disabled{opacity:0.3}.ey:disabled:hover{background:rgba(144, 128, 125, 1)}.ez:disabled:hover{border-color:rgba(144, 128, 125, 1)}.fa{border-radius:99em}.fb{border-width:1px}.fc{border-style:solid}.fd{box-sizing:border-box}.fe{text-decoration:none}.ff{text-align:center}.fi{margin-right:32px}.fj{position:relative}.fk{fill:#6B6B6B}.fn{background:transparent}.fo svg{margin-left:4px}.fp svg{fill:#6B6B6B}.fr{box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.05)}.fs{position:absolute}.fz{margin:0 24px}.gd{background:rgba(255, 255, 255, 1)}.ge{border:1px solid #F2F2F2}.gf{box-shadow:0 1px 4px #F2F2F2}.gg{max-height:100vh}.gh{overflow-y:auto}.gi{left:0}.gj{top:calc(100vh + 100px)}.gk{bottom:calc(100vh + 100px)}.gl{width:10px}.gm{pointer-events:none}.gn{word-break:break-word}.go{word-wrap:break-word}.gp:after{display:block}.gq:after{content:""}.gr:after{clear:both}.gs{line-height:1.23}.gt{letter-spacing:0}.gu{font-style:normal}.gv{font-weight:700}.hq{margin-bottom:-0.27em}.hr{line-height:1.394}.im{align-items:baseline}.in{width:48px}.io{height:48px}.ip{border:2px solid rgba(255, 255, 255, 1)}.iq{z-index:0}.ir{box-shadow:none}.is{border:1px solid rgba(0, 0, 0, 0.05)}.it{margin-left:-12px}.iu{width:28px}.iv{height:28px}.iw{z-index:1}.ix{width:24px}.iy{margin-bottom:2px}.iz{flex-wrap:nowrap}.ja{font-size:16px}.jb{line-height:24px}.jd{margin:0 8px}.je{display:inline}.jf{color:rgba(144, 128, 125, 1)}.jg{fill:rgba(144, 128, 125, 1)}.jj{flex:0 0 auto}.jm{flex-wrap:wrap}.jn{white-space:pre-wrap}.jo{margin-right:4px}.jp{overflow:hidden}.jq{max-height:20px}.jr{text-overflow:ellipsis}.js{display:-webkit-box}.jt{-webkit-line-clamp:1}.ju{-webkit-box-orient:vertical}.jv{word-break:break-all}.jx{padding-left:8px}.jy{padding-right:8px}.kz> *{flex-shrink:0}.la{overflow-x:scroll}.lb::-webkit-scrollbar{display:none}.lc{scrollbar-width:none}.ld{-ms-overflow-style:none}.le{width:74px}.lf{flex-direction:row}.lg{z-index:2}.lj{-webkit-user-select:none}.lk{border:0}.ll{fill:rgba(117, 117, 117, 1)}.lo{outline:0}.lp{user-select:none}.lq> svg{pointer-events:none}.lz{cursor:progress}.ma{margin-left:4px}.mb{margin-top:0px}.mc{opacity:1}.md{padding:4px 0}.mg{width:16px}.mi{display:inline-flex}.mo{max-width:100%}.mp{padding:8px 2px}.mq svg{color:#6B6B6B}.nh{clear:both}.nn{margin-left:auto}.no{margin-right:auto}.np{max-width:2928px}.nv{padding-top:5px}.nw{padding-bottom:5px}.ny{cursor:zoom-in}.nz{z-index:auto}.ob{height:auto}.oc{line-height:1.58}.od{letter-spacing:-0.004em}.oe{font-family:source-serif-pro, Georgia, Cambria, "Times New Roman", Times, serif}.ox{margin-bottom:-0.46em}.oy{max-width:600px}.oz{margin-top:10px}.pa{max-width:728px}.pd{text-decoration:underline}.pe{margin-top:32px}.pf{margin-bottom:14px}.pg{padding-top:24px}.ph{padding-bottom:10px}.pi{background-color:#000000}.pj{height:3px}.pk{width:3px}.pl{margin-right:20px}.pm{line-height:1.12}.pn{letter-spacing:-0.022em}.po{font-weight:600}.qh{margin-bottom:-0.28em}.qn{list-style-type:disc}.qo{margin-left:30px}.qp{padding-left:0px}.qv{line-height:1.18}.rj{margin-bottom:-0.31em}.rp{box-shadow:inset 0 0 0 1px #F2F2F2}.rq{padding:0px}.rr{padding:16px 20px}.rs{flex:1 1 auto}.ru{max-height:40px}.rv{-webkit-line-clamp:2}.rw{margin-top:12px}.rx{width:160px}.ry{background-image:url(https://miro.medium.com/v2/resize:fit:320/1*z7w62zg_ZdmURPEWquLe_w.jpeg)}.rz{background-origin:border-box}.sa{background-size:cover}.sb{height:167px}.sc{background-position:50% 50%}.sd{max-width:1800px}.se{padding-left:30px}.sf{line-height:40px}.sg{letter-spacing:-0.009em}.sh{font-weight:300}.si{font-size:28px}.st{list-style-type:decimal}.te{max-width:1210px}.tf{max-width:700px}.tg{max-width:2272px}.th{width:55.7%}.ti{margin-right:10px}.tj:last-of-type{margin-right:0}.tk{width:44.3%}.tl{width:225.99999999999997%}.tm{left:calc(-12.999999999999986% - 8px)}.tn{transform:translateX(-50%)}.to{width:55.8%}.tp{width:44.2%}.tq{margin-top:8px}.tr{background-image:url(https://miro.medium.com/v2/resize:fit:320/1*mgcst-JEjz8exGGkjEqHDw.jpeg)}.ts{background-image:url(https://miro.medium.com/v2/resize:fit:320/1*k3_9Vzml20H8t1KR3_zpyg.jpeg)}.tt{background-image:url(https://miro.medium.com/v2/resize:fit:320/1*cD4oKZDOua0p49WoD8s_xg.png)}.tu{margin-bottom:26px}.tv{margin-top:6px}.tw{margin-right:8px}.tx{padding:8px 16px}.ty{border-radius:100px}.tz{transition:background 300ms ease}.ub{white-space:nowrap}.uc{border-top:none}.ud{margin-bottom:50px}.ue{height:52px}.uf{max-height:52px}.ug{box-sizing:content-box}.uh{position:static}.uj{max-width:155px}.up{margin-bottom:64px}.uq{margin-bottom:48px}.ve{border-radius:2px}.vg{height:64px}.vh{width:64px}.vi{align-self:flex-end}.vj{color:rgba(255, 255, 255, 1)}.vk{fill:rgba(255, 255, 255, 1)}.vl{background:rgba(25, 25, 25, 1)}.vm{border-color:rgba(25, 25, 25, 1)}.vp:disabled{opacity:0.1}.vq:disabled:hover{background:rgba(25, 25, 25, 1)}.vr:disabled:hover{border-color:rgba(25, 25, 25, 1)}.vv{padding-right:4px}.vw{font-weight:500}.wd{margin-top:16px}.wj{height:0px}.wk{gap:18px}.wl{fill:rgba(61, 61, 61, 1)}.wn{padding-bottom:6px}.wo{border-bottom:1px solid #F2F2F2}.wu{fill:#242424}.wv{background:0}.ww{border-color:#242424}.wx:disabled:hover{color:#242424}.wy:disabled:hover{fill:#242424}.wz:disabled:hover{border-color:#242424}.xk{border-bottom:solid 1px #E5E5E5}.xl{margin-top:72px}.xm{padding:24px 0}.xn{margin-bottom:0px}.xo{margin-right:16px}.as:hover:not(:disabled){color:rgba(25, 25, 25, 1)}.at:hover:not(:disabled){fill:rgba(25, 25, 25, 1)}.et:hover{background:rgba(123, 110, 108, 1)}.eu:hover{border-color:rgba(123, 110, 108, 1)}.ev:hover{cursor:pointer}.fl:hover{color:#242424}.fm:hover{fill:#242424}.fq:hover svg{fill:#242424}.ft:hover{background-color:rgba(0, 0, 0, 0.1)}.jc:hover{text-decoration:underline}.jh:hover:not(:disabled){color:rgba(123, 110, 108, 1)}.ji:hover:not(:disabled){fill:rgba(123, 110, 108, 1)}.ln:hover{fill:rgba(8, 8, 8, 1)}.me:hover{fill:#000000}.mf:hover p{color:#000000}.mh:hover{color:#000000}.mr:hover svg{color:#000000}.ua:hover{background-color:#F2F2F2}.vf:hover{background-color:none}.vn:hover{background:#000000}.vo:hover{border-color:#242424}.wm:hover{fill:rgba(25, 25, 25, 1)}.bd:focus-within path{fill:#242424}.lm:focus{fill:rgba(8, 8, 8, 1)}.ms:focus svg{color:#000000}.oa:focus{transform:scale(1.01)}.lr:active{border-style:none}</style><style type="text/css" data-fela-rehydration="638" data-fela-type="RULE" media="all and (min-width: 1080px)">.d{display:none}.bw{width:64px}.cg{margin:0 64px}.cv{height:48px}.dc{margin-bottom:52px}.do{margin-bottom:48px}.ef{font-size:14px}.eg{line-height:20px}.em{font-size:13px}.eo{padding:5px 12px}.fh{display:flex}.fy{margin-bottom:50px}.gc{max-width:680px}.hm{font-size:42px}.hn{margin-top:1.19em}.ho{line-height:52px}.hp{letter-spacing:-0.011em}.ie{font-size:22px}.if{margin-top:0.92em}.ig{line-height:28px}.il{align-items:center}.kl{border-top:solid 1px #F2F2F2}.km{border-bottom:solid 1px #F2F2F2}.kn{margin:32px 0 0}.ko{padding:3px 8px}.kx> *{margin-right:24px}.ky> :last-child{margin-right:0}.ly{margin-top:0px}.mn{margin:0}.nm{max-width:1192px}.nu{margin-top:56px}.ot{font-size:20px}.ou{margin-top:2.14em}.ov{line-height:32px}.ow{letter-spacing:-0.003em}.qd{font-size:24px}.qe{margin-top:1.25em}.qf{line-height:30px}.qg{letter-spacing:-0.016em}.qm{margin-top:0.94em}.qu{margin-top:1.14em}.rg{margin-top:1.72em}.rh{line-height:24px}.ri{letter-spacing:0}.ro{margin-top:32px}.sn{margin-top:2.75em}.ss{margin-top:2.64em}.sy{margin-top:1.75em}.td{margin-top:2.11em}.uo{display:inline-block}.ur{flex-direction:row}.uu{margin-bottom:0}.uv{margin-right:20px}.vs{max-width:500px}.wi{margin-bottom:88px}.wt{margin:40px 0 16px}.xe{width:min-width}.xj{padding-top:72px}</style><style type="text/css" data-fela-rehydration="638" data-fela-type="RULE" media="all and (max-width: 1079.98px)">.e{display:none}.lx{margin-top:0px}.pb{margin-left:auto}.pc{text-align:center}.un{display:inline-block}</style><style type="text/css" data-fela-rehydration="638" data-fela-type="RULE" media="all and (max-width: 903.98px)">.f{display:none}.lw{margin-top:0px}.um{display:inline-block}</style><style type="text/css" data-fela-rehydration="638" data-fela-type="RULE" media="all and (max-width: 727.98px)">.g{display:none}.lu{margin-top:0px}.lv{margin-right:0px}.rt{padding:10px 12px 10px}.ul{display:inline-block}</style><style type="text/css" data-fela-rehydration="638" data-fela-type="RULE" media="all and (max-width: 551.98px)">.h{display:none}.s{display:flex}.t{justify-content:space-between}.bs{width:24px}.cc{margin:0 24px}.cr{height:40px}.cy{margin-bottom:44px}.dk{margin-bottom:32px}.dx{font-size:13px}.dy{line-height:20px}.eh{padding:0px 8px 1px}.fu{margin-bottom:2px}.gw{font-size:32px}.gx{margin-top:1.01em}.gy{line-height:38px}.gz{letter-spacing:-0.014em}.hs{font-size:18px}.ht{margin-top:0.79em}.hu{line-height:24px}.ih{align-items:flex-start}.jk{flex-direction:column}.jz{margin:24px -24px 0}.ka{padding:0}.kp> *{margin-right:8px}.kq> :last-child{margin-right:24px}.lh{margin-left:0px}.ls{margin-top:0px}.lt{margin-right:0px}.mj{margin:0}.mt{border:1px solid #F2F2F2}.mu{border-radius:99em}.mv{padding:0px 16px 0px 12px}.mw{height:38px}.mx{align-items:center}.mz svg{margin-right:8px}.ni{max-width:100%}.nq{margin-top:40px}.of{margin-top:1.56em}.og{line-height:28px}.oh{letter-spacing:-0.003em}.pp{font-size:20px}.pq{margin-top:0.93em}.pr{letter-spacing:0}.qi{margin-top:0.67em}.qq{margin-top:1.34em}.qw{font-size:16px}.qx{margin-top:1.23em}.rk{margin-top:24px}.sj{margin-top:1.42em}.so{margin-top:2em}.su{margin-top:1.08em}.sz{margin-top:1.57em}.uk{display:inline-block}.vc{margin-bottom:20px}.vd{margin-right:0}.vx{font-size:24px}.vy{line-height:30px}.vz{letter-spacing:-0.016em}.we{margin-bottom:64px}.wp{margin:32px 0 16px}.xa{width:100%}.xf{padding-top:48px}.my:hover{border-color:#E5E5E5}</style><style type="text/css" data-fela-rehydration="638" data-fela-type="RULE" media="all and (min-width: 904px) and (max-width: 1079.98px)">.i{display:none}.bv{width:64px}.cf{margin:0 64px}.cu{height:48px}.db{margin-bottom:52px}.dn{margin-bottom:48px}.ed{font-size:14px}.ee{line-height:20px}.ek{font-size:13px}.el{padding:5px 12px}.fg{display:flex}.fx{margin-bottom:50px}.gb{max-width:680px}.hi{font-size:42px}.hj{margin-top:1.19em}.hk{line-height:52px}.hl{letter-spacing:-0.011em}.ib{font-size:22px}.ic{margin-top:0.92em}.id{line-height:28px}.ik{align-items:center}.kh{border-top:solid 1px #F2F2F2}.ki{border-bottom:solid 1px #F2F2F2}.kj{margin:32px 0 0}.kk{padding:3px 8px}.kv> *{margin-right:24px}.kw> :last-child{margin-right:0}.mm{margin:0}.nl{max-width:1192px}.nt{margin-top:56px}.op{font-size:20px}.oq{margin-top:2.14em}.or{line-height:32px}.os{letter-spacing:-0.003em}.pz{font-size:24px}.qa{margin-top:1.25em}.qb{line-height:30px}.qc{letter-spacing:-0.016em}.ql{margin-top:0.94em}.qt{margin-top:1.14em}.rd{margin-top:1.72em}.re{line-height:24px}.rf{letter-spacing:0}.rn{margin-top:32px}.sm{margin-top:2.75em}.sr{margin-top:2.64em}.sx{margin-top:1.75em}.tc{margin-top:2.11em}.us{flex-direction:row}.uw{margin-bottom:0}.ux{margin-right:20px}.vt{max-width:500px}.wh{margin-bottom:88px}.ws{margin:40px 0 16px}.xd{width:min-width}.xi{padding-top:72px}</style><style type="text/css" data-fela-rehydration="638" data-fela-type="RULE" media="all and (min-width: 728px) and (max-width: 903.98px)">.j{display:none}.w{display:flex}.x{justify-content:space-between}.bu{width:64px}.ce{margin:0 48px}.ct{height:48px}.da{margin-bottom:52px}.dm{margin-bottom:48px}.eb{font-size:13px}.ec{line-height:20px}.ej{padding:0px 8px 1px}.fw{margin-bottom:50px}.ga{max-width:680px}.he{font-size:42px}.hf{margin-top:1.19em}.hg{line-height:52px}.hh{letter-spacing:-0.011em}.hy{font-size:22px}.hz{margin-top:0.92em}.ia{line-height:28px}.ij{align-items:center}.kd{border-top:solid 1px #F2F2F2}.ke{border-bottom:solid 1px #F2F2F2}.kf{margin:32px 0 0}.kg{padding:3px 8px}.kt> *{margin-right:24px}.ku> :last-child{margin-right:0}.ml{margin:0}.nk{max-width:100%}.ns{margin-top:56px}.ol{font-size:20px}.om{margin-top:2.14em}.on{line-height:32px}.oo{letter-spacing:-0.003em}.pv{font-size:24px}.pw{margin-top:1.25em}.px{line-height:30px}.py{letter-spacing:-0.016em}.qk{margin-top:0.94em}.qs{margin-top:1.14em}.ra{margin-top:1.72em}.rb{line-height:24px}.rc{letter-spacing:0}.rm{margin-top:32px}.sl{margin-top:2.75em}.sq{margin-top:2.64em}.sw{margin-top:1.75em}.tb{margin-top:2.11em}.ut{flex-direction:row}.uy{margin-bottom:0}.uz{margin-right:20px}.vu{max-width:500px}.wg{margin-bottom:88px}.wr{margin:40px 0 16px}.xc{width:min-width}.xh{padding-top:72px}</style><style type="text/css" data-fela-rehydration="638" data-fela-type="RULE" media="all and (min-width: 552px) and (max-width: 727.98px)">.k{display:none}.u{display:flex}.v{justify-content:space-between}.bt{width:24px}.cd{margin:0 24px}.cs{height:40px}.cz{margin-bottom:44px}.dl{margin-bottom:32px}.dz{font-size:13px}.ea{line-height:20px}.ei{padding:0px 8px 1px}.fv{margin-bottom:2px}.ha{font-size:32px}.hb{margin-top:1.01em}.hc{line-height:38px}.hd{letter-spacing:-0.014em}.hv{font-size:18px}.hw{margin-top:0.79em}.hx{line-height:24px}.ii{align-items:flex-start}.jl{flex-direction:column}.kb{margin:24px 0 0}.kc{padding:0}.kr> *{margin-right:8px}.ks> :last-child{margin-right:8px}.li{margin-left:0px}.mk{margin:0}.na{border:1px solid #F2F2F2}.nb{border-radius:99em}.nc{padding:0px 16px 0px 12px}.nd{height:38px}.ne{align-items:center}.ng svg{margin-right:8px}.nj{max-width:100%}.nr{margin-top:40px}.oi{margin-top:1.56em}.oj{line-height:28px}.ok{letter-spacing:-0.003em}.ps{font-size:20px}.pt{margin-top:0.93em}.pu{letter-spacing:0}.qj{margin-top:0.67em}.qr{margin-top:1.34em}.qy{font-size:16px}.qz{margin-top:1.23em}.rl{margin-top:24px}.sk{margin-top:1.42em}.sp{margin-top:2em}.sv{margin-top:1.08em}.ta{margin-top:1.57em}.va{margin-bottom:20px}.vb{margin-right:0}.wa{font-size:24px}.wb{line-height:30px}.wc{letter-spacing:-0.016em}.wf{margin-bottom:64px}.wq{margin:32px 0 16px}.xb{width:100%}.xg{padding-top:48px}.nf:hover{border-color:#E5E5E5}</style><style type="text/css" data-fela-rehydration="638" data-fela-type="RULE" media="print">.ui{display:none}</style><style type="text/css" data-fela-rehydration="638" data-fela-type="RULE" media="(orientation: landscape) and (max-width: 903.98px)">.jw{max-height:none}</style><style type="text/css" data-fela-rehydration="638" data-fela-type="RULE" media="(prefers-reduced-motion: no-preference)">.nx{transition:transform 300ms cubic-bezier(0.2, 0, 0.2, 1)}</style></head><body><div id="root"><div class="a b c"><div class="d e f g h i j k"></div><script>document.domain = document.domain;</script><div class="l c"><div class="l m n o c"><div class="p q r s t u v w x i d y z"><a class="du ag dv bf ak b am an ao ap aq ar as at s u w i d q dw z" href="https://rsci.app.link/?%24canonical_url=https%3A%2F%2Fmedium.com%2Fp%2F57a23b9c318b&%7Efeature=LoOpenInAppButton&%7Echannel=ShowPostUnderCollection&source=---top_nav_layout_nav-----------------------------------------" rel="noopener follow">Open in app<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="none" viewBox="0 0 10 10" class="dt"><path fill="currentColor" d="M.985 8.485a.375.375 0 1 0 .53.53zM8.75 1.25h.375A.375.375 0 0 0 8.75.875zM8.375 6.5a.375.375 0 1 0 .75 0zM3.5.875a.375.375 0 1 0 0 .75zm-1.985 8.14 7.5-7.5-.53-.53-7.5 7.5zm6.86-7.765V6.5h.75V1.25zM3.5 1.625h5.25v-.75H3.5z"></path></svg></a><div class="ab q"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><a class="bf b dx dy eh dz ea ei eb ec ej ek ee el em eg eo ep eq er es et eu ev ew ex ey ez fa fb fc fd bm fe ff" data-testid="headerSignUpButton" href="https://medium.com/m/signin?operation=register&redirect=https%3A%2F%2Fblog.bitsrc.io%2Fbuilding-design-systems-with-ai-in-2025-57a23b9c318b&source=post_page---top_nav_layout_nav-----------------------global_nav------------------" rel="noopener follow">Sign up</a></span></p><div class="ax l"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerSignInButton" href="https://medium.com/m/signin?operation=login&redirect=https%3A%2F%2Fblog.bitsrc.io%2Fbuilding-design-systems-with-ai-in-2025-57a23b9c318b&source=post_page---top_nav_layout_nav-----------------------global_nav------------------" rel="noopener follow">Sign in</a></span></p></div></div></div><div class="p q r ab ac"><div class="ab q ae"><a class="af ag ah ai aj ak al am an ao ap aq ar as at ab" aria-label="Homepage" data-testid="headerMediumLogo" href="https://medium.com/?source=---top_nav_layout_nav-----------------------------------------" rel="noopener follow"><svg xmlns="http://www.w3.org/2000/svg" width="719" height="160" fill="none" viewBox="0 0 719 160" class="au av aw"><path fill="#242424" d="m174.104 9.734.215-.047V8.02H130.39L89.6 103.89 48.81 8.021H1.472v1.666l.212.047c8.018 1.81 12.09 4.509 12.09 14.242V137.93c0 9.734-4.087 12.433-12.106 14.243l-.212.047v1.671h32.118v-1.665l-.213-.048c-8.018-1.809-12.089-4.509-12.089-14.242V30.586l52.399 123.305h2.972l53.925-126.743V140.75c-.687 7.688-4.721 10.062-11.982 11.701l-.215.05v1.652h55.948v-1.652l-.215-.05c-7.269-1.639-11.4-4.013-12.087-11.701l-.037-116.774h.037c0-9.733 4.071-12.432 12.087-14.242m25.555 75.488c.915-20.474 8.268-35.252 20.606-35.507 3.806.063 6.998 1.312 9.479 3.714 5.272 5.118 7.751 15.812 7.368 31.793zm-.553 5.77h65.573v-.275c-.186-15.656-4.721-27.834-13.466-36.196-7.559-7.227-18.751-11.203-30.507-11.203h-.263c-6.101 0-13.584 1.48-18.909 4.16-6.061 2.807-11.407 7.003-15.855 12.511-7.161 8.874-11.499 20.866-12.554 34.343q-.05.606-.092 1.212a50 50 0 0 0-.065 1.151 85.807 85.807 0 0 0-.094 5.689c.71 30.524 17.198 54.917 46.483 54.917 25.705 0 40.675-18.791 44.407-44.013l-1.886-.664c-6.557 13.556-18.334 21.771-31.738 20.769-18.297-1.369-32.314-19.922-31.042-42.395m139.722 41.359c-2.151 5.101-6.639 7.908-12.653 7.908s-11.513-4.129-15.418-11.63c-4.197-8.053-6.405-19.436-6.405-32.92 0-28.067 8.729-46.22 22.24-46.22 5.657 0 10.111 2.807 12.236 7.704zm43.499 20.008c-8.019-1.897-12.089-4.722-12.089-14.951V1.309l-48.716 14.353v1.757l.299-.024c6.72-.543 11.278.386 13.925 2.83 2.072 1.915 3.082 4.853 3.082 8.987v18.66c-4.803-3.067-10.516-4.56-17.448-4.56-14.059 0-26.909 5.92-36.176 16.672-9.66 11.205-14.767 26.518-14.767 44.278-.003 31.72 15.612 53.039 38.851 53.039 13.595 0 24.533-7.449 29.54-20.013v16.865h43.711v-1.746zM424.1 19.819c0-9.904-7.468-17.374-17.375-17.374-9.859 0-17.573 7.632-17.573 17.374s7.721 17.374 17.573 17.374c9.907 0 17.375-7.47 17.375-17.374m11.499 132.546c-8.019-1.897-12.089-4.722-12.089-14.951h-.035V43.635l-43.714 12.551v1.705l.263.024c9.458.842 12.047 4.1 12.047 15.152v81.086h43.751v-1.746zm112.013 0c-8.018-1.897-12.089-4.722-12.089-14.951V43.635l-41.621 12.137v1.71l.246.026c7.733.813 9.967 4.257 9.967 15.36v59.279c-2.578 5.102-7.415 8.131-13.274 8.336-9.503 0-14.736-6.419-14.736-18.073V43.638l-43.714 12.55v1.703l.262.024c9.459.84 12.05 4.097 12.05 15.152v50.17a56.3 56.3 0 0 0 .91 10.444l.787 3.423c3.701 13.262 13.398 20.197 28.59 20.197 12.868 0 24.147-7.966 29.115-20.43v17.311h43.714v-1.747zm169.818 1.788v-1.749l-.213-.05c-8.7-2.006-12.089-5.789-12.089-13.49v-63.79c0-19.89-11.171-31.761-29.883-31.761-13.64 0-25.141 7.882-29.569 20.16-3.517-13.01-13.639-20.16-28.606-20.16-13.146 0-23.449 6.938-27.869 18.657V43.643L545.487 55.68v1.715l.263.024c9.345.829 12.047 4.181 12.047 14.95v81.784h40.787v-1.746l-.215-.053c-6.941-1.631-9.181-4.606-9.181-12.239V66.998c1.836-4.289 5.537-9.37 12.853-9.37 9.086 0 13.692 6.296 13.692 18.697v77.828h40.797v-1.746l-.215-.053c-6.94-1.631-9.18-4.606-9.18-12.239V75.066a42 42 0 0 0-.578-7.26c1.947-4.661 5.86-10.177 13.475-10.177 9.214 0 13.691 6.114 13.691 18.696v77.828z"></path></svg></a><div class="ax h"><div class="ab ay az ba bb q bc bd"><div class="bm" aria-hidden="false" aria-describedby="searchResults" aria-labelledby="searchResults"></div><div class="bn bo ab"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M4.092 11.06a6.95 6.95 0 1 1 13.9 0 6.95 6.95 0 0 1-13.9 0m6.95-8.05a8.05 8.05 0 1 0 5.13 14.26l3.75 3.75a.56.56 0 1 0 .79-.79l-3.73-3.73A8.05 8.05 0 0 0 11.042 3z" clip-rule="evenodd"></path></svg></div><input role="combobox" aria-controls="searchResults" aria-expanded="false" aria-label="search" data-testid="headerSearchInput" tabindex="0" class="ay be bf bg z bh bi bj bk bl" placeholder="Search" value=""/></div></div></div><div class="h k w fg fh"><div class="fi ab"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerWriteButton" href="https://medium.com/m/signin?operation=register&redirect=https%3A%2F%2Fmedium.com%2Fnew-story&source=---top_nav_layout_nav-----------------------new_post_topnav------------------" rel="noopener follow"><div class="bf b bg z du fj fk ab q fl fm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" aria-label="Write"><path fill="currentColor" d="M14 4a.5.5 0 0 0 0-1zm7 6a.5.5 0 0 0-1 0zm-7-7H4v1h10zM3 4v16h1V4zm1 17h16v-1H4zm17-1V10h-1v10zm-1 1a1 1 0 0 0 1-1h-1zM3 20a1 1 0 0 0 1 1v-1zM4 3a1 1 0 0 0-1 1h1z"></path><path stroke="currentColor" d="m17.5 4.5-8.458 8.458a.25.25 0 0 0-.06.098l-.824 2.47a.25.25 0 0 0 .316.316l2.47-.823a.25.25 0 0 0 .098-.06L19.5 6.5m-2-2 2.323-2.323a.25.25 0 0 1 .354 0l1.646 1.646a.25.25 0 0 1 0 .354L19.5 6.5m-2-2 2 2"></path></svg><div class="dt l">Write</div></div></a></span></div></div><div class="k j i d"><div class="fi ab"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerSearchButton" href="https://medium.com/search?source=---top_nav_layout_nav-----------------------------------------" rel="noopener follow"><div class="bf b bg z du fj fk ab q fl fm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" aria-label="Search"><path fill="currentColor" fill-rule="evenodd" d="M4.092 11.06a6.95 6.95 0 1 1 13.9 0 6.95 6.95 0 0 1-13.9 0m6.95-8.05a8.05 8.05 0 1 0 5.13 14.26l3.75 3.75a.56.56 0 1 0 .79-.79l-3.73-3.73A8.05 8.05 0 0 0 11.042 3z" clip-rule="evenodd"></path></svg></div></a></div></div><div class="fi h k j"><div class="ab q"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><a class="bf b dx dy eh dz ea ei eb ec ej ek ee el em eg eo ep eq er es et eu ev ew ex ey ez fa fb fc fd bm fe ff" data-testid="headerSignUpButton" href="https://medium.com/m/signin?operation=register&redirect=https%3A%2F%2Fblog.bitsrc.io%2Fbuilding-design-systems-with-ai-in-2025-57a23b9c318b&source=post_page---top_nav_layout_nav-----------------------global_nav------------------" rel="noopener follow">Sign up</a></span></p><div class="ax l"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerSignInButton" href="https://medium.com/m/signin?operation=login&redirect=https%3A%2F%2Fblog.bitsrc.io%2Fbuilding-design-systems-with-ai-in-2025-57a23b9c318b&source=post_page---top_nav_layout_nav-----------------------global_nav------------------" rel="noopener follow">Sign in</a></span></p></div></div></div><div class="l" aria-hidden="false"><button class="ay fn am ab q ao fo fp fq" aria-label="user options menu" data-testid="headerUserIcon"><div class="l fj"><img alt="" class="l fd by bz ca cx" src="https://miro.medium.com/v2/resize:fill:64:64/1*dmbNkD5D-u45r44go_cf0g.png" width="32" height="32" loading="lazy" role="presentation"/><div class="fr by l bz ca fs n ay ft"></div></div></button></div></div></div><div class="l"><div class="fu fv fw fx fy l"><div class="ab cb"><div class="ci bh fz ga gb gc"></div></div><article><div class="l"><div class="l"><span class="l"></span><section><div><div class="fs gi gj gk gl gm"></div><div class="gn go gp gq gr"><div class="ab cb"><div class="ci bh fz ga gb gc"><div><h1 id="adc3" class="pw-post-title gs gt gu bf gv gw gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq bk" data-testid="storyTitle">Building Design Systems with AI in 2025</h1></div><div><h2 id="9643" class="pw-subtitle-paragraph hr gt gu bf b hs ht hu hv hw hx hy hz ia ib ic id ie if ig cq du">How to build a modern design system using AI tools and technologies</h2><div><div class="speechify-ignore ab cp"><div class="speechify-ignore bh l"><div class="ih ii ij ik il ab"><div><div class="ab im"><div><div class="bm" aria-hidden="false"><a href="https://medium.com/@ashan.fernando?source=post_page---byline--57a23b9c318b---------------------------------------" rel="noopener follow"><div class="l in io by ip iq"><div class="l fj"><img alt="Ashan Fernando" class="l fd by dd de cx" src="https://miro.medium.com/v2/resize:fill:88:88/1*XBsSZ82Vj4BavB4vrtSi3w.jpeg" width="44" height="44" loading="lazy" data-testid="authorPhoto"/><div class="ir by l dd de fs n is ft"></div></div></div></a></div></div><div class="it ab fj"><div><div class="bm" aria-hidden="false"><a href="https://blog.bitsrc.io/?source=post_page---byline--57a23b9c318b---------------------------------------" rel="noopener ugc nofollow"><div class="l iu iv by ip iw"><div class="l fj"><img alt="Bits and Pieces" class="l fd by br ix cx" src="https://miro.medium.com/v2/resize:fill:48:48/1*7jl7ls1SeoNkYU742b9j1Q.png" width="24" height="24" loading="lazy" data-testid="publicationPhoto"/><div class="ir by l br ix fs n is ft"></div></div></div></a></div></div></div></div></div><div class="bn bh l"><div class="ab"><div style="flex:1"><span class="bf b bg z bk"><div class="iy ab q"><div class="ab q iz"><div class="ab q"><div><div class="bm" aria-hidden="false"><p class="bf b ja jb bk"><a class="af ag ah ai aj ak al am an ao ap aq ar jc" data-testid="authorName" href="https://medium.com/@ashan.fernando?source=post_page---byline--57a23b9c318b---------------------------------------" rel="noopener follow">Ashan Fernando</a></p></div></div></div><span class="jd je" aria-hidden="true"><span class="bf b bg z du">·</span></span><p class="bf b ja jb du"><span><a class="jf jg ah ai aj ak al am an ao ap aq ar ex jh ji" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fuser%2Fc2b0e3fcee92&operation=register&redirect=https%3A%2F%2Fblog.bitsrc.io%2Fbuilding-design-systems-with-ai-in-2025-57a23b9c318b&user=Ashan+Fernando&userId=c2b0e3fcee92&source=post_page-c2b0e3fcee92--byline--57a23b9c318b---------------------post_header------------------" rel="noopener follow">Follow</a></span></p></div></div></span></div></div><div class="l jj"><span class="bf b bg z du"><div class="ab cn jk jl jm"><div class="fu fv ab"><div class="bf b bg z du ab jn"><span class="jo l jj">Published in</span><div><div class="l" aria-hidden="false"><a class="af ag ah ai aj ak al am an ao ap aq ar jc ab q" data-testid="publicationName" href="https://blog.bitsrc.io/?source=post_page---byline--57a23b9c318b---------------------------------------" rel="noopener ugc nofollow"><p class="bf b bg z jp jq jr js jt ju jv jw bk">Bits and Pieces</p></a></div></div></div><div class="h k"><span class="jd je" aria-hidden="true"><span class="bf b bg z du">·</span></span></div></div><span class="bf b bg z du"><div class="ab ae"><span data-testid="storyReadTime">6 min read</span><div class="jx jy l" aria-hidden="true"><span class="l" aria-hidden="true"><span class="bf b bg z du">·</span></span></div><span data-testid="storyPublishDate">Nov 22, 2024</span></div></span></div></span></div></div></div><div class="ab cp jz ka kb kc kd ke kf kg kh ki kj kk kl km kn ko"><div class="h k w fg fh q"><div class="le l"><div class="ab q lf lg"><div class="pw-multi-vote-icon fj jo lh li lj"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerClapButton" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fbitsrc%2F57a23b9c318b&operation=register&redirect=https%3A%2F%2Fblog.bitsrc.io%2Fbuilding-design-systems-with-ai-in-2025-57a23b9c318b&user=Ashan+Fernando&userId=c2b0e3fcee92&source=---header_actions--57a23b9c318b---------------------clap_footer------------------" rel="noopener follow"><div><div class="bm" aria-hidden="false"><div class="lk ao ll lm ln lo am lp lq lr lj"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" d="M11.37.828 12 3.282l.63-2.454zM13.916 3.953l1.523-2.112-1.184-.39zM8.589 1.84l1.522 2.112-.337-2.501zM18.523 18.92c-.86.86-1.75 1.246-2.62 1.33a6 6 0 0 0 .407-.372c2.388-2.389 2.86-4.951 1.399-7.623l-.912-1.603-.79-1.672c-.26-.56-.194-.98.203-1.288a.7.7 0 0 1 .546-.132c.283.046.546.231.728.5l2.363 4.157c.976 1.624 1.141 4.237-1.324 6.702m-10.999-.438L3.37 14.328a.828.828 0 0 1 .585-1.408.83.83 0 0 1 .585.242l2.158 2.157a.365.365 0 0 0 .516-.516l-2.157-2.158-1.449-1.449a.826.826 0 0 1 1.167-1.17l3.438 3.44a.363.363 0 0 0 .516 0 .364.364 0 0 0 0-.516L5.293 9.513l-.97-.97a.826.826 0 0 1 0-1.166.84.84 0 0 1 1.167 0l.97.968 3.437 3.436a.36.36 0 0 0 .517 0 .366.366 0 0 0 0-.516L6.977 7.83a.82.82 0 0 1-.241-.584.82.82 0 0 1 .824-.826c.219 0 .43.087.584.242l5.787 5.787a.366.366 0 0 0 .587-.415l-1.117-2.363c-.26-.56-.194-.98.204-1.289a.7.7 0 0 1 .546-.132c.283.046.545.232.727.501l2.193 3.86c1.302 2.38.883 4.59-1.277 6.75-1.156 1.156-2.602 1.627-4.19 1.367-1.418-.236-2.866-1.033-4.079-2.246M10.75 5.971l2.12 2.12c-.41.502-.465 1.17-.128 1.89l.22.465-3.523-3.523a.8.8 0 0 1-.097-.368c0-.22.086-.428.241-.584a.847.847 0 0 1 1.167 0m7.355 1.705c-.31-.461-.746-.758-1.23-.837a1.44 1.44 0 0 0-1.11.275c-.312.24-.505.543-.59.881a1.74 1.74 0 0 0-.906-.465 1.47 1.47 0 0 0-.82.106l-2.182-2.182a1.56 1.56 0 0 0-2.2 0 1.54 1.54 0 0 0-.396.701 1.56 1.56 0 0 0-2.21-.01 1.55 1.55 0 0 0-.416.753c-.624-.624-1.649-.624-2.237-.037a1.557 1.557 0 0 0 0 2.2c-.239.1-.501.238-.715.453a1.56 1.56 0 0 0 0 2.2l.516.515a1.556 1.556 0 0 0-.753 2.615L7.01 19c1.32 1.319 2.909 2.189 4.475 2.449q.482.08.971.08c.85 0 1.653-.198 2.393-.579.231.033.46.054.686.054 1.266 0 2.457-.52 3.505-1.567 2.763-2.763 2.552-5.734 1.439-7.586z" clip-rule="evenodd"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l ls lt lu lv lw lx ly"><p class="bf b dv z du"><span class="lz">--</span></p></div></div></div><div><div class="bm" aria-hidden="false"><button class="ao lk mc md ab q fk me mf" aria-label="responses"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="mb"><path d="M18.006 16.803c1.533-1.456 2.234-3.325 2.234-5.321C20.24 7.357 16.709 4 12.191 4S4 7.357 4 11.482c0 4.126 3.674 7.482 8.191 7.482.817 0 1.622-.111 2.393-.327.231.2.48.391.744.559 1.06.693 2.203 1.044 3.399 1.044.224-.008.4-.112.486-.287a.49.49 0 0 0-.042-.518c-.495-.67-.845-1.364-1.04-2.057a4 4 0 0 1-.125-.598zm-3.122 1.055-.067-.223-.315.096a8 8 0 0 1-2.311.338c-4.023 0-7.292-2.955-7.292-6.587 0-3.633 3.269-6.588 7.292-6.588 4.014 0 7.112 2.958 7.112 6.593 0 1.794-.608 3.469-2.027 4.72l-.195.168v.255c0 .056 0 .151.016.295.025.231.081.478.154.733.154.558.398 1.117.722 1.659a5.3 5.3 0 0 1-2.165-.845c-.276-.176-.714-.383-.941-.59z"></path></svg><p class="bf b dv z du"><span class="pw-responses-count ma mb">1</span></p></button></div></div></div><div class="ab q kp kq kr ks kt ku kv kw kx ky kz la lb lc ld"><div class="mg k j i d"></div><div class="h k"><div><div class="bm" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerBookmarkButton" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2F57a23b9c318b&operation=register&redirect=https%3A%2F%2Fblog.bitsrc.io%2Fbuilding-design-systems-with-ai-in-2025-57a23b9c318b&source=---header_actions--57a23b9c318b---------------------bookmark_footer------------------" rel="noopener follow"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="du mh" aria-label="Add to list bookmark button"><path fill="currentColor" d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .805.396L12.5 17l5.695 4.396A.5.5 0 0 0 19 21v-8.5a.5.5 0 0 0-1 0v7.485l-5.195-4.012a.5.5 0 0 0-.61 0L7 19.985z"></path></svg></a></span></div></div></div><div class="fd mi cn"><div class="l ae"><div class="ab cb"><div class="mj mk ml mm mn mo ci bh"><div class="ab"><div class="bm" aria-hidden="false"><div><div class="bm" aria-hidden="false"><button aria-label="Listen" data-testid="audioPlayButton" class="af fk ah ai aj ak al mp an ao ap ex mq mr mf ms mt mu mv mw s mx my mz na nb nc nd u ne nf ng"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M3 12a9 9 0 1 1 18 0 9 9 0 0 1-18 0m9-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m3.376 10.416-4.599 3.066a.5.5 0 0 1-.777-.416V8.934a.5.5 0 0 1 .777-.416l4.599 3.066a.5.5 0 0 1 0 .832" clip-rule="evenodd"></path></svg><div class="j i d"><p class="bf b bg z du">Listen</p></div></button></div></div></div></div></div></div></div></div><div class="bm" aria-hidden="false" aria-describedby="postFooterSocialMenu" aria-labelledby="postFooterSocialMenu"><div><div class="bm" aria-hidden="false"><button aria-controls="postFooterSocialMenu" aria-expanded="false" aria-label="Share Post" data-testid="headerSocialShareButton" class="af fk ah ai aj ak al mp an ao ap ex mq mr mf ms mt mu mv mw s mx my mz na nb nc nd u ne nf ng"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M15.218 4.931a.4.4 0 0 1-.118.132l.012.006a.45.45 0 0 1-.292.074.5.5 0 0 1-.3-.13l-2.02-2.02v7.07c0 .28-.23.5-.5.5s-.5-.22-.5-.5v-7.04l-2 2a.45.45 0 0 1-.57.04h-.02a.4.4 0 0 1-.16-.3.4.4 0 0 1 .1-.32l2.8-2.8a.5.5 0 0 1 .7 0l2.8 2.79a.42.42 0 0 1 .068.498m-.106.138.008.004v-.01zM16 7.063h1.5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-11c-1.1 0-2-.9-2-2v-10a2 2 0 0 1 2-2H8a.5.5 0 0 1 .35.15.5.5 0 0 1 .15.35.5.5 0 0 1-.15.35.5.5 0 0 1-.35.15H6.4c-.5 0-.9.4-.9.9v10.2a.9.9 0 0 0 .9.9h11.2c.5 0 .9-.4.9-.9v-10.2c0-.5-.4-.9-.9-.9H16a.5.5 0 0 1 0-1" clip-rule="evenodd"></path></svg><div class="j i d"><p class="bf b bg z du">Share</p></div></button></div></div></div></div></div></div></div></div></div></div></div><div class="nh"><div class="ab cb"><div class="mj ni mk nj ml nk cf nl cg nm ci bh"><figure class="nq nr ns nt nu nh nv nw paragraph-image"><div role="button" tabindex="0" class="nx ny fj nz bh oa"><div class="nn no np"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*W_aF4StMRSFtNDvXy9WWXQ.jpeg 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*W_aF4StMRSFtNDvXy9WWXQ.jpeg 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*W_aF4StMRSFtNDvXy9WWXQ.jpeg 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*W_aF4StMRSFtNDvXy9WWXQ.jpeg 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*W_aF4StMRSFtNDvXy9WWXQ.jpeg 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*W_aF4StMRSFtNDvXy9WWXQ.jpeg 1100w, https://miro.medium.com/v2/resize:fit:2000/format:webp/1*W_aF4StMRSFtNDvXy9WWXQ.jpeg 2000w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*W_aF4StMRSFtNDvXy9WWXQ.jpeg 640w, https://miro.medium.com/v2/resize:fit:720/1*W_aF4StMRSFtNDvXy9WWXQ.jpeg 720w, https://miro.medium.com/v2/resize:fit:750/1*W_aF4StMRSFtNDvXy9WWXQ.jpeg 750w, https://miro.medium.com/v2/resize:fit:786/1*W_aF4StMRSFtNDvXy9WWXQ.jpeg 786w, https://miro.medium.com/v2/resize:fit:828/1*W_aF4StMRSFtNDvXy9WWXQ.jpeg 828w, https://miro.medium.com/v2/resize:fit:1100/1*W_aF4StMRSFtNDvXy9WWXQ.jpeg 1100w, https://miro.medium.com/v2/resize:fit:2000/1*W_aF4StMRSFtNDvXy9WWXQ.jpeg 2000w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px"/><img alt="" class="bh mo ob c" width="1000" height="591" loading="eager" role="presentation"/></picture></div></div></figure></div></div></div><div class="ab cb"><div class="ci bh fz ga gb gc"><p id="40a1" class="pw-post-body-paragraph oc od gu oe b hs of og oh hv oi oj ok ol om on oo op oq or os ot ou ov ow ox gn bk">Building cohesive and reusable design systems has always been a challenging task. It requires balancing creative design efforts, selecting the right UI libraries, and ensuring everything aligns with a consistent and unique design language.</p><p id="86b7" class="pw-post-body-paragraph oc od gu oe b hs of og oh hv oi oj ok ol om on oo op oq or os ot ou ov ow ox gn bk">However, AI-driven tools are revolutionizing this process, making it faster, more efficient, and collaborative, helping teams overcome traditional bottlenecks in design system development.</p><figure class="nq nr ns nt nu nh nn no paragraph-image"><div class="nn no oy"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/0*fMNHz5563nWwImb3.gif 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*fMNHz5563nWwImb3.gif 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*fMNHz5563nWwImb3.gif 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*fMNHz5563nWwImb3.gif 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*fMNHz5563nWwImb3.gif 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*fMNHz5563nWwImb3.gif 1100w, https://miro.medium.com/v2/resize:fit:1200/format:webp/0*fMNHz5563nWwImb3.gif 1200w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 600px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/0*fMNHz5563nWwImb3.gif 640w, https://miro.medium.com/v2/resize:fit:720/0*fMNHz5563nWwImb3.gif 720w, https://miro.medium.com/v2/resize:fit:750/0*fMNHz5563nWwImb3.gif 750w, https://miro.medium.com/v2/resize:fit:786/0*fMNHz5563nWwImb3.gif 786w, https://miro.medium.com/v2/resize:fit:828/0*fMNHz5563nWwImb3.gif 828w, https://miro.medium.com/v2/resize:fit:1100/0*fMNHz5563nWwImb3.gif 1100w, https://miro.medium.com/v2/resize:fit:1200/0*fMNHz5563nWwImb3.gif 1200w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 600px"/><img alt="" class="bh mo ob c" width="600" height="382" loading="eager" role="presentation"/></picture></div><figcaption class="oz ff pa nn no pb pc bf b bg z du"><a class="af pd" href="https://bit.cloud" rel="noopener ugc nofollow" target="_blank">Generating a new Bit component with Hope AI</a></figcaption></figure><p id="f1fe" class="pw-post-body-paragraph oc od gu oe b hs of og oh hv oi oj ok ol om on oo op oq or os ot ou ov ow ox gn bk">In this article, we explore how AI is reshaping design systems and examine the capabilities of Bit.dev’s Hope AI, and provide a practical guide to building modern design systems with minimal effort.</p></div></div></div><div class="ab cb pe pf pg ph" role="separator"><span class="pi by bm pj pk pl"></span><span class="pi by bm pj pk pl"></span><span class="pi by bm pj pk"></span></div><div class="gn go gp gq gr"><div class="ab cb"><div class="ci bh fz ga gb gc"><h1 id="5e39" class="pm pn gu bf po pp pq hu pr ps pt hx pu pv pw px py pz qa qb qc qd qe qf qg qh bk">Modern Design Systems</h1><p id="09b5" class="pw-post-body-paragraph oc od gu oe b hs qi og oh hv qj oj ok ol qk on oo op ql or os ot qm ov ow ox gn bk">Design systems are comprehensive collections of reusable UI components, design guidelines, and best practices that ensure consistency and efficiency across digital products. They serve as a single source of truth for product teams, designers, and developers, facilitating a cohesive user experience.</p><p id="156b" class="pw-post-body-paragraph oc od gu oe b hs of og oh hv oi oj ok ol om on oo op oq or os ot ou ov ow ox gn bk">A well-structured design system typically includes:</p><ul class=""><li id="4e31" class="oc od gu oe b hs of og oh hv oi oj ok ol om on oo op oq or os ot ou ov ow ox qn qo qp bk"><strong class="oe gv">UI Components:</strong> Modular elements such as buttons, forms, and navigation menus that can be reused across various parts of an application.</li><li id="e16d" class="oc od gu oe b hs qq og oh hv qr oj ok ol qs on oo op qt or os ot qu ov ow ox qn qo qp bk"><strong class="oe gv">Design Patterns:</strong> Standardized solutions to common design challenges, promoting usability and consistency.</li><li id="8fe7" class="oc od gu oe b hs qq og oh hv qr oj ok ol qs on oo op qt or os ot qu ov ow ox qn qo qp bk"><strong class="oe gv">Style Guides:</strong> Documentation detailing typography, color palettes, spacing, and other visual elements to maintain a unified aesthetic.</li><li id="137b" class="oc od gu oe b hs qq og oh hv qr oj ok ol qs on oo op qt or os ot qu ov ow ox qn qo qp bk"><strong class="oe gv">Design Guidelines:</strong> Best practices and principles guiding the application of components and patterns within the system.</li><li id="9254" class="oc od gu oe b hs qq og oh hv qr oj ok ol qs on oo op qt or os ot qu ov ow ox qn qo qp bk"><strong class="oe gv">Design Tokens:</strong> Variables storing visual design attributes like colors and fonts, enabling easy updates and scalability.</li></ul><h2 id="8006" class="qv pn gu bf po qw qx dy pr qy qz ea pu ol ra rb rc op rd re rf ot rg rh ri rj bk">Composability is the Key</h2><p id="5ced" class="pw-post-body-paragraph oc od gu oe b hs qi og oh hv qj oj ok ol qk on oo op ql or os ot qm ov ow ox gn bk">In addition to these characteristics, the components in a modern design system need to be highly composable.</p><div class="rk rl rm rn ro rp"><a rel="noopener ugc nofollow" target="_blank" href="/composable-software-architectures-evolution-b8a40322bb99?source=post_page-----57a23b9c318b---------------------------------------"><div class="rq ab jj"><div class="rr ab co cb rs rt"><h2 class="bf gv ja z jp ru jr js rv ju jw gt bk">Composable Software Architectures are Trending: Here’s Why</h2><div class="rw l"><p class="bf b dv z jp ru jr js rv ju jw du">blog.bitsrc.io</p></div></div><div class="rx l"><div class="ry l rz sa sb rx sc mo rp"></div></div></div></a></div><figure class="nq nr ns nt nu nh nn no paragraph-image"><a href="https://bit.cloud/solutions/design-systems"><div class="nn no sd"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/0*0-ay-Sr_DXO3e3ke.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*0-ay-Sr_DXO3e3ke.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*0-ay-Sr_DXO3e3ke.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*0-ay-Sr_DXO3e3ke.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*0-ay-Sr_DXO3e3ke.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*0-ay-Sr_DXO3e3ke.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*0-ay-Sr_DXO3e3ke.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/0*0-ay-Sr_DXO3e3ke.png 640w, https://miro.medium.com/v2/resize:fit:720/0*0-ay-Sr_DXO3e3ke.png 720w, https://miro.medium.com/v2/resize:fit:750/0*0-ay-Sr_DXO3e3ke.png 750w, https://miro.medium.com/v2/resize:fit:786/0*0-ay-Sr_DXO3e3ke.png 786w, https://miro.medium.com/v2/resize:fit:828/0*0-ay-Sr_DXO3e3ke.png 828w, https://miro.medium.com/v2/resize:fit:1100/0*0-ay-Sr_DXO3e3ke.png 1100w, https://miro.medium.com/v2/resize:fit:1400/0*0-ay-Sr_DXO3e3ke.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh mo ob c" width="700" height="304" loading="lazy" role="presentation"/></picture></div></a><figcaption class="oz ff pa nn no pb pc bf b bg z du"><a class="af pd" href="https://bit.cloud/solutions/design-systems" rel="noopener ugc nofollow" target="_blank">Design System built with Components</a></figcaption></figure><blockquote class="se"><p id="42b3" class="sf sg gu bf sh si sj sk sl sm sn ox du">Developing these components also need specialized tools to develop them in isolation and test them in combination.</p></blockquote><p id="5ea7" class="pw-post-body-paragraph oc od gu oe b hs so og oh hv sp oj ok ol sq on oo op sr or os ot ss ov ow ox gn bk">The <a class="af pd" href="https://bit.dev" rel="noopener ugc nofollow" target="_blank">Bit platform</a> provides the foundation for developing these components efficiently, improving collaboration, and packaging them seamlessly for reuse across projects.</p><p id="9246" class="pw-post-body-paragraph oc od gu oe b hs of og oh hv oi oj ok ol om on oo op oq or os ot ou ov ow ox gn bk">This is crucial for maintaining a consistent design language that reflects your brand identity across all platforms, including your website, applications, and more.</p></div></div></div><div class="ab cb pe pf pg ph" role="separator"><span class="pi by bm pj pk pl"></span><span class="pi by bm pj pk pl"></span><span class="pi by bm pj pk"></span></div><div class="gn go gp gq gr"><div class="ab cb"><div class="ci bh fz ga gb gc"><h1 id="5fd2" class="pm pn gu bf po pp pq hu pr ps pt hx pu pv pw px py pz qa qb qc qd qe qf qg qh bk">Independent Components to Bridge the Gap</h1><p id="81c8" class="pw-post-body-paragraph oc od gu oe b hs qi og oh hv qj oj ok ol qk on oo op ql or os ot qm ov ow ox gn bk">When using AI for software development or design, its overall efficiency is often limited by two key challenges:</p><ol class=""><li id="c16f" class="oc od gu oe b hs of og oh hv oi oj ok ol om on oo op oq or os ot ou ov ow ox st qo qp bk"><strong class="oe gv">Providing the Right Context:</strong> Setting up the right context for the AI before making a request is crucial but can be time-consuming and error-prone.</li><li id="7858" class="oc od gu oe b hs qq og oh hv qr oj ok ol qs on oo op qt or os ot qu ov ow ox st qo qp bk"><strong class="oe gv">Crafting Effective Prompts:</strong> The clarity and specificity of prompts directly affect how well AI understands and fulfills the request.</li></ol><p id="d60e" class="pw-post-body-paragraph oc od gu oe b hs of og oh hv oi oj ok ol om on oo op oq or os ot ou ov ow ox gn bk">Like human developers, AI agents perform better and deliver more accurate results when working with smaller, well-defined, focused components.</p><ul class=""><li id="a33d" class="oc od gu oe b hs of og oh hv oi oj ok ol om on oo op oq or os ot ou ov ow ox qn qo qp bk"><strong class="oe gv">Defined Context and Boundaries:</strong> Components break down large codebases into smaller, well-defined units, making it easier for AI to understand the source code, dependencies, and interactions within a specific component.</li><li id="aa1f" class="oc od gu oe b hs qq og oh hv qr oj ok ol qs on oo op qt or os ot qu ov ow ox qn qo qp bk"><strong class="oe gv">Dependency Awareness:</strong> Tools like Bit make the dependency structure of components visible, allowing AI to identify the impact of changes across multiple components, ensuring smarter suggestions and minimizing errors.</li><li id="9cc0" class="oc od gu oe b hs qq og oh hv qr oj ok ol qs on oo op qt or os ot qu ov ow ox qn qo qp bk"><strong class="oe gv">Clear Instructions with Component Metadata:</strong> A component's structure and metadata provide a clear framework for AI, enabling precise code generation or functionality modification based on specific requirements.</li><li id="9346" class="oc od gu oe b hs qq og oh hv qr oj ok ol qs on oo op qt or os ot qu ov ow ox qn qo qp bk"><strong class="oe gv">Isolated Testing Environment:</strong> After generating or modifying a component, developers can test it in isolation using Bit’s development server and unit test execution, ensuring the changes work as expected without affecting the larger system.</li><li id="ecc5" class="oc od gu oe b hs qq og oh hv qr oj ok ol qs on oo op qt or os ot qu ov ow ox qn qo qp bk"><strong class="oe gv">Comprehensive In-Place Documentation:</strong> Each component’s in-place documentation provides AI with detailed information about its functionality, helping AI make more informed decisions during code generation or modification.</li></ul><p id="faa0" class="pw-post-body-paragraph oc od gu oe b hs of og oh hv oi oj ok ol om on oo op oq or os ot ou ov ow ox gn bk">Now, let’s look into how we can use the unique advantages of components and composability to develop design systems using AI.</p></div></div></div><div class="ab cb pe pf pg ph" role="separator"><span class="pi by bm pj pk pl"></span><span class="pi by bm pj pk pl"></span><span class="pi by bm pj pk"></span></div><div class="gn go gp gq gr"><div class="ab cb"><div class="ci bh fz ga gb gc"><h1 id="e070" class="pm pn gu bf po pp pq hu pr ps pt hx pu pv pw px py pz qa qb qc qd qe qf qg qh bk">Building Design Systems with AI</h1><p id="ad84" class="pw-post-body-paragraph oc od gu oe b hs qi og oh hv qj oj ok ol qk on oo op ql or os ot qm ov ow ox gn bk">When we build design systems, we rarely start from scratch. Most of the time, we pick and choose a matching UI library and use it as the base for the Design System. With components, we can start by creating or selecting the component in your Bit workspace.</p><p id="4b5d" class="pw-post-body-paragraph oc od gu oe b hs of og oh hv oi oj ok ol om on oo op oq or os ot ou ov ow ox gn bk">Then, prompt engineering can easily tell the AI and customize it. Different AI tools can aid this process at different levels.</p><h2 id="f217" class="qv pn gu bf po qw qx dy pr qy qz ea pu ol ra rb rc op rd re rf ot rg rh ri rj bk">Using ChatGPT</h2><p id="4ded" class="pw-post-body-paragraph oc od gu oe b hs qi og oh hv qj oj ok ol qk on oo op ql or os ot qm ov ow ox gn bk">Suppose you are adding the button component to your design system. If you are using ChatGPT, you can create a prompt referencing the Material button component documentation (if you are using MUI) and ask to build a wrapper code. If you are modifying an existing component, you can provide its documentation as instructions and then prompt for the modification.</p><blockquote class="se"><p id="4e98" class="sf sg gu bf sh si su sv sw sx sy ox du">But, one of the limiting factors is that you always have to provide referencing to the documentation explicitly before requesting changes.</p></blockquote><h2 id="6977" class="qv pn gu bf po qw sz dy pr qy ta ea pu ol tb rb rc op tc re rf ot td rh ri rj bk">Moving to HopeAI</h2><p id="8750" class="pw-post-body-paragraph oc od gu oe b hs qi og oh hv qj oj ok ol qk on oo op ql or os ot qm ov ow ox gn bk"><a class="af pd" href="https://bit.cloud/products/hope-ai" rel="noopener ugc nofollow" target="_blank">Hope AI</a> adds another level of intelligence tightly integrated with the Bit component ecosystem. It can directly read the documentation and understand the nature of your component structure and about other components.</p><figure class="nq nr ns nt nu nh nn no paragraph-image"><a href="https://bit.cloud/products/hope-ai"><div class="nn no te"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*kYI2IAjZ7LhgzZvo8D4Itw.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*kYI2IAjZ7LhgzZvo8D4Itw.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*kYI2IAjZ7LhgzZvo8D4Itw.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*kYI2IAjZ7LhgzZvo8D4Itw.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*kYI2IAjZ7LhgzZvo8D4Itw.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*kYI2IAjZ7LhgzZvo8D4Itw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*kYI2IAjZ7LhgzZvo8D4Itw.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*kYI2IAjZ7LhgzZvo8D4Itw.png 640w, https://miro.medium.com/v2/resize:fit:720/1*kYI2IAjZ7LhgzZvo8D4Itw.png 720w, https://miro.medium.com/v2/resize:fit:750/1*kYI2IAjZ7LhgzZvo8D4Itw.png 750w, https://miro.medium.com/v2/resize:fit:786/1*kYI2IAjZ7LhgzZvo8D4Itw.png 786w, https://miro.medium.com/v2/resize:fit:828/1*kYI2IAjZ7LhgzZvo8D4Itw.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*kYI2IAjZ7LhgzZvo8D4Itw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*kYI2IAjZ7LhgzZvo8D4Itw.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh mo ob c" width="700" height="495" loading="lazy" role="presentation"/></picture></div></a><figcaption class="oz ff pa nn no pb pc bf b bg z du"><a class="af pd" href="https://bit.cloud/products/hope-ai" rel="noopener ugc nofollow" target="_blank">Hope AI: Maximize Reuse</a></figcaption></figure><p id="23ca" class="pw-post-body-paragraph oc od gu oe b hs of og oh hv oi oj ok ol om on oo op oq or os ot ou ov ow ox gn bk">In addition, it is also integrated with the component lifecycle, where it can drive through the conversation until the changes are exported as a new component version.</p><figure class="nq nr ns nt nu nh nn no paragraph-image"><div class="nn no tf"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/0*uzKLwH-F6y0GXgRt.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*uzKLwH-F6y0GXgRt.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*uzKLwH-F6y0GXgRt.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*uzKLwH-F6y0GXgRt.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*uzKLwH-F6y0GXgRt.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*uzKLwH-F6y0GXgRt.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*uzKLwH-F6y0GXgRt.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/0*uzKLwH-F6y0GXgRt.png 640w, https://miro.medium.com/v2/resize:fit:720/0*uzKLwH-F6y0GXgRt.png 720w, https://miro.medium.com/v2/resize:fit:750/0*uzKLwH-F6y0GXgRt.png 750w, https://miro.medium.com/v2/resize:fit:786/0*uzKLwH-F6y0GXgRt.png 786w, https://miro.medium.com/v2/resize:fit:828/0*uzKLwH-F6y0GXgRt.png 828w, https://miro.medium.com/v2/resize:fit:1100/0*uzKLwH-F6y0GXgRt.png 1100w, https://miro.medium.com/v2/resize:fit:1400/0*uzKLwH-F6y0GXgRt.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh mo ob c" width="700" height="393" loading="lazy" role="presentation"/></picture></div><figcaption class="oz ff pa nn no pb pc bf b bg z du">Hope AI trigging CI and Exporting Components</figcaption></figure></div></div></div><div class="ab cb pe pf pg ph" role="separator"><span class="pi by bm pj pk pl"></span><span class="pi by bm pj pk pl"></span><span class="pi by bm pj pk"></span></div><div class="gn go gp gq gr"><div class="ab cb"><div class="ci bh fz ga gb gc"><h1 id="fb7e" class="pm pn gu bf po pp pq hu pr ps pt hx pu pv pw px py pz qa qb qc qd qe qf qg qh bk">Using Hope AI to Create a Design System</h1><figure class="nq nr ns nt nu nh nn no paragraph-image"><a href="https://bit.cloud/bitdesign"><div class="nn no tg"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*kJwRnNuyIYPQS6W1TO9FWA.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*kJwRnNuyIYPQS6W1TO9FWA.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*kJwRnNuyIYPQS6W1TO9FWA.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*kJwRnNuyIYPQS6W1TO9FWA.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*kJwRnNuyIYPQS6W1TO9FWA.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*kJwRnNuyIYPQS6W1TO9FWA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*kJwRnNuyIYPQS6W1TO9FWA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*kJwRnNuyIYPQS6W1TO9FWA.png 640w, https://miro.medium.com/v2/resize:fit:720/1*kJwRnNuyIYPQS6W1TO9FWA.png 720w, https://miro.medium.com/v2/resize:fit:750/1*kJwRnNuyIYPQS6W1TO9FWA.png 750w, https://miro.medium.com/v2/resize:fit:786/1*kJwRnNuyIYPQS6W1TO9FWA.png 786w, https://miro.medium.com/v2/resize:fit:828/1*kJwRnNuyIYPQS6W1TO9FWA.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*kJwRnNuyIYPQS6W1TO9FWA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*kJwRnNuyIYPQS6W1TO9FWA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh mo ob c" width="700" height="564" loading="eager" role="presentation"/></picture></div></a><figcaption class="oz ff pa nn no pb pc bf b bg z du"><a class="af pd" href="https://bit.cloud/bitdesign" rel="noopener ugc nofollow" target="_blank">Bit Base Design Systems: Using as the Foundation</a></figcaption></figure><p id="ac36" class="pw-post-body-paragraph oc od gu oe b hs of og oh hv oi oj ok ol om on oo op oq or os ot ou ov ow ox gn bk">Bit has already built multiple design systems you can use as the foundation. These components are available in <a class="af pd" href="https://bit.cloud/bitdesign" rel="noopener ugc nofollow" target="_blank">Bit Design Scope</a>.</p><p id="8800" class="pw-post-body-paragraph oc od gu oe b hs of og oh hv oi oj ok ol om on oo op oq or os ot ou ov ow ox gn bk">As the next step, you can fork any of these Bit scopes you prefer or visit <a class="af pd" href="https://bit.cloud" rel="noopener ugc nofollow" target="_blank">Bit Cloud</a> and ask Hope AI to do so.</p></div></div><div class="nh"><div class="ab cb"><div class="mj ni mk nj ml nk cf nl cg nm ci bh"><div class="nq nr ns nt nu ab lf"><figure class="mb nh th ti nv nw tj paragraph-image"><a href="https://bit.cloud/"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*FTU7NrCYbO4jqBdpVLFNNg.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*FTU7NrCYbO4jqBdpVLFNNg.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*FTU7NrCYbO4jqBdpVLFNNg.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*FTU7NrCYbO4jqBdpVLFNNg.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*FTU7NrCYbO4jqBdpVLFNNg.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*FTU7NrCYbO4jqBdpVLFNNg.png 1100w, https://miro.medium.com/v2/resize:fit:1116/format:webp/1*FTU7NrCYbO4jqBdpVLFNNg.png 1116w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 558px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*FTU7NrCYbO4jqBdpVLFNNg.png 640w, https://miro.medium.com/v2/resize:fit:720/1*FTU7NrCYbO4jqBdpVLFNNg.png 720w, https://miro.medium.com/v2/resize:fit:750/1*FTU7NrCYbO4jqBdpVLFNNg.png 750w, https://miro.medium.com/v2/resize:fit:786/1*FTU7NrCYbO4jqBdpVLFNNg.png 786w, https://miro.medium.com/v2/resize:fit:828/1*FTU7NrCYbO4jqBdpVLFNNg.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*FTU7NrCYbO4jqBdpVLFNNg.png 1100w, https://miro.medium.com/v2/resize:fit:1116/1*FTU7NrCYbO4jqBdpVLFNNg.png 1116w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 558px"/><img alt="" class="bh mo ob c" width="558" height="523" loading="eager" role="presentation"/></picture></a></figure><figure class="mb nh tk ti nv nw tj paragraph-image"><div role="button" tabindex="0" class="nx ny fj nz bh oa"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*4xLznhzCa0iABAxyqfwiWA.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*4xLznhzCa0iABAxyqfwiWA.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*4xLznhzCa0iABAxyqfwiWA.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*4xLznhzCa0iABAxyqfwiWA.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*4xLznhzCa0iABAxyqfwiWA.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*4xLznhzCa0iABAxyqfwiWA.png 1100w, https://miro.medium.com/v2/resize:fit:886/format:webp/1*4xLznhzCa0iABAxyqfwiWA.png 886w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 443px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*4xLznhzCa0iABAxyqfwiWA.png 640w, https://miro.medium.com/v2/resize:fit:720/1*4xLznhzCa0iABAxyqfwiWA.png 720w, https://miro.medium.com/v2/resize:fit:750/1*4xLznhzCa0iABAxyqfwiWA.png 750w, https://miro.medium.com/v2/resize:fit:786/1*4xLznhzCa0iABAxyqfwiWA.png 786w, https://miro.medium.com/v2/resize:fit:828/1*4xLznhzCa0iABAxyqfwiWA.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*4xLznhzCa0iABAxyqfwiWA.png 1100w, https://miro.medium.com/v2/resize:fit:886/1*4xLznhzCa0iABAxyqfwiWA.png 886w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 443px"/><img alt="" class="bh mo ob c" width="443" height="868" loading="eager" role="presentation"/></picture></div><figcaption class="oz ff pa nn no pb pc bf b bg z du tl fj tm tn">HopeAI to use React, Material UI Base</figcaption></figure></div></div></div></div><div class="ab cb"><div class="ci bh fz ga gb gc"><p id="395f" class="pw-post-body-paragraph oc od gu oe b hs of og oh hv oi oj ok ol om on oo op oq or os ot ou ov ow ox gn bk">Once HopeAI creates the design system scope and its components, you can edit any component directly from Bit Cloud. Click the <strong class="oe gv">“Edit component”</strong> button, and instantly, a Cloud Workspace will be created where you can modify its code interacting with HopeAI.</p></div></div><div class="nh"><div class="ab cb"><div class="mj ni mk nj ml nk cf nl cg nm ci bh"><div class="nq nr ns nt nu ab lf"><figure class="mb nh to ti nv nw tj paragraph-image"><div role="button" tabindex="0" class="nx ny fj nz bh oa"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*MKjEC_b_WRJ1R9-wwh8wQQ.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*MKjEC_b_WRJ1R9-wwh8wQQ.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*MKjEC_b_WRJ1R9-wwh8wQQ.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*MKjEC_b_WRJ1R9-wwh8wQQ.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*MKjEC_b_WRJ1R9-wwh8wQQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*MKjEC_b_WRJ1R9-wwh8wQQ.png 1100w, https://miro.medium.com/v2/resize:fit:1118/format:webp/1*MKjEC_b_WRJ1R9-wwh8wQQ.png 1118w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 559px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*MKjEC_b_WRJ1R9-wwh8wQQ.png 640w, https://miro.medium.com/v2/resize:fit:720/1*MKjEC_b_WRJ1R9-wwh8wQQ.png 720w, https://miro.medium.com/v2/resize:fit:750/1*MKjEC_b_WRJ1R9-wwh8wQQ.png 750w, https://miro.medium.com/v2/resize:fit:786/1*MKjEC_b_WRJ1R9-wwh8wQQ.png 786w, https://miro.medium.com/v2/resize:fit:828/1*MKjEC_b_WRJ1R9-wwh8wQQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*MKjEC_b_WRJ1R9-wwh8wQQ.png 1100w, https://miro.medium.com/v2/resize:fit:1118/1*MKjEC_b_WRJ1R9-wwh8wQQ.png 1118w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 559px"/><img alt="" class="bh mo ob c" width="559" height="653" loading="eager" role="presentation"/></picture></div></figure><figure class="mb nh tp ti nv nw tj paragraph-image"><div role="button" tabindex="0" class="nx ny fj nz bh oa"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/0*NH9iNvEXD4v2z6C9.gif 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*NH9iNvEXD4v2z6C9.gif 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*NH9iNvEXD4v2z6C9.gif 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*NH9iNvEXD4v2z6C9.gif 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*NH9iNvEXD4v2z6C9.gif 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*NH9iNvEXD4v2z6C9.gif 1100w, https://miro.medium.com/v2/resize:fit:884/format:webp/0*NH9iNvEXD4v2z6C9.gif 884w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 442px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/0*NH9iNvEXD4v2z6C9.gif 640w, https://miro.medium.com/v2/resize:fit:720/0*NH9iNvEXD4v2z6C9.gif 720w, https://miro.medium.com/v2/resize:fit:750/0*NH9iNvEXD4v2z6C9.gif 750w, https://miro.medium.com/v2/resize:fit:786/0*NH9iNvEXD4v2z6C9.gif 786w, https://miro.medium.com/v2/resize:fit:828/0*NH9iNvEXD4v2z6C9.gif 828w, https://miro.medium.com/v2/resize:fit:1100/0*NH9iNvEXD4v2z6C9.gif 1100w, https://miro.medium.com/v2/resize:fit:884/0*NH9iNvEXD4v2z6C9.gif 884w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 442px"/><img alt="" class="bh mo ob c" width="442" height="382" loading="eager" role="presentation"/></picture></div><figcaption class="oz ff pa nn no pb pc bf b bg z du tl fj tm tn">Editing Components from Bit Cloud</figcaption></figure></div></div></div></div></div><div class="ab cb pe pf pg ph" role="separator"><span class="pi by bm pj pk pl"></span><span class="pi by bm pj pk pl"></span><span class="pi by bm pj pk"></span></div><div class="gn go gp gq gr"><div class="ab cb"><div class="ci bh fz ga gb gc"><h1 id="ca87" class="pm pn gu bf po pp pq hu pr ps pt hx pu pv pw px py pz qa qb qc qd qe qf qg qh bk">Wrapping Up</h1><p id="a8cb" class="pw-post-body-paragraph oc od gu oe b hs qi og oh hv qj oj ok ol qk on oo op ql or os ot qm ov ow ox gn bk">AI is changing how we build design systems, making the process faster, easier, and more collaborative.</p><p id="b72f" class="pw-post-body-paragraph oc od gu oe b hs of og oh hv oi oj ok ol om on oo op oq or os ot ou ov ow ox gn bk">By breaking codebases into smaller, focused components, AI tools can better understand the structure, dependencies, and functionality. This makes it easier to generate accurate outputs and collaborate effectively. Components also simplify testing and reusing code, ensuring consistent project results.</p><p id="3294" class="pw-post-body-paragraph oc od gu oe b hs of og oh hv oi oj ok ol om on oo op oq or os ot ou ov ow ox gn bk">Tools like <strong class="oe gv">Hope AI,</strong> developed by <a class="af pd" href="https://bit.cloud" rel="noopener ugc nofollow" target="_blank"><strong class="oe gv">Bit</strong></a>, show how AI can help teams create scalable, reusable, and cohesive design systems with less effort. It integrates AI into every step of the component lifecycle. Hope AI can create, modify, test, and deploy components while ensuring changes don’t break anything else.</p><p id="bdbc" class="pw-post-body-paragraph oc od gu oe b hs of og oh hv oi oj ok ol om on oo op oq or os ot ou ov ow ox gn bk">This combination of <strong class="oe gv">composability</strong> and <strong class="oe gv">AI automation</strong> helps teams work smarter and faster without sacrificing quality.</p><p id="be6e" class="pw-post-body-paragraph oc od gu oe b hs of og oh hv oi oj ok ol om on oo op oq or os ot ou ov ow ox gn bk">Thanks for reading! Cheers!!</p></div></div></div><div class="ab cb pe pf pg ph" role="separator"><span class="pi by bm pj pk pl"></span><span class="pi by bm pj pk pl"></span><span class="pi by bm pj pk"></span></div><div class="gn go gp gq gr"><div class="ab cb"><div class="ci bh fz ga gb gc"><h1 id="1cbd" class="pm pn gu bf po pp pq hu pr ps pt hx pu pv pw px py pz qa qb qc qd qe qf qg qh bk">Learn More</h1><div class="rk rl rm rn ro rp"><a rel="noopener ugc nofollow" target="_blank" href="/building-composable-software-for-better-ai-human-collaboration-738f49d4a43c?source=post_page-----57a23b9c318b---------------------------------------"><div class="rq ab jj"><div class="rr ab co cb rs rt"><h2 class="bf gv ja z jp ru jr js rv ju jw gt bk">Why Components Are Essential for AI-Driven Software Development</h2><div class="tq l"><h3 class="bf b ja z jp ru jr js rv ju jw du">Building Composable Software for Better AI-Developer Collaboration</h3></div><div class="rw l"><p class="bf b dv z jp ru jr js rv ju jw du">blog.bitsrc.io</p></div></div><div class="rx l"><div class="tr l rz sa sb rx sc mo rp"></div></div></div></a></div><div class="rk rl rm rn ro rp"><a rel="noopener ugc nofollow" target="_blank" href="/headless-ui-libraries-for-react-top-5-e146145249fc?source=post_page-----57a23b9c318b---------------------------------------"><div class="rq ab jj"><div class="rr ab co cb rs rt"><h2 class="bf gv ja z jp ru jr js rv ju jw gt bk">Headless UI Libraries for React: Top 5</h2><div class="tq l"><h3 class="bf b ja z jp ru jr js rv ju jw du">These are the top 5 headless UI libraries you can try out for your next design system.</h3></div><div class="rw l"><p class="bf b dv z jp ru jr js rv ju jw du">blog.bitsrc.io</p></div></div><div class="rx l"><div class="ts l rz sa sb rx sc mo rp"></div></div></div></a></div><div class="rk rl rm rn ro rp"><a rel="noopener ugc nofollow" target="_blank" href="/hope-ai-a-code-assistant-for-composable-software-1991270d3af2?source=post_page-----57a23b9c318b---------------------------------------"><div class="rq ab jj"><div class="rr ab co cb rs rt"><h2 class="bf gv ja z jp ru jr js rv ju jw gt bk">Hope AI: A Code Assistant for Composable Software</h2><div class="tq l"><h3 class="bf b ja z jp ru jr js rv ju jw du">An AI assistant that understands your codebase, generates, builds, tests, and releases reusable components with…</h3></div><div class="rw l"><p class="bf b dv z jp ru jr js rv ju jw du">blog.bitsrc.io</p></div></div><div class="rx l"><div class="tt l rz sa sb rx sc mo rp"></div></div></div></a></div></div></div></div></div></section></div></div></article></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="tu tv ab jm"><div class="tq ab"><a class="tw ay am ao" href="https://medium.com/tag/softare-development?source=post_page-----57a23b9c318b---------------------------------------" rel="noopener follow"><div class="tx fj cx ty ge tz ua bf b bg z bk ub">Softare Development</div></a></div><div class="tq ab"><a class="tw ay am ao" href="https://medium.com/tag/front-end-development?source=post_page-----57a23b9c318b---------------------------------------" rel="noopener follow"><div class="tx fj cx ty ge tz ua bf b bg z bk ub">Front End Development</div></a></div><div class="tq ab"><a class="tw ay am ao" href="https://medium.com/tag/web-design?source=post_page-----57a23b9c318b---------------------------------------" rel="noopener follow"><div class="tx fj cx ty ge tz ua bf b bg z bk ub">Web Design</div></a></div><div class="tq ab"><a class="tw ay am ao" href="https://medium.com/tag/design-systems?source=post_page-----57a23b9c318b---------------------------------------" rel="noopener follow"><div class="tx fj cx ty ge tz ua bf b bg z bk ub">Design Systems</div></a></div><div class="tq ab"><a class="tw ay am ao" href="https://medium.com/tag/ui-library?source=post_page-----57a23b9c318b---------------------------------------" rel="noopener follow"><div class="tx fj cx ty ge tz ua bf b bg z bk ub">Ui Library</div></a></div></div></div></div><div class="l"></div><footer class="uc ud ue uf ug ab q uh iw c"><div class="l ae"><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="ab cp ui"><div class="ab q lf"><div class="uj l"><span class="l uk ul um e d"><div class="ab q lf lg"><div class="pw-multi-vote-icon fj jo lh li lj"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="footerClapButton" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fbitsrc%2F57a23b9c318b&operation=register&redirect=https%3A%2F%2Fblog.bitsrc.io%2Fbuilding-design-systems-with-ai-in-2025-57a23b9c318b&user=Ashan+Fernando&userId=c2b0e3fcee92&source=---footer_actions--57a23b9c318b---------------------clap_footer------------------" rel="noopener follow"><div><div class="bm" aria-hidden="false"><div class="lk ao ll lm ln lo am lp lq lr lj"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" d="M11.37.828 12 3.282l.63-2.454zM13.916 3.953l1.523-2.112-1.184-.39zM8.589 1.84l1.522 2.112-.337-2.501zM18.523 18.92c-.86.86-1.75 1.246-2.62 1.33a6 6 0 0 0 .407-.372c2.388-2.389 2.86-4.951 1.399-7.623l-.912-1.603-.79-1.672c-.26-.56-.194-.98.203-1.288a.7.7 0 0 1 .546-.132c.283.046.546.231.728.5l2.363 4.157c.976 1.624 1.141 4.237-1.324 6.702m-10.999-.438L3.37 14.328a.828.828 0 0 1 .585-1.408.83.83 0 0 1 .585.242l2.158 2.157a.365.365 0 0 0 .516-.516l-2.157-2.158-1.449-1.449a.826.826 0 0 1 1.167-1.17l3.438 3.44a.363.363 0 0 0 .516 0 .364.364 0 0 0 0-.516L5.293 9.513l-.97-.97a.826.826 0 0 1 0-1.166.84.84 0 0 1 1.167 0l.97.968 3.437 3.436a.36.36 0 0 0 .517 0 .366.366 0 0 0 0-.516L6.977 7.83a.82.82 0 0 1-.241-.584.82.82 0 0 1 .824-.826c.219 0 .43.087.584.242l5.787 5.787a.366.366 0 0 0 .587-.415l-1.117-2.363c-.26-.56-.194-.98.204-1.289a.7.7 0 0 1 .546-.132c.283.046.545.232.727.501l2.193 3.86c1.302 2.38.883 4.59-1.277 6.75-1.156 1.156-2.602 1.627-4.19 1.367-1.418-.236-2.866-1.033-4.079-2.246M10.75 5.971l2.12 2.12c-.41.502-.465 1.17-.128 1.89l.22.465-3.523-3.523a.8.8 0 0 1-.097-.368c0-.22.086-.428.241-.584a.847.847 0 0 1 1.167 0m7.355 1.705c-.31-.461-.746-.758-1.23-.837a1.44 1.44 0 0 0-1.11.275c-.312.24-.505.543-.59.881a1.74 1.74 0 0 0-.906-.465 1.47 1.47 0 0 0-.82.106l-2.182-2.182a1.56 1.56 0 0 0-2.2 0 1.54 1.54 0 0 0-.396.701 1.56 1.56 0 0 0-2.21-.01 1.55 1.55 0 0 0-.416.753c-.624-.624-1.649-.624-2.237-.037a1.557 1.557 0 0 0 0 2.2c-.239.1-.501.238-.715.453a1.56 1.56 0 0 0 0 2.2l.516.515a1.556 1.556 0 0 0-.753 2.615L7.01 19c1.32 1.319 2.909 2.189 4.475 2.449q.482.08.971.08c.85 0 1.653-.198 2.393-.579.231.033.46.054.686.054 1.266 0 2.457-.52 3.505-1.567 2.763-2.763 2.552-5.734 1.439-7.586z" clip-rule="evenodd"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l ls lt lu lv lw lx ly"><p class="bf b dv z du"><span class="lz">--</span></p></div></div></span><span class="l h g f un uo"><div class="ab q lf lg"><div class="pw-multi-vote-icon fj jo lh li lj"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="footerClapButton" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fbitsrc%2F57a23b9c318b&operation=register&redirect=https%3A%2F%2Fblog.bitsrc.io%2Fbuilding-design-systems-with-ai-in-2025-57a23b9c318b&user=Ashan+Fernando&userId=c2b0e3fcee92&source=---footer_actions--57a23b9c318b---------------------clap_footer------------------" rel="noopener follow"><div><div class="bm" aria-hidden="false"><div class="lk ao ll lm ln lo am lp lq lr lj"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" d="M11.37.828 12 3.282l.63-2.454zM13.916 3.953l1.523-2.112-1.184-.39zM8.589 1.84l1.522 2.112-.337-2.501zM18.523 18.92c-.86.86-1.75 1.246-2.62 1.33a6 6 0 0 0 .407-.372c2.388-2.389 2.86-4.951 1.399-7.623l-.912-1.603-.79-1.672c-.26-.56-.194-.98.203-1.288a.7.7 0 0 1 .546-.132c.283.046.546.231.728.5l2.363 4.157c.976 1.624 1.141 4.237-1.324 6.702m-10.999-.438L3.37 14.328a.828.828 0 0 1 .585-1.408.83.83 0 0 1 .585.242l2.158 2.157a.365.365 0 0 0 .516-.516l-2.157-2.158-1.449-1.449a.826.826 0 0 1 1.167-1.17l3.438 3.44a.363.363 0 0 0 .516 0 .364.364 0 0 0 0-.516L5.293 9.513l-.97-.97a.826.826 0 0 1 0-1.166.84.84 0 0 1 1.167 0l.97.968 3.437 3.436a.36.36 0 0 0 .517 0 .366.366 0 0 0 0-.516L6.977 7.83a.82.82 0 0 1-.241-.584.82.82 0 0 1 .824-.826c.219 0 .43.087.584.242l5.787 5.787a.366.366 0 0 0 .587-.415l-1.117-2.363c-.26-.56-.194-.98.204-1.289a.7.7 0 0 1 .546-.132c.283.046.545.232.727.501l2.193 3.86c1.302 2.38.883 4.59-1.277 6.75-1.156 1.156-2.602 1.627-4.19 1.367-1.418-.236-2.866-1.033-4.079-2.246M10.75 5.971l2.12 2.12c-.41.502-.465 1.17-.128 1.89l.22.465-3.523-3.523a.8.8 0 0 1-.097-.368c0-.22.086-.428.241-.584a.847.847 0 0 1 1.167 0m7.355 1.705c-.31-.461-.746-.758-1.23-.837a1.44 1.44 0 0 0-1.11.275c-.312.24-.505.543-.59.881a1.74 1.74 0 0 0-.906-.465 1.47 1.47 0 0 0-.82.106l-2.182-2.182a1.56 1.56 0 0 0-2.2 0 1.54 1.54 0 0 0-.396.701 1.56 1.56 0 0 0-2.21-.01 1.55 1.55 0 0 0-.416.753c-.624-.624-1.649-.624-2.237-.037a1.557 1.557 0 0 0 0 2.2c-.239.1-.501.238-.715.453a1.56 1.56 0 0 0 0 2.2l.516.515a1.556 1.556 0 0 0-.753 2.615L7.01 19c1.32 1.319 2.909 2.189 4.475 2.449q.482.08.971.08c.85 0 1.653-.198 2.393-.579.231.033.46.054.686.054 1.266 0 2.457-.52 3.505-1.567 2.763-2.763 2.552-5.734 1.439-7.586z" clip-rule="evenodd"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l ls lt lu lv lw lx ly"><p class="bf b dv z du"><span class="lz">--</span></p></div></div></span></div><div class="bq ab"><div><div class="bm" aria-hidden="false"><button class="ao lk mc md ab q fk me mf" aria-label="responses"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="mb"><path d="M18.006 16.803c1.533-1.456 2.234-3.325 2.234-5.321C20.24 7.357 16.709 4 12.191 4S4 7.357 4 11.482c0 4.126 3.674 7.482 8.191 7.482.817 0 1.622-.111 2.393-.327.231.2.48.391.744.559 1.06.693 2.203 1.044 3.399 1.044.224-.008.4-.112.486-.287a.49.49 0 0 0-.042-.518c-.495-.67-.845-1.364-1.04-2.057a4 4 0 0 1-.125-.598zm-3.122 1.055-.067-.223-.315.096a8 8 0 0 1-2.311.338c-4.023 0-7.292-2.955-7.292-6.587 0-3.633 3.269-6.588 7.292-6.588 4.014 0 7.112 2.958 7.112 6.593 0 1.794-.608 3.469-2.027 4.72l-.195.168v.255c0 .056 0 .151.016.295.025.231.081.478.154.733.154.558.398 1.117.722 1.659a5.3 5.3 0 0 1-2.165-.845c-.276-.176-.714-.383-.941-.59z"></path></svg><p class="bf b bg z du"><span class="pw-responses-count ma mb">1</span></p></button></div></div></div></div><div class="ab q"><div class="pl l jj"><div><div class="bm" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="footerBookmarkButton" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2F57a23b9c318b&operation=register&redirect=https%3A%2F%2Fblog.bitsrc.io%2Fbuilding-design-systems-with-ai-in-2025-57a23b9c318b&source=---footer_actions--57a23b9c318b---------------------bookmark_footer------------------" rel="noopener follow"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="du mh" aria-label="Add to list bookmark button"><path fill="currentColor" d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .805.396L12.5 17l5.695 4.396A.5.5 0 0 0 19 21v-8.5a.5.5 0 0 0-1 0v7.485l-5.195-4.012a.5.5 0 0 0-.61 0L7 19.985z"></path></svg></a></span></div></div></div><div class="pl l jj"><div class="bm" aria-hidden="false" aria-describedby="postFooterSocialMenu" aria-labelledby="postFooterSocialMenu"><div><div class="bm" aria-hidden="false"><button aria-controls="postFooterSocialMenu" aria-expanded="false" aria-label="Share Post" data-testid="footerSocialShareButton" class="af fk ah ai aj ak al mp an ao ap ex mq mr mf ms"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M15.218 4.931a.4.4 0 0 1-.118.132l.012.006a.45.45 0 0 1-.292.074.5.5 0 0 1-.3-.13l-2.02-2.02v7.07c0 .28-.23.5-.5.5s-.5-.22-.5-.5v-7.04l-2 2a.45.45 0 0 1-.57.04h-.02a.4.4 0 0 1-.16-.3.4.4 0 0 1 .1-.32l2.8-2.8a.5.5 0 0 1 .7 0l2.8 2.79a.42.42 0 0 1 .068.498m-.106.138.008.004v-.01zM16 7.063h1.5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-11c-1.1 0-2-.9-2-2v-10a2 2 0 0 1 2-2H8a.5.5 0 0 1 .35.15.5.5 0 0 1 .15.35.5.5 0 0 1-.15.35.5.5 0 0 1-.35.15H6.4c-.5 0-.9.4-.9.9v10.2a.9.9 0 0 0 .9.9h11.2c.5 0 .9-.4.9-.9v-10.2c0-.5-.4-.9-.9-.9H16a.5.5 0 0 1 0-1" clip-rule="evenodd"></path></svg></button></div></div></div></div></div></div></div></div></div></footer><div class="up l"><div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="uq l"><div class="ab ur us ut jl jk"><div class="uu uv uw ux uy uz va vb vc vd ab cp"><div class="h k"><a href="https://blog.bitsrc.io/?source=post_page---post_publication_info--57a23b9c318b---------------------------------------" rel="noopener follow"><div class="fj ab"><img alt="Bits and Pieces" class="ve in io cx" src="https://miro.medium.com/v2/resize:fill:96:96/1*7jl7ls1SeoNkYU742b9j1Q.png" width="48" height="48" loading="lazy"/><div class="ve l io in fs n fr vf"></div></div></a></div><div class="j i d"><a href="https://blog.bitsrc.io/?source=post_page---post_publication_info--57a23b9c318b---------------------------------------" rel="noopener follow"><div class="fj ab"><img alt="Bits and Pieces" class="ve vh vg cx" src="https://miro.medium.com/v2/resize:fill:128:128/1*7jl7ls1SeoNkYU742b9j1Q.png" width="64" height="64" loading="lazy"/><div class="ve l vg vh fs n fr vf"></div></div></a></div><div class="j i d vi jj"><div class="ab"><span><a class="bf b bg z vj tx vk vl vm vn vo ev ew vp vq vr fa fb fc fd bm fe ff" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fcollection%2Fbitsrc&operation=register&redirect=https%3A%2F%2Fblog.bitsrc.io%2Fbuilding-design-systems-with-ai-in-2025-57a23b9c318b&collection=Bits+and+Pieces&collectionId=5c2fdf847f4a&source=post_page---post_publication_info--57a23b9c318b---------------------follow_profile------------------" rel="noopener follow">Follow</a></span></div></div></div><div class="ab co rs"><div class="vs vt vu nj ni l"><a class="af ag ah aj ak al am an ao ap aq ar as at ab q" href="https://blog.bitsrc.io/?source=post_page---post_publication_info--57a23b9c318b---------------------------------------" rel="noopener follow"><h2 class="pw-author-name bf vw vx vy vz wa wb wc ol rb rc op re rf ot rh ri bk"><span class="gn vv">Published in <!-- -->Bits and Pieces</span></h2></a><div class="tq ab im"><div class="l jj"><span class="pw-follower-count bf b bg z du"><a class="af ag ah ai aj ak al am an ao ap aq ar jc" rel="noopener follow" href="/followers?source=post_page---post_publication_info--57a23b9c318b---------------------------------------">41K Followers</a></span></div><div class="bf b bg z du ab jn"><span class="jd l" aria-hidden="true"><span class="bf b bg z du">·</span></span><a class="af ag ah ai aj ak al am an ao ap aq ar jc" rel="noopener follow" href="/micro-frontends-achieving-full-team-autonomy-with-build-time-integration-35fbea3f8f07?source=post_page---post_publication_info--57a23b9c318b---------------------------------------">Last published <!-- -->4 days ago</a></div></div><div class="wd l"><p class="bf b bg z bk"><span class="gn">Insightful articles, step-by-step tutorials, and the latest news on full-stack composable software development</span></p></div></div></div><div class="h k"><div class="ab"><span><a class="bf b bg z vj tx vk vl vm vn vo ev ew vp vq vr fa fb fc fd bm fe ff" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fcollection%2Fbitsrc&operation=register&redirect=https%3A%2F%2Fblog.bitsrc.io%2Fbuilding-design-systems-with-ai-in-2025-57a23b9c318b&collection=Bits+and+Pieces&collectionId=5c2fdf847f4a&source=post_page---post_publication_info--57a23b9c318b---------------------follow_profile------------------" rel="noopener follow">Follow</a></span></div></div></div></div><div class="ab ur us ut jl jk"><div class="uu uv uw ux uy uz va vb vc vd ab cp"><div class="h k"><a tabindex="0" href="https://medium.com/@ashan.fernando?source=post_page---post_author_info--57a23b9c318b---------------------------------------" rel="noopener follow"><div class="l fj"><img alt="Ashan Fernando" class="l fd by io in cx" src="https://miro.medium.com/v2/resize:fill:96:96/1*XBsSZ82Vj4BavB4vrtSi3w.jpeg" width="48" height="48" loading="lazy"/><div class="fr by l io in fs n ay vf"></div></div></a></div><div class="j i d"><a tabindex="0" href="https://medium.com/@ashan.fernando?source=post_page---post_author_info--57a23b9c318b---------------------------------------" rel="noopener follow"><div class="l fj"><img alt="Ashan Fernando" class="l fd by vg vh cx" src="https://miro.medium.com/v2/resize:fill:128:128/1*XBsSZ82Vj4BavB4vrtSi3w.jpeg" width="64" height="64" loading="lazy"/><div class="fr by l vg vh fs n ay vf"></div></div></a></div><div class="j i d vi jj"><div class="ab"><span><a class="bf b bg z vj tx vk vl vm vn vo ev ew vp vq vr fa fb fc fd bm fe ff" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fuser%2Fc2b0e3fcee92&operation=register&redirect=https%3A%2F%2Fblog.bitsrc.io%2Fbuilding-design-systems-with-ai-in-2025-57a23b9c318b&user=Ashan+Fernando&userId=c2b0e3fcee92&source=post_page-c2b0e3fcee92--post_author_info--57a23b9c318b---------------------follow_profile------------------" rel="noopener follow">Follow</a></span></div></div></div><div class="ab co rs"><div class="vs vt vu nj ni l"><a class="af ag ah aj ak al am an ao ap aq ar as at ab q" href="https://medium.com/@ashan.fernando?source=post_page---post_author_info--57a23b9c318b---------------------------------------" rel="noopener follow"><h2 class="pw-author-name bf vw vx vy vz wa wb wc ol rb rc op re rf ot rh ri bk"><span class="gn vv">Written by <!-- -->Ashan Fernando</span></h2></a><div class="tq ab im"><div class="l jj"><span class="pw-follower-count bf b bg z du"><a class="af ag ah ai aj ak al am an ao ap aq ar jc" href="https://medium.com/@ashan.fernando/followers?source=post_page---post_author_info--57a23b9c318b---------------------------------------" rel="noopener follow">2.4K Followers</a></span></div><div class="bf b bg z du ab jn"><span class="jd l" aria-hidden="true"><span class="bf b bg z du">·</span></span><a class="af ag ah ai aj ak al am an ao ap aq ar jc" href="https://medium.com/@ashan.fernando/following?source=post_page---post_author_info--57a23b9c318b---------------------------------------" rel="noopener follow">37 Following</a></div></div><div class="wd l"><p class="bf b bg z bk">Solutions Architect and a Content Specialist. For more details find me in Linkedin <a class="af ag ah ai aj ak al am an ao ap aq ar pd go" href="https://www.linkedin.com/in/ashanfer/" rel="noopener ugc nofollow">https://www.linkedin.com/in/ashanfer/</a></p></div></div></div><div class="h k"><div class="ab"><span><a class="bf b bg z vj tx vk vl vm vn vo ev ew vp vq vr fa fb fc fd bm fe ff" href="https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fuser%2Fc2b0e3fcee92&operation=register&redirect=https%3A%2F%2Fblog.bitsrc.io%2Fbuilding-design-systems-with-ai-in-2025-57a23b9c318b&user=Ashan+Fernando&userId=c2b0e3fcee92&source=post_page-c2b0e3fcee92--post_author_info--57a23b9c318b---------------------follow_profile------------------" rel="noopener follow">Follow</a></span></div></div></div></div></div></div></div><div class="we wf wg wh wi l"><div class="wj bh r up"></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="ab q cp"><h2 class="bf vw pp hu pr ps hx pu pv px py pz qb qc qd qf qg bk">Responses (<!-- -->1<!-- -->)</h2><div class="ab wk"><div><div class="bm" aria-hidden="false"><a class="wl wm" href="https://policy.medium.com/medium-rules-30e5502c4eb4?source=post_page---post_responses--57a23b9c318b---------------------------------------" rel="noopener follow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25"><path fill-rule="evenodd" d="M11.987 5.036a.754.754 0 0 1 .914-.01c.972.721 1.767 1.218 2.6 1.543.828.322 1.719.485 2.887.505a.755.755 0 0 1 .741.757c-.018 3.623-.43 6.256-1.449 8.21-1.034 1.984-2.662 3.209-4.966 4.083a.75.75 0 0 1-.537-.003c-2.243-.874-3.858-2.095-4.897-4.074-1.024-1.951-1.457-4.583-1.476-8.216a.755.755 0 0 1 .741-.757c1.195-.02 2.1-.182 2.923-.503.827-.322 1.6-.815 2.519-1.535m.468.903c-.897.69-1.717 1.21-2.623 1.564-.898.35-1.856.527-3.026.565.037 3.45.469 5.817 1.36 7.515.884 1.684 2.25 2.762 4.284 3.571 2.092-.81 3.465-1.89 4.344-3.575.886-1.698 1.299-4.065 1.334-7.512-1.149-.039-2.091-.217-2.99-.567-.906-.353-1.745-.873-2.683-1.561m-.009 9.155a2.672 2.672 0 1 0 0-5.344 2.672 2.672 0 0 0 0 5.344m0 1a3.672 3.672 0 1 0 0-7.344 3.672 3.672 0 0 0 0 7.344m-1.813-3.777.525-.526.916.917 1.623-1.625.526.526-2.149 2.152z" clip-rule="evenodd"></path></svg></a></div></div></div></div><div class="wn wo wp wq wr ws wt l"></div><div class="pe l"><button class="bf b bg z bk tx wu wv ww mh me vo ev ew ex wx wy wz fa xa xb xc xd xe fb fc fd bm fe ff">See all responses</button></div></div></div></div><div class="xf xg xh xi xj l bx"><div class="h k j"><div class="wj bh xk xl"></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="xm ab lf jm"><div class="xn xo l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://help.medium.com/hc/en-us?source=post_page-----57a23b9c318b---------------------------------------" rel="noopener follow"><p class="bf b dv z du">Help</p></a></div><div class="xn xo l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://medium.statuspage.io/?source=post_page-----57a23b9c318b---------------------------------------" rel="noopener follow"><p class="bf b dv z du">Status</p></a></div><div class="xn xo l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://medium.com/about?autoplay=1&source=post_page-----57a23b9c318b---------------------------------------" rel="noopener follow"><p class="bf b dv z du">About</p></a></div><div class="xn xo l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://medium.com/jobs-at-medium/work-at-medium-959d1a85284e?source=post_page-----57a23b9c318b---------------------------------------" rel="noopener follow"><p class="bf b dv z du">Careers</p></a></div><div class="xn xo l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="mailto:pressinquiries@medium.com" rel="noopener follow"><p class="bf b dv z du">Press</p></a></div><div class="xn xo l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://blog.medium.com/?source=post_page-----57a23b9c318b---------------------------------------" rel="noopener follow"><p class="bf b dv z du">Blog</p></a></div><div class="xn xo l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://policy.medium.com/medium-privacy-policy-f03bf92035c9?source=post_page-----57a23b9c318b---------------------------------------" rel="noopener follow"><p class="bf b dv z du">Privacy</p></a></div><div class="xn xo l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://policy.medium.com/medium-terms-of-service-9db0094a1e0f?source=post_page-----57a23b9c318b---------------------------------------" rel="noopener follow"><p class="bf b dv z du">Terms</p></a></div><div class="xn xo l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://speechify.com/medium?source=post_page-----57a23b9c318b---------------------------------------" rel="noopener follow"><p class="bf b dv z du">Text to speech</p></a></div><div class="xn l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://medium.com/business?source=post_page-----57a23b9c318b---------------------------------------" rel="noopener follow"><p class="bf b dv z du">Teams</p></a></div></div></div></div></div></div></div></div></div></div><script>window.__BUILD_ID__="main-20250214-225023-b6ac233ec4"</script><script>window.__GRAPHQL_URI__ = "https://blog.bitsrc.io/_/graphql"</script><script>window.__PRELOADED_STATE__ = {"algolia":{"queries":{}},"cache":{"experimentGroupSet":true,"reason":"This request is not using the cache middleware worker","group":"disabled","tags":["group-edgeCachePosts","post-57a23b9c318b","user-c2b0e3fcee92","collection-5c2fdf847f4a"],"serverVariantState":"","middlewareEnabled":false,"cacheStatus":"DYNAMIC","shouldUseCache":false,"vary":[],"pubFeaturingPostPageLabelEnabled":false},"client":{"hydrated":false,"isUs":false,"isNativeMedium":false,"isSafariMobile":false,"isSafari":false,"isFirefox":false,"routingEntity":{"type":"COLLECTION","id":"5c2fdf847f4a","explicit":true},"viewerIsBot":false},"debug":{"requestId":"a106f9cd-9e05-4c1d-9a7c-8dcc7cb7f5fc","requestTag":"","hybridDevServices":[],"originalSpanCarrier":{"traceparent":"00-694d18f842ee87d49c3f3e8ab549287a-d33d2961cc33100a-01"}},"multiVote":{"clapsPerPost":{}},"navigation":{"branch":{"show":null,"hasRendered":null,"blockedByCTA":false},"hideGoogleOneTap":false,"hasRenderedAlternateUserBanner":null,"currentLocation":"https:\u002F\u002Fblog.bitsrc.io\u002Fbuilding-design-systems-with-ai-in-2025-57a23b9c318b","host":"blog.bitsrc.io","hostname":"blog.bitsrc.io","referrer":"","hasSetReferrer":false,"susiModal":{"step":null,"operation":"register"},"postRead":false,"partnerProgram":{"selectedCountryCode":null},"queryString":"?source=topic_portal---recommended_stories---design_systems---3-84--------------------65e15579_e11c_4f0e_9fa8_d49d08f85849-------"},"config":{"nodeEnv":"production","version":"main-20250214-225023-b6ac233ec4","target":"production","productName":"Medium","publicUrl":"https:\u002F\u002Fcdn-client.medium.com\u002Flite","authDomain":"medium.com","authGoogleClientId":"216296035834-k1k6qe060s2tp2a2jam4ljdcms00sttg.apps.googleusercontent.com","favicon":"production","glyphUrl":"https:\u002F\u002Fglyph.medium.com","branchKey":"key_live_ofxXr2qTrrU9NqURK8ZwEhknBxiI6KBm","algolia":{"appId":"MQ57UUUQZ2","apiKeySearch":"394474ced050e3911ae2249ecc774921","indexPrefix":"medium_","host":"-dsn.algolia.net"},"recaptchaKey":"6Lfc37IUAAAAAKGGtC6rLS13R1Hrw_BqADfS1LRk","recaptcha3Key":"6Lf8R9wUAAAAABMI_85Wb8melS7Zj6ziuf99Yot5","recaptchaEnterpriseKeyId":"6Le-uGgpAAAAAPprRaokM8AKthQ9KNGdoxaGUvVp","datadog":{"applicationId":"6702d87d-a7e0-42fe-bbcb-95b469547ea0","clientToken":"pub853ea8d17ad6821d9f8f11861d23dfed","rumToken":"pubf9cc52896502b9413b68ba36fc0c7162","context":{"deployment":{"target":"production","tag":"main-20250214-225023-b6ac233ec4","commit":"b6ac233ec4e33c48e304b373b7df8c338a410ef2"}},"datacenter":"us"},"googleAnalyticsCode":"G-7JY7T788PK","googlePay":{"apiVersion":"2","apiVersionMinor":"0","merchantId":"BCR2DN6TV7EMTGBM","merchantName":"Medium","instanceMerchantId":"13685562959212738550"},"applePay":{"version":3},"signInWallCustomDomainCollectionIds":["3a8144eabfe3","336d898217ee","61061eb0c96b","138adf9c44c","819cc2aaeee0"],"mediumMastodonDomainName":"me.dm","mediumOwnedAndOperatedCollectionIds":["8a9336e5bb4","b7e45b22fec3","193b68bd4fba","8d6b8a439e32","54c98c43354d","3f6ecf56618","d944778ce714","92d2092dc598","ae2a65f35510","1285ba81cada","544c7006046e","fc8964313712","40187e704f1c","88d9857e584e","7b6769f2748b","bcc38c8f6edf","cef6983b292","cb8577c9149e","444d13b52878","713d7dbc99b0","ef8e90590e66","191186aaafa0","55760f21cdc5","9dc80918cc93","bdc4052bbdba","8ccfed20cbb2"],"tierOneDomains":["medium.com","thebolditalic.com","arcdigital.media","towardsdatascience.com","uxdesign.cc","codeburst.io","psiloveyou.xyz","writingcooperative.com","entrepreneurshandbook.co","prototypr.io","betterhumans.coach.me","theascent.pub"],"topicsToFollow":["d61cf867d93f","8a146bc21b28","1eca0103fff3","4d562ee63426","aef1078a3ef5","e15e46793f8d","6158eb913466","55f1c20aba7a","3d18b94f6858","4861fee224fd","63c6f1f93ee","1d98b3a9a871","decb52b64abf","ae5d4995e225","830cded25262"],"topicToTagMappings":{"accessibility":"accessibility","addiction":"addiction","android-development":"android-development","art":"art","artificial-intelligence":"artificial-intelligence","astrology":"astrology","basic-income":"basic-income","beauty":"beauty","biotech":"biotech","blockchain":"blockchain","books":"books","business":"business","cannabis":"cannabis","cities":"cities","climate-change":"climate-change","comics":"comics","coronavirus":"coronavirus","creativity":"creativity","cryptocurrency":"cryptocurrency","culture":"culture","cybersecurity":"cybersecurity","data-science":"data-science","design":"design","digital-life":"digital-life","disability":"disability","economy":"economy","education":"education","equality":"equality","family":"family","feminism":"feminism","fiction":"fiction","film":"film","fitness":"fitness","food":"food","freelancing":"freelancing","future":"future","gadgets":"gadgets","gaming":"gaming","gun-control":"gun-control","health":"health","history":"history","humor":"humor","immigration":"immigration","ios-development":"ios-development","javascript":"javascript","justice":"justice","language":"language","leadership":"leadership","lgbtqia":"lgbtqia","lifestyle":"lifestyle","machine-learning":"machine-learning","makers":"makers","marketing":"marketing","math":"math","media":"media","mental-health":"mental-health","mindfulness":"mindfulness","money":"money","music":"music","neuroscience":"neuroscience","nonfiction":"nonfiction","outdoors":"outdoors","parenting":"parenting","pets":"pets","philosophy":"philosophy","photography":"photography","podcasts":"podcast","poetry":"poetry","politics":"politics","privacy":"privacy","product-management":"product-management","productivity":"productivity","programming":"programming","psychedelics":"psychedelics","psychology":"psychology","race":"race","relationships":"relationships","religion":"religion","remote-work":"remote-work","san-francisco":"san-francisco","science":"science","self":"self","self-driving-cars":"self-driving-cars","sexuality":"sexuality","social-media":"social-media","society":"society","software-engineering":"software-engineering","space":"space","spirituality":"spirituality","sports":"sports","startups":"startup","style":"style","technology":"technology","transportation":"transportation","travel":"travel","true-crime":"true-crime","tv":"tv","ux":"ux","venture-capital":"venture-capital","visual-design":"visual-design","work":"work","world":"world","writing":"writing"},"defaultImages":{"avatar":{"imageId":"1*dmbNkD5D-u45r44go_cf0g.png","height":150,"width":150},"orgLogo":{"imageId":"7*V1_7XP4snlmqrc_0Njontw.png","height":110,"width":500},"postLogo":{"imageId":"bd978bb536350a710e8efb012513429cabdc4c28700604261aeda246d0f980b7","height":810,"width":1440},"postPreviewImage":{"imageId":"1*hn4v1tCaJy7cWMyb0bpNpQ.png","height":386,"width":579}},"collectionStructuredData":{"8d6b8a439e32":{"name":"Elemental","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F980\u002F1*9ygdqoKprhwuTVKUM0DLPA@2x.png","width":980,"height":159}}},"3f6ecf56618":{"name":"Forge","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F596\u002F1*uULpIlImcO5TDuBZ6lm7Lg@2x.png","width":596,"height":183}}},"ae2a65f35510":{"name":"GEN","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F264\u002F1*RdVZMdvfV3YiZTw6mX7yWA.png","width":264,"height":140}}},"88d9857e584e":{"name":"LEVEL","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F540\u002F1*JqYMhNX6KNNb2UlqGqO2WQ.png","width":540,"height":108}}},"7b6769f2748b":{"name":"Marker","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F383\u002F1*haCUs0wF6TgOOvfoY-jEoQ@2x.png","width":383,"height":92}}},"444d13b52878":{"name":"OneZero","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F540\u002F1*cw32fIqCbRWzwJaoQw6BUg.png","width":540,"height":123}}},"8ccfed20cbb2":{"name":"Zora","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F540\u002F1*tZUQqRcCCZDXjjiZ4bDvgQ.png","width":540,"height":106}}}},"embeddedPostIds":{"coronavirus":"cd3010f9d81f"},"sharedCdcMessaging":{"COVID_APPLICABLE_TAG_SLUGS":[],"COVID_APPLICABLE_TOPIC_NAMES":[],"COVID_APPLICABLE_TOPIC_NAMES_FOR_TOPIC_PAGE":[],"COVID_MESSAGES":{"tierA":{"text":"For more information on the novel coronavirus and Covid-19, visit cdc.gov.","markups":[{"start":66,"end":73,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]},"tierB":{"text":"Anyone can publish on Medium per our Policies, but we don’t fact-check every story. For more info about the coronavirus, see cdc.gov.","markups":[{"start":37,"end":45,"href":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Fcategories\u002F201931128-Policies-Safety"},{"start":125,"end":132,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]},"paywall":{"text":"This article has been made free for everyone, thanks to Medium Members. For more information on the novel coronavirus and Covid-19, visit cdc.gov.","markups":[{"start":56,"end":70,"href":"https:\u002F\u002Fmedium.com\u002Fmembership"},{"start":138,"end":145,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]},"unbound":{"text":"This article is free for everyone, thanks to Medium Members. For more information on the novel coronavirus and Covid-19, visit cdc.gov.","markups":[{"start":45,"end":59,"href":"https:\u002F\u002Fmedium.com\u002Fmembership"},{"start":127,"end":134,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]}},"COVID_BANNER_POST_ID_OVERRIDE_WHITELIST":["3b31a67bff4a"]},"sharedVoteMessaging":{"TAGS":["politics","election-2020","government","us-politics","election","2020-presidential-race","trump","donald-trump","democrats","republicans","congress","republican-party","democratic-party","biden","joe-biden","maga"],"TOPICS":["politics","election"],"MESSAGE":{"text":"Find out more about the U.S. election results here.","markups":[{"start":46,"end":50,"href":"https:\u002F\u002Fcookpolitical.com\u002F2020-national-popular-vote-tracker"}]},"EXCLUDE_POSTS":["397ef29e3ca5"]},"embedPostRules":[],"recircOptions":{"v1":{"limit":3},"v2":{"limit":8}},"braintreeClientKey":"production_zjkj96jm_m56f8fqpf7ngnrd4","braintree":{"enabled":true,"merchantId":"m56f8fqpf7ngnrd4","merchantAccountId":{"usd":"AMediumCorporation_instant","eur":"amediumcorporation_EUR","cad":"amediumcorporation_CAD"},"publicKey":"ds2nn34bg2z7j5gd","braintreeEnvironment":"production","dashboardUrl":"https:\u002F\u002Fwww.braintreegateway.com\u002Fmerchants","gracePeriodDurationInDays":14,"mediumMembershipPlanId":{"monthly":"ce105f8c57a3","monthlyV2":"e8a5e126-792b-4ee6-8fba-d574c1b02fc5","monthlyWithTrial":"d5ee3dbe3db8","monthlyPremium":"fa741a9b47a2","yearly":"a40ad4a43185","yearlyV2":"3815d7d6-b8ca-4224-9b8c-182f9047866e","yearlyStaff":"d74fb811198a","yearlyWithTrial":"b3bc7350e5c7","yearlyPremium":"e21bd2c12166","monthlyOneYearFree":"e6c0637a-2bad-4171-ab4f-3c268633d83c","monthly25PercentOffFirstYear":"235ecc62-0cdb-49ae-9378-726cd21c504b","monthly20PercentOffFirstYear":"ba518864-9c13-4a99-91ca-411bf0cac756","monthly15PercentOffFirstYear":"594c029b-9f89-43d5-88f8-8173af4e070e","monthly10PercentOffFirstYear":"c6c7bc9a-40f2-4b51-8126-e28511d5bdb0","monthlyForStudents":"629ebe51-da7d-41fd-8293-34cd2f2030a8","yearlyOneYearFree":"78ba7be9-0d9f-4ece-aa3e-b54b826f2bf1","yearly25PercentOffFirstYear":"2dbb010d-bb8f-4eeb-ad5c-a08509f42d34","yearly20PercentOffFirstYear":"47565488-435b-47f8-bf93-40d5fbe0ebc8","yearly15PercentOffFirstYear":"8259809b-0881-47d9-acf7-6c001c7f720f","yearly10PercentOffFirstYear":"9dd694fb-96e1-472c-8d9e-3c868d5c1506","yearlyForStudents":"e29345ef-ab1c-4234-95c5-70e50fe6bc23","monthlyCad":"p52orjkaceei","yearlyCad":"h4q9g2up9ktt"},"braintreeDiscountId":{"oneMonthFree":"MONTHS_FREE_01","threeMonthsFree":"MONTHS_FREE_03","sixMonthsFree":"MONTHS_FREE_06","fiftyPercentOffOneYear":"FIFTY_PERCENT_OFF_ONE_YEAR"},"3DSecureVersion":"2","defaultCurrency":"usd","providerPlanIdCurrency":{"4ycw":"usd","rz3b":"usd","3kqm":"usd","jzw6":"usd","c2q2":"usd","nnsw":"usd","q8qw":"usd","d9y6":"usd","fx7w":"cad","nwf2":"cad"}},"paypalClientId":"AXj1G4fotC2GE8KzWX9mSxCH1wmPE3nJglf4Z2ig_amnhvlMVX87otaq58niAg9iuLktVNF_1WCMnN7v","paypal":{"host":"https:\u002F\u002Fapi.paypal.com:443","clientMode":"production","serverMode":"live","webhookId":"4G466076A0294510S","monthlyPlan":{"planId":"P-9WR0658853113943TMU5FDQA","name":"Medium Membership (Monthly) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"yearlyPlan":{"planId":"P-7N8963881P8875835MU5JOPQ","name":"Medium Membership (Annual) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"oneYearGift":{"name":"Medium Membership (1 Year, Digital Gift Code)","description":"Unlimited access to the best and brightest stories on Medium. Gift codes can be redeemed at medium.com\u002Fredeem.","price":"50.00","currency":"USD","sku":"membership-gift-1-yr"},"oldMonthlyPlan":{"planId":"P-96U02458LM656772MJZUVH2Y","name":"Medium Membership (Monthly)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"oldYearlyPlan":{"planId":"P-59P80963JF186412JJZU3SMI","name":"Medium Membership (Annual)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"monthlyPlanWithTrial":{"planId":"P-66C21969LR178604GJPVKUKY","name":"Medium Membership (Monthly) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"yearlyPlanWithTrial":{"planId":"P-6XW32684EX226940VKCT2MFA","name":"Medium Membership (Annual) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"oldMonthlyPlanNoSetupFee":{"planId":"P-4N046520HR188054PCJC7LJI","name":"Medium Membership (Monthly)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"oldYearlyPlanNoSetupFee":{"planId":"P-7A4913502Y5181304CJEJMXQ","name":"Medium Membership (Annual)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"sdkUrl":"https:\u002F\u002Fwww.paypal.com\u002Fsdk\u002Fjs"},"stripePublishableKey":"pk_live_7FReX44VnNIInZwrIIx6ghjl","log":{"json":true,"level":"info"},"imageUploadMaxSizeMb":25,"staffPicks":{"title":"Staff Picks","catalogId":"c7bc6e1ee00f"}},"session":{"xsrf":""}}</script><script>window.__APOLLO_STATE__ = {"ROOT_QUERY":{"__typename":"Query","viewer":null,"variantFlags":[{"__typename":"VariantFlag","name":"enable_google_webhook","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_update_explore_wtf","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_update_topic_portals_wtf","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"rex_generator_max_candidates","valueType":{"__typename":"VariantFlagNumber","value":1000}},{"__typename":"VariantFlag","name":"enable_moc_load_processor_first_story","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_recommended_publishers_query","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"disable_partner_program_enrollment","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_abandoned_paywall_promotion_email","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_iceland_forced_android","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_winback_promotion_email","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"available_monthly_plan","valueType":{"__typename":"VariantFlagString","value":"60e220181034"}},{"__typename":"VariantFlag","name":"enable_abandoned_cart_promotion_email","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_marketing_emails","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_premium_tier_badge","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"num_post_bottom_responses_to_show","valueType":{"__typename":"VariantFlagString","value":"3"}},{"__typename":"VariantFlag","name":"enable_tipping_v0_android","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_diversification_rex","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_lite_homepage","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_pub_featuring","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_mastodon_for_members","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_aurora_pub_follower_page","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_ios_dynamic_paywall_programming","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_enable_lock_responses","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_new_manage_membership_flow","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_eventstats_event_processing","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_enable_home_post_menu","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_custom_moc_preview_for_google_referrer","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"android_two_hour_refresh","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_braintree_trial_membership","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_engagement_service_publish_response","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_android_verified_author","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_tick_landing_page","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_trust_service_recaptcha","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"price_smoke_test_yearly","valueType":{"__typename":"VariantFlagString","value":""}},{"__typename":"VariantFlag","name":"signup_services","valueType":{"__typename":"VariantFlagString","value":"twitter,facebook,google,email,google-fastidv,google-one-tap,apple"}},{"__typename":"VariantFlag","name":"android_rating_prompt_stories_read_threshold","valueType":{"__typename":"VariantFlagNumber","value":2}},{"__typename":"VariantFlag","name":"enable_abandoned_paywall_email_experiment","valueType":{"__typename":"VariantFlagString","value":"control"}},{"__typename":"VariantFlag","name":"enable_braintree_paypal","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_sharer_create_post_share_key","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_ios_dynamic_paywall_aspiriational","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_braintree_integration","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_verifications_service","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"get_highlights_from_engagement","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_entities_to_follow_v2","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"browsable_stream_config_bucket","valueType":{"__typename":"VariantFlagString","value":"curated-topics"}},{"__typename":"VariantFlag","name":"enable_maim_the_meter","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_tag_recs","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_post_bottom_responses_input","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_newsletter_lo_flow_custom_domains","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_android_dynamic_aspirational_paywall","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_automod","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_lo_homepage","valueType":{"__typename":"VariantFlagString","value":"control"}},{"__typename":"VariantFlag","name":"enable_braintree_apple_pay","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_cancellation_discount_v1_email","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_lite_response_markup","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_pub_featuring_stats","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_lite_continue_this_thread","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_seamless_social_sharing","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_cancellation_discount_v1_1","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"skip_fs_cache_user_vals","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_group_gifting","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_susi_redesign_android","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"onboarding_tags_from_top_views","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_enable_friend_links_postpage_banners","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_ios_autorefresh","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"reader_fair_distribution_non_qp","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_sharer_validate_post_share_key","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"android_enable_image_sharer","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_post_bottom_responses","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_post_publish_permission_check","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_remove_twitter_onboarding_step","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_switch_plan_premium_tier","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_enable_verified_book_author","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"limit_post_referrers","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_author_cards_byline","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_mastodon_avatar_upload","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_android_offline_reading","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_pub_featuring_post_page_label","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"redefined_top_posts","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"can_receive_tips_v0","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_pp_country_expansion","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"allow_test_auth","valueType":{"__typename":"VariantFlagString","value":"disallow"}},{"__typename":"VariantFlag","name":"enable_updated_pub_recs_ui","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_rex_new_push_notification_endpoint","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_legacy_feed_in_iceland","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_moc_load_processor_all_recs_surfaces","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_ranker_v10","valueType":{"__typename":"VariantFlagString","value":"control"}},{"__typename":"VariantFlag","name":"enable_rito_upstream_deadlines","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_tipping_v0_ios","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_braintree_webhook","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_deprecate_legacy_providers_v3","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_in_app_free_trial","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_author_cards","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_lite_archive_page","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"mobile_custom_app_icon","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_android_miro_v2","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_boost_nia_v01","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_import","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_members_only_audio","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_apple_webhook","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_starspace","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_auto_follow_on_subscribe","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"android_enable_syntax_highlight","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_intrinsic_automatic_actions","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_rex_aggregator_v2","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"reengagement_notification_duration","valueType":{"__typename":"VariantFlagNumber","value":3}},{"__typename":"VariantFlag","name":"android_enable_friend_links_postpage_banners","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"available_annual_plan","valueType":{"__typename":"VariantFlagString","value":"2c754bcc2995"}},{"__typename":"VariantFlag","name":"enable_plans_page_branding_v2","valueType":{"__typename":"VariantFlagString","value":"control"}},{"__typename":"VariantFlag","name":"android_enable_topic_portals","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_google_one_tap","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_enable_friend_links_creation","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_plans_page_branding","valueType":{"__typename":"VariantFlagString","value":"control"}},{"__typename":"VariantFlag","name":"ios_display_paywall_after_onboarding","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_mastodon_for_members_username_selection","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_medium_com_canonical_urls","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_ml_rank_rex_anno","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"limit_user_follows","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_pill_based_home_feed","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_pp_v4","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_app_flirty_thirty","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_creator_welcome_email","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_boost_experiment","valueType":{"__typename":"VariantFlagString","value":"control"}},{"__typename":"VariantFlag","name":"enable_conversion_model_v2","valueType":{"__typename":"VariantFlagString","value":"group_2"}},{"__typename":"VariantFlag","name":"enable_speechify_ios","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"allow_access","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_apple_sign_in","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_tribute_landing_page","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_simplified_digest_v2_b","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"allow_signup","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_deviant_get_variant_flag_from_medium2","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_lite_server_upstream_deadlines","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_medium2_kbfd","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_plans_page_payment_form","valueType":{"__typename":"VariantFlagString","value":"group_1"}},{"__typename":"VariantFlag","name":"available_annual_premium_plan","valueType":{"__typename":"VariantFlagString","value":"4a442ace1476"}},{"__typename":"VariantFlag","name":"enable_conversion_ranker_v2","valueType":{"__typename":"VariantFlagString","value":"control"}},{"__typename":"VariantFlag","name":"enable_moc_load_processor_c","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_footer_app_buttons","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_hybrid_ranking_model","valueType":{"__typename":"VariantFlagString","value":"experiment"}},{"__typename":"VariantFlag","name":"enable_recirc_model","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_sprig","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_premium_tier","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_configure_pronouns","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_pre_pp_v4","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_recaptcha_enterprise","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_see_pronouns","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_susi_redesign_ios","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"android_enable_friend_links_creation","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"coronavirus_topic_recirc","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"android_enable_editor_new_publishing_flow","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_ios_easy_resubscribe","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"price_smoke_test_monthly","valueType":{"__typename":"VariantFlagString","value":""}},{"__typename":"VariantFlag","name":"can_send_tips_v0","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_bg_post_post","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_branch_io","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_post_bottom_responses_native","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"glyph_font_set","valueType":{"__typename":"VariantFlagString","value":"m2-unbound-source-serif-pro"}},{"__typename":"VariantFlag","name":"goliath_externalsearch_enable_comment_deindexation","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"signin_services","valueType":{"__typename":"VariantFlagString","value":"twitter,facebook,google,email,google-fastidv,google-one-tap,apple"}},{"__typename":"VariantFlag","name":"android_enable_lists_v2","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_braintree_client","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_rex_reading_history","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_iceland_nux","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"textshots_userid","valueType":{"__typename":"VariantFlagString","value":""}},{"__typename":"VariantFlag","name":"available_monthly_premium_plan","valueType":{"__typename":"VariantFlagString","value":"12a660186432"}},{"__typename":"VariantFlag","name":"enable_android_dynamic_programming_paywall","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_braintree_google_pay","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_new_stripe_customers","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_speechify_widget","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_ios_offline_reading","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"ios_social_share_sheet","valueType":{"__typename":"VariantFlagBoolean","value":true}},{"__typename":"VariantFlag","name":"enable_cache_less_following_feed","valueType":{"__typename":"VariantFlagBoolean","value":true}}],"collectionByDomainOrSlug({\"domainOrSlug\":\"blog.bitsrc.io\"})":{"__ref":"Collection:5c2fdf847f4a"},"postResult({\"id\":\"57a23b9c318b\"})":{"__ref":"Post:57a23b9c318b"}},"Collection:5c2fdf847f4a":{"__typename":"Collection","id":"5c2fdf847f4a","customStyleSheet":null,"colorPalette":{"__typename":"ColorPalette","highlightSpectrum":{"__typename":"ColorSpectrum","backgroundColor":"#FFFFFFFF","colorPoints":[{"__typename":"ColorPoint","color":"#FFF8F1EF","point":0},{"__typename":"ColorPoint","color":"#FFF7EFED","point":0.1},{"__typename":"ColorPoint","color":"#FFF5ECEB","point":0.2},{"__typename":"ColorPoint","color":"#FFF4EAE8","point":0.3},{"__typename":"ColorPoint","color":"#FFF3E8E6","point":0.4},{"__typename":"ColorPoint","color":"#FFF1E6E4","point":0.5},{"__typename":"ColorPoint","color":"#FFF0E4E2","point":0.6},{"__typename":"ColorPoint","color":"#FFEFE2DF","point":0.7},{"__typename":"ColorPoint","color":"#FFEDE0DD","point":0.8},{"__typename":"ColorPoint","color":"#FFECDEDB","point":0.9},{"__typename":"ColorPoint","color":"#FFEBDCD8","point":1}]},"defaultBackgroundSpectrum":{"__typename":"ColorSpectrum","backgroundColor":"#FFFFFFFF","colorPoints":[{"__typename":"ColorPoint","color":"#FF90807D","point":0},{"__typename":"ColorPoint","color":"#FF857875","point":0.1},{"__typename":"ColorPoint","color":"#FF7B6E6C","point":0.2},{"__typename":"ColorPoint","color":"#FF706563","point":0.3},{"__typename":"ColorPoint","color":"#FF655C5A","point":0.4},{"__typename":"ColorPoint","color":"#FF5A5250","point":0.5},{"__typename":"ColorPoint","color":"#FF4F4846","point":0.6},{"__typename":"ColorPoint","color":"#FF433D3C","point":0.7},{"__typename":"ColorPoint","color":"#FF373231","point":0.8},{"__typename":"ColorPoint","color":"#FF2A2625","point":0.9},{"__typename":"ColorPoint","color":"#FF1C1919","point":1}]},"tintBackgroundSpectrum":{"__typename":"ColorSpectrum","backgroundColor":"#FFFFECE8","colorPoints":[{"__typename":"ColorPoint","color":"#FFFFECE8","point":0},{"__typename":"ColorPoint","color":"#FFEDDBD7","point":0.1},{"__typename":"ColorPoint","color":"#FFDBC9C5","point":0.2},{"__typename":"ColorPoint","color":"#FFC8B6B3","point":0.3},{"__typename":"ColorPoint","color":"#FFB4A4A0","point":0.4},{"__typename":"ColorPoint","color":"#FFA0908D","point":0.5},{"__typename":"ColorPoint","color":"#FF8B7C79","point":0.6},{"__typename":"ColorPoint","color":"#FF756764","point":0.7},{"__typename":"ColorPoint","color":"#FF5E514E","point":0.8},{"__typename":"ColorPoint","color":"#FF453936","point":0.9},{"__typename":"ColorPoint","color":"#FF291E1C","point":1}]}},"favicon":{"__ref":"ImageMetadata:1*72WvVp4NqCU_4bfE6wCBEQ.png"},"domain":"blog.bitsrc.io","slug":"bitsrc","googleAnalyticsId":"UA-89811062-1","name":"Bits and Pieces","avatar":{"__ref":"ImageMetadata:1*7jl7ls1SeoNkYU742b9j1Q.png"},"description":"Insightful articles, step-by-step tutorials, and the latest news on full-stack composable software development","subscriberCount":41348,"latestPostsConnection({\"paging\":{\"limit\":1}})":{"__typename":"PostConnection","posts":[{"__ref":"Post:35fbea3f8f07"}]},"isAuroraVisible":false,"tintColor":"#FFFFECE8","newsletterV3":null,"viewerEdge":{"__ref":"CollectionViewerEdge:collectionId:5c2fdf847f4a-viewerId:lo_6293026efb7a"},"twitterUsername":"bitnpcs","facebookPageId":null,"logo":{"__ref":"ImageMetadata:1*yzhMNPxbUKEaqPSNsbgNCg.png"}},"ImageMetadata:1*72WvVp4NqCU_4bfE6wCBEQ.png":{"__typename":"ImageMetadata","id":"1*72WvVp4NqCU_4bfE6wCBEQ.png"},"ImageMetadata:1*7jl7ls1SeoNkYU742b9j1Q.png":{"__typename":"ImageMetadata","id":"1*7jl7ls1SeoNkYU742b9j1Q.png"},"User:8ec0911f1c05":{"__typename":"User","id":"8ec0911f1c05","customDomainState":{"__typename":"CustomDomainState","live":{"__typename":"CustomDomain","domain":"edenella.medium.com"}},"hasSubdomain":true,"username":"edenella"},"Post:35fbea3f8f07":{"__typename":"Post","id":"35fbea3f8f07","firstPublishedAt":1739403597581,"creator":{"__ref":"User:8ec0911f1c05"},"collection":{"__ref":"Collection:5c2fdf847f4a"},"isSeries":false,"mediumUrl":"https:\u002F\u002Fblog.bitsrc.io\u002Fmicro-frontends-achieving-full-team-autonomy-with-build-time-integration-35fbea3f8f07","sequence":null,"uniqueSlug":"micro-frontends-achieving-full-team-autonomy-with-build-time-integration-35fbea3f8f07"},"LinkedAccounts:c2b0e3fcee92":{"__typename":"LinkedAccounts","mastodon":null,"id":"c2b0e3fcee92"},"User:c2b0e3fcee92":{"__typename":"User","id":"c2b0e3fcee92","linkedAccounts":{"__ref":"LinkedAccounts:c2b0e3fcee92"},"isSuspended":false,"name":"Ashan Fernando","imageId":"1*XBsSZ82Vj4BavB4vrtSi3w.jpeg","customDomainState":null,"hasSubdomain":false,"username":"ashan.fernando","verifications":{"__typename":"VerifiedInfo","isBookAuthor":false},"socialStats":{"__typename":"SocialStats","followerCount":2455,"followingCount":28,"collectionFollowingCount":9},"bio":"Solutions Architect and a Content Specialist. For more details find me in Linkedin https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fashanfer\u002F","membership":null,"allowNotes":true,"viewerEdge":{"__ref":"UserViewerEdge:userId:c2b0e3fcee92-viewerId:lo_6293026efb7a"},"twitterScreenName":""},"Paragraph:7900450a1d63_0":{"__typename":"Paragraph","id":"7900450a1d63_0","name":"adc3","type":"H3","href":null,"layout":null,"metadata":null,"text":"Building Design Systems with AI in 2025","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_1":{"__typename":"Paragraph","id":"7900450a1d63_1","name":"9643","type":"H4","href":null,"layout":null,"metadata":null,"text":"How to build a modern design system using AI tools and technologies","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*W_aF4StMRSFtNDvXy9WWXQ.jpeg":{"__typename":"ImageMetadata","id":"1*W_aF4StMRSFtNDvXy9WWXQ.jpeg","originalHeight":1728,"originalWidth":2928,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:7900450a1d63_2":{"__typename":"Paragraph","id":"7900450a1d63_2","name":"bfd5","type":"IMG","href":null,"layout":"OUTSET_CENTER","metadata":{"__ref":"ImageMetadata:1*W_aF4StMRSFtNDvXy9WWXQ.jpeg"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_3":{"__typename":"Paragraph","id":"7900450a1d63_3","name":"40a1","type":"P","href":null,"layout":null,"metadata":null,"text":"Building cohesive and reusable design systems has always been a challenging task. It requires balancing creative design efforts, selecting the right UI libraries, and ensuring everything aligns with a consistent and unique design language.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_4":{"__typename":"Paragraph","id":"7900450a1d63_4","name":"86b7","type":"P","href":null,"layout":null,"metadata":null,"text":"However, AI-driven tools are revolutionizing this process, making it faster, more efficient, and collaborative, helping teams overcome traditional bottlenecks in design system development.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:0*fMNHz5563nWwImb3.gif":{"__typename":"ImageMetadata","id":"0*fMNHz5563nWwImb3.gif","originalHeight":382,"originalWidth":600,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:7900450a1d63_5":{"__typename":"Paragraph","id":"7900450a1d63_5","name":"c07e","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:0*fMNHz5563nWwImb3.gif"},"text":"Generating a new Bit component with Hope AI","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":0,"end":43,"href":"https:\u002F\u002Fbit.cloud","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_6":{"__typename":"Paragraph","id":"7900450a1d63_6","name":"f1fe","type":"P","href":null,"layout":null,"metadata":null,"text":"In this article, we explore how AI is reshaping design systems and examine the capabilities of Bit.dev’s Hope AI, and provide a practical guide to building modern design systems with minimal effort.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_7":{"__typename":"Paragraph","id":"7900450a1d63_7","name":"5e39","type":"H3","href":null,"layout":null,"metadata":null,"text":"Modern Design Systems","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_8":{"__typename":"Paragraph","id":"7900450a1d63_8","name":"09b5","type":"P","href":null,"layout":null,"metadata":null,"text":"Design systems are comprehensive collections of reusable UI components, design guidelines, and best practices that ensure consistency and efficiency across digital products. They serve as a single source of truth for product teams, designers, and developers, facilitating a cohesive user experience.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_9":{"__typename":"Paragraph","id":"7900450a1d63_9","name":"156b","type":"P","href":null,"layout":null,"metadata":null,"text":"A well-structured design system typically includes:","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_10":{"__typename":"Paragraph","id":"7900450a1d63_10","name":"4e31","type":"ULI","href":null,"layout":null,"metadata":null,"text":"UI Components: Modular elements such as buttons, forms, and navigation menus that can be reused across various parts of an application.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":14,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_11":{"__typename":"Paragraph","id":"7900450a1d63_11","name":"e16d","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Design Patterns: Standardized solutions to common design challenges, promoting usability and consistency.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":16,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_12":{"__typename":"Paragraph","id":"7900450a1d63_12","name":"8fe7","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Style Guides: Documentation detailing typography, color palettes, spacing, and other visual elements to maintain a unified aesthetic.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":13,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_13":{"__typename":"Paragraph","id":"7900450a1d63_13","name":"137b","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Design Guidelines: Best practices and principles guiding the application of components and patterns within the system.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":18,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_14":{"__typename":"Paragraph","id":"7900450a1d63_14","name":"9254","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Design Tokens: Variables storing visual design attributes like colors and fonts, enabling easy updates and scalability.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":14,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_15":{"__typename":"Paragraph","id":"7900450a1d63_15","name":"8006","type":"H4","href":null,"layout":null,"metadata":null,"text":"Composability is the Key","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_16":{"__typename":"Paragraph","id":"7900450a1d63_16","name":"5ced","type":"P","href":null,"layout":null,"metadata":null,"text":"In addition to these characteristics, the components in a modern design system need to be highly composable.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_17":{"__typename":"Paragraph","id":"7900450a1d63_17","name":"7db3","type":"MIXTAPE_EMBED","href":null,"layout":null,"metadata":null,"text":"Composable Software Architectures are Trending: Here’s Why\nblog.bitsrc.io","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":0,"end":73,"href":"https:\u002F\u002Fblog.bitsrc.io\u002Fcomposable-software-architectures-evolution-b8a40322bb99","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":0,"end":58,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":{"__typename":"MixtapeMetadata","href":"https:\u002F\u002Fblog.bitsrc.io\u002Fcomposable-software-architectures-evolution-b8a40322bb99","mediaResource":{"__typename":"MediaResource","mediumCatalog":null},"thumbnailImageId":"1*z7w62zg_ZdmURPEWquLe_w.jpeg"}},"ImageMetadata:0*0-ay-Sr_DXO3e3ke.png":{"__typename":"ImageMetadata","id":"0*0-ay-Sr_DXO3e3ke.png","originalHeight":780,"originalWidth":1800,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:7900450a1d63_18":{"__typename":"Paragraph","id":"7900450a1d63_18","name":"147b","type":"IMG","href":"https:\u002F\u002Fbit.cloud\u002Fsolutions\u002Fdesign-systems","layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:0*0-ay-Sr_DXO3e3ke.png"},"text":"Design System built with Components","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":0,"end":35,"href":"https:\u002F\u002Fbit.cloud\u002Fsolutions\u002Fdesign-systems","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_19":{"__typename":"Paragraph","id":"7900450a1d63_19","name":"42b3","type":"PQ","href":null,"layout":null,"metadata":null,"text":"Developing these components also need specialized tools to develop them in isolation and test them in combination.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_20":{"__typename":"Paragraph","id":"7900450a1d63_20","name":"5ea7","type":"P","href":null,"layout":null,"metadata":null,"text":"The Bit platform provides the foundation for developing these components efficiently, improving collaboration, and packaging them seamlessly for reuse across projects.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":4,"end":16,"href":"https:\u002F\u002Fbit.dev","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_21":{"__typename":"Paragraph","id":"7900450a1d63_21","name":"9246","type":"P","href":null,"layout":null,"metadata":null,"text":"This is crucial for maintaining a consistent design language that reflects your brand identity across all platforms, including your website, applications, and more.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_22":{"__typename":"Paragraph","id":"7900450a1d63_22","name":"5fd2","type":"H3","href":null,"layout":null,"metadata":null,"text":"Independent Components to Bridge the Gap","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_23":{"__typename":"Paragraph","id":"7900450a1d63_23","name":"81c8","type":"P","href":null,"layout":null,"metadata":null,"text":"When using AI for software development or design, its overall efficiency is often limited by two key challenges:","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_24":{"__typename":"Paragraph","id":"7900450a1d63_24","name":"c16f","type":"OLI","href":null,"layout":null,"metadata":null,"text":"Providing the Right Context: Setting up the right context for the AI before making a request is crucial but can be time-consuming and error-prone.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":28,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_25":{"__typename":"Paragraph","id":"7900450a1d63_25","name":"7858","type":"OLI","href":null,"layout":null,"metadata":null,"text":"Crafting Effective Prompts: The clarity and specificity of prompts directly affect how well AI understands and fulfills the request.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":27,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_26":{"__typename":"Paragraph","id":"7900450a1d63_26","name":"d60e","type":"P","href":null,"layout":null,"metadata":null,"text":"Like human developers, AI agents perform better and deliver more accurate results when working with smaller, well-defined, focused components.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_27":{"__typename":"Paragraph","id":"7900450a1d63_27","name":"a33d","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Defined Context and Boundaries: Components break down large codebases into smaller, well-defined units, making it easier for AI to understand the source code, dependencies, and interactions within a specific component.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":31,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_28":{"__typename":"Paragraph","id":"7900450a1d63_28","name":"aa1f","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Dependency Awareness: Tools like Bit make the dependency structure of components visible, allowing AI to identify the impact of changes across multiple components, ensuring smarter suggestions and minimizing errors.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":21,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_29":{"__typename":"Paragraph","id":"7900450a1d63_29","name":"9cc0","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Clear Instructions with Component Metadata: A component's structure and metadata provide a clear framework for AI, enabling precise code generation or functionality modification based on specific requirements.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":43,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_30":{"__typename":"Paragraph","id":"7900450a1d63_30","name":"9346","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Isolated Testing Environment: After generating or modifying a component, developers can test it in isolation using Bit’s development server and unit test execution, ensuring the changes work as expected without affecting the larger system.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":29,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_31":{"__typename":"Paragraph","id":"7900450a1d63_31","name":"ecc5","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Comprehensive In-Place Documentation: Each component’s in-place documentation provides AI with detailed information about its functionality, helping AI make more informed decisions during code generation or modification.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":37,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_32":{"__typename":"Paragraph","id":"7900450a1d63_32","name":"faa0","type":"P","href":null,"layout":null,"metadata":null,"text":"Now, let’s look into how we can use the unique advantages of components and composability to develop design systems using AI.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_33":{"__typename":"Paragraph","id":"7900450a1d63_33","name":"e070","type":"H3","href":null,"layout":null,"metadata":null,"text":"Building Design Systems with AI","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_34":{"__typename":"Paragraph","id":"7900450a1d63_34","name":"ad84","type":"P","href":null,"layout":null,"metadata":null,"text":"When we build design systems, we rarely start from scratch. Most of the time, we pick and choose a matching UI library and use it as the base for the Design System. With components, we can start by creating or selecting the component in your Bit workspace.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_35":{"__typename":"Paragraph","id":"7900450a1d63_35","name":"4b5d","type":"P","href":null,"layout":null,"metadata":null,"text":"Then, prompt engineering can easily tell the AI and customize it. Different AI tools can aid this process at different levels.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_36":{"__typename":"Paragraph","id":"7900450a1d63_36","name":"f217","type":"H4","href":null,"layout":null,"metadata":null,"text":"Using ChatGPT","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_37":{"__typename":"Paragraph","id":"7900450a1d63_37","name":"4ded","type":"P","href":null,"layout":null,"metadata":null,"text":"Suppose you are adding the button component to your design system. If you are using ChatGPT, you can create a prompt referencing the Material button component documentation (if you are using MUI) and ask to build a wrapper code. If you are modifying an existing component, you can provide its documentation as instructions and then prompt for the modification.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_38":{"__typename":"Paragraph","id":"7900450a1d63_38","name":"4e98","type":"PQ","href":null,"layout":null,"metadata":null,"text":"But, one of the limiting factors is that you always have to provide referencing to the documentation explicitly before requesting changes.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_39":{"__typename":"Paragraph","id":"7900450a1d63_39","name":"6977","type":"H4","href":null,"layout":null,"metadata":null,"text":"Moving to HopeAI","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_40":{"__typename":"Paragraph","id":"7900450a1d63_40","name":"8750","type":"P","href":null,"layout":null,"metadata":null,"text":"Hope AI adds another level of intelligence tightly integrated with the Bit component ecosystem. It can directly read the documentation and understand the nature of your component structure and about other components.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":0,"end":7,"href":"https:\u002F\u002Fbit.cloud\u002Fproducts\u002Fhope-ai","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*kYI2IAjZ7LhgzZvo8D4Itw.png":{"__typename":"ImageMetadata","id":"1*kYI2IAjZ7LhgzZvo8D4Itw.png","originalHeight":854,"originalWidth":1210,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:7900450a1d63_41":{"__typename":"Paragraph","id":"7900450a1d63_41","name":"75a4","type":"IMG","href":"https:\u002F\u002Fbit.cloud\u002Fproducts\u002Fhope-ai","layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*kYI2IAjZ7LhgzZvo8D4Itw.png"},"text":"Hope AI: Maximize Reuse","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":0,"end":23,"href":"https:\u002F\u002Fbit.cloud\u002Fproducts\u002Fhope-ai","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_42":{"__typename":"Paragraph","id":"7900450a1d63_42","name":"23ca","type":"P","href":null,"layout":null,"metadata":null,"text":"In addition, it is also integrated with the component lifecycle, where it can drive through the conversation until the changes are exported as a new component version.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:0*uzKLwH-F6y0GXgRt.png":{"__typename":"ImageMetadata","id":"0*uzKLwH-F6y0GXgRt.png","originalHeight":393,"originalWidth":700,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:7900450a1d63_43":{"__typename":"Paragraph","id":"7900450a1d63_43","name":"f8b0","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:0*uzKLwH-F6y0GXgRt.png"},"text":"Hope AI trigging CI and Exporting Components","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_44":{"__typename":"Paragraph","id":"7900450a1d63_44","name":"fb7e","type":"H3","href":null,"layout":null,"metadata":null,"text":"Using Hope AI to Create a Design System","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*kJwRnNuyIYPQS6W1TO9FWA.png":{"__typename":"ImageMetadata","id":"1*kJwRnNuyIYPQS6W1TO9FWA.png","originalHeight":1828,"originalWidth":2272,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:7900450a1d63_45":{"__typename":"Paragraph","id":"7900450a1d63_45","name":"1714","type":"IMG","href":"https:\u002F\u002Fbit.cloud\u002Fbitdesign","layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*kJwRnNuyIYPQS6W1TO9FWA.png"},"text":"Bit Base Design Systems: Using as the Foundation","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":0,"end":48,"href":"https:\u002F\u002Fbit.cloud\u002Fbitdesign","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_46":{"__typename":"Paragraph","id":"7900450a1d63_46","name":"ac36","type":"P","href":null,"layout":null,"metadata":null,"text":"Bit has already built multiple design systems you can use as the foundation. These components are available in Bit Design Scope.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":111,"end":127,"href":"https:\u002F\u002Fbit.cloud\u002Fbitdesign","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_47":{"__typename":"Paragraph","id":"7900450a1d63_47","name":"8800","type":"P","href":null,"layout":null,"metadata":null,"text":"As the next step, you can fork any of these Bit scopes you prefer or visit Bit Cloud and ask Hope AI to do so.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":75,"end":84,"href":"https:\u002F\u002Fbit.cloud","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*FTU7NrCYbO4jqBdpVLFNNg.png":{"__typename":"ImageMetadata","id":"1*FTU7NrCYbO4jqBdpVLFNNg.png","originalHeight":523,"originalWidth":882,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:7900450a1d63_48":{"__typename":"Paragraph","id":"7900450a1d63_48","name":"334d","type":"IMG","href":"https:\u002F\u002Fbit.cloud\u002F","layout":"OUTSET_ROW","metadata":{"__ref":"ImageMetadata:1*FTU7NrCYbO4jqBdpVLFNNg.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*4xLznhzCa0iABAxyqfwiWA.png":{"__typename":"ImageMetadata","id":"1*4xLznhzCa0iABAxyqfwiWA.png","originalHeight":868,"originalWidth":1164,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:7900450a1d63_49":{"__typename":"Paragraph","id":"7900450a1d63_49","name":"18e5","type":"IMG","href":null,"layout":"OUTSET_ROW_CONTINUE","metadata":{"__ref":"ImageMetadata:1*4xLznhzCa0iABAxyqfwiWA.png"},"text":"HopeAI to use React, Material UI Base","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_50":{"__typename":"Paragraph","id":"7900450a1d63_50","name":"395f","type":"P","href":null,"layout":null,"metadata":null,"text":"Once HopeAI creates the design system scope and its components, you can edit any component directly from Bit Cloud. Click the “Edit component” button, and instantly, a Cloud Workspace will be created where you can modify its code interacting with HopeAI.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":126,"end":142,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*MKjEC_b_WRJ1R9-wwh8wQQ.png":{"__typename":"ImageMetadata","id":"1*MKjEC_b_WRJ1R9-wwh8wQQ.png","originalHeight":653,"originalWidth":1295,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:7900450a1d63_51":{"__typename":"Paragraph","id":"7900450a1d63_51","name":"5751","type":"IMG","href":null,"layout":"OUTSET_ROW","metadata":{"__ref":"ImageMetadata:1*MKjEC_b_WRJ1R9-wwh8wQQ.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:0*NH9iNvEXD4v2z6C9.gif":{"__typename":"ImageMetadata","id":"0*NH9iNvEXD4v2z6C9.gif","originalHeight":382,"originalWidth":600,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:7900450a1d63_52":{"__typename":"Paragraph","id":"7900450a1d63_52","name":"1dca","type":"IMG","href":null,"layout":"OUTSET_ROW_CONTINUE","metadata":{"__ref":"ImageMetadata:0*NH9iNvEXD4v2z6C9.gif"},"text":"Editing Components from Bit Cloud","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_53":{"__typename":"Paragraph","id":"7900450a1d63_53","name":"ca87","type":"H3","href":null,"layout":null,"metadata":null,"text":"Wrapping Up","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_54":{"__typename":"Paragraph","id":"7900450a1d63_54","name":"a8cb","type":"P","href":null,"layout":null,"metadata":null,"text":"AI is changing how we build design systems, making the process faster, easier, and more collaborative.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_55":{"__typename":"Paragraph","id":"7900450a1d63_55","name":"b72f","type":"P","href":null,"layout":null,"metadata":null,"text":"By breaking codebases into smaller, focused components, AI tools can better understand the structure, dependencies, and functionality. This makes it easier to generate accurate outputs and collaborate effectively. Components also simplify testing and reusing code, ensuring consistent project results.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_56":{"__typename":"Paragraph","id":"7900450a1d63_56","name":"3294","type":"P","href":null,"layout":null,"metadata":null,"text":"Tools like Hope AI, developed by Bit, show how AI can help teams create scalable, reusable, and cohesive design systems with less effort. It integrates AI into every step of the component lifecycle. Hope AI can create, modify, test, and deploy components while ensuring changes don’t break anything else.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":33,"end":36,"href":"https:\u002F\u002Fbit.cloud","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":11,"end":19,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":33,"end":36,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_57":{"__typename":"Paragraph","id":"7900450a1d63_57","name":"bdbc","type":"P","href":null,"layout":null,"metadata":null,"text":"This combination of composability and AI automation helps teams work smarter and faster without sacrificing quality.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":20,"end":33,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":38,"end":51,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_58":{"__typename":"Paragraph","id":"7900450a1d63_58","name":"be6e","type":"P","href":null,"layout":null,"metadata":null,"text":"Thanks for reading! Cheers!!","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_59":{"__typename":"Paragraph","id":"7900450a1d63_59","name":"1cbd","type":"H3","href":null,"layout":null,"metadata":null,"text":"Learn More","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:7900450a1d63_60":{"__typename":"Paragraph","id":"7900450a1d63_60","name":"4dc2","type":"MIXTAPE_EMBED","href":null,"layout":null,"metadata":null,"text":"Why Components Are Essential for AI-Driven Software Development\nBuilding Composable Software for Better AI-Developer Collaborationblog.bitsrc.io","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":0,"end":144,"href":"https:\u002F\u002Fblog.bitsrc.io\u002Fbuilding-composable-software-for-better-ai-human-collaboration-738f49d4a43c","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":0,"end":63,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"EM","start":64,"end":130,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":{"__typename":"MixtapeMetadata","href":"https:\u002F\u002Fblog.bitsrc.io\u002Fbuilding-composable-software-for-better-ai-human-collaboration-738f49d4a43c","mediaResource":{"__typename":"MediaResource","mediumCatalog":null},"thumbnailImageId":"1*mgcst-JEjz8exGGkjEqHDw.jpeg"}},"Paragraph:7900450a1d63_61":{"__typename":"Paragraph","id":"7900450a1d63_61","name":"cd98","type":"MIXTAPE_EMBED","href":null,"layout":null,"metadata":null,"text":"Headless UI Libraries for React: Top 5\nThese are the top 5 headless UI libraries you can try out for your next design system.blog.bitsrc.io","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":0,"end":139,"href":"https:\u002F\u002Fblog.bitsrc.io\u002Fheadless-ui-libraries-for-react-top-5-e146145249fc","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":0,"end":38,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"EM","start":39,"end":125,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":{"__typename":"MixtapeMetadata","href":"https:\u002F\u002Fblog.bitsrc.io\u002Fheadless-ui-libraries-for-react-top-5-e146145249fc","mediaResource":{"__typename":"MediaResource","mediumCatalog":null},"thumbnailImageId":"1*k3_9Vzml20H8t1KR3_zpyg.jpeg"}},"Paragraph:7900450a1d63_62":{"__typename":"Paragraph","id":"7900450a1d63_62","name":"7cc5","type":"MIXTAPE_EMBED","href":null,"layout":null,"metadata":null,"text":"Hope AI: A Code Assistant for Composable Software\nAn AI assistant that understands your codebase, generates, builds, tests, and releases reusable components with…blog.bitsrc.io","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":0,"end":176,"href":"https:\u002F\u002Fblog.bitsrc.io\u002Fhope-ai-a-code-assistant-for-composable-software-1991270d3af2","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":0,"end":49,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"EM","start":50,"end":162,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":{"__typename":"MixtapeMetadata","href":"https:\u002F\u002Fblog.bitsrc.io\u002Fhope-ai-a-code-assistant-for-composable-software-1991270d3af2","mediaResource":{"__typename":"MediaResource","mediumCatalog":null},"thumbnailImageId":"1*cD4oKZDOua0p49WoD8s_xg.png"}},"CollectionViewerEdge:collectionId:5c2fdf847f4a-viewerId:lo_6293026efb7a":{"__typename":"CollectionViewerEdge","id":"collectionId:5c2fdf847f4a-viewerId:lo_6293026efb7a","isEditor":false,"isMuting":false},"UserViewerEdge:userId:c2b0e3fcee92-viewerId:lo_6293026efb7a":{"__typename":"UserViewerEdge","id":"userId:c2b0e3fcee92-viewerId:lo_6293026efb7a","isMuting":false},"ImageMetadata:1*yzhMNPxbUKEaqPSNsbgNCg.png":{"__typename":"ImageMetadata","id":"1*yzhMNPxbUKEaqPSNsbgNCg.png","originalWidth":1717,"originalHeight":427},"PostViewerEdge:postId:57a23b9c318b-viewerId:lo_6293026efb7a":{"__typename":"PostViewerEdge","shouldIndexPostForExternalSearch":true,"id":"postId:57a23b9c318b-viewerId:lo_6293026efb7a"},"Tag:softare-development":{"__typename":"Tag","id":"softare-development","displayTitle":"Softare Development","normalizedTagSlug":"softare-development"},"Tag:front-end-development":{"__typename":"Tag","id":"front-end-development","displayTitle":"Front End Development","normalizedTagSlug":"front-end-development"},"Tag:web-design":{"__typename":"Tag","id":"web-design","displayTitle":"Web Design","normalizedTagSlug":"web-design"},"Tag:design-systems":{"__typename":"Tag","id":"design-systems","displayTitle":"Design Systems","normalizedTagSlug":"design-systems"},"Tag:ui-library":{"__typename":"Tag","id":"ui-library","displayTitle":"Ui Library","normalizedTagSlug":"ui-library"},"Post:57a23b9c318b":{"__typename":"Post","id":"57a23b9c318b","collection":{"__ref":"Collection:5c2fdf847f4a"},"content({\"postMeteringOptions\":{\"referrer\":\"\"}})":{"__typename":"PostContent","isLockedPreviewOnly":false,"bodyModel":{"__typename":"RichText","sections":[{"__typename":"Section","name":"d059","startIndex":0,"textLayout":null,"imageLayout":null,"backgroundImage":null,"videoLayout":null,"backgroundVideo":null},{"__typename":"Section","name":"c5d6","startIndex":7,"textLayout":null,"imageLayout":null,"backgroundImage":null,"videoLayout":null,"backgroundVideo":null},{"__typename":"Section","name":"4f0a","startIndex":22,"textLayout":null,"imageLayout":null,"backgroundImage":null,"videoLayout":null,"backgroundVideo":null},{"__typename":"Section","name":"fdfd","startIndex":33,"textLayout":null,"imageLayout":null,"backgroundImage":null,"videoLayout":null,"backgroundVideo":null},{"__typename":"Section","name":"d17f","startIndex":44,"textLayout":null,"imageLayout":null,"backgroundImage":null,"videoLayout":null,"backgroundVideo":null},{"__typename":"Section","name":"043e","startIndex":53,"textLayout":null,"imageLayout":null,"backgroundImage":null,"videoLayout":null,"backgroundVideo":null},{"__typename":"Section","name":"c20c","startIndex":59,"textLayout":null,"imageLayout":null,"backgroundImage":null,"videoLayout":null,"backgroundVideo":null}],"paragraphs":[{"__ref":"Paragraph:7900450a1d63_0"},{"__ref":"Paragraph:7900450a1d63_1"},{"__ref":"Paragraph:7900450a1d63_2"},{"__ref":"Paragraph:7900450a1d63_3"},{"__ref":"Paragraph:7900450a1d63_4"},{"__ref":"Paragraph:7900450a1d63_5"},{"__ref":"Paragraph:7900450a1d63_6"},{"__ref":"Paragraph:7900450a1d63_7"},{"__ref":"Paragraph:7900450a1d63_8"},{"__ref":"Paragraph:7900450a1d63_9"},{"__ref":"Paragraph:7900450a1d63_10"},{"__ref":"Paragraph:7900450a1d63_11"},{"__ref":"Paragraph:7900450a1d63_12"},{"__ref":"Paragraph:7900450a1d63_13"},{"__ref":"Paragraph:7900450a1d63_14"},{"__ref":"Paragraph:7900450a1d63_15"},{"__ref":"Paragraph:7900450a1d63_16"},{"__ref":"Paragraph:7900450a1d63_17"},{"__ref":"Paragraph:7900450a1d63_18"},{"__ref":"Paragraph:7900450a1d63_19"},{"__ref":"Paragraph:7900450a1d63_20"},{"__ref":"Paragraph:7900450a1d63_21"},{"__ref":"Paragraph:7900450a1d63_22"},{"__ref":"Paragraph:7900450a1d63_23"},{"__ref":"Paragraph:7900450a1d63_24"},{"__ref":"Paragraph:7900450a1d63_25"},{"__ref":"Paragraph:7900450a1d63_26"},{"__ref":"Paragraph:7900450a1d63_27"},{"__ref":"Paragraph:7900450a1d63_28"},{"__ref":"Paragraph:7900450a1d63_29"},{"__ref":"Paragraph:7900450a1d63_30"},{"__ref":"Paragraph:7900450a1d63_31"},{"__ref":"Paragraph:7900450a1d63_32"},{"__ref":"Paragraph:7900450a1d63_33"},{"__ref":"Paragraph:7900450a1d63_34"},{"__ref":"Paragraph:7900450a1d63_35"},{"__ref":"Paragraph:7900450a1d63_36"},{"__ref":"Paragraph:7900450a1d63_37"},{"__ref":"Paragraph:7900450a1d63_38"},{"__ref":"Paragraph:7900450a1d63_39"},{"__ref":"Paragraph:7900450a1d63_40"},{"__ref":"Paragraph:7900450a1d63_41"},{"__ref":"Paragraph:7900450a1d63_42"},{"__ref":"Paragraph:7900450a1d63_43"},{"__ref":"Paragraph:7900450a1d63_44"},{"__ref":"Paragraph:7900450a1d63_45"},{"__ref":"Paragraph:7900450a1d63_46"},{"__ref":"Paragraph:7900450a1d63_47"},{"__ref":"Paragraph:7900450a1d63_48"},{"__ref":"Paragraph:7900450a1d63_49"},{"__ref":"Paragraph:7900450a1d63_50"},{"__ref":"Paragraph:7900450a1d63_51"},{"__ref":"Paragraph:7900450a1d63_52"},{"__ref":"Paragraph:7900450a1d63_53"},{"__ref":"Paragraph:7900450a1d63_54"},{"__ref":"Paragraph:7900450a1d63_55"},{"__ref":"Paragraph:7900450a1d63_56"},{"__ref":"Paragraph:7900450a1d63_57"},{"__ref":"Paragraph:7900450a1d63_58"},{"__ref":"Paragraph:7900450a1d63_59"},{"__ref":"Paragraph:7900450a1d63_60"},{"__ref":"Paragraph:7900450a1d63_61"},{"__ref":"Paragraph:7900450a1d63_62"}]},"validatedShareKey":"","shareKeyCreator":null},"creator":{"__ref":"User:c2b0e3fcee92"},"inResponseToEntityType":null,"isLocked":false,"isMarkedPaywallOnly":false,"lockedSource":"LOCKED_POST_SOURCE_NONE","mediumUrl":"https:\u002F\u002Fblog.bitsrc.io\u002Fbuilding-design-systems-with-ai-in-2025-57a23b9c318b","primaryTopic":null,"topics":[{"__typename":"Topic","slug":"design"},{"__typename":"Topic","slug":"programming"}],"isLimitedState":false,"isPublished":true,"allowResponses":true,"latestPublishedVersion":"7900450a1d63","visibility":"PUBLIC","postResponses":{"__typename":"PostResponses","count":1},"responseDistribution":"NOT_DISTRIBUTED","clapCount":113,"title":"Building Design Systems with AI in 2025","isSeries":false,"sequence":null,"uniqueSlug":"building-design-systems-with-ai-in-2025-57a23b9c318b","socialTitle":"","socialDek":"","canonicalUrl":"","metaDescription":"","latestPublishedAt":1732305727431,"readingTime":5.382075471698113,"previewContent":{"__typename":"PreviewContent","subtitle":"How to build a modern design system using AI tools and technologies"},"previewImage":{"__ref":"ImageMetadata:1*W_aF4StMRSFtNDvXy9WWXQ.jpeg"},"isShortform":false,"seoTitle":"","firstPublishedAt":1732305727431,"updatedAt":1732330763872,"shortformType":"SHORTFORM_TYPE_LINK","seoDescription":"","viewerEdge":{"__ref":"PostViewerEdge:postId:57a23b9c318b-viewerId:lo_6293026efb7a"},"isSuspended":false,"license":"ALL_RIGHTS_RESERVED","tags":[{"__ref":"Tag:softare-development"},{"__ref":"Tag:front-end-development"},{"__ref":"Tag:web-design"},{"__ref":"Tag:design-systems"},{"__ref":"Tag:ui-library"}],"isFeaturedInPublishedPublication":false,"isNewsletter":false,"statusForCollection":"APPROVED","pendingCollection":null,"detectedLanguage":"en","wordCount":1095,"layerCake":0,"responsesLocked":false}}</script><script src="https://cdn-client.medium.com/lite/static/js/manifest.8b67b313.js"></script><script src="https://cdn-client.medium.com/lite/static/js/9865.1496d74a.js"></script><script src="https://cdn-client.medium.com/lite/static/js/main.94ea62ed.js"></script><script src="https://cdn-client.medium.com/lite/static/js/instrumentation.5bef8967.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/reporting.ff22a7a5.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/9120.5df29668.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5049.d1ead72d.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/4505.6dfaf853.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6618.db187378.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/9380.fb176dee.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2707.dc8dbee4.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/9977.933c1c9a.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8599.68bc318b.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/3045.1cc3d8cb.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6349.3329b100.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2648.26563adf.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8393.a4ecfb83.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6428.36238b5a.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6199.6da73f3b.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5642.7d9f7f3d.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6546.67eb283b.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6834.8aa8d357.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/4492.0c3e1a1d.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2571.6814b962.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/839.1c286b32.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6128.f8800a13.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2135.2e8dc177.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/7975.60bcefe8.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/144.86429b48.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5240.6281357f.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8819.c627c2bf.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8204.d0637ed0.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/PostPage.MainContent.c3ee9367.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8414.0d800846.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/3974.8d3e0217.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2527.18a8996d.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/PostResponsesContent.e1e580cb.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/responses.editor.e89462cb.chunk.js"></script><script>window.main();</script></body></html>