[{"data":1,"prerenderedAt":1453},["ShallowReactive",2],{"blog-list":3},[4,774,1042,1258,1413,1434],{"id":5,"title":6,"aiSummary":7,"articleSection":8,"author":9,"body":13,"breadcrumbs":740,"cover":23,"cta":748,"date":749,"dateModified":749,"datePublished":749,"description":750,"extension":751,"externalUrl":752,"faq":752,"footerCta":7,"footerCtaLabel":719,"footerCtaText":753,"howToDescription":752,"howToName":752,"howToSteps":752,"howToTotalTime":752,"image":752,"imageHeight":752,"imageWidth":752,"keywords":754,"lang":764,"meta":765,"navigation":595,"path":766,"publisher":752,"readingTime":334,"seo":767,"source":752,"stem":768,"tags":769,"type":772,"wordCount":752,"__hash__":773},"blog\u002Fblog\u002Fvibe-coded-ai-design-system-cleanup.md","I vibe-coded my site with AI. Here's what the cleanup revealed.",false,"Design System",{"name":10,"url":11,"jobTitle":12},"Sophie Boulaaouli","https:\u002F\u002Fprodju.com","Product Designer & Fondatrice",{"type":14,"value":15,"toc":728},"minimark",[16,25,28,39,42,45,50,58,76,84,91,94,96,100,111,114,122,125,127,131,134,140,145,151,213,220,226,230,237,384,403,406,466,469,473,476,532,535,553,557,563,569,610,612,616,619,638,641,644,659,661,665,668,683,690,699,702,704,714,724],[17,18,19],"p",{},[20,21],"img",{"alt":22,"src":23,"style":24},"I vibe-coded my site with AI, design system cleanup","\u002Fimages\u002Fvibe-coded-ai-design-system.png","border-radius: 0.75rem; margin-bottom: 2rem",[17,26,27],{},"I was going fast. The CSS wasn't clean, hardcoded values scattered everywhere, z-indexes pulled from thin air, the same orange hex repeated in five files. I told myself I'd fix it later.",[17,29,30,31,38],{},"Then I came across ",[32,33,37],"a",{"href":34,"rel":35},"https:\u002F\u002Fhvpandya.com\u002Fllm-design-systems",[36],"nofollow","Hardik Pandya's article on exposing your design system to LLMs",". \"Later\" finally had a method.",[17,40,41],{},"Pandya's piece genuinely shifted how I think about design systems in an AI workflow. From \"documentation designers maintain\" to \"constraints AI agents read at session start\". Everything below is built on top of that shift. It's not a review of the prompt (which works exactly as described), but a look at the four things I had to fix manually after running it.",[43,44],"hr",{},[46,47,49],"h2",{"id":48},"the-problem-the-ai-doesnt-read-your-variables","The problem: the AI doesn't read your variables",[17,51,52,53,57],{},"My site is built with Nuxt + SCSS + Claude Code. I'd done the right things upfront: a spacing scale, named colors, a radius system. My ",[54,55,56],"code",{},"_variables.scss"," was tidy. None of it was being used.",[17,59,60,61,64,65,64,68,71,72,75],{},"When you describe components to an AI in natural language, the AI doesn't go look up your tokens. It writes what seems reasonable. ",[54,62,63],{},"z-index: 2",". ",[54,66,67],{},"padding: 14px",[54,69,70],{},"#ff6b35",", even though ",[54,73,74],{},"$color-primary"," is sitting right there in the variables file. Each choice looks fine in isolation. Together, it's silent inconsistency, the kind you feel before you can name it.",[17,77,78,79,83],{},"Running Pandya's audit across 27 files confirmed it: ",[80,81,82],"strong",{},"~350 hardcoded values",". My primary orange appearing 5 times as a raw hex. 55+ unique pixel spacing values. 30+ raw z-indexes, none referencing my defined scale.",[17,85,86,87,90],{},"I ran the same audit on a client project, Vue 3 + Vuetify with a Storybook design system: 257 violations across 23 files, the same gray palette copy-pasted into 8+ components, ",[54,88,89],{},"!important"," flags where the AI couldn't navigate the cascade.",[17,92,93],{},"The AI rewrites what it sees, not what you defined.",[43,95],{},[46,97,99],{"id":98},"the-fix-one-agent-session","The fix: one agent session",[17,101,102,103,106,107,110],{},"Pandya's prompt does the whole thing in one pass: audit, build a ",[54,104,105],{},"tokens.css"," with three-layer indirection, generate spec files for every component, write a CI-ready audit script, replace every hardcoded value, and produce a ",[54,108,109],{},"CLAUDE.md"," that future sessions will read at session start. It's all in his article, worth reading in full.",[17,112,113],{},"On my site: 20 files modified, 230+ custom properties, 8 component specs, zero violations on final audit. Under an hour. Visually identical, which is the point.",[17,115,116,117,121],{},"What changes is the ",[118,119,120],"em",{},"next"," session — the constraint is now structural, not willpower-based.",[17,123,124],{},"But the interesting part isn't the run. It's what I found in the output.",[43,126],{},[46,128,130],{"id":129},"what-the-cleanup-revealed-context-is-everything","What the cleanup revealed: context is everything",[17,132,133],{},"Here's where it gets interesting.",[17,135,136,137],{},"The prompt produced a clean, passing audit. Zero violations. But looking at the generated tokens, I found a different kind of problem: ",[80,138,139],{},"the AI had sometimes tokenized the wrong things.",[141,142,144],"h3",{"id":143},"watch-out-for-1-near-duplicate-tokens","Watch out for #1: Near-duplicate tokens.",[17,146,147,148,150],{},"In ",[54,149,56],{},", Claude Code added:",[152,153,158],"pre",{"className":154,"code":155,"language":156,"meta":157,"style":157},"language-scss shiki shiki-themes github-light github-dark","$color-bg-card-glass: rgba($color-white, 0.6);\n$color-bg-card-glass-header: rgba($color-white, 0.565);\n","scss","",[54,159,160,192],{"__ignoreMap":157},[161,162,165,169,173,177,180,183,186,189],"span",{"class":163,"line":164},"line",1,[161,166,168],{"class":167},"s4XuR","$color-bg-card-glass",[161,170,172],{"class":171},"sVt8B",": ",[161,174,176],{"class":175},"sj4cs","rgba",[161,178,179],{"class":171},"(",[161,181,182],{"class":167},"$color-white",[161,184,185],{"class":171},", ",[161,187,188],{"class":175},"0.6",[161,190,191],{"class":171},");\n",[161,193,195,198,200,202,204,206,208,211],{"class":163,"line":194},2,[161,196,197],{"class":167},"$color-bg-card-glass-header",[161,199,172],{"class":171},[161,201,176],{"class":175},[161,203,179],{"class":171},[161,205,182],{"class":167},[161,207,185],{"class":171},[161,209,210],{"class":175},"0.565",[161,212,191],{"class":171},[17,214,215,216,219],{},"A difference of ",[54,217,218],{},"0.035"," opacity, invisible to any human eye. Two separate variables, used in a single component each. The AI found two slightly different values in the original code and dutifully tokenized both instead of consolidating them. A designer rounds one to match the other and moves on.",[221,222,223],"blockquote",{},[17,224,225],{},"Rule of thumb: if a token is used in fewer than two places, it probably shouldn't be a token.",[141,227,229],{"id":228},"watch-out-for-2-tokenizing-local-hacks-as-global-system-decisions","Watch out for #2: Tokenizing local hacks as global system decisions.",[17,231,232,233,236],{},"The audit found 30+ raw ",[54,234,235],{},"z-index"," values, so Claude Code generated a full scale:",[152,238,240],{"className":154,"code":239,"language":156,"meta":157,"style":157},"$z-behind: -1;\n$z-below: 0;\n$z-base: 1;\n$z-raised: 2;\n$z-dropdown: 100;\n$z-sticky: 200;\n$z-fixed: 300;\n$z-modal-backdrop: 400;\n$z-modal: 500;\n$z-tooltip: 600;\n$z-lightbox: 9999;\n",[54,241,242,255,267,280,293,306,319,332,345,358,371],{"__ignoreMap":157},[161,243,244,247,249,252],{"class":163,"line":164},[161,245,246],{"class":167},"$z-behind",[161,248,172],{"class":171},[161,250,251],{"class":175},"-1",[161,253,254],{"class":171},";\n",[161,256,257,260,262,265],{"class":163,"line":194},[161,258,259],{"class":167},"$z-below",[161,261,172],{"class":171},[161,263,264],{"class":175},"0",[161,266,254],{"class":171},[161,268,270,273,275,278],{"class":163,"line":269},3,[161,271,272],{"class":167},"$z-base",[161,274,172],{"class":171},[161,276,277],{"class":175},"1",[161,279,254],{"class":171},[161,281,283,286,288,291],{"class":163,"line":282},4,[161,284,285],{"class":167},"$z-raised",[161,287,172],{"class":171},[161,289,290],{"class":175},"2",[161,292,254],{"class":171},[161,294,296,299,301,304],{"class":163,"line":295},5,[161,297,298],{"class":167},"$z-dropdown",[161,300,172],{"class":171},[161,302,303],{"class":175},"100",[161,305,254],{"class":171},[161,307,309,312,314,317],{"class":163,"line":308},6,[161,310,311],{"class":167},"$z-sticky",[161,313,172],{"class":171},[161,315,316],{"class":175},"200",[161,318,254],{"class":171},[161,320,322,325,327,330],{"class":163,"line":321},7,[161,323,324],{"class":167},"$z-fixed",[161,326,172],{"class":171},[161,328,329],{"class":175},"300",[161,331,254],{"class":171},[161,333,335,338,340,343],{"class":163,"line":334},8,[161,336,337],{"class":167},"$z-modal-backdrop",[161,339,172],{"class":171},[161,341,342],{"class":175},"400",[161,344,254],{"class":171},[161,346,348,351,353,356],{"class":163,"line":347},9,[161,349,350],{"class":167},"$z-modal",[161,352,172],{"class":171},[161,354,355],{"class":175},"500",[161,357,254],{"class":171},[161,359,361,364,366,369],{"class":163,"line":360},10,[161,362,363],{"class":167},"$z-tooltip",[161,365,172],{"class":171},[161,367,368],{"class":175},"600",[161,370,254],{"class":171},[161,372,374,377,379,382],{"class":163,"line":373},11,[161,375,376],{"class":167},"$z-lightbox",[161,378,172],{"class":171},[161,380,381],{"class":175},"9999",[161,383,254],{"class":171},[17,385,386,387,185,389,185,391,185,393,395,396,398,399,402],{},"Looks systematic. But it conflates two completely different things: intra-component stacking (",[54,388,251],{},[54,390,264],{},[54,392,277],{},[54,394,290],{},") and global UI layers (",[54,397,303],{},"+). The low values aren't design decisions, they're local implementation details. A developer writing ",[54,400,401],{},"z-index: 1"," inline is perfectly readable. Tokenizing it adds noise, not clarity.",[17,404,405],{},"For a landing page, four tokens are enough:",[152,407,409],{"className":154,"code":408,"language":156,"meta":157,"style":157},"$z-sticky: 100; \u002F\u002F sticky nav\n$z-dropdown: 200; \u002F\u002F menus, tooltips\n$z-modal: 400; \u002F\u002F modals\n$z-toast: 500; \u002F\u002F notifications\n",[54,410,411,426,439,452],{"__ignoreMap":157},[161,412,413,415,417,419,422],{"class":163,"line":164},[161,414,311],{"class":167},[161,416,172],{"class":171},[161,418,303],{"class":175},[161,420,421],{"class":171},"; ",[161,423,425],{"class":424},"sJ8bj","\u002F\u002F sticky nav\n",[161,427,428,430,432,434,436],{"class":163,"line":194},[161,429,298],{"class":167},[161,431,172],{"class":171},[161,433,316],{"class":175},[161,435,421],{"class":171},[161,437,438],{"class":424},"\u002F\u002F menus, tooltips\n",[161,440,441,443,445,447,449],{"class":163,"line":269},[161,442,350],{"class":167},[161,444,172],{"class":171},[161,446,342],{"class":175},[161,448,421],{"class":171},[161,450,451],{"class":424},"\u002F\u002F modals\n",[161,453,454,457,459,461,463],{"class":163,"line":282},[161,455,456],{"class":167},"$z-toast",[161,458,172],{"class":171},[161,460,355],{"class":175},[161,462,421],{"class":171},[161,464,465],{"class":424},"\u002F\u002F notifications\n",[17,467,468],{},"The AI generated 11 because it found 11 distinct values. It had no way to distinguish \"local stacking hack\" from \"meaningful UI layer.\" That distinction is design judgment.",[141,470,472],{"id":471},"watch-out-for-3-component-specific-values-promoted-to-global-tokens","Watch out for #3: Component-specific values promoted to global tokens.",[17,474,475],{},"The generated file mixed a clean generic scale with single-use contextual tokens:",[152,477,479],{"className":154,"code":478,"language":156,"meta":157,"style":157},"$color-dot-red: #ff5f57; \u002F\u002F macOS traffic light, used in 1 component\n$color-quote-icon: #f5f0e8; \u002F\u002F a single decorative element\n$shadow-lightbox: ...; \u002F\u002F one overlay\n$shadow-btn-glow: ...; \u002F\u002F one button state\n",[54,480,481,496,511,522],{"__ignoreMap":157},[161,482,483,486,488,491,493],{"class":163,"line":164},[161,484,485],{"class":167},"$color-dot-red",[161,487,172],{"class":171},[161,489,490],{"class":175},"#ff5f57",[161,492,421],{"class":171},[161,494,495],{"class":424},"\u002F\u002F macOS traffic light, used in 1 component\n",[161,497,498,501,503,506,508],{"class":163,"line":194},[161,499,500],{"class":167},"$color-quote-icon",[161,502,172],{"class":171},[161,504,505],{"class":175},"#f5f0e8",[161,507,421],{"class":171},[161,509,510],{"class":424},"\u002F\u002F a single decorative element\n",[161,512,513,516,519],{"class":163,"line":269},[161,514,515],{"class":167},"$shadow-lightbox",[161,517,518],{"class":171},": ...; ",[161,520,521],{"class":424},"\u002F\u002F one overlay\n",[161,523,524,527,529],{"class":163,"line":282},[161,525,526],{"class":167},"$shadow-btn-glow",[161,528,518],{"class":171},[161,530,531],{"class":424},"\u002F\u002F one button state\n",[17,533,534],{},"These don't belong in a global design system file. They belong in their component's own SCSS. A global token should be reusable across at least 3 different components, otherwise it's just a variable with extra steps.",[17,536,537,540,541,544,545,548,549,552],{},[80,538,539],{},"The same applies to hardcoded pixel values in complex components."," A ",[54,542,543],{},"top: -2px"," for optical icon alignment, a ",[54,546,547],{},"transform: translateY(-120%)"," in a CSS animation, a ",[54,550,551],{},"width: 1px"," separator, these are implementation details, not design decisions. Forcing them into tokens creates more confusion than clarity.",[141,554,556],{"id":555},"watch-out-for-4-the-prompt-assumes-one-specific-stack","Watch out for #4: The prompt assumes one specific stack.",[17,558,559,560,562],{},"The prompt creates a ",[54,561,105],{}," file with CSS custom properties, which is the right answer for a vanilla CSS or React+CSS project. But every modern frontend has its own token format: SCSS variables, Less, Tailwind config, CSS-in-JS theme objects, Vuetify theme, Material UI palette. These aren't interchangeable.",[17,564,565,566,568],{},"My site uses SCSS. I already had ",[54,567,56],{}," with a working set of variables. The prompt didn't migrate them, it built a second layer on top in a different format:",[152,570,572],{"className":154,"code":571,"language":156,"meta":157,"style":157},"\u002F* _variables.scss, what I already had *\u002F\n$color-gray-100: #f5f5f5;\n\n\u002F* tokens.css, what the prompt created *\u002F\n--primitive-gray-100: #f5f5f5;\n",[54,573,574,579,591,597,602],{"__ignoreMap":157},[161,575,576],{"class":163,"line":164},[161,577,578],{"class":424},"\u002F* _variables.scss, what I already had *\u002F\n",[161,580,581,584,586,589],{"class":163,"line":194},[161,582,583],{"class":167},"$color-gray-100",[161,585,172],{"class":171},[161,587,588],{"class":175},"#f5f5f5",[161,590,254],{"class":171},[161,592,593],{"class":163,"line":269},[161,594,596],{"emptyLinePlaceholder":595},true,"\n",[161,598,599],{"class":163,"line":282},[161,600,601],{"class":424},"\u002F* tokens.css, what the prompt created *\u002F\n",[161,603,604,607],{"class":163,"line":295},[161,605,606],{"class":167},"--primitive-gray-100",[161,608,609],{"class":171},": #f5f5f5;\n",[43,611],{},[46,613,615],{"id":614},"does-it-actually-work-for-the-next-session","Does it actually work for the next session?",[17,617,618],{},"To test it, I asked Claude Code to generate a brand new landing page from scratch, one prompt, no additional instructions.",[17,620,621,622,185,625,185,628,185,631,185,634,637],{},"Before writing a single line of code, it automatically read ",[54,623,624],{},"color.md",[54,626,627],{},"typography.md",[54,629,630],{},"button.md",[54,632,633],{},"card.md",[54,635,636],{},"badge.md",", the spec files generated by the prompt. It listed existing components, checked the patterns, then built.",[17,639,640],{},"The result used the right tokens, the right components, the right visual language. Same orange, same typography, same card style as the rest of the site. No drift. No guessing.",[17,642,643],{},"That's what the whole setup is for.",[645,646,648,649,648,654],"div",{"style":647},"display: flex; gap: 16px; margin: 24px 0;","\n  ",[20,650],{"src":651,"alt":652,"style":653},"\u002Fimages\u002Fclaude-agent-generating-page-following-ai-design-system.png","Claude agent reading the design system specs before generating a page","width: 33%; height:auto; border-radius: 8px;",[20,655],{"src":656,"alt":657,"style":658},"\u002Fimages\u002Fpage-generated-with-ai-folowing-design-system.png","Page generated by Claude following the design system","width: 67%; height:auto;border-radius: 8px;",[43,660],{},[46,662,664],{"id":663},"what-this-means","What this means",[17,666,667],{},"The prompt is excellent. It solved the real problem, inconsistency across sessions, and it works exactly as described. Run it, commit the result, and future AI sessions will produce consistent output.",[17,669,670,671,674,675,678,679,682],{},"A design system is encoded thinking: the decision to name something ",[54,672,673],{},"--color-link"," instead of ",[54,676,677],{},"--blue-500"," encodes ",[118,680,681],{},"intent",", not just value. The decision to have four z-index layers instead of eleven reflects an understanding of how the UI is actually structured. The decision to keep a one-off shadow inline rather than tokenizing it keeps the global file readable.",[17,684,685,686,689],{},"The AI tokenizes what it finds. It can't decide what ",[118,687,688],{},"should"," be tokenized.",[17,691,692,693,695,696,698],{},"That's where knowing both sides matters. A pure designer wouldn't catch the over-tokenized z-index scale. A pure developer might not question whether ",[54,694,210],{}," and ",[54,697,188],{}," opacity are the same design intent. Reading the generated output critically, as someone who understands both the design decision and the code it produces, is what makes the difference between a passing audit and an actual design system.",[17,700,701],{},"That's the designer-developer's job. And in an AI-assisted workflow, it turns out to be the most durable contribution you can make.",[43,703],{},[17,705,706],{},[118,707,708,709,713],{},"The prompt used in this article is from ",[32,710,712],{"href":34,"rel":711},[36],"Hardik Pandya's piece on LLM design systems",". Worth reading in full if you want the technical depth.",[715,716,721],"cta-block",{"external":717,"href":718,"label":719,"title":720},"true","https:\u002F\u002Fcal.com\u002Fprodju\u002F30min","Let's talk","Working on an AI-assisted product?",[17,722,723],{},"30 minutes to talk about design system structure, token strategy, or your product design challenges.",[725,726,727],"style",{},"html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":157,"searchDepth":194,"depth":194,"links":729},[730,731,732,738,739],{"id":48,"depth":194,"text":49},{"id":98,"depth":194,"text":99},{"id":129,"depth":194,"text":130,"children":733},[734,735,736,737],{"id":143,"depth":269,"text":144},{"id":228,"depth":269,"text":229},{"id":471,"depth":269,"text":472},{"id":555,"depth":269,"text":556},{"id":614,"depth":194,"text":615},{"id":663,"depth":194,"text":664},[741,743,746],{"name":742,"url":11},"Accueil",{"name":744,"url":745},"Blog","https:\u002F\u002Fprodju.com\u002Fblog",{"name":6,"url":747},"https:\u002F\u002Fprodju.com\u002Fblog\u002Fvibe-coded-ai-design-system-cleanup",{"title":720,"description":723,"href":718,"label":719,"external":595},"2026-05-14","I built a site fast with Claude Code. The CSS was a mess of hardcoded values. Running an LLM design system audit revealed something more interesting than inconsistency.","md",null,"Working on a product with AI?",[755,756,757,758,759,760,761,762,763],"vibe coding","AI design system","Claude Code","design tokens","CSS tokens","token audit","SCSS variables","LLM design systems","hardcoded values","en",{},"\u002Fblog\u002Fvibe-coded-ai-design-system-cleanup",{"title":6,"description":750},"blog\u002Fvibe-coded-ai-design-system-cleanup",[770,8,771,757],"AI","CSS","BlogPosting","7K0dzqJ_cujQ11a6RMsKqKR63bHxIqtKNKxau_msifA",{"id":775,"title":776,"aiSummary":7,"articleSection":777,"author":778,"body":779,"breadcrumbs":1016,"cover":1022,"cta":1023,"date":1024,"dateModified":1024,"datePublished":1024,"description":1025,"extension":751,"externalUrl":752,"faq":752,"footerCta":7,"footerCtaLabel":719,"footerCtaText":1026,"howToDescription":752,"howToName":752,"howToSteps":752,"howToTotalTime":752,"image":752,"imageHeight":752,"imageWidth":752,"keywords":1027,"lang":764,"meta":1034,"navigation":595,"path":1035,"publisher":752,"readingTime":308,"seo":1036,"source":752,"stem":1037,"tags":1038,"type":772,"wordCount":752,"__hash__":1041},"blog\u002Fblog\u002Fdesigning-beyond-the-interface-escape.md","Designing beyond the interface: Escape in developers' workflows","Product Design",{"name":10,"url":11,"jobTitle":12},{"type":14,"value":780,"toc":1004},[781,787,790,793,797,800,812,816,819,828,832,836,839,844,848,855,862,866,869,875,879,885,895,901,905,908,923,927,930,941,944,953,995,997],[17,782,783],{},[20,784],{"alt":785,"src":786},"Escape integration into CI\u002FCD workflow","\u002Fscreens\u002Fescape-ui-onboarding.png",[17,788,789],{},"When designing a product, it's easy to focus on the interface. But in complex B2B environments, the real challenge lies elsewhere. A product doesn't live on a screen, it lives inside an ecosystem.",[17,791,792],{},"This is exactly what I worked on as Founding Product Designer at Escape, a cybersecurity SaaS built for technical teams.",[46,794,796],{"id":795},"from-tool-to-workflow-integration","From tool to workflow integration",[17,798,799],{},"Escape is not a standalone product used occasionally. It is deeply embedded into the daily workflow of developers, security teams, and companies shipping code continuously.",[801,802,805],"alert-callout",{"label":803,"type":804},"Founding principle","tip",[17,806,807,808,811],{},"Instead of asking users to \"come to the product\", we designed Escape to ",[80,809,810],{},"meet users where they already work",".",[46,813,815],{"id":814},"understanding-the-real-user-journey","Understanding the real user journey",[17,817,818],{},"A typical user is not \"using a cybersecurity tool\". They are writing code, shipping features, reviewing pull requests, fixing bugs. Security is just one part of that flow.",[17,820,821,822,825],{},"So the question wasn't \"How do we design a good interface?\", but",[823,824],"br",{},[80,826,827],{},"\"How does Escape fit naturally into the way teams already build and ship software?\"",[46,829,831],{"id":830},"a-product-embedded-in-the-development-lifecycle","A product embedded in the development lifecycle",[141,833,835],{"id":834},"_1-continuous-scanning-within-cicd","1. Continuous scanning within CI\u002FCD",[17,837,838],{},"Escape integrates directly into the CI pipeline. When a developer ships a new feature, a security scan is automatically triggered. No extra step, no context switching. Security becomes part of the delivery process, not a separate task.",[17,840,841],{},[20,842],{"alt":785,"src":843},"\u002Fimages\u002Fescape-into-workflow.png",[141,845,847],{"id":846},"_2-from-issue-detection-to-actionable-insight","2. From issue detection to actionable insight",[17,849,850,851,854],{},"When a vulnerability is detected, a link is generated and the developer is redirected into Escape product. They don't see raw data, they see a clear explanation of the issue, its impact, and most importantly ",[118,852,853],{},"how to fix it",". Turning complex security data into actionable decisions was one of the central design challenges.",[17,856,857],{},[20,858],{"alt":859,"src":860,"style":861},"Escape Issue explanation","\u002Fscreens\u002Fescape-issue.png","width:50%; display: block; margin: 0 auto; border-radius: 0.5rem",[141,863,865],{"id":864},"_3-integration-with-existing-tools-jira","3. Integration with existing tools (Jira)",[17,867,868],{},"Fixing an issue should not break the workflow. From Escape, users can create a Jira ticket directly, assign it, and integrate it into their existing backlog. Escape doesn't replace tools — it connects them.",[17,870,871],{},[20,872],{"alt":873,"src":874},"Escape Jira integration","\u002Fscreens\u002Fescape-with-jira-integration.png",[141,876,878],{"id":877},"_4-supporting-two-personas-developers-cisos","4. Supporting two personas: developers → CISOs",[17,880,881,882,884],{},"Developers need fast, clear, actionable feedback. They want to fix issues without friction. Security teams and CISOs need visibility and the ability to track progress over time.",[823,883],{}," To serve both realities:",[886,887,888,892],"ul",{},[889,890,891],"li",{},"detailed issue views for developers,",[889,893,894],{},"and a monitoring dashboard for security leaders (number of vulnerabilities, resolution status, evolution over time)",[17,896,897],{},[20,898],{"alt":899,"src":900},"Escape monitoring dashboard","\u002Fscreens\u002Fescape-ciso-monitoring.png",[46,902,904],{"id":903},"designing-for-systems-not-screens","Designing for systems, not screens",[17,906,907],{},"One of the key challenges was handling complexity: APIs, technical data, multiple integrations, different user roles. The goal was never to simplify the system itself, it was to make it understandable and actionable.",[909,910,912],"key-takeaways",{"title":911},"Design principles",[886,913,914,917,920],{},[889,915,916],{},"Prioritize clarity over exhaustiveness",[889,918,919],{},"Guide users toward action",[889,921,922],{},"Reduce cognitive load in high-complexity contexts",[46,924,926],{"id":925},"discovery-design-system-and-impact","Discovery, design system and impact",[17,928,929],{},"To make the right decisions, we stayed close to users:",[886,931,932,935,938],{},[889,933,934],{},"a Discord channel to interact directly with active users,",[889,936,937],{},"regular interviews,",[889,939,940],{},"and continuous feedback loops.",[17,942,943],{},"This allowed us to identify friction points early, validate assumptions quickly, and iterate fast in a startup environment.",[17,945,946,947,952],{},"As the product grew, we also built a ",[32,948,951],{"href":949,"rel":950},"https:\u002F\u002Fescape.tech\u002Fblog\u002Fescape-design-system\u002F",[36],"design system integrated with Storybook",", to ensure consistency across the product, accelerate delivery, and create a shared language between design and engineering.",[801,954,956,963],{"label":955,"type":804},"Impact",[17,957,958,959,961],{},"By integrating Escape directly into existing developer workflows, we achieved:",[823,960],{},[823,962],{},[886,964,965,971,977,983,989],{},[889,966,967,970],{},[80,968,969],{},"Reduced Friction:"," Eliminated context-switching by embedding security processes directly into the CI\u002FCD pipeline.",[889,972,973,976],{},[80,974,975],{},"Accelerated Resolution:"," Shortened the time-to-fix by transforming raw security data into clear, actionable developer tasks.",[889,978,979,982],{},[80,980,981],{},"High Technical Adoption:"," Drove consistent product usage by respecting the natural coding habits and tools (like Jira) of engineering teams.",[889,984,985,988],{},[80,986,987],{},"Strategic Visibility:"," Empowered CISOs and security leaders with real-time tracking of vulnerability trends and resolution progress.",[889,990,991,994],{},[80,992,993],{},"Cultural Shift:"," Successfully transitioned security from a \"final check\" bottleneck to a continuous, integrated part of the development lifecycle.",[43,996],{},[715,998,1001],{"external":717,"href":718,"label":999,"title":1000},"Let's talk about your product","Building a complex B2B product?",[17,1002,1003],{},"30 minutes to talk about your product integration challenges and user adoption strategy.",{"title":157,"searchDepth":194,"depth":194,"links":1005},[1006,1007,1008,1014,1015],{"id":795,"depth":194,"text":796},{"id":814,"depth":194,"text":815},{"id":830,"depth":194,"text":831,"children":1009},[1010,1011,1012,1013],{"id":834,"depth":269,"text":835},{"id":846,"depth":269,"text":847},{"id":864,"depth":269,"text":865},{"id":877,"depth":269,"text":878},{"id":903,"depth":194,"text":904},{"id":925,"depth":194,"text":926},[1017,1018,1019],{"name":742,"url":11},{"name":744,"url":745},{"name":1020,"url":1021},"Designing beyond the interface: how Escape integrates into developers' workflows","https:\u002F\u002Fprodju.com\u002Fblog\u002Fdesigning-beyond-the-interface-escape","\u002Fscreens\u002Fescape-ui-design-interface-inventory.png",{"title":1000,"description":1003,"href":718,"label":999,"external":595},"2026-04-28","In complex B2B environments, the real challenge isn't designing a great interface. It's designing how a product fits into its users' ecosystem. A look back at my experience as Founding Product Designer at Escape.","Working on a SaaS product or MVP?",[1028,777,1029,1030,1031,1032,1033],"Escape","B2B SaaS","developer workflow","cybersecurity","CI\u002FCD","Founding Product Designer",{},"\u002Fblog\u002Fdesigning-beyond-the-interface-escape",{"title":776,"description":1025},"blog\u002Fdesigning-beyond-the-interface-escape",[777,1039,1040],"B2B","Cybersecurity","lg3XUa5ZJLtqJTQolA-46Iz36xQ-kI-FOPbezV204Kk",{"id":1043,"title":1044,"aiSummary":7,"articleSection":777,"author":1045,"body":1046,"breadcrumbs":1236,"cover":1053,"cta":1241,"date":1242,"dateModified":1242,"datePublished":1242,"description":1243,"extension":751,"externalUrl":752,"faq":752,"footerCta":7,"footerCtaLabel":719,"footerCtaText":1026,"howToDescription":752,"howToName":752,"howToSteps":752,"howToTotalTime":752,"image":752,"imageHeight":752,"imageWidth":752,"keywords":1244,"lang":764,"meta":1250,"navigation":595,"path":1251,"publisher":752,"readingTime":282,"seo":1252,"source":752,"stem":1253,"tags":1254,"type":772,"wordCount":752,"__hash__":1257},"blog\u002Fblog\u002Fdesigning-for-industry-aiotrust.md","Designing for Industry: How I turned technical complexity into operational simplicity for AioTrust",{"name":10,"url":11,"jobTitle":12},{"type":14,"value":1047,"toc":1230},[1048,1055,1058,1065,1068,1072,1075,1102,1120,1124,1127,1134,1142,1149,1155,1165,1169,1172,1179,1186,1203,1207,1213,1222,1224],[17,1049,1050],{},[20,1051],{"alt":1052,"src":1053,"style":1054},"Design UI\u002FUX du SaaS AioTrust - dashboard monitoring de capteurs IoT industriels","\u002Fscreens\u002Faiotrust-ui-design-saas.png","border-radius: 0.5rem",[17,1056,1057],{},"Product Design isn't just about making things look good. It's about understanding who is using the tool, the environment they are in, and the specific business outcome they need to achieve.",[17,1059,1060,1061,1064],{},"For ",[80,1062,1063],{},"AioTrust"," (the AioGates solution), my challenge was clear: design the software interface for a complex industrial security system from the ground up.",[17,1066,1067],{},"Here is how a user-centric approach delivered immediate business impact.",[46,1069,1071],{"id":1070},"_1-understanding-the-field-two-personas-two-realities","1. Understanding the Field: Two Personas, Two Realities",[17,1073,1074],{},"To build an effective UX, I had to step out of the office and into the daily lives of the people using our tech.",[1076,1077,1080,1086,1092],"content-card",{"title":1078,"type":1079},"The On-site Installer: in the field","Persona",[17,1081,1082,1085],{},[80,1083,1084],{},"Context:"," Often on a ladder or in a cramped technical room, holding a tablet.",[17,1087,1088,1091],{},[80,1089,1090],{},"The Need:"," Pure efficiency. Zero clutter.",[17,1093,1094,1097,1098,1101],{},[80,1095,1096],{},"The Design Response:"," A streamlined UI with an ultra-clear onboarding process. His only goal is to connect sensors to the system. I designed a dedicated screen that shows only the essentials: ",[118,1099,1100],{},"Is the signal reaching the system?"," Yes or No. No distractions.",[1076,1103,1105,1110,1115],{"title":1104,"type":1079},"The Power User: in the office",[17,1106,1107,1109],{},[80,1108,1084],{}," Managing security and strategy from a desktop computer.",[17,1111,1112,1114],{},[80,1113,1090],{}," Creating complex business rules to monitor critical assets.",[17,1116,1117,1119],{},[80,1118,1096],{}," A powerful yet intuitive Logic Builder.",[46,1121,1123],{"id":1122},"_2-turning-logic-into-interface-the-rule-builder","2. Turning Logic into Interface: The Rule Builder",[17,1125,1126],{},"This is where design provides the highest ROI. Users need to configure critical scenarios without having to write a single line of code.",[17,1128,1129,1130,1133],{},"Take ",[80,1131,1132],{},"Water Treatment Plants"," as an example:",[801,1135,1137],{"label":1136,"type":804},"Real-world use case",[17,1138,1139],{},[118,1140,1141],{},"\"IF 'Tank Level' is >= 'Full Threshold' for more than 1 second, THEN trigger a 'Warning' alarm.\"",[17,1143,1144,1145,1148],{},"I designed a ",[80,1146,1147],{},"Visual Rule Builder (IF \u002F AND \u002F OR)"," that allows users to select IoT sensors and define parameters through a clean UI.",[17,1150,1151],{},[20,1152],{"alt":1153,"src":1154,"style":1054},"Alarm Rules Builder — AioTrust","\u002Fscreens\u002Faiotrust-ui-ux-design-alarm-rules-builder.png",[801,1156,1158],{"label":1157,"type":804},"The result",[17,1159,1160,1161,1164],{},"A ",[80,1162,1163],{},"10x increase in speed"," for alert creation. Users no longer need technical support; they are fully autonomous in managing their own industrial safety rules directly from their desks.",[46,1166,1168],{"id":1167},"_3-the-impact-design-as-a-business-driver","3. The Impact: Design as a Business Driver",[17,1170,1171],{},"The success of a product is ultimately measured by its market reception.",[17,1173,1174,1175,1178],{},"During ",[80,1176,1177],{},"FIC 2026"," (InCyber Forum), the solution was showcased in a live demonstration. The clarity of the interface. Specifically how easily we could demonstrate rule management for an airport, became a major selling point.",[17,1180,1181],{},[20,1182],{"alt":1183,"src":1184,"style":1185},"AioTrust Product in Fic 2026","\u002Fimages\u002Fproduct_designed_fic_2026.jpg","width: 70%; display: block; margin: 0 auto; border-radius: 0.5rem",[909,1187,1189],{"title":1188},"Measurable business impact",[886,1190,1191,1197,1200],{},[889,1192,1193,1196],{},[80,1194,1195],{},"30+ qualified prospects"," generated directly from the live demos at the event",[889,1198,1199],{},"A drastic reduction in onboarding time for new clients",[889,1201,1202],{},"Full user autonomy for safety rule management, with no dependency on the technical team",[46,1204,1206],{"id":1205},"conclusion","Conclusion",[17,1208,1209,1210,811],{},"Industrial design shouldn't be \"gray and complicated.\" By prioritizing real-world conditions, from the installer's tablet to the manager's desktop, we built a tool that isn't just secure, it's actually ",[80,1211,1212],{},"usable",[801,1214,1216],{"label":1215,"type":804},"Key insight",[17,1217,1218,1219],{},"Design isn't just a finish, ",[80,1220,1221],{},"it's the engine of product adoption.",[43,1223],{},[715,1225,1227],{"external":717,"href":718,"label":999,"title":1226},"Building a complex industrial or B2B product?",[17,1228,1229],{},"30 minutes to talk about your adoption challenges and how design can become a growth driver for your product.",{"title":157,"searchDepth":194,"depth":194,"links":1231},[1232,1233,1234,1235],{"id":1070,"depth":194,"text":1071},{"id":1122,"depth":194,"text":1123},{"id":1167,"depth":194,"text":1168},{"id":1205,"depth":194,"text":1206},[1237,1238,1239],{"name":742,"url":11},{"name":744,"url":745},{"name":1044,"url":1240},"https:\u002F\u002Fprodju.com\u002Fblog\u002Fdesigning-for-industry-aiotrust",{"title":1226,"description":1229,"href":718,"label":999,"external":595},"2026-04-06","Product Design isn't just about making things look good. A look back at how a user-centric approach delivered immediate business impact for AioTrust. An industrial IoT security platform designed from the ground up.",[1063,1245,1246,1247,1248,1249,1177],"industrial design","IoT security","UX B2B","rule builder","operational simplicity",{},"\u002Fblog\u002Fdesigning-for-industry-aiotrust",{"title":1044,"description":1243},"blog\u002Fdesigning-for-industry-aiotrust",[777,1039,1255,1256],"IoT","Industrial","RqrydMOF0Dm0XnMM1Kv5gl_MUVTTG88wZWSfCMRRmP4",{"id":1259,"title":1260,"aiSummary":7,"articleSection":1261,"author":1262,"body":1263,"breadcrumbs":1390,"cover":1270,"cta":1396,"date":1397,"dateModified":1397,"datePublished":1397,"description":1398,"extension":751,"externalUrl":752,"faq":752,"footerCta":7,"footerCtaLabel":752,"footerCtaText":752,"howToDescription":752,"howToName":752,"howToSteps":752,"howToTotalTime":752,"image":752,"imageHeight":752,"imageWidth":752,"keywords":1399,"lang":1404,"meta":1405,"navigation":595,"path":1406,"publisher":752,"readingTime":295,"seo":1407,"source":752,"stem":1408,"tags":1409,"type":772,"wordCount":752,"__hash__":1412},"blog\u002Fblog\u002Fformation-kai-wong-data-informed-design.md","Parler le langage du Business : Ce que j'ai appris avec Kai Wong","Design",{"name":10,"url":11,"jobTitle":12},{"type":14,"value":1264,"toc":1380},[1265,1271,1274,1287,1290,1294,1297,1300,1304,1307,1321,1325,1329,1332,1336,1343,1347,1350,1361,1365,1368,1371,1373],[17,1266,1267],{},[20,1268],{"alt":1269,"src":1270,"style":1054},"Data-Informed Design ce que j'ai appris","https:\u002F\u002Fuser-assets.maven.com\u002Fcertificates\u002F0e65c6eabe35fbca2a272b88077ba90bf32e4889.png",[17,1272,1273],{},"En tant que designer, l'un des plus grands défis n'est pas de concevoir une belle interface, mais de faire comprendre la valeur de nos décisions aux décideurs — PM, CEO, Directeurs.",[17,1275,1276,1277,1280,1281,1286],{},"J'ai récemment suivi la formation ",[80,1278,1279],{},"Data-Informed Design"," de ",[32,1282,1285],{"href":1283,"rel":1284},"https:\u002F\u002Fmaven.com\u002Fdata-informed-design\u002Fdatainformeddesign",[36],"Kai Wong"," sur Maven. Avec 13 ans d'expérience et des insights tirés de leaders chez Meta, Amazon ou Mastercard, Kai propose une approche qui transforme radicalement la posture du designer.",[17,1288,1289],{},"Voici les outils et frameworks qui ont affiné ma pratique.",[46,1291,1293],{"id":1292},"_1-le-design-comme-levier-de-comportement","1. Le design comme levier de comportement",[17,1295,1296],{},"Le déclic majeur de cette formation ? Le design n'est pas une fin esthétique, c'est un outil pour modifier un comportement utilisateur de manière mesurable.",[17,1298,1299],{},"Un utilisateur qui abandonne un panier ou quitte un onboarding exprime un comportement indésirable pour le business. Mon rôle est d'identifier ces points de friction et de proposer des solutions design alignées sur des objectifs concrets.",[46,1301,1303],{"id":1302},"_2-une-question-de-traduction","2. Une question de \"traduction\"",[17,1305,1306],{},"La data est le pont entre le design et le business. La formation m'a appris à traduire mes succès UX en victoires produit :",[801,1308,1310],{"label":1309,"type":804},"Exemple concret",[17,1311,1312,1313,1316,1317,1320],{},"Au lieu de dire ",[118,1314,1315],{},"\"J'ai amélioré le taux de complétion de 20%\"",", on dira ",[118,1318,1319],{},"\"20% d'utilisateurs supplémentaires ont finalisé leur souscription.\""," C'est la même donnée, mais elle parle directement aux priorités de votre interlocuteur.",[46,1322,1324],{"id":1323},"_3-outils-que-jintègre-désormais-à-mes-projets","3 outils que j'intègre désormais à mes projets",[141,1326,1328],{"id":1327},"prioriser-les-métriques-produit","Prioriser les métriques Produit",[17,1330,1331],{},"Je lie désormais mes décisions aux métriques de rétention, d'activation ou de souscription, plutôt qu'aux seules métriques UX (temps sur tâche, taux d'erreur).",[141,1333,1335],{"id":1334},"anticiper-le-so-what","Anticiper le \"So what ?\"",[17,1337,1338,1339,1342],{},"Chaque insight de recherche doit répondre à la question : ",[118,1340,1341],{},"\"Et alors, qu'est-ce que ça change pour l'entreprise ?\""," Cela transforme un simple constat en recommandation stratégique.",[141,1344,1346],{"id":1345},"identifier-les-change-agents","Identifier les \"Change Agents\"",[17,1348,1349],{},"Adapter son discours selon l'interlocuteur. Un PM a besoin de détails techniques ; un directeur a besoin de voir l'impact sur la roadmap globale.",[909,1351,1353],{"title":1352},"Ce que j'en retiens",[886,1354,1355,1358],{},[889,1356,1357],{},"Les métriques produit sont le pont entre nos décisions design et les objectifs business",[889,1359,1360],{},"Un décideur ne réagit pas aux métriques UX, mais aux métriques qu'il suit déjà",[46,1362,1364],{"id":1363},"pour-conclure","Pour conclure",[17,1366,1367],{},"Cette formation ne m'a pas appris à \"mieux designer\", mais elle m'a donné les outils d'alignement nécessaires pour défendre mes projets.",[17,1369,1370],{},"Aujourd'hui, je ne présente plus seulement des écrans ; je présente des hypothèses de croissance et des solutions basées sur des données que mes clients peuvent immédiatement valider.",[43,1372],{},[715,1374,1377],{"external":717,"href":1283,"label":1375,"title":1376},"Voir la formation de Kai Wong","Découvrir la formation",[17,1378,1379],{},"Data-Informed Design : How to Pitch Why Your Design Work Matters — disponible sur Maven.",{"title":157,"searchDepth":194,"depth":194,"links":1381},[1382,1383,1384,1389],{"id":1292,"depth":194,"text":1293},{"id":1302,"depth":194,"text":1303},{"id":1323,"depth":194,"text":1324,"children":1385},[1386,1387,1388],{"id":1327,"depth":269,"text":1328},{"id":1334,"depth":269,"text":1335},{"id":1345,"depth":269,"text":1346},{"id":1363,"depth":194,"text":1364},[1391,1392,1393],{"name":742,"url":11},{"name":744,"url":745},{"name":1394,"url":1395},"Parler le langage du Business — Kai Wong","https:\u002F\u002Fprodju.com\u002Fblog\u002Fformation-kai-wong-data-informed-design",{"title":1376,"description":1379,"href":1283,"label":1375,"external":595},"2026-04-01","Retour sur la formation Data-Informed Design de Kai Wong, les outils et frameworks qui ont transformé ma façon de défendre mes décisions design face aux décideurs.",[1285,1279,1400,1401,1402,1403],"formation design","designer freelance","métriques produit","business design","fr",{},"\u002Fblog\u002Fformation-kai-wong-data-informed-design",{"title":1260,"description":1398},"blog\u002Fformation-kai-wong-data-informed-design",[1261,1410,1411],"Data","Business","4JGff0dMN9EtrCZ-WZvCPrcFaSlUj03JNZTuma-FtBo",{"id":1414,"title":1415,"aiSummary":7,"articleSection":752,"author":752,"body":1416,"breadcrumbs":752,"cover":1420,"cta":752,"date":1421,"dateModified":752,"datePublished":752,"description":1422,"extension":751,"externalUrl":1423,"faq":752,"footerCta":7,"footerCtaLabel":752,"footerCtaText":752,"howToDescription":752,"howToName":752,"howToSteps":752,"howToTotalTime":752,"image":752,"imageHeight":752,"imageWidth":752,"keywords":752,"lang":752,"meta":1424,"navigation":595,"path":1425,"publisher":752,"readingTime":321,"seo":1426,"source":1427,"stem":1428,"tags":1429,"type":752,"wordCount":752,"__hash__":1433},"blog\u002Fblog\u002Fwhat-is-api-discovery-and-how-does-it-work.md","What is API Discovery and How Does It Work?",{"type":14,"value":1417,"toc":1418},[],{"title":157,"searchDepth":194,"depth":194,"links":1419},[],"https:\u002F\u002Fescape.tech\u002Fblog\u002Fcontent\u002Fimages\u002Fsize\u002Fw2000\u002Fformat\u002Fwebp\u002F2023\u002F10\u002Fwhat-is-api-discovery-1.png","2024-01-15","A deep dive into API discovery — what it means, why it matters for security, and how modern tools inventory APIs across your infrastructure.","https:\u002F\u002Fescape.tech\u002Fblog\u002Fwhat-is-api-discovery-and-how-does-it-work\u002F",{},"\u002Fblog\u002Fwhat-is-api-discovery-and-how-does-it-work",{"title":1415,"description":1422},"Escape.tech","blog\u002Fwhat-is-api-discovery-and-how-does-it-work",[1430,1431,1432],"API","Security","Engineering","Z-gFiRcj3q-HKgTDZShzr_rXSyw6BOQnMYa4q6tG4Lo",{"id":1435,"title":1436,"aiSummary":7,"articleSection":752,"author":752,"body":1437,"breadcrumbs":752,"cover":1441,"cta":752,"date":1442,"dateModified":752,"datePublished":752,"description":1443,"extension":751,"externalUrl":949,"faq":752,"footerCta":7,"footerCtaLabel":752,"footerCtaText":752,"howToDescription":752,"howToName":752,"howToSteps":752,"howToTotalTime":752,"image":752,"imageHeight":752,"imageWidth":752,"keywords":752,"lang":752,"meta":1444,"navigation":595,"path":1445,"publisher":752,"readingTime":308,"seo":1446,"source":1427,"stem":1447,"tags":1448,"type":752,"wordCount":752,"__hash__":1452},"blog\u002Fblog\u002Fescape-design-system-storybook-figma.md","How to Set Up a Modern Design System Using Storybook and Figma",{"type":14,"value":1438,"toc":1439},[],{"title":157,"searchDepth":194,"depth":194,"links":1440},[],"https:\u002F\u002Fescape.tech\u002Fblog\u002Fcontent\u002Fimages\u002Fsize\u002Fw2000\u002Fformat\u002Fwebp\u002F2023\u002F01\u002FBlog-Banners--5-.jpg","2023-01-19","How Escape built a unified design system with Figma and Storybook — creating a single source of truth between designers and developers to ship faster and more consistently.",{},"\u002Fblog\u002Fescape-design-system-storybook-figma",{"title":1436,"description":1443},"blog\u002Fescape-design-system-storybook-figma",[8,1449,1450,1451],"Figma","Storybook","Frontend","Q2nRFhRnZNurvSyHniC6WatltlSaZmG3G-HFJCoIOwQ",1780924826316]