AI-Ready Design Systems: The JavaScript Signal You're Missing

Your design system isn’t broken. It just wasn’t built for a collaborator that reads tokens but can’t read the room.

The AI Drift Problem Is a Documentation Problem in Disguise

Vitaly Friedman’s guide on Smashing Magazine frames the core challenge cleanly: AI code generation tools hallucinate design decisions when the system they’re pulling from is ambiguous. The output looks plausible. It compiles. It just quietly violates the spacing scale, uses the wrong semantic colour token, or picks the interactive state variant that’s technically present but contextually wrong.

The fix isn’t smarter AI — it’s cleaner system architecture. Friedman’s practical prescription includes co-locating component usage rules with the components themselves (not buried in a separate Notion doc nobody updates), naming tokens semantically rather than visually (color-action-primary beats blue-600), and writing explicit do/don’t annotations in the design system that AI tooling can parse as constraints.

For Southeast Asian teams managing multilingual interfaces — Thai, Bahasa, Vietnamese alongside English — this matters doubly. A component that renders cleanly in English can collapse typographically when an AI-generated variant inherits the wrong line-height token for a longer-character-count language. Annotate for that explicitly, or you’ll QA it forever.

CSS @function Is the Missing Link Between Tokens and Logic

The CSS-Tricks almanac entry on the @function at-rule deserves more attention than its dry title suggests. Native CSS custom functions — now moving through the spec — let you define reusable logic blocks that accept arguments and return computed values, entirely in CSS.

Why does this matter for design systems? Right now, token-to-output logic that can’t be expressed in pure custom properties gets offloaded to preprocessors (Sass, PostCSS) or JavaScript. That creates a dependency chain that breaks AI-assisted generation: the tool sees the compiled output, not the intent. Native @function collapses that gap. A spacing function or a fluid-type calculation lives in the stylesheet, is inspectable, and is parseable by the same tooling generating your components.

The spec is not universally shipped yet — check caniuse before you plan a migration — but forward-looking design systems should be prototyping with it now. Teams using Shopee’s or Lazada’s seller-facing dashboards, where dense UI meets aggressive performance budgets, will find that eliminating a JavaScript dependency for visual logic has compounding benefits on both parse time and AI-generation fidelity.

---

Animation Payloads: The Signal You’re Leaking Without Knowing

The Codrops tutorial on GSAP MotionPath — stacked thumbnails unfolding into a curved image strip — is a genuinely elegant creative technique. It’s also a useful prompt to audit what your animation library payloads are doing to your tracking baseline.

GSAP is not lightweight. The full library with MotionPath runs to roughly 60–80KB minified. On a Southeast Asian mobile connection averaging 20–30ms latency but with real-world congestion patterns that spike far higher, that payload delays not just the animation render but every script that loads after it — including your analytics tags. If your tag manager fires after GSAP initialises, you’re attributing conversion events to sessions where the user had already made their decision. Your open-rate and click-signal data is measuring a different moment than you think.

The tactical fix: audit your script loading order in Chrome DevTools’ Performance panel, not just your bundle size. GSAP and similar creative libraries should load deferred or as ES modules with type="module", never blocking. If you’re using GTM, verify that your trigger firing sequence isn’t contingent on DOMContentLoaded events that creative JS is holding hostage. One e-commerce team we reviewed had a 340ms analytics tag delay directly attributable to an unoptimised GSAP initialisation on their product detail page — enough to skew session-attributed revenue figures by a measurable margin.

Connecting the Signals: What This Week Actually Means

These three pieces of front-end news read as isolated technical updates. They’re not. They describe the same underlying pressure: the gap between what your system intends and what it outputs is widening as AI, new CSS primitives, and creative JavaScript complexity increase the distance between authoring and rendering.

AI-ready design systems close the intent gap at the component level. Native CSS functions close it at the logic level. Disciplined script loading closes it at the measurement level. None of these is a one-sprint fix, but each has a clear first step: audit your token naming convention, prototype one @function replacement for your most-used Sass mixin, and run a single Performance panel trace on your highest-traffic page.

The broader question for digital leads: if your current design system can’t clearly communicate constraints to a human developer reading documentation, what exactly do you expect an AI to do with it?

---

Key Takeaways

• Rename design tokens semantically now — color-action-primary over blue-600 — so AI generation tools inherit intent, not appearance
• Audit your script loading order in Chrome’s Performance panel to identify analytics tags being delayed by creative JavaScript payloads
• Start prototyping with CSS @function in non-production environments to reduce preprocessor dependencies and improve system parsability

The design system conversation has mostly been about consistency and handoff velocity. As AI tooling embeds deeper into design and engineering workflows across Southeast Asia, the next conversation will be about legibility — whether your system is structured clearly enough for a non-human collaborator to follow the rules you intended. The teams who sort that out at the architecture level now won’t be doing expensive remediation when their AI-assisted sprint velocity reveals all the ambiguity they’d previously papered over.

---

At grzzly, we work with digital and growth teams across Southeast Asia to audit and evolve front-end systems — from token architecture to script performance to design system governance. If your team is navigating the intersection of AI tooling and existing system debt, we’ve stress-tested a few of these problems already. Let’s talk