hebel. today · 4 November 202654 / 69
Technology · Frontend Web Development
Design systems move from Figma to active code repositories
Design systems are shifting from static Figma files to active code repositories, allowing AI agents to compose interfaces using the same components developers ship. Teams now package motion sequences, WebGPU shaders, and UI primitives…
From 4 newsletters · 1 min read · one thing to try
Design systems are shifting from static Figma files to active code repositories, allowing AI agents to compose interfaces using the same components developers ship (Nurkhon’s Newsletter). Teams now package motion sequences, WebGPU shaders, and UI primitives as reusable code rather than opaque timeline states or design mockups (WebAfterAI). This transition enables agents to maintain consistency by operating within the same component library that engineers use, rather than attempting to interpret disconnected visual files.
“When prototyping is fast, choosing what ships is more important.”
Nurkhon’s Newsletter
Explicit constraints prevent generic output when agents build interfaces from these systems. Instead of vague design prompts, developers now provide agents with specific vocabularies—such as critique, polish, or typeset—and searchable handbooks containing product-specific palettes and UX guidelines (WebAfterAI). By grounding the agent in a structured design system, the model translates product context into precise interaction rules while preserving the underlying design process as an editable artifact.
The shift toward code-first design requires a new approach to validation. Because rapid prototyping allows for ten directions by lunch, the bottleneck has moved from generating the interface to reviewing and validating the result. Teams now build automated harnesses to compare thousands of screen variants across pixels, structure, and accessibility, as even automated systems can miss hundreds of defects that human review eventually catches (TLDR DEV).
- Next.js 16.4 includes an agent skill that analyzes Turbopack's module graph to identify and fix hidden import chains that inflate bundle sizes (TLDR DEV).
- Performance-focused agents can now be instructed to replace cache-heavy designs with flat arrays and indices to optimize hot loops in interface code (Michael Haupt).
Try today · 20 min
Create a performance-review command for your agents.
Start by defining a slash command file in your repository that forces the agent to profile before suggesting changes.
You need
- A local project folder
- The Claude desktop app
- A new file named claude/commands/perf-review.md
Steps
- Create the perf-review.md file in your project directory.
- Add a directive to profile the application and identify the five slowest components.
- Add a rule requiring the agent to replace cache-heavy logic with flat arrays and indices.
- Add a rule forbidding the agent from adding further caches to the codebase.
- Commit the file to your repository as a shared team resource.