Conference Recap — March 19–20, 2026
Into Design Systems
AI & Vibe Coding
Key takeaways, validated decisions, and an action plan for LunarCrush — presented by Nico Bañados, Head of Design.
intodesignsystems.com
Overview

The Conference at a Glance

15
Talks across 2 days
9
Companies represented
3
Major paradigm shifts

Companies

GitHub Indeed Figma Atlassian Adobe WhatsApp Miro NordVPN Nokia

Core Themes

MCP & AI Infrastructure Vibe Coding Zero-Drift Pipelines Automated Governance Designers Shipping Code
The Big Picture

Three Paradigm Shifts Happening Now

01

DS as AI Infrastructure

Design systems must serve AI agents as first-class consumers — not just humans. Machine-readable docs, JSON, and MCP servers are the new interface.

02

Designer ↔ Developer Convergence

The boundary is dissolving. Designers are shipping production code with AI assistance. "Vibe coding" is real, productive, and here to stay.

03

Automated Quality Gates

Manual QA is being replaced by AI-powered linting, drift detection, and prototype audits. Quality becomes infrastructure, not a process.

Insight 01

JSON Beats Everything for AI Consumption

Indeed benchmarked 8 data formats for MCP servers. JSON dominates — fewer tokens, higher accuracy, better reliability.

Without structured context, AI guesses probabilistically and creates fragmentation. With deterministic context, AI produces consistent output.
— Diana Wolosin, Indeed
JSON Winner
92%
Accuracy
~5K
Tokens
MDX Runner-up
78%
Accuracy
~24K
Tokens
Our Storm tokens are already in W3C JSON format ✓
Insight 02

Context Beats Probability

NY State had dozens of inconsistent button styles across agencies. AI without context amplifies fragmentation — it doesn't solve it.

AI amplifies whatever system you give it. No system? It amplifies chaos.
— Jesse Gardner, NY State

Without Context

AI guesses probabilistically → creates N variations → fragmentation multiplies → inconsistency at scale

With Context (CLAUDE.md + MCP)

AI receives deterministic instructions → uses existing components → consistency enforced → one source of truth

Solution: MCP servers + CLAUDE.md files per workspace
Insight 03

Zero-Drift Pipeline

A structured pipeline from Figma to production that eliminates design-code drift through variable binding at every level.

The sweet spot for LLMs is atomic components and molecules — not raw tokens (too low-level) or screen examples (too high-level).
— MrBiscuit Sun, Independent

The Pipeline

Figma Define structure + bind variables to tokens
Storybook Complete API, logic, interactions
Production Deploy via LLM with structured context
Every property bound to a specific token = zero drift
Insight 04

Designers Are Shipping Code

2026 is the tipping point. The 70/30 framework and clear ship-vs-handover criteria make it sustainable.

AI's first language is code, second is text files.
— Freya Stockman, Relevance AI

70 / 30 Framework

70%
Planning & docs
30%
Implementation

More upfront planning = fewer bugs

Ship vs Handover

SHIP UI, components, styling, tokens
HAND Backend, APIs, database, infra
Hackathon: 150 designers → 28 PRs merged in 48hrs
Insight 05

Encode Governance Into Infrastructure

Stop managing governance manually. Build it into the dependency chain so violations are structurally impossible.

We generate DS health reports for $0.20 — commercial tools charge $169/month.
— Cristian Morales, Enara Health

4-Layer Architecture

4. Components — consume everything below
3. Index — component registry
2. Metadata — AI context, usage rules
1. Tokens — source of truth (Storm)

ARC Protocol

Audit Report Compose

Automated governance cycle in CI/CD

Insight 06

Markdown is the Universal Language

Between humans and machines, Markdown is the lingua franca. But it needs structure — small files, explicit rules, no "vibes."

Guidelines provide context, not control. AI doesn't understand "vibes" — it needs explicit, structured communication.
— Laura Fehre, Figma

Best Practices

  • Split guidelines into small .md files (not monoliths)
  • Per-component documentation in the repo
  • CLAUDE.md per workspace for deterministic behavior
  • Drag .md folders into Figma Make editor

Also from Jan Six (GitHub)

Tribal knowledge that isn't documented is a critical vulnerability. Collocation — docs living with the code — is the answer.

Insight 07

Treat AI as a New Team Member

Miro's DS team onboarded AI the same way they'd onboard a junior engineer — with documentation, constraints, and clear boundaries.

You don't need a perfect system. You need a system that is legible enough to teach.
— Andressa Lombardo, Miro
98%
Token reduction
(33K → 410)
70-80%
Fewer Slack
support questions

Their Approach

  • Built an MCP with 4 core tools
  • Improved documentation first
  • Small team (6 people, 40+ product teams)
  • Results: AI handles routine questions
Validated by the Conference

What We Already Have Right

  • Storm tokens in W3C JSON
    Proven best format for AI — 92% accuracy (Indeed)
  • Claude Code + Figma MCP + Notion MCP
    The toolchain the industry is converging on
  • Monorepo: tokens → ds → apps
    Matches Cristian's 4-layer architecture exactly
  • Next.js + shadcn/ui + Tailwind
    Confirmed as best stack for AI-assisted dev
  • Designer (Nico) shipping code
    Validates the "augmented designer" model
  • Storybook for DS components
    Already set up — component docs + visual testing layer in place
  • Small team, high velocity
    Multiple conference examples of 4-person teams outperforming larger ones
Implementation Plan

Gaps the Conference Revealed

High Priority

No AI Metadata on Tokens

Storm tokens lack ai_context, semantic_category, usage_rules fields

High Priority

No CLAUDE.md per Workspace

Tokens, DS, and app workspaces need their own context files

High Priority

No Testing / QA Strategy

Architecture proposal has zero testing section — critical gap

Medium

No DS MCP Server

Should serve tokens and components as queryable tools

Medium

No Drift Detection

Figma ↔ code sync is manual — need automated scripts

Medium

No Claude Code Skills

Recurring tasks like component creation, token audits, and PR reviews should be one command away

4-Week Roadmap

What I Want to Implement

Week 1

Machine-Readable DS

  • Add AI metadata to Storm tokens (ai_context, semantic_category, usage_rules)
  • Create per-workspace CLAUDE.md files (tokens, ds, app)
  • Document tribal knowledge from Dan & Jon in .md files
Week 2

Automated Quality Gates

  • DS compliance lint script for PRs (severity SEV-1 to SEV-4)
  • Pre-commit hooks for DS compliance
  • Initial test suite for core DS components
Week 3

Claude Code Skills & Automation

  • /component-create — scaffolds new DS components
  • /token-audit — reports token health and drift
  • /pr-review-ds — automated DS compliance review
Week 4

Figma ↔ Code Pipeline

  • Map Storm tokens 1:1 with Figma variables
  • Drift detection script (Figma tokens vs code tokens)
  • Build DS MCP server (tokens + components as tools)
For the Team

Why This Matters for LunarCrush

For Joe

ROI & Validation

The industry's biggest companies validated every tech decision in our Architecture Proposal. Automated QA at $0.20 vs $169/month. Our 4-person team can operate like a 20-person one.

For Jon

Quality & Reliability

4-layer defense system: prevention, detection, monitoring, recovery. Every PR auto-checked for DS compliance. Severity classification (SEV-1 to SEV-4). Feature flags for safe rollouts.

For Dan

Lightweight & Non-Invasive

Mostly .md files, simple scripts, CI checks. No new frameworks or infra. CLAUDE.md per workspace = document once, follow forever. Leverages everything we already have.

Key Takeaway
Design systems are becoming AI infrastructure.

We're already ahead of the curve. The next 4 weeks of focused work will turn our design system from a component library into the AI-powered engine that lets a team of 4 ship like a team of 20.

Into Design Systems 2026 — Recap by Nico Bañados, Head of Design @ LunarCrush
Created by Nicolás Bañados