Into Design Systems

I am contributing to #Atomic open source on my weekends. If you code in a terminal user interface (TUI) using a screen reader or other assistive tech, I would like to pay you for 45 minutes of your time. I am researching how to make #agentic_coding #accessible and #equitable for people with disabilities. I have a small budget for research sessions, and I am looking for developers who will walk me through their real setup: what works, what you gave up on, what you had to build yourself. Here is why I think this matters right now. Terminal UIs break screen readers by design, not by neglect. A terminal UI redraws the screen in place. That is just how they work. But redrawing in place is also what makes a screen reader lose its spot, repeat old content, or go silent. Labels do not fix it. It needs a second way of rendering everything, top to bottom, as plain text. Many of the best coding agents run in the terminal first. If the terminal is unusable with a screen reader, the tool is unusable. That is happening with some of the most powerful tools we have. The image below is one moment from a terminal agent cockpit. Eight panes, one per agent. A line in the corner says one agent needs you. In the grid itself, the only thing marking which one is the color of a dot. It is a simulation I built, not a live capture. If a session is more than you want to take on, here are two questions I would still love answered in the comments. 1. If you tried a terminal coding agent and stopped using it, what were you doing when you gave up? 2. Which wastes more of your time: the tool's interface, or what the AI writes back? The interface: menus, spinners, permission prompts, progress indicators, the screen redrawing itself. What the AI writes back: tables, ASCII diagrams, long answers that bury the point. I keep turning over that second one. Vendors are starting to fix the interface. Almost nobody owns the output. Either way, please add your setup: screen reader, terminal app, operating system, and which coding tool. Terminal accessibility changes a lot from one terminal app to the next. Without that detail I cannot tell what your answer means. DM me for a session, or comment below if you would rather keep it light. What I will do with this. I will write up what I learn and share it publicly, crediting anyone who wants it. Then I will take the specific blockers to the teams building these tools. At least one of them is asking for exactly this right now. #Accessibility #ScreenReaders #DeveloperExperience #AgenticCoding #TUI #Terminal_UI #UX

How to run a local LLM on your Mac: a step by step guide for designers, Claude prompt included I wrote a tutorial for designers who want an AI model (local LLM) running on their own machine A local model runs on your own computer 💻 You download a file once and from then on the intelligence sits on your machine It works without an account and without internet nothing is billed per token and nobody can switch it off or quietly swap it for a worse version The tutorial takes you from nothing to a model you can actually use: - What to install - Which model fits your Mac - What to actually use it for - Claude prompt to set everything up 🔗🔗🔗 Link in comments Have you run a local model on your own machine yet? Tell me in the comments which one you tried and how it went #ai #design #claude #localllm

Come join us in Stockholm friends! 🇸🇪

7 Claude Code skills that improve your design 👇 • better-ui: radius, shadows, motion, icons • better-typography: type scale, wrapping, truncation • better-colors: OKLCH, palettes, contrast, theming • better-accessibility: focus, keyboard, ARIA, hit areas • better-layout: structure, reading order, breakpoints • better-writing: labels, errors, empty states • better-interface: runs all of them as one review There is even a skills CLI: it works in Claude Code, Codex and other agents Repo 👇 https://lnkd.in/gjmUJEj6 Creator: Jakub Krehel #ai #claudecode #frontend #designsystems

Here are 20 new Design Systems #jobs, I posted in the last two weeks 👇 Design → Perplexity, Design Systems Lead, San Francisco → Etsy, Staff Design Program Manager Design Systems, Brooklyn → Instacart, Sr. Product Designer II Design Systems, Remote US → Mercury, Staff Visual Designer Design Systems, SF / NY / Portland / Remote → Procore, Senior Product Designer Design Systems, Austin → Rocket, Lead Product Designer Design Systems, Michigan → Pliant, Senior Product Designer Design Systems, Berlin / Remote → H&M Group, Digital Product Designer Design System, Stockholm → Bank Pekao, UI / Design System Designer, Warsaw → EngiFlex, UX Designer Design System & Accessibility, Brussels → Capital, Senior Product Designer, Warsaw / Sofia / Limassol / Remote Engineering → Chime, Senior Frontend Engineer Design Systems, San Francisco → Dropbox, Frontend Product Software Engineer Design Systems, Remote Mexico → Assembled, Software Engineer Design Systems, Remote US / Canada → T-Mobile, Sr Design System Technologist, Frisco / Irvine / Denver → Grow Therapy, Frontend Engineer Platform, SF / NYC / Seattle → Certa, Senior Frontend Engineer, Remote India AI → SAP, AI Product Designer, Singapore → Proscia, Product Designer AI & Design Systems, Philadelphia → Awear, Design Lead Agentic AI Platform, Remote US All of them here updated weekly: 👉👉👉 jobs.intodesignsystems.com Hiring for a design systems role?  Drop it in the comments 👇 #designsystems #job #career

Claude Code skill that runs a workshop with you 👇

DESIGN. md: How to test a Design System (in Figma) with Claude Code and figma-cli 👇 Developers test their code Designers look at their design system and hope nothing broke 🤷♂️ So I built a way to actually test it It works like this: You write down what each component promises, for example: Button has 6 variants Every color comes from a token Height is always "this size" Hover and focus exist Then one command checks whether that is still true It catches things like a 7th button variant nobody knew about, a hardcoded hex where a token should be or an icon button that is 38px in one variant and 40px in all the others I ran it against GitHub's Primer. 1,015 nodes, 1,381 variables and it works really great No plugin, API or rate limits It talks to your local Figma app or Figma in the Browser via Claude Code Full write up here: https://lnkd.in/gVy_6Abi #designsystems #claudecode #ai #figma

Great setup! Figma x Claude Code x Storybook 👇

CLIs are making a big comeback in the past couple of years due to the ease at which they work with AI agents, and one of my favorite projects that I worked on this year was creating a CLI experience to generate scaffolded prototype environments for our designers and product managers with our design system at its core. A CLI can be a great way to generate prototypes with Claude Code, ensure there is no drift between your design system and your prototypes, help streamline your product development lifecycle, and reduce AI token use. With a CLI you can: ⮕ Have your design system as a pre-installed dependency ⮕ Provide templates of commonly used patterns and page layouts as a vibe coding starting point ⮕ If you have several products in your organization, you could provide templates based on product or team ⮕ Add context and rules for AI agents using the design system ⮕ Add hooks to have Claude check for design system or CLI updates ⮕ Provide skills that generate a manifest of all design system components and their props used in a prototype to aid the design hand-off to engineering. As AI makes it easier to generate UI fast, the design system is what keeps that speed from turning into inconsistency, and a CLI is one of the most practical ways to bake that guardrail directly into the workflow instead of relying on people to remember it. Have you or your team used a CLI with your design system and what cool things have you done with it? #DesignSystems #CLI #AI

There’s a lot of conversation right now about design systems taking on a new responsibility: teaching AI how to design consistently with your product. Most of that conversation still centers on visual consistency. The focus is on giving the agent the right components, tokens, typography, and interaction details. That might help an agent learn how your product looks, but it doesn’t necessarily teach it how your product works. The v0 team recently shared a demo of their new Design Systems 2.0 capabilities: GitHub, rebuilt using Shopify Polaris. As a technical demonstration, it was impressive. The details were unmistakably Polaris. The point of the demo wasn’t that Polaris was the right design system for GitHub. But that mismatch made it a particularly good illustration of the difference between visual language and product language. Polaris was designed for commerce, not for reviewing code. Applying it directly to GitHub made that difference stand out. The interface looked consistent, but the product language felt off. A cohesive product is more than shared building blocks. It needs consistent patterns, a shared sense of meaning, and a spatial model that helps people predict what will happen when they take action. Otherwise, it’s like walking through a house made from the same materials throughout, but the doors open in opposing directions and the staircases lead nowhere. Teaching an agent your design system is just the starting point. What matters just as much is passing on the logic and judgment that shaped the product in the first place. But what happens when that product judgment is still taking shape, and your design system doesn’t yet have those opinions embedded in it? When you build with AI, the agent fills the gaps with the most plausible generic forms, like icons in soft gray containers. That’s what I ran into recently while prototyping a payroll product in Claude Code. I wrote about what worked, what didn’t, and why the strongest results came from feeding product judgment back into the system.