This week's design systems conversation was pulled in two directions: AI's growing role in design workflows, and accessibility's non-negotiable demands. Storybook… Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 13-2026
article
TAG: AI TOOLINGREAD_TIME: 2_MIN
Storybook MCP for React
Storybook 10.3 introduces an MCP server for React that gives AI agents structured awareness of your component library, preventing them from generating patterns that conflict with your design system. The addon supplies agents with component metadata including stories, API docs, and usage examples, enabling reuse of existing components with fewer tokens. Agents can run component and accessibility tests via the MCP server and self-heal failures or escalate to developers when human judgment is needed. Live story previews are embedded directly inside the agent chat UI, so reviewers can inspect hover states and interactions without switching tools. Teams with split app and design-system Storybooks can share context across both using MCP composition, and Chromatic supports publishing the MCP server remotely with versioning and authorization built in.
ADA Title II Update: What We Know, What We Don't, and What to Do Now
Federal review activity around the ADA Title II web accessibility rule has generated speculation, but as of this writing no official changes to compliance deadlines or requirements have been announced. Deque distinguishes confirmed facts from rumors: a full rollback appears unlikely, a delay or modification is possible, but the underlying ADA obligation for state and local governments to provide equal digital access predates the rule and is enforced through DOJ investigations, settlements, and litigation regardless of any timeline shift. The article recommends continuing to align with WCAG 2.1 AA, maintaining automated accessibility testing in CI/CD pipelines, and building design systems with accessibility integrated from the start rather than treating it as a remediation task. Pausing accessibility work does not reduce legal risk — it increases it, because barriers to access violate ADA requirements today. The emphasis is on building sustainable, scalable accessibility capability rather than chasing compliance deadlines.
Nielsen Norman Group draws a precise distinction between generative UI (genUI) and vibe coding based on who initiates the design decision. In genUI the AI system autonomously decides that a visual or interactive element — a checkbox, a data visualization, a clarification widget — serves the user better than a text response; in vibe coding the user explicitly asks for a software artifact to be built. Vibe coding spans a wide specification spectrum, from a single-sentence prompt that delegates most structural choices to the AI, to a detailed paragraph specifying three-column layouts, Mapbox custom pins, drag-and-drop timelines, and local storage persistence. The article argues that genUI carries a higher design accountability than vibe coding because the AI is responsible not just for execution quality but for the judgment that an interface was needed at all. GenUI fails when that judgment is wrong, even if the rendered element is technically flawless. The authors introduce the concept of invisible AI, where AI-driven customization adapts the interface based on behavior and context without explicit user prompts, and note this demands evaluation through user research and task-completion metrics rather than mere render correctness.
Testing Font Scaling for Accessibility with Figma Variables
WCAG 2.2 Success Criterion 1.4.4 requires text to be resizable up to 200% without loss of content or functionality, a standard that 26% of mobile users already rely on by default. This article describes a 10-step process for simulating font scaling in Figma using number variables bound to font-size and line-height for each text style, covering scale increments of 120%, 140%, 160%, 180%, and 200%. The workflow requires auto layout applied consistently across all frames, text styles defined for every text element, and Figma variables structured per scale percentage using simple multiplication. Designers then copy screens and swap variable collections to expose layout breakdowns caused by fixed containers or missing auto layout configuration. Design systems that already use light/dark mode variable sets apply the same switching pattern, making the process incremental rather than disruptive. Issues that cannot be resolved in design are documented and handed off to the development team for code-level fixes.
Low vision encompasses a broad spectrum from age-related decline to conditions like glaucoma and retinitis pigmentosa, and most people in this group navigate with screen magnification or browser zoom rather than a screen reader. This guide covers seven concrete design considerations: maintaining a clear typographic hierarchy where heading levels reflect structure visually, grouping related content with backgrounds and consistent spacing, positioning high-priority controls like Compose buttons toward the top-left for magnification users, avoiding fixed heights on text containers so content at 200% zoom does not overflow, and placing notifications adjacent to their triggering action rather than as auto-dismissing toast messages in a corner. Sticky headers and footers are flagged as problematic at 400% zoom, where they can consume 60% of the visible viewport, and the article recommends converting navigation to a hamburger menu at high zoom levels. Features like Print and Export must remain accessible in smaller viewports rather than being silently removed from the mobile layout.
Relying on data-testid attributes to locate elements in tests is a code smell that silently permits inaccessible markup to pass test suites. When a button is replaced with a clickable div, a test using data-testid continues to pass even though the element is no longer keyboard accessible and carries no semantic ARIA role. Role-based selectors from Testing Library or Playwright's built-in query API enforce semantic HTML as a side effect: if getByRole cannot find an element, neither can a screen reader or keyboard user. The author advocates structuring test queries as natural language actions — clicking the Confirm Button in the Save Dialog, filling the Email Field in the Registration Form — which ties test readability to accessible naming. Practical tips include using semantic HTML for implicit ARIA roles, associating all form controls with visible or visually-hidden labels, using Testing Playground to discover the best selector, and inspecting the browser's Accessibility tree view in DevTools.
DesignCourse demonstrates Figma's updated MCP server and skills integration, which enables a bidirectional workflow between a live dev server and a Figma file. Using the use_figma skill in Claude Code, a running React app is translated into Figma with design tokens extracted from global CSS, Figma variables created to match, and every frame built with auto layout bound to those variables. The tutorial shows token-level round-tripping: changing the background color variable in Figma immediately updates all bound frames, and introducing a new token (navbar-bg: white) registers it back into the design system. The return journey — updating Figma designs back into the codebase — required a re-prompt due to the non-deterministic nature of LLMs, and the author notes the first attempt missed the background color change and converted a removed stroke to solid black. The workflow is positioned as a foundation for AI-infused SaaS development where branding and UI/UX decisions alternate between code and Figma.
Storybook 10.3 introduces an MCP server for React that gives AI agents structured awareness of your component library, preventing them from generating patterns that conflict with your design system. The addon supplies agents with component metadata including stories, API docs, and usage examples, enabling reuse of existing components with fewer tokens. Agents can run component and accessibility tests via the MCP server and self-heal failures or escalate to developers when human judgment is needed. Live story previews are embedded directly inside the agent chat UI, so reviewers can inspect hover states and interactions without switching tools. Teams with split app and design-system Storybooks can share context across both using MCP composition, and Chromatic supports publishing the MCP server remotely with versioning and authorization built in.
DesignCourse demonstrates Figma's updated MCP server and skills integration, which enables a bidirectional workflow between a live dev server and a Figma file. Using the use_figma skill in Claude Code, a running React app is translated into Figma with design tokens extracted from global CSS, Figma variables created to match, and every frame built with auto layout bound to those variables. The tutorial shows token-level round-tripping: changing the background color variable in Figma immediately updates all bound frames, and introducing a new token (navbar-bg: white) registers it back into the design system. The return journey — updating Figma designs back into the codebase — required a re-prompt due to the non-deterministic nature of LLMs, and the author notes the first attempt missed the background color change and converted a removed stroke to solid black. The workflow is positioned as a foundation for AI-infused SaaS development where branding and UI/UX decisions alternate between code and Figma.
ADA Title II Update: What We Know, What We Don't, and What to Do Now
Federal review activity around the ADA Title II web accessibility rule has generated speculation, but as of this writing no official changes to compliance deadlines or requirements have been announced. Deque distinguishes confirmed facts from rumors: a full rollback appears unlikely, a delay or modification is possible, but the underlying ADA obligation for state and local governments to provide equal digital access predates the rule and is enforced through DOJ investigations, settlements, and litigation regardless of any timeline shift. The article recommends continuing to align with WCAG 2.1 AA, maintaining automated accessibility testing in CI/CD pipelines, and building design systems with accessibility integrated from the start rather than treating it as a remediation task. Pausing accessibility work does not reduce legal risk — it increases it, because barriers to access violate ADA requirements today. The emphasis is on building sustainable, scalable accessibility capability rather than chasing compliance deadlines.
Nielsen Norman Group draws a precise distinction between generative UI (genUI) and vibe coding based on who initiates the design decision. In genUI the AI system autonomously decides that a visual or interactive element — a checkbox, a data visualization, a clarification widget — serves the user better than a text response; in vibe coding the user explicitly asks for a software artifact to be built. Vibe coding spans a wide specification spectrum, from a single-sentence prompt that delegates most structural choices to the AI, to a detailed paragraph specifying three-column layouts, Mapbox custom pins, drag-and-drop timelines, and local storage persistence. The article argues that genUI carries a higher design accountability than vibe coding because the AI is responsible not just for execution quality but for the judgment that an interface was needed at all. GenUI fails when that judgment is wrong, even if the rendered element is technically flawless. The authors introduce the concept of invisible AI, where AI-driven customization adapts the interface based on behavior and context without explicit user prompts, and note this demands evaluation through user research and task-completion metrics rather than mere render correctness.
Testing Font Scaling for Accessibility with Figma Variables
WCAG 2.2 Success Criterion 1.4.4 requires text to be resizable up to 200% without loss of content or functionality, a standard that 26% of mobile users already rely on by default. This article describes a 10-step process for simulating font scaling in Figma using number variables bound to font-size and line-height for each text style, covering scale increments of 120%, 140%, 160%, 180%, and 200%. The workflow requires auto layout applied consistently across all frames, text styles defined for every text element, and Figma variables structured per scale percentage using simple multiplication. Designers then copy screens and swap variable collections to expose layout breakdowns caused by fixed containers or missing auto layout configuration. Design systems that already use light/dark mode variable sets apply the same switching pattern, making the process incremental rather than disruptive. Issues that cannot be resolved in design are documented and handed off to the development team for code-level fixes.
Low vision encompasses a broad spectrum from age-related decline to conditions like glaucoma and retinitis pigmentosa, and most people in this group navigate with screen magnification or browser zoom rather than a screen reader. This guide covers seven concrete design considerations: maintaining a clear typographic hierarchy where heading levels reflect structure visually, grouping related content with backgrounds and consistent spacing, positioning high-priority controls like Compose buttons toward the top-left for magnification users, avoiding fixed heights on text containers so content at 200% zoom does not overflow, and placing notifications adjacent to their triggering action rather than as auto-dismissing toast messages in a corner. Sticky headers and footers are flagged as problematic at 400% zoom, where they can consume 60% of the visible viewport, and the article recommends converting navigation to a hamburger menu at high zoom levels. Features like Print and Export must remain accessible in smaller viewports rather than being silently removed from the mobile layout.
Relying on data-testid attributes to locate elements in tests is a code smell that silently permits inaccessible markup to pass test suites. When a button is replaced with a clickable div, a test using data-testid continues to pass even though the element is no longer keyboard accessible and carries no semantic ARIA role. Role-based selectors from Testing Library or Playwright's built-in query API enforce semantic HTML as a side effect: if getByRole cannot find an element, neither can a screen reader or keyboard user. The author advocates structuring test queries as natural language actions — clicking the Confirm Button in the Save Dialog, filling the Email Field in the Registration Form — which ties test readability to accessible naming. Practical tips include using semantic HTML for implicit ARIA roles, associating all form controls with visible or visually-hidden labels, using Testing Playground to discover the best selector, and inspecting the browser's Accessibility tree view in DevTools.
This week's design systems conversation was pulled in two directions: AI's growing role in design workflows, and accessibility's non-negotiable demands. Storybook 10.3 shipped an MCP server for React that gives AI agents structured awareness of component metadata — stories, API docs, usage examples — enabling agents to reuse existing design system components rather than generating conflicting patterns. Chromatic supports publishing the MCP server remotely with built-in versioning and auth. Separately, Figma's updated MCP server and skills integration, demonstrated via Claude Code's use_figma skill, established a bidirectional design token workflow: CSS globals flow into Figma as variables, and design changes round-trip back to code — though the non-deterministic nature of LLMs required re-prompting on the return pass.
Accessibility occupied significant space this week. Deque clarified the ADA Title II situation: despite federal review activity, no official compliance deadline changes have been announced, and the underlying ADA obligation for state and local governments remains enforceable through DOJ investigations regardless of any rule modifications. The recommendation is to continue WCAG 2.1 AA alignment and embed accessibility into CI/CD pipelines rather than treating it as a remediation phase. Tetralogical's guide on designing for low vision users surfaced concrete rules — no fixed heights on text containers, top-left placement for critical controls, and converting sticky navigation to hamburger menus at 400% zoom.
Testing and design methodology also featured: Dominik Dorfmeister's argument that data-testid selectors are an accessibility smell, because role-based selectors from Testing Library or Playwright enforce semantic HTML as a side effect, and Nielsen Norman Group's precise distinction between genUI (AI decides an interface is needed) and vibe coding (user requests an artifact), with genUI carrying greater design accountability because the AI judges whether an interface is warranted at all.
Key Takeaways
Storybook 10.3's MCP server lets AI agents query component metadata (stories, API docs) before generating code, reducing design system drift in AI-assisted development.
ADA Title II's underlying legal obligation for state and local governments predates the rule and remains in force regardless of any federal timeline changes — pausing accessibility work increases legal risk.
data-testid selectors are an accessibility smell: role-based queries in Testing Library and Playwright enforce semantic HTML as a side effect, making inaccessible markup fail tests.
