zaklad

Start with the wizard, import your existing system, or build from scratch. Colours and fonts go in by their real names, and come out as a full token architecture.

Refine tokens, themes, and scale tiers with live preview. Every inherited value updates automatically.

One click sends Figma libraries to designers, typed packages to developers, and docs that stay current with both.

Your brand evolves, your team grows, your system stays aligned. No rebuilds. No handoffs. No drift.

Everything your design system needs.Nothing it doesn't.

The wizard takes your brand and builds a complete token architecture in minutes: OKLCH palettes, type scales, spacing, components, and themes. Skip it to import an existing system or build from scratch. Not a black box: refine every token by hand, and ship real, typed production code.

Small brands1–3 colours, a full system in minutes

Mid-size teams5–8 brand colours, intelligent role mapping

Large teamsweeks of architecture work, compressed to minutes

Change a foundation value and your semantic tokens, component tokens, themes, Figma Variables, and development packages all follow. The architecture does the work, so changes stay cheap however far the system grows.

- Three-layer cascade: Foundation → Semantic → Component
- Themes inherit from each other, changes cascade down
- Auto-fill on semantic tokens, component sizes, and scale tiers
- Token calculations likespacing.md = dimension.base × 4

Other tools hand you tokens and wish you luck. Zaklad ships the whole chain: cross-platform components for web and native, Figma Variables with Code Connect, and typed packages. Designers and developers land on the same source.

- Figma Variables, Text Styles, icon components, and Code Connect
- Cross-platform components, one library for ReactJS and React Native
- Fully typed packages with 1:1 prop parity to Figma
- Read/write MCP endpoint and a single-file DESIGN.md for any AI agent

Already have a design system? Paste your DTCG JSON and Zaklad imports the whole structure, names intact, no per-token remapping. You upgrade your system, you don’t rebuild it.

No lock-in. Export your whole system anytime. On paid plans you own your output for good, commercial use included, even after you cancel.

{ "color": { "primary": { "$value": "#28c0c2" } }, "spacing": { "md": { "$value": "1rem" } }, "radius": { "sm": { "$value": "0.25rem" } } }

Enables AI assistants to interact with and automate Figma designs programmatically.

Turn UI designs into responsive applications with Visily MCP

Connect AI coding agents to Anima Playground, Figma designs, and your team's design system. Bridge the gap between prototypes and production code.

Integrates Cursor AI with Figma to read and programmatically modify designs.

Integrate Figma design data with AI coding tools using a local MCP server.

Figma MCP server for accessing Figma files, projects, comments, components, and design metadata from Claude, Cursor, and other AI agents.

Connects to the Figma API, allowing AI tools to access and interact with your Figma designs.

Enables AI assistants to interact with Figma via WebSocket for reading data and design analysis.