Skills / Design System
In the AI era, design systems must evolve
A good design system supports every role in an AI-era team — designers define the rules, engineers call the components, PMs align expectations, AI agents execute generation. It's the team's shared product language, and the shortest path to reducing cross-role communication friction.
01Why does AI-generated UI always feel 'almost right'?
Off-spec UI output
AI-generated interfaces use random colors, spacing, and radii. Every output is inconsistent. Teams waste hours on manual fixes.
No unified design language
In multi-person or cross-product work, AI has no visual standard to reference. Every page looks like a different product.
Complex Business Scenarios
Traditional workflows cannot effectively support complex scenarios. Without established business components, AI-generated interfaces often fail to meet real-world usability requirements.
Fragile prompt engineering
Controlling styles via 'use a blue theme' in natural language. Results are unpredictable and unreproducible.
02Rebuild Strategy
From controls to business objects
Button → OrderTicketA designer's starting point isn't drawing Buttons and Inputs, but understanding the business and decomposing core business processes into semantically rich product components. Agents take over repetitive drawing; designers focus on defining the interaction logic of business objects like Market, Order, and Position.
From static canvas to programmable container
Mockups → Programmable APIThrough Figma MCP, the design tool transforms from 'view-only' to 'read-write'. Agents can create components, write metadata, and validate reuse logic directly in Figma — Figma itself becomes an AI-operable component library.
From visual specs to executable rules
PDF docs → Skill routingDesign systems are no longer PDFs or Figma annotations. They're decomposed into three AI-callable layers: Component Registry (component catalog), Workflow Index (flow mapping), and AI Skill (execution routing).
03Implementation: From Figma Library to Skill
Coding Agent Integration
First, AI understands business objects (e.g. Market, Order, Position) rather than drawing pages. Shift focus from 'base controls' to 'domain components'.
Figma MCP Read/Write
Figma becomes a read/write container. Agents use MCP to create, write descriptions, and validate component reuse directly.
Domain Components & Templates
Evolve beyond basic controls like Buttons into formal domain components like OrderTicket, up to complete page templates (Workbench).
Registry & Indexing
Build component lists and business mappings. AI knows exactly which components to pick for specific workflows, eliminating hallucinations.
Package as AI Skill
Bundle the rules and indexes into a Skill. It acts as a 'component router', guiding AI agents on how to assemble pages according to specs.
Natural Language Invocation
The team triggers the Skill via natural language. AI automatically reads specs, selects templates, and generates structurally correct, spec-compliant UI.
04Insights
From pixel pusher to infrastructure builder
Moving beyond the traditional 'draw, handoff, wait' pipeline. The core value of an AI Native designer is to build design systems into AI-callable infrastructures, empowering the entire team to self-serve.
Transforming design assets into executable APIs
Design systems have evolved from static docs to Agent-callable Skills. By maintaining core domain components and routing rules, designers enable design assets to flow seamlessly and assemble automatically within engineering teams.
Iterate Skills like live products
Skills are not static, handoff-and-done artifacts; they are dynamic systems that must evolve with the business. Establishing a full lifecycle loop—from creation and evaluation to continuous optimization—will be the core competitive edge for future designers.