Consistent UI at scale | Seattle .
Cities (231) ▾

Members-Only

Recent Talks & Demos are for members only

Exclusive feed

You must be an AI Tinkerers active member to view these talks and demos.

Sign in View FAQ
June 08, 2026 · Seattle

Consistent UI at scale

Learn how to build a framework that ensures AI coding agents adhere to design systems, enabling faster team shipping without sacrificing UI consistency. See live demos and data-backed findings.

Claude Opus Claude Skills Claude Hooks Figma MCP JSDoc
Overview

I built a framework that keeps AI coding agents on a design system as a team ships faster, without losing UI consistency.

Why it exists:
I lead design systems. Our team got dramatically faster with agents, but without guardrails the speed produced one-off components, custom styles, and drifting UX. We shipped more and quality dropped. Every new screen made the next one worse, so I went looking for a way to stop it.

What I’ll show live:

  • Side by side results of the experiment
  • The framework: the Skill, JSDoc’d primitives, ESLint rule, and Stop hook in the loaded branch
  • The workflow: prompt the agent with a Figma file and watch it compose from existing primitives instead of inventing new ones
  • The findings: what the data said about formats, prompts, and how to make the system self-propagating
Links
Tech stack
  • Claude Opus
    Claude Opus: Anthropic's flagship large language model, delivering frontier intelligence for complex reasoning, advanced coding, and autonomous agentic workflows.
    Claude Opus is Anthropic's most capable foundation model (LLM), setting the industry benchmark for complex reasoning, math, and coding. It achieves state-of-the-art results on key evaluations: Opus 4.1 scored 74.5% on SWE-bench Verified. The model features a massive 200,000-token context window (expandable to 1 million for specialized tasks), enabling deep, multi-file analysis and long-horizon agentic workflows. Deploy Opus for enterprise-grade automation, complex financial forecasting, or expediting R&D across critical sectors.
  • Claude Skills
    Claude Skills packages specialized expertise—instructions, scripts, and resources—into modular, reusable components that Claude dynamically loads for complex, domain-specific tasks.
    Claude Skills transforms Claude into a specialist by packaging your procedural knowledge into portable, reusable folders: a `SKILL.md` file, instructions, and executable scripts. This feature (available to Pro, Max, Team, and Enterprise users) enables Claude to automatically perform complex, non-deterministic tasks like generating professional Excel spreadsheets with formulas, creating PowerPoint presentations, or processing PDFs. The system uses "progressive disclosure," loading only the skill's name and description initially, then the full content as needed, ensuring efficiency across Claude.ai, Claude Code, and the API. Developers can build custom skills for internal workflows via the Claude Developer Platform.
  • Claude Hooks
    Claude Hooks are programmable lifecycle triggers in Claude Code that execute custom scripts to enforce deterministic safety, validation, and automation rules during AI-driven development.
    Claude Hooks provide a control layer for Anthropic's Claude Code CLI, allowing developers to intercept and automate actions at precise lifecycle events (such as SessionStart, PreToolUse, and TaskCompleted). By executing custom shell commands, Python scripts, or TypeScript handlers, these hooks inject deterministic guardrails into non-deterministic AI workflows. Teams use them to block dangerous commands (like accidental database deletions), auto-format modified files, trigger Slack notifications upon task completion, and inject real-time context before the agent executes a tool.
  • Figma MCP
    A Model Context Protocol server that grants LLMs direct read-access to Figma design files and layer metadata.
    This MCP implementation bridges the gap between AI agents and Figma's REST API. It enables developers to feed live design data (node hierarchies, CSS properties, and component documentation) directly into large language models. By providing tools like 'get-file' and 'get-nodes', the server allows agents to inspect layouts, extract design tokens, and automate front-end code generation with pixel-perfect context. It eliminates manual copy-pasting by treating Figma as a structured data source for the Claude Desktop app and other MCP-compliant clients.
  • JSDoc
    An API documentation generator for JavaScript that extracts structured HTML documentation directly from inline code comments.
    JSDoc is the industry-standard markup language used to annotate JavaScript source code. By adding structured comments starting with /** directly above your functions, classes, and methods, you can define parameters, return types, and descriptions using tags like @param and @returns. The JSDoc command-line tool parses these annotations to generate clean, navigable HTML documentation websites. Beyond static documentation, modern editors and compilers (such as VS Code and TypeScript) parse JSDoc blocks on the fly to provide instant autocomplete, inline tooltips, and robust type-checking in plain JavaScript files.
Events Gallery FAQ Sponsor