Design System Overview
This section is written for UI designers and frontend engineers who work with them. It answers a question that is unfolding right now: AI-assisted development has already spread across frontend teams, and the design-to-code pipeline is being reshaped by AI — on the designer's side, how do you plug into this current?
Let's be clear about our position up front: we are not asking anyone to switch design tools. You can keep doing all of your design work in the Figma you know — only the handoff gets upgraded. Or you can step through the new door of AI-native design tools — cloud-based Claude Design, or the open-source local Open Design (no Claude account needed) — where a conversation generates design drafts built on our component library. Which tool to use, and how to combine them, is the design team's own call — this handbook's job is to explain the tools, capabilities, and methods clearly and thoroughly, so the choice is an informed one.
One design language, multiple tool tracks
swift-web's design resources have one defining trait: the single source of truth is the framework source code. Design decisions — colors, radii, shadows, typography — are defined as semantic tokens (CSS variables) inside @swift-web/framework; component appearance (buttons, modals, carousels, video cards…) is the actual rendered output of framework components. Design resources are not "another document that someone has to maintain by hand" — they are automatically derived from code. When the code updates, the resources follow, so you never end up with "the design spec says one thing while production runs another."
This design language reaches designers through multiple tool tracks — the tools are just consumers; the core asset (the design language) is tool-agnostic, and onboarding a future tool is merely "adding another derivation target":
| Figma track | Claude Design track | Open Design track | |
|---|---|---|---|
| Who it's for | Designers whose main tool is Figma and who don't want to switch yet | Designers willing to try an AI-native design tool who have a Claude account | Designers who want AI drafting but have no Claude account (e.g. ChatGPT / GPT users), or want drafts to stay local |
| Form of the design resources | Figma Variables (tokens) + component library (in progress) | Design system cards (20 cards: tokens + real component appearance) | Design-system bundle (DESIGN.md + tokens + component forms, derived from the same source) |
| How you produce a draft | Design in Figma as usual | Describe your intent in conversation, AI generates it on the canvas, then refine by hand | Describe your intent in conversation, your local coding agent generates, iterate via canvas annotations |
| Path to code | Official Figma MCP — AI reads the design data directly and generates code | One-click handoff package to Claude Code | Export a single HTML file and hand it to Claude Code |
| Collaboration | Real-time multi-user (strongest) | Team / Enterprise org sharing | No cloud sharing — bundle distribution + exported drafts |
| Migration cost | Zero — tools and habits stay exactly the same | Requires a Claude account; about ten minutes to get started | Requires a coding-agent CLI on your machine (any model); about ten minutes to get started |
Every track ends at the same place: Claude Code takes the design and turns it into Nuxt code using swift-web framework components and semantic tokens. Because the design resources and the code share one vocabulary (--primary, SwButton, SwCarousel…), nothing is lost in translation at implementation time — this is the essential efficiency gain of the whole system, regardless of which tool you draw in.
Why this is worth your attention
The traditional design-to-frontend handoff is a lossy pipeline: the designer expresses intent in a mockup → the frontend dev interprets it by eye → translates it into code by hand → and when it doesn't match, the back-and-forth begins. By 2026 the industry has already replaced that pipeline with something else:
- Designs become machine-readable data. AI coding tools (such as Claude Code) read the layers, constraints, and variables in a Figma file directly over the MCP protocol; the generated code references the very tokens the designer defined — no more measuring pixels by eye.
- Code can flow back onto the canvas. A real interface under development can be sent back to Figma in one click as editable layers, letting designers tweak variants and add annotations on the canvas instead of waiting for a rewrite. Design and development go from "waiting in sequence" to "iterating in parallel" — practitioners report feedback cycles shrinking from days to hours.
- AI-native design tools have arrived. Claude Design (from Anthropic) makes "describe it in a sentence + AI generates + refine on the canvas" a new way to produce drafts — and it natively honors the design system it's connected to: generated drafts automatically use your team's colors, fonts, and components.
Together these point to one conclusion: as long as design resources exist in a structured, code-derived form, a designer's output can go straight to implementation. The swift-web design system is built to exactly that standard.
How to read this section
Pick your entry point based on your situation:
- I'm a designer, Figma is my main tool, and I want to know what's in it for me first → read Figma × AI, straight to code: no tool switch, and your handoff efficiency levels up.
- I want to see what's behind that new door → read Meet Claude Design, then follow the ten-minute quick start and actually run through it.
- I don't have a Claude account / I want to draft locally with my own AI → read Meet Open Design: the open-source local version that drives the coding agent you already have (GPT works too).
- I want to understand the design language itself first → read The swift-web design language: how to read semantic tokens, what component forms exist, and the right way to build a color scheme for a new site.
- I'm a frontend dev / the liaison to the design team → read Designer–frontend collaboration and Standards and governance.
Related links
- The swift-web design language — the design vocabulary shared by all tracks
- Figma × AI, straight to code — the Figma track in full
- Meet Claude Design — the Claude Design track in full
- Meet Open Design — the Open Design track in full
- Styling & Tokens — the complete semantic token reference on the code side