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/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 · 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 · 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 · 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 · 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 · 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 · 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 · 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 · 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 · 04/05/2025
Current status: trying to scale Playwright with LLMs
cianfrani.dev
Controlling Browsers with LLMs
The one where I look at how the playwright MCP works
010
Mark Cianfrani @cianfrani.me · 26/04/2025
Playwright just dropped a super useful “ref” option that will add an aria-ref attr. Allows MCP to interact entirely with the aria snapshot instead of the whole DOM/images
100
Mark Cianfrani @cianfrani.me · 19/04/2025
Take advantage of the AI hype to sell accessibility. Tools like playwright use chromes accessibility tree as a much leaner way for LLMs to “see” the page. Having 500k divs is about to get real expensive github.com/microsoft/pl...
github.com
GitHub - microsoft/playwright-mcp: Playwright MCP server
Playwright MCP server. Contribute to microsoft/playwright-mcp development by creating an account on GitHub.
000
Mark Cianfrani @cianfrani.me · 08/04/2025
> The flight engineer’s intense focus on systems problems often distracted one or both of the pilots, sometimes resulting in no one “flying the airplane.” Planes used to have a 3rd crew member until automation made them so bored they became a liability to safety.
ethw.org
First-Hand:Evolution of the 2-Person Crew Jet Transport Flight Deck
000
Mark Cianfrani @cianfrani.me · 08/04/2025
People are adverse to CSS because the word “cascade” is often not a good thing en.m.wikipedia.org/wiki/Cascade... see also: disaster
en.m.wikipedia.org
Cascade effect - Wikipedia
200
Mark Cianfrani @cianfrani.me · 07/04/2025
> Ebbatson surveyed commercial pilots, asking them whether “they felt their manual flying ability had been influenced by the experience of operating a highly automated aircraft.” Fully 77 percent reported that “their skills had deteriorated”; just 7 percent felt their skills had improved
100
Mark Cianfrani @cianfrani.me · 01/04/2025
An MCP server for your design system, except it intentionally gaslights the LLM to make more API requests ($$$) if it detects the user is using Tailwind
150
Mark Cianfrani @cianfrani.me · 29/03/2025
that time when Christopher Alexander + co designed a beautiful building and had it butchered after they passed it off to get drawn cianfrani.dev/cards/source...
cianfrani.dev
Christopher Alexander
020
Mark Cianfrani @cianfrani.me · 28/03/2025
> Another common mistake is being seduced by the availability of a rich color palette. The first instinct of a child presented with a big box of crayons is to try them all. www.designmatrix.com/pl/cyberpl/c... Color ramps are an anti pattern.
designmatrix.com
Color Is Information
Cyberpatterns, a pattern language for software systems design, including user interfaces: Color Is Information
110
Mark Cianfrani @cianfrani.me · 19/03/2025
Users don't fully understand what the design system is (neither do I sometimes). For many, it's a product requirement. That's a bad combo that creates fear and incentivizes a "hand held" expectation which no maintainer/s can live up to.
110
Mark Cianfrani @cianfrani.me · 18/03/2025
I've been having a ton of fun building my own personal note taking MCP server. Overkill? Probably cianfrani.dev/posts/implic...
cianfrani.dev
Implicit Prompting Through MCP Tools
You can implicitly run prompts via MCP Tools via required inputs
120
Mark Cianfrani @cianfrani.me · 10/03/2025
Love this—gov.uk tried something. Tested it. It had accessibility issues. So they didn’t do it. And it helped inform future iterations. technology.blog.gov.uk/2018/05/21/s...
technology.blog.gov.uk
Sticky elements: functionality and accessibility testing
In GOV.UK's Modelling Services team we looked at the possibility of using sticky functionality as part of our work with step by step navigation elements. Here’s what we found. Sticky or fixed elements...
1175
Mark Cianfrani @cianfrani.me · 28/02/2025
It’s actually pretty trivial to change 1 thing in 20 different places now and a lot of best practices were built on top of that being a hard thing to do. Idk
010
Mark Cianfrani @cianfrani.me · 26/12/2024
the case for read-only radio buttons and why you might need them. I'm writing way outside of my comfort zone and would love to be fact checked by any accessibility experts on this one: cianfrani.dev/posts/where-...
cianfrani.dev
Where are all the read-only radio buttons?
Why aren't read-only radio buttons more common?
370
Mark Cianfrani @cianfrani.me · 24/12/2024
Your design system is not a tree. We/I spend too much time trying to put things into boxes. Is this a component? A pattern? A token? Instead, start with the problem. A disabled button, for example, exists in so many different contexts and patterns. blogs.ischool.berkeley.edu/i103su12/fil...
Diagram showing a Venn diagram with four overlapping circles and three tree structures. The text explains that individual trees can be visualized, but the overlapping semilattice structure is too complex to visualize all at once. Excerpt from Christopher Alexander's "A City is not a Tree"
1111
Mark Cianfrani @cianfrani.me · 18/12/2024
2024 and I still know nothing. Accessibility is by far the hardest topic and I failed (many) an interview because I didn't know aria-disabled vs. disabled. cianfrani.dev/posts/design...
cianfrani.dev
Design System Wisdom 2024
Some additional wisdom I've learned working with design systems
061
Mark Cianfrani @cianfrani.me · 13/12/2024
Christmas lights—but they respect the user’s prefers-reduced-motion preference
130
Mark Cianfrani @cianfrani.me · 12/12/2024
Cannot wrap my head around why radios cannot be read only? Use case: submit a form, but need to lock resubmissions. Disabled hides it completely
010
Mark Cianfrani @cianfrani.me · 05/12/2024
Is there a better way to get metrics on (your) users that aren't using the browser default 16px font size? POV: youre trying to advocate for testing how your UI scales when 1rem isnt 16px. Send window.getComputedStyle(document.body).fontSize to analytics (assuming body is always 1rem)?
000
Mark Cianfrani @cianfrani.me · 25/11/2024
Build more tiny little web apps for loved ones.
141
Mark Cianfrani @cianfrani.me · 21/11/2024
I hate how genuinely useful this would be.
MDN limited availability disclosure that includes Figma as a browserMDN browser support table for text-spacing-trim that includes Figma as a browser.
020
Mark Cianfrani @cianfrani.me · 15/11/2024
How to break 99 websites. It's a shame because base 24px font size looks so much better in nearly every scenario that doesn't need excel-level information density.
Safari accessibility setting: "Never use font sizes smaller than 24"
010
Mark Cianfrani @cianfrani.me · 14/11/2024
I was fully expecting this to open some new AI clippy feature and was pleasantly surprised when all it did was change the UI a little.
Sparkle icon next to the text "Try the new merge experience"
000
Mark Cianfrani @cianfrani.me · 10/11/2024
This is a good component. I love this thing so much. There’s something really satisfying about tiny boxes that do one thing well that scratches some itch in my brain. Knob-Driven Development: make every prop matter.
A Boss BD-2 Blues Driver guitar effects pedal
2100
Mark Cianfrani @cianfrani.me · 08/11/2024
Thinking about how much of my job would be irrelevant if browser defaults looked even 1% better.
110
Mark Cianfrani @cianfrani.me · 07/11/2024
messing with a set of web components to find the nearest token that you can hopefully drop into your docs or storybook. anyone have any w3c spec files they can donate to the cause?
040
Mark Cianfrani @cianfrani.me · 06/11/2024
For every issue I open in our design system, there are 10 more I skip because the context switch is too exhausting. I'm less likely if I can fix the problem myself and keep working. Toying around with the idea of using CSS shadow parts as a signal to maintainers, kind of like a Detach Instance
020
Mark Cianfrani @cianfrani.me · 04/11/2024
“Come Wander With Me” is the best episode of The Twilight Zone.
010