Mark Cianfrani
@cianfrani.me
design system engineer, design tokens + web components. Current status: A Pattern Language
https://cianfrani.dev/
https://cianfrani.dev/
New global design system just dropped. If I see one more <SlopCard> I’m gonna lose it.
November 4, 2025 at 1:29 AM
New global design system just dropped. If I see one more <SlopCard> I’m gonna lose it.
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.
November 1, 2025 at 12:53 AM
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.
AI context is just a black and white mead composition book cianfrani.dev/posts/buildi...
Building an AI Agent with Typescript
The one where I build an AI agent in typescript
cianfrani.dev
July 14, 2025 at 12:05 PM
AI context is just a black and white mead composition book cianfrani.dev/posts/buildi...
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.
June 27, 2025 at 12:14 PM
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.
Who said we shouldn’t put jokes in our code? Or was that the joke
June 14, 2025 at 3:39 AM
Who said we shouldn’t put jokes in our code? Or was that the joke
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.
May 23, 2025 at 4:05 AM
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.
Need to make my own component library so I can name it cianfranui
May 8, 2025 at 5:08 PM
Need to make my own component library so I can name it cianfranui
Current status: trying to scale Playwright with LLMs
Controlling Browsers with LLMs
The one where I look at how the playwright MCP works
cianfrani.dev
May 4, 2025 at 7:20 PM
Current status: trying to scale Playwright with LLMs
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
April 26, 2025 at 10:07 PM
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
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 - microsoft/playwright-mcp: Playwright MCP server
Playwright MCP server. Contribute to microsoft/playwright-mcp development by creating an account on GitHub.
github.com
April 19, 2025 at 8:29 PM
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...
> 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.
Planes used to have a 3rd crew member until automation made them so bored they became a liability to safety.
First-Hand:Evolution of the 2-Person Crew Jet Transport Flight Deck
ethw.org
April 8, 2025 at 9:57 PM
> 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.
Planes used to have a 3rd crew member until automation made them so bored they became a liability to safety.
People are adverse to CSS because the word “cascade” is often not a good thing en.m.wikipedia.org/wiki/Cascade... see also: disaster
Cascade effect - Wikipedia
en.m.wikipedia.org
April 8, 2025 at 12:15 PM
People are adverse to CSS because the word “cascade” is often not a good thing en.m.wikipedia.org/wiki/Cascade... see also: disaster
> 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
April 6, 2025 at 11:26 PM
> 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
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
April 1, 2025 at 1:10 AM
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
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/cards/source...
Christopher Alexander
cianfrani.dev
March 29, 2025 at 2:30 PM
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/cards/source...
> 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.
www.designmatrix.com/pl/cyberpl/c...
Color ramps are an anti pattern.
Color Is Information
Cyberpatterns, a pattern language
for software systems design, including user interfaces:
Color Is Information
www.designmatrix.com
March 28, 2025 at 1:19 PM
> 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.
www.designmatrix.com/pl/cyberpl/c...
Color ramps are an anti pattern.
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.
March 19, 2025 at 2:12 PM
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.
I've been having a ton of fun building my own personal note taking MCP server. Overkill? Probably
cianfrani.dev/posts/implic...
cianfrani.dev/posts/implic...
Implicit Prompting Through MCP Tools
You can implicitly run prompts via MCP Tools via required inputs
cianfrani.dev
March 18, 2025 at 8:40 PM
I've been having a ton of fun building my own personal note taking MCP server. Overkill? Probably
cianfrani.dev/posts/implic...
cianfrani.dev/posts/implic...
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/2018/05/21/s...
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...
technology.blog.gov.uk
March 10, 2025 at 12:10 PM
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/2018/05/21/s...
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
February 28, 2025 at 4:14 PM
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
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-...
Where are all the read-only radio buttons?
Why aren't read-only radio buttons more common?
cianfrani.dev
December 26, 2024 at 7:03 PM
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-...
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...
December 24, 2024 at 3:45 PM
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...
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...
Design System Wisdom 2024
Some additional wisdom I've learned working with design systems
cianfrani.dev
December 18, 2024 at 3:29 PM
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...
Christmas lights—but they respect the user’s prefers-reduced-motion preference
December 13, 2024 at 11:38 PM
Christmas lights—but they respect the user’s prefers-reduced-motion preference
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
December 12, 2024 at 2:25 PM
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