AI-Assisted Development

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 Deprecation Skill - Audits a codebase for SWAN deprecations
• 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
• Find the appropriate SWAN patterns
• Look up component APIs and usage guidance
• Find SWAN design tokens
• Get migration guidance for deprecated APIs

Get started

To get the most out of AI-assisted development with SWAN, install the SWAN skill and configure the SWAN MCP server. The skill guides working with SWAN, while the MCP provides access to SWAN documentation, components, tokens, deprecations, and other resources.

1. Install the SWAN skills

We currently have two skills:

• The 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.
• The SWAN deprecation skill audits a codebase for uses of deprecated components, props, and functions. It generates a report of the deprecations, providing the replacement component and a level of effort/risk for the migration.

Install the skills via vconfig cli .

2. Configure the SWAN MCP

The SWAN MCP Server gives AI assistants direct access to SWAN's source of truth. It provides access to component APIs, props, examples, design tokens, deprecations, and other SWAN documentation.

The information is pulled from both the SWAN NPM package and the doc site, helping keep the MCP responses up to date.

Install the MCP server via vconfig cli.

3. Verify your setup

Once the skills and MCP are installed, ask your AI assistant a SWAN-related question, for example:

How should I use the SWAN Button component?

Your AI assistant should use the SWAN skill and MCP to find the relevant SWAN guidance and provide recommendations based on the current SWAN APIs.

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 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