Sign in

Mark Cianfrani

@cianfrani.me
550 followers 352 following 127 posts

design system engineer, design tokens + web components. Current status: A Pattern Language cianfrani.dev

PostsRepliesMedia
Mark Cianfrani @cianfrani.me · 08/05/2026
👋 you know I hadn’t even considered this through the lens of AI but it’s scary how relevant it feels now
020
Mark Cianfrani @cianfrani.me · 04/05/2026
Not sure if there’s even a difference anymore. I’ve been staring at this stuff for a stupid amount of time and I could not tell whatsoevrr
010
Mark Cianfrani @cianfrani.me · 04/05/2026
Amazing, thank you! I also love how that answer is the same answer for 90% of this stuff and I’m always overthinking it.
100
Mark Cianfrani @cianfrani.me · 03/05/2026
How are you making these graphics? They look amazing and consistent across your other posts. Huge fan Also 10 billion percent. Your session transcripts are worth their weight in gold. github.com/markacianfrani/devlog getting your eng org to centralize them is the biggest ROI
github.com
GitHub - markacianfrani/devlog
Contribute to markacianfrani/devlog development by creating an account on GitHub.
100
Mark Cianfrani @cianfrani.me · 08/03/2026
One good design token can save you from shipping 50mb of javascript slop. open.substack.com/pub/markacia...
open.substack.com
Using LLMs to Dogfood Your Design Tokens
or the case for ending component libraries
020
Mark Cianfrani @cianfrani.me · 07/03/2026
Does this just all work out of the box bc html?
100
Mark Cianfrani @cianfrani.me · 27/02/2026
I just one person at my company to tell me about what new css stuff I can use and let me have the joy of ripping out abomination. What job title is that? Keeper of knowledge?
110
Mark Cianfrani @cianfrani.me · 30/01/2026
cianfrani.dev/posts/geneti... obligatory
cianfrani.dev
Genetic Diversity
Tired of reading AI-generated
030
Mark Cianfrani @cianfrani.me · 17/01/2026
Ten Billion Percent!!!!
010
Mark Cianfrani @cianfrani.me · 13/01/2026
I feel exactly the same way so. Lmk if I lost you at any point and I’ll add more deets. I 1. couldn’t tell if this would be useful to anyone other than myself 2. Assumed there was some other thing I wasn’t using that everyone else was
010
Mark Cianfrani @cianfrani.me · 12/01/2026
I’m still waiting for approval to try that extension but ask the dingus if it can execute JavaScript and if it can, it should totally work. I reallllly wish you didn’t need to use the terminal for this. The Claude code UI in the app is real good now tho
110
Mark Cianfrani @cianfrani.me · 12/01/2026
Phew I was afraid I glazed over the details a bit. Can’t wait to see what you do with this
100
Mark Cianfrani @cianfrani.me · 11/01/2026
what if the Figma MCP wasn't actually useless and let you write to your Figma files? (its easy) cianfrani.dev/posts/a-bett...
cianfrani.dev
A Better Figma MCP or How To Let Claude Design
The one where we give Claude access to the Figma API
3154
Mark Cianfrani @cianfrani.me · 08/01/2026
MCP UI. UI is largely dead. I haven’t logged into Jira all year. I’m not clicking your 4 page form anymore. Time to invent new maths
130
Mark Cianfrani @cianfrani.me · 04/01/2026
I am so sick of reading AI-generated content. cianfrani.dev/posts/geneti...
cianfrani.dev
Genetic Diversity
Tired of reading AI-generated
030
Mark Cianfrani @cianfrani.me · 22/12/2025
I actually hate CSS.
A book icon next to some text that wraps, misaligned
010
Mark Cianfrani @cianfrani.me · 06/12/2025
Literally, just let designers design and then throw an LLM to pattern match what colors actually get used and smooth any inconsistency.
Claude code asking about semantic intent wrt color usage
010
Mark Cianfrani @cianfrani.me · 29/11/2025
I can’t….I’ve actually never seen that before in my life. This tech is so wild.
media.tenor.com
a man in a suit and tie is waving his hand in the audience .
Alt: Seinfeld in a suit and tie is waving his hand in the audience .
010
Mark Cianfrani @cianfrani.me · 29/11/2025
Big time! Or curating your own pattern language. I also think most big companies prior art is actually a net negative so independent has a crazy advantage here in some respect
110
Mark Cianfrani @cianfrani.me · 29/11/2025
I don’t have a good practical answer though. I literally just slap its hand over and over until the codebase reaches critical mass and can give enough prior art that it usually stops doing the thing. If it’s really bad I’ll bake it into a /review command
110
Mark Cianfrani @cianfrani.me · 29/11/2025
Does it know that 🤔? Im definitely guilty of not following best practices when prototyping and abuse globalThis. Just kidding, that’s giving Claude too much credit.
210
Mark Cianfrani @cianfrani.me · 28/11/2025
how big is the repo/project?
100
Mark Cianfrani @cianfrani.me · 28/11/2025
Keep playing with this and you’ll see how 20 good tokens and some well crafted MCP will steamroll all these component libraries everyone built last year. Jk. AI bad.
000
Mark Cianfrani @cianfrani.me · 28/11/2025
Tools like CC will now send up an accepts text/markdown header jawn that you can respect and just send markdown down the wire. Other clients like opencode will just say fuck it and convert every webfetch to markdown. Storybook is embarrassing and their first MCP was actually a joke I think.
100
Mark Cianfrani @cianfrani.me · 26/11/2025
Nuxt isn’t React but 10/10
100
Mark Cianfrani @cianfrani.me · 26/11/2025
For real. Love the space ghost. I thought it was just gonna be like a zoom call
020
Mark Cianfrani @cianfrani.me · 26/11/2025
I’ve never been more sold to. Also holy shit the production on this is 🤌
110
Mark Cianfrani @cianfrani.me · 04/11/2025
New global design system just dropped. If I see one more <SlopCard> I’m gonna lose it.
An AI generated card component with a left border width that’s also rounded.
020
Mark Cianfrani @cianfrani.me · 02/11/2025
Would love to know the postmortem. Is it still getting used? what’s more popular tokens or components?
000
Mark Cianfrani @cianfrani.me · 01/11/2025
Copy the tokens and give it a link to the spec and be like “what’re the parts that are useful for us and then explain to me what any of this shit means”
000
Mark Cianfrani @cianfrani.me · 01/11/2025
But I am genuinely grateful for The Spec and very happy to finally breathe.
000
Mark Cianfrani @cianfrani.me · 01/11/2025
And. I just read a thing where Atlassian said they were, until v recently, just copy and pasting json into figma and auditing tokens that way? So like none of this shit really matters.
100
Mark Cianfrani @cianfrani.me · 01/11/2025
I still think just having a bunch of json files is fine. “Combotoriallaial explosion” isn’t in my vocabulary.
110
Mark Cianfrani @cianfrani.me · 01/11/2025
Like you have Brand A and Brand B jawns (modifiers? Idk) but you also want to have a fixed typography jawn and a fluid typography jawn.
100
Mark Cianfrani @cianfrani.me · 01/11/2025
after having The Thing explain to me what “orthogonal” means like I’m six years old, I think I finally get it and the design token resolver spec is kind of cool, tho unnecessarily gate kept by jargon.
200
Mark Cianfrani @cianfrani.me · 01/10/2025
codepen.io/jonneal/pen/... or css custom units 🙏
codepen.io
CSS Custom Units
A custom unit is a variable being used as the unit of a real number....
110
Mark Cianfrani @cianfrani.me · 27/09/2025
My god you nailed it. Just let designers design.
010
Mark Cianfrani @cianfrani.me · 15/09/2025
The docs: “accessible checkbox adheres to the WAI ARIA checkbox pattern so you know it’s good. Definitely don’t check for yourself”
110
Mark Cianfrani @cianfrani.me · 15/07/2025
“Doesn’t scale” is such a cop out reply. @stuffbreaker.bsky.social seriously huge props for trying to at least push this.
020
Mark Cianfrani @cianfrani.me · 14/07/2025
AI context is just a black and white mead composition book cianfrani.dev/posts/buildi...
cianfrani.dev
Building an AI Agent with Typescript
The one where I build an AI agent in typescript
000
Mark Cianfrani @cianfrani.me · 28/06/2025
They need to come up with the right marketing name for it.
030
Mark Cianfrani @cianfrani.me · 27/06/2025
Documenting every single permutation of every component always felt redundant. If you have an input component, you can easily guess what the textarea will look like. Future of DS/AI is patterns. No need to waste context.
000
Mark Cianfrani @cianfrani.me · 14/06/2025
Who said we shouldn’t put jokes in our code? Or was that the joke
010
Mark Cianfrani @cianfrani.me · 08/06/2025
….brb launching my new startup
110
Mark Cianfrani @cianfrani.me · 08/06/2025
Idk maybe like salesforce and GitHub scale orgs tie your performance evaluations into how much you misuse the design system so this isn’t a problem for most people
110
Mark Cianfrani @cianfrani.me · 08/06/2025
Same but my god the shit I’ve seen people (myself included) do. The _doesn’t mean shit. Emoji all the way. I don’t think people care if it’s internal if it works. People will probably stumble upon the private var via dev tools, likely frustrated already.
110
Mark Cianfrani @cianfrani.me · 07/06/2025
I’m convinced the overlap of people that use angular and people that use web components is exactly 8 people.
210
Mark Cianfrani @cianfrani.me · 23/05/2025
Idk if I were a manager id give everyone like a week to do their own project, prototype something, let em pick the tech, not have to use react, sing the songs they want want to sing and then never talk about it.
010
Mark Cianfrani @cianfrani.me · 08/05/2025
Need to make my own component library so I can name it cianfranui
050
Mark Cianfrani @cianfrani.me · 08/05/2025
The aria label is so good. “Make it accessible”
130