SWAN offers various AI-assisted design and development tooling, to help you build UI faster with intelligent suggestions that follow SWAN standards.
Overview
We've got multiple AI tools to help you work with SWAN more efficiently:
- SWAN Skill — Teaches AI how to use SWAN components and tokens correctly
- SWAN MCP Server — Provides real-time access to component APIs, props, and usage examples
- Figma connector — Allows access to the SWAN MCP Server from within Figma
These tools help AI understand SWAN's components, design tokens, migration paths, and best practices, so you get suggestions when building UI.
What you can do
With AI assistance, you can:
- Discover the right SWAN components for your UI
- Learn about deprecated APIs and recommended alternatives
- Get suggestions for appropriate SWAN components, props, and style keys
Skills
We currently have a single SWAN skill which enhances AI suggestions by providing contextual understanding of SWAN patterns and usage. It provides guidance on how to use core props, tokens, styling, and more. Additionally it has Figma-specific guidance when translating designs to or from Figma.
Install the skill via vconfig.
MCP
This is an early experiment which may evolve or be completely replaced over time. Do not use this to generate production-ready code. If you have any feedback, please leave a message in #help-swan.
The SWAN MCP Server gives AI assistants direct access to SWAN’s source of truth. It provides real-time component APIs, props, and examples. As information is pulled from a combination of both the NPM package and the docsite, the information should always be up to date.
Install the MCP server via vconfig.
Figma connector
The SWAN MCP Server is also available in Figma via Figma connectors. When using Figma AI tools such as Agents, the connector can be explicitly called using @SWAN MCP.
For first-time users, enable the connector through the Add Context (+) button. For ease use of use, set ‘All write tools’ to ‘Always run’.
Be careful with Figma usage limits, as it likely will increase the amount of AI Credits consumed with any prompts. See the Figma docs for additional information on how to use it.
Figma Make
We don't offer an official SWAN Make Kit at this time. UX leadership is prioritizing OpenCode as Vista’s primary AI tool for generating standalone code prototypes for UX work.
Best Practices
When working with AI assistants on SWAN projects:
- Use both the SWAN Skill and MCP Server together: Together, they give AI the full picture: real-time component data and the contextual knowledge of how SWAN should be used correctly.
- Reference SWAN explicitly: Say "using SWAN" to ensure the skill activates
- Review generated code: AI suggestions should follow SWAN patterns, but always verify against our documentation
