AI SYSTEMSHow To Make Your Design System AI-Ready
AI-generated prototypes frequently fail due to undocumented design decisions and hard-coded values scattered across design systems. Hardik Pandya of Atlassian outlines a three-layer approach: structured Markdown spec files that define spacing rules, color choices, and component usage guidelines; a token layer that constrains AI to a closed set of named variables instead of ad hoc values; and an audit script that scans prototypes for hard-coded deviations. FigmaLint, a free Figma plugin, helps audit tokens, detect detached instances, missing interactive states, and accessibility issues. A sync routine flags which spec files need updating whenever the design system ships changes, keeping AI working against current rather than stale specs. Real-world examples from Atlassian, IBM Carbon, CMS, and Nordhealth illustrate what an AI-ready design system looks like in practice.
Read Articlearrow_forward Article · AI DESIGNREAD TIME: 8m
The Four Design Jobs AI Created (So Far)
The phrase "AI design" means fundamentally different things depending on who is in the room. Sarah Gibbons at NNG identifies four distinct orientations that have emerged: designing with AI (using tools like Claude Code to accelerate workflow), designing AI products (building interfaces for AI-native products like Claude or Cursor, or integrating AI features into existing ones like Notion AI), designing for AI agents (structuring content and data so autonomous agents can parse and act on them), and designing the AI itself (shaping model behavior, evaluation criteria, and refusal principles alongside ML engineers). Each orientation demands different skills and success metrics. Currently, most designers operate in the first two; very few have experience in the agent-infrastructure or model-behavior space. That gap, Gibbons argues, is a widening opportunity that will close quickly as the field matures.
READ_FULL_LOGarrow_forwardArticle · COMPLIANCEREAD TIME: 6m
NFB Sues DOJ and HHS over Deadline Extensions: What It Means for Your ADA Title II and Section 504 Compliance Program
On May 21, 2026, the National Federation of the Blind filed a federal lawsuit in the U.S. District Court for the District of Maryland challenging the DOJ and HHS interim final rules that extended ADA Title II and Section 504 digital accessibility deadlines by one year. The NFB argues the agencies violated the Administrative Procedure Act by bypassing required public notice and comment, invoking a "good cause" emergency exception without meeting the high legal bar courts have set. DOJ extended its Title II deadline four days before it was set to take effect; HHS extended Section 504 on the very day compliance was required for larger recipients. If the NFB prevails, original deadlines could be restored, leaving organizations that paused compliance work with little runway. Deque recommends maintaining continuous WCAG 2.1 A/AA remediation momentum, documenting progress, and integrating accessibility into procurement and development workflows regardless of how the litigation resolves.
READ_FULL_LOGarrow_forwardArticle · ACCESSIBILITYREAD TIME: 5m
Context-Aware Headings in HTML
A new experimental HTML attribute, headingoffset, allows developers to offset heading levels for all descendant elements without changing their tag names. Setting headingoffset="1" on a section element causes all h1 children to render as h2 in the accessibility tree, and nested headingoffset containers compound the offset to produce h3 and deeper. The companion headingreset attribute lets specific containers opt out of the algorithm entirely. A :heading(3) CSS pseudo-class (currently Firefox Nightly only) enables styling by computed level regardless of tag. The feature is especially valuable for component-based architectures and web components, where developers cannot control how editors or CMS authors will place heading tags in context. VoiceOver already announces the correct levels when the accessibility tree is accurate. The attribute is currently available only behind a flag in Firefox Nightly, and the author urges other browser vendors to implement it.
READ_FULL_LOGarrow_forwardArticle · UX RESEARCHREAD TIME: 6m
Behavioral Economics for UX
Behavioral economics bridges psychology and economics to help UX practitioners understand why users intend to act but fail to follow through. The article applies the 3B Framework from Irrational Labs, organized around Behavior, Barriers, and Benefits, to the concrete problem of gym-membership signup dropoff. A behavior map documents every real step users must take, from landing on the homepage to clicking the final submit button. Psychological barriers are then identified at each step, such as low self-relevance ("Is this gym for someone like me?"), unclear value when comparing plans, and commitment anxiety around cancellation terms. Benefits are similarly mapped, including social proof, fresh-start language, and immediate savings offers. The framework produces targeted interventions with testable hypotheses, unlike broad usability fixes. Models such as COM-B, the Fogg Behavior Model, and EAST are also referenced as complementary tools.
READ_FULL_LOGarrow_forwardArticle · SDKREAD TIME: 13m
The Nutrient Web SDK Is Now Headless — For Your Design System and for AI Agents
Nutrient Web SDK now ships as headless in two distinct senses. For design-system teams, a complete slot system makes every viewer component addressable: toolbars, annotations, signatures, the content editor, document comparison, measurements, search, and every modal and panel can be hidden, partially customized, or fully replaced with custom components. Slot names and parameter shapes are a versioned public contract, unlike CSS class overrides that silently break on upgrade. A ui: { preset: "minimal" } option strips all chrome to a bare canvas. For AI agents, every operation the viewer exposes, including ink, text markup, page editing (insert, delete, rotate, reorder), signature capture, and navigation, is now reachable through the public API with no private methods. A new internal benchmark called AX (agent experience) verifies this on every release by running LLM-generated code through TypeScript compilation, static API analysis, and live browser execution, measuring hallucination rates and consistency. The two surfaces ship together in the existing SDK with no license change.
READ_FULL_LOGarrow_forwardArticle · ACCESSIBILITYREAD TIME: 10m
Overview of Digital Accessibility Technologies
This comprehensive reference catalogues assistive technologies across two broad categories: output methods that deliver information from a device to a user, and input methods that allow users to send data to a device. Output technologies include screen readers (which convey semantic meaning beyond visible text), refreshable braille displays with 40-80 cell strips, tactile graphics displays for spatial layouts and maps, and screen magnifiers. Input technologies span sip-and-puff devices (air-pressure signals calibrated to individual users), gyroscopic head mice, eye gaze tracking (often the last input option in total paralysis cases), switch control devices with configurable microswitches, chording keyboards suited for single-hand use, expanded keyboards with physical keyguards for users with tremors, foot pedals, tongue drive systems using magnets, and gesture recognition via depth sensors. Immersive readers, which strip non-essential page content for users with ADHD or dyslexia, and speech input with OCR overlays are also covered.
READ_FULL_LOGarrow_forwardsummarizeDigest_Summary
The design systems category this week centered on preparing systems for AI workflows. Atlassian's Hardik Pandya outlined a three-layer AI-readiness framework: structured Markdown spec files capturing spacing, color, and component guidelines; a token layer constraining AI output to named variables rather than ad hoc values; and an audit script that scans prototypes for hard-coded deviations. The free FigmaLint plugin automates token audits, detects detached instances, and surfaces missing interactive states and accessibility gaps. A sync routine flags spec files needing updates whenever the design system changes, so AI agents always work against current rather than stale specs. Real-world examples from Atlassian, IBM Carbon, CMS, and Nordhealth illustrated what AI-ready systems look like in practice.
NNG's Sarah Gibbons identified four distinct design roles that AI has created: designing with AI (using tools like Claude Code), designing AI products (building interfaces for Claude, Cursor, or Notion AI), designing for AI agents (structuring content so agents can parse and act on it), and designing the AI itself (shaping model behavior and refusal principles alongside ML engineers). Most practitioners currently work only in the first two orientations, leaving a widening gap in agent-infrastructure and model-behavior design skills. Separately, the experimental HTML headingoffset attribute (currently Firefox Nightly only) allows offsetting heading levels for all descendant elements without changing tag names, addressing a structural challenge in component-based CMS architectures where heading hierarchy must adapt to placement context.
Nutrient Web SDK launched headless support in two directions: a versioned slot system making every viewer component (toolbars, annotations, signatures, modals) addressable and replaceable without CSS class fragility, and a fully public API surface — verified by a new AX (agent experience) internal benchmark — that allows AI agents to operate ink, text markup, page editing, and signature capture without touching private methods. A behavioral economics framework (the 3B model — Behavior, Barriers, Benefits — from Irrational Labs) was applied to UX design, providing a structured alternative to broad usability fixes by mapping psychological barriers at each step of a user journey.
Key Takeaways- Making a design system AI-ready requires three layers: Markdown spec files (intent and rules), a closed token vocabulary (no ad hoc values), and an audit script that catches hard-coded deviations — FigmaLint covers the Figma side.
- NNG identifies four AI design roles; most teams are only in the first two (designing with AI, designing AI products) — the agent-infrastructure and model-behavior roles are the fast-growing skill gap to close.
- Nutrient's new AX benchmark runs LLM-generated code through TypeScript compilation, static API analysis, and live browser execution to measure hallucination rates — a concrete model for how SDK teams can verify agent-usability on every release.
