[{"data":1,"prerenderedAt":484},["ShallowReactive",2],{"blog-design-md-is-the-new-figma":3},{"id":4,"title":5,"body":6,"date":475,"description":476,"extension":477,"meta":478,"navigation":179,"path":479,"seo":480,"stem":481,"tags":482,"__hash__":483},"blog\u002Fblog\u002Fdesign-md-is-the-new-figma.md","DESIGN.md Is the New Figma",{"type":7,"value":8,"toc":463},"minimark",[9,65,68,71,78,86,91,98,101,104,111,115,121,130,133,234,237,242,258,271,278,288,292,298,304,307,311,321,327,330,346,357,367,371,374,385,388,394,397,401,404,411,415,422,425,429,448,451,459],[10,11,12,16,17,24,25,30,31,36,37,46,47,52,53,58,59,64],"p",{},[13,14,15],"em",{},"Quick intro, since you may be landing here cold:"," I'm Lucas \"Los\" Souza — a UX engineer with 8+ years bridging design and code. I've built and shipped frontends for products reaching millions, at companies like ",[18,19,23],"a",{"href":20,"rel":21},"https:\u002F\u002Fwww.vivo.com.br",[22],"nofollow","Vivo",", ",[18,26,29],{"href":27,"rel":28},"https:\u002F\u002Fbanco.bradesco",[22],"Bradesco",", and ",[18,32,35],{"href":33,"rel":34},"https:\u002F\u002Fwww.tim.com.br",[22],"Tim",", and right now I'm ",[38,39,40,41],"strong",{},"UX Engineer at ",[18,42,45],{"href":43,"rel":44},"https:\u002F\u002Fwww.launchbrightly.com",[22],"LaunchBrightly",", where I own a 150+ component design system in ",[18,48,51],{"href":49,"rel":50},"https:\u002F\u002Fwww.figma.com",[22],"Figma"," that we consume in a Vue 3 application powered by an Amplify backend. I basically live in the overlap between design and engineering — design systems, motion, type, all the small details that make an interface quietly get out of the way. (",[18,54,57],{"href":55,"rel":56},"https:\u002F\u002Fgithub.com\u002FLos",[22],"GitHub"," · ",[18,60,63],{"href":61,"rel":62},"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Flos799",[22],"LinkedIn",")",[10,66,67],{},"That overlap is exactly why this one's been on my mind, so let me get into it.",[10,69,70],{},"I get asked about this a lot — what do I actually think about AI for design? And I've been testing pretty much everything I can get my hands on. A lot of it is genuinely impressive, but I kept hitting the same wall every single time: it's really hard to keep and maintain a proper design system the way we do in Figma. That part never quite held up. With this new approach, though, I think that's finally about to change.",[10,72,73,74,77],{},"I've spent years living inside Figma. At ",[18,75,45],{"href":43,"rel":76},[22]," it was the center of everything — every screen, every component, every handoff started on the canvas. So I really don't say this lightly: I think manual design in Figma is on its way out, and we're already starting to move away from it.",[10,79,80,81,85],{},"Honestly, I don't think the future of design is a canvas at all. I think it's a file. A ",[82,83,84],"code",{},"DESIGN.md"," that AI coding tools read, and then generate and maintain the whole system from.",[87,88,90],"h2",{"id":89},"the-canvas-was-always-a-translation-layer","The canvas was always a translation layer",[10,92,93,94,97],{},"Nobody loves admitting this, but the Figma file is never actually the product. It's a gorgeous, hand-drawn ",[13,95,96],{},"description"," of the product that someone then has to translate into code. So you end up maintaining two sources of truth and holding them together by sheer willpower.",[10,99,100],{},"And every team I've been on eventually drifts. The Figma file says one thing, production says another. Tokens go stale. Someone tweaks a button's hover state in code and it never makes it back to the library. Bit by bit, the canvas turns into fiction — beautiful, detailed fiction that nobody fully trusts.",[10,102,103],{},"We've spent years treating the most expensive thing we make, the hand-drawn mockup, as the source of truth. It was never that. It was always just a translation layer.",[10,105,106],{},[107,108],"img",{"alt":109,"src":110},"Hand-drawn sketch titled \"the file and the product disagree.\" A Figma window shows an indigo \"Publish\" button; a Production window shows a different green \"Save\" button. A broken red arrow labeled \"drift!\" runs between them, and a shrugging stick figure asks \"which one is true?\"","https:\u002F\u002Fdev-to-uploads.s3.us-east-2.amazonaws.com\u002Fuploads\u002Farticles\u002F2r6a5q9dso18uaz2s4cm.png",[87,112,114],{"id":113},"designmd-as-the-source-of-truth","DESIGN.md as the source of truth",[10,116,117,118,120],{},"So what if we flip it? What if the source of truth was a written spec instead? A ",[82,119,84],{}," that describes the system in plain language — your principles, tokens, spacing scale, how components behave, the states they have, even the voice. Not pixels. Just intent.",[122,123,124],"blockquote",{},[10,125,126,129],{},[38,127,128],{},"The DESIGN.md idea:"," a written spec — principles, tokens, spacing scale, component behavior — that acts as the single source of truth, instead of hand-drawn pixels.",[10,131,132],{},"And this isn't hypothetical. Here's a real slice of the one we use at LaunchBrightly:",[134,135,140],"pre",{"className":136,"code":137,"language":138,"meta":139,"style":139},"language-markdown shiki shiki-themes github-light github-dark","## Color Palette & Roles\n- Indigo 600 (#4f46e5): primary buttons, active states, focus rings, links\n- Green 600 (#16a34a): success buttons, synced states, positive actions\n- Rose 600 (#e11d48): danger buttons, error states, destructive actions\n- Orange 500 (#f97316): warning indicators, \"changed\" status\n\n## Spacing System\nBuilt on Tailwind's 4px base unit:\n- Component gaps: gap-1 (4px), gap-2 (8px), gap-3 (12px)\n- Padding: p-2 (8px), p-3 (12px), p-4 (16px)\n\n## Buttons (AppButton)\n- Primary: bg-indigo-600 \u002F hover bg-indigo-700 \u002F active bg-indigo-800\n- Radius: rounded-md (6px). Focus: ring-2 ring-indigo-500\n- States: default, hover, disabled, loading\n","markdown","",[82,141,142,150,156,162,168,174,181,187,193,199,205,210,216,222,228],{"__ignoreMap":139},[143,144,147],"span",{"class":145,"line":146},"line",1,[143,148,149],{},"## Color Palette & Roles\n",[143,151,153],{"class":145,"line":152},2,[143,154,155],{},"- Indigo 600 (#4f46e5): primary buttons, active states, focus rings, links\n",[143,157,159],{"class":145,"line":158},3,[143,160,161],{},"- Green 600 (#16a34a): success buttons, synced states, positive actions\n",[143,163,165],{"class":145,"line":164},4,[143,166,167],{},"- Rose 600 (#e11d48): danger buttons, error states, destructive actions\n",[143,169,171],{"class":145,"line":170},5,[143,172,173],{},"- Orange 500 (#f97316): warning indicators, \"changed\" status\n",[143,175,177],{"class":145,"line":176},6,[143,178,180],{"emptyLinePlaceholder":179},true,"\n",[143,182,184],{"class":145,"line":183},7,[143,185,186],{},"## Spacing System\n",[143,188,190],{"class":145,"line":189},8,[143,191,192],{},"Built on Tailwind's 4px base unit:\n",[143,194,196],{"class":145,"line":195},9,[143,197,198],{},"- Component gaps: gap-1 (4px), gap-2 (8px), gap-3 (12px)\n",[143,200,202],{"class":145,"line":201},10,[143,203,204],{},"- Padding: p-2 (8px), p-3 (12px), p-4 (16px)\n",[143,206,208],{"class":145,"line":207},11,[143,209,180],{"emptyLinePlaceholder":179},[143,211,213],{"class":145,"line":212},12,[143,214,215],{},"## Buttons (AppButton)\n",[143,217,219],{"class":145,"line":218},13,[143,220,221],{},"- Primary: bg-indigo-600 \u002F hover bg-indigo-700 \u002F active bg-indigo-800\n",[143,223,225],{"class":145,"line":224},14,[143,226,227],{},"- Radius: rounded-md (6px). Focus: ring-2 ring-indigo-500\n",[143,229,231],{"class":145,"line":230},15,[143,232,233],{},"- States: default, hover, disabled, loading\n",[10,235,236],{},"That's the whole thing. And the best part is that everyone can read it — a designer, an engineer, a founder, even the AI — without anyone having to translate.",[238,239,241],"h3",{"id":240},"tailwind-made-this-transition-possible","Tailwind made this transition possible",[10,243,244,245,24,248,24,251,24,254,257],{},"Look at what the spec is actually written in: ",[82,246,247],{},"indigo-600",[82,249,250],{},"gap-3",[82,252,253],{},"rounded-md",[82,255,256],{},"ring-2",". Those aren't made-up design words. They're Tailwind utility classes, the exact same vocabulary the code already speaks.",[10,259,260,261,264,265,267,268,270],{},"That's the quiet reason this works for us. Because LaunchBrightly's UI was already built on Tailwind, our design language was already a finite set of named tokens instead of arbitrary pixel values. So going from \"code\" to \"spec\" wasn't really a translation — the spec is just the codebase's own vocabulary, lifted out and written down. A model reading ",[82,262,263],{},"bg-indigo-600"," in ",[82,266,84],{}," and emitting ",[82,269,263],{}," in a component is a closed loop. Nothing to interpret, nothing to drift. Tailwind basically turned our design system into something you can describe in words a machine already understands.",[10,272,273,274,277],{},"From there, an AI coding tool reads that file and ",[13,275,276],{},"generates"," the design system from it. Same way it already reads your codebase and reasons about it, it reads the design intent and hands you back something that's easy to use and easy to keep up. Change the spec, regenerate. There's nothing to keep in sync, because the canvas was never the truth in the first place. The intent was.",[10,279,280,281,284,285,287],{},"None of this is some far-off idea, either. The biggest unlock I've ever found working on a design system was writing the spec ",[13,282,283],{},"before"," the code. ",[82,286,84],{}," is just that lesson taken all the way: if the spec is the contract, make the spec the thing everyone (and every tool) actually works from.",[87,289,291],{"id":290},"you-dont-even-have-to-write-it-by-hand","You don't even have to write it by hand",[10,293,294,295,297],{},"Here's what makes this practical and not just a nice idea: you don't start from a blank ",[82,296,84],{},".",[10,299,300,301,303],{},"An AI coding tool can read your existing codebase — the components you've already shipped, the tokens sitting in your CSS, the patterns that repeat all over the place — and write the first draft of the spec straight from what's already running in production. Point it at the Figma MCP on top of that, and it'll reconcile both sides: what the canvas claims, what the code actually does, and where the two have drifted apart. What you get back is a ",[82,302,84],{}," that describes the system as it really is, not how someone hoped it looked two quarters ago.",[10,305,306],{},"That alone is worth it. Your spec stops being a document you keep alive by discipline and becomes something you can just regenerate from reality whenever you want.",[87,308,310],{"id":309},"from-one-file-to-everything","From one file to everything",[10,312,313,314,317,318,320],{},"Now the fun part, and honestly the piece that's actually changing this for me: ",[38,315,316],{},"Claude Design",". You paste your ",[82,319,84],{}," into it, drop in your Figma exported files, and a few minutes later you've got an entire design system ready to use — not random one-off screens, but a coherent, on-brand system you can actually build on.",[10,322,323],{},[107,324],{"alt":325,"src":326},"Hand-drawn doodle: a central DESIGN.md file marked with a star as the source of truth, with green arrows radiating out to Mockups, Slides, Prototype, Code, and Components","https:\u002F\u002Fdev-to-uploads.s3.us-east-2.amazonaws.com\u002Fuploads\u002Farticles\u002F7p6klrz55arzxb1wwdbi.png",[10,328,329],{},"And it's not just mockups. That same source of truth fans out into everything that used to be its own manual grind:",[331,332,333,337,340,343],"ul",{},[334,335,336],"li",{},"High-fidelity mockups for new features",[334,338,339],{},"Interactive prototypes to test a flow before building it",[334,341,342],{},"Presentation decks that are actually on-brand, automatically",[334,344,345],{},"A component library that matches the spec by construction",[10,347,348,349,352,353,356],{},"This is the part that still surprises me, honestly. Work that used to eat whole days — exporting assets, rebuilding the deck template, re-drawing the same card component for the fifth time — collapses into a few minutes. Because none of it is being ",[13,350,351],{},"drawn"," anymore. It's all ",[13,354,355],{},"generated"," from one legible source of truth, so it's consistent by default and it updates everywhere the moment the truth changes.",[10,358,359,360,362,363,366],{},"And maintaining it — the exact wall every other tool ran into for me — turns out to be the easy part now. To evolve the system, I just ask Claude (or whatever AI tool I'm working in) to update the ",[82,361,84],{},". You can even keep standing instructions in a ",[82,364,365],{},"CLAUDE.md"," so it always follows your conventions. Then you regenerate the system in Claude Design, and you're done. No combing through hundreds of Figma layers by hand to keep everything in line.",[87,368,370],{"id":369},"collaboration-moves-into-the-tool","Collaboration moves into the tool",[10,372,373],{},"Honestly, this is the part I'm most excited about: collaboration stops being its own separate activity.",[10,375,376,377,380,381,384],{},"Right now, collaboration happens ",[13,378,379],{},"around"," the design. A comment on a frame, a thread in Slack, a handoff doc, a ticket somewhere. The file just sits there while the real conversation lives everywhere else. With a spec-driven tool, the conversation moves ",[13,382,383],{},"inside"," it. You talk about the system by editing the thing that produces the system.",[10,386,387],{},"And it stops being a designers-only club. A founder can describe a positioning shift and watch it ripple through the system. An engineer can ask why a token exists and change it in the same place. Marketing, product, support — every layer of the company can read and contribute to the same source of truth, because it's written in plain language and not locked behind a tool only designers know how to drive.",[10,389,390],{},[107,391],{"alt":392,"src":393},"Hand-drawn diagram titled \"everyone reads the same truth.\" Four stick figures labeled designer, engineer, founder, and marketing are each connected by green lines to a single central DESIGN.md file.","https:\u002F\u002Fdev-to-uploads.s3.us-east-2.amazonaws.com\u002Fuploads\u002Farticles\u002F72p55l2zyg62x39qok3z.png",[10,395,396],{},"And that's the real shift for me. It's not \"AI draws our screens for us.\" It's that everyone finally shares one source of truth, and that truth is something they can all actually read.",[87,398,400],{"id":399},"what-were-actually-doing","What we're actually doing",[10,402,403],{},"None of this is theoretical for me. At LaunchBrightly it's slowly becoming how we really work. We started in Figma, and we're moving off it toward exactly this: a written design spec that AI tooling reads and builds from. It's early, it's a bit messy, and I'm not going to pretend the tools are all the way there yet.",[10,405,406,407,410],{},"But it feels right in the same way moving from jQuery to component frameworks felt right. Back then, the unlock was treating UI as a function of state instead of a pile of manual DOM edits. This is the same jump, one level up: treating ",[13,408,409],{},"design"," as a function of intent instead of a pile of manual canvas edits.",[87,412,414],{"id":413},"what-doesnt-change","What doesn't change",[10,416,417,418,421],{},"One thing I want to be clear about: the fundamentals don't move. Taste still matters. Accessibility still matters. Knowing ",[13,419,420],{},"why"," a spacing scale feels right is still the hard part, and it's still very human.",[10,423,424],{},"AI doesn't get you out of caring about the person using what you built. It just clears out the busywork between caring and shipping. The canvas was busywork dressed up as craft. The craft was always in the decisions — and those, we get to keep.",[87,426,428],{"id":427},"references","References",[331,430,431,440],{},[334,432,433,436,437,439],{},[18,434,45],{"href":43,"rel":435},[22]," — the screenshot-automation SaaS where this workflow is taking shape. The ",[82,438,84],{}," excerpts above are from our real design system.",[334,441,442,447],{},[18,443,446],{"href":444,"rel":445},"https:\u002F\u002Ftailwindcss.com",[22],"Tailwind CSS"," — the utility-token vocabulary that made our code-to-spec transition a closed loop rather than a translation.",[10,449,450],{},"A more formal take on the same idea — Google Labs' open format for describing a visual identity to coding agents: machine-readable tokens (YAML) plus human-readable rationale (Markdown), with linting (including WCAG contrast checks), diffing, and export to Tailwind:",[10,452,453,454],{},"→ ",[18,455,458],{"href":456,"rel":457},"https:\u002F\u002Fgithub.com\u002Fgoogle-labs-code\u002Fdesign.md",[22],"github.com\u002Fgoogle-labs-code\u002Fdesign.md",[460,461,462],"style",{},"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);}",{"title":139,"searchDepth":152,"depth":152,"links":464},[465,466,469,470,471,472,473,474],{"id":89,"depth":152,"text":90},{"id":113,"depth":152,"text":114,"children":467},[468],{"id":240,"depth":158,"text":241},{"id":290,"depth":152,"text":291},{"id":309,"depth":152,"text":310},{"id":369,"depth":152,"text":370},{"id":399,"depth":152,"text":400},{"id":413,"depth":152,"text":414},{"id":427,"depth":152,"text":428},"2026-06-29","Why I think manual design in Figma is on its way out, and why a DESIGN.md file plus AI coding tools will become the real source of truth.","md",{},"\u002Fblog\u002Fdesign-md-is-the-new-figma",{"title":5,"description":476},"blog\u002Fdesign-md-is-the-new-figma",null,"k2GK4UWIA-UBTMHfrCtMAsgWie72qXjdyKlU_wZn1Zw",1787271781480]