Anvil2 can be integrated into a variety of AI tooling to speed up workflows. This guide shows how to use the design system across these tools.
Overview of Tooling
Anvil2 is set up to be consumable to other AI tooling. Anvil2’s codebase is reachable as a public NPM package, and its documentation via an MCP server. The Anvil team is always available to provide additional help on the #ask-designsystem Slack channel.
Below is a list of common tooling that utilizes Anvil2 in some way.
| Tool | Primary audience | Capabilities |
|---|
| Figma Design | Product Designers | Produce high-quality design artifacts. Minimal AI. |
| Figma Dev Mode (Code Connect) | Engineers | Translate Figma designs into code and Figma Make that uses Anvil2. Enhances Figma MCP capabilities. |
| Figma Make | Product Managers and Product Designers | Prompt out prototype-grade coded UI examples. |
| AI-powered Code Editors | Engineers, Product Designers | AI-assisted coding with Anvil2-specific rules and guidelines. |
| Storybook | Engineers and Product Designers | Generate UIs and test components with Anvil2 in an interactive workshop environment. |
With Figma
Figma is the tool of choice for many builders to create UI artifacts. Figma Design is the most common way product designers create UI artifacts. Figma Dev Mode (Code Connect) allows builders to both implement Figma Design work and to generate code using Anvil2 + Figma Design. Figma Make, their most recent tool, provides a way to prompt out prototype-grade code, used by many builders.
Figma Design
| Primary audience | Capabilities |
|---|
| Product Designers | Produce high-quality design artifacts for other AI tooling. Heavy usage of Anvil2, but minimal direct AI. |
- Avoid detaching Anvil2 components as much as possible. Anvil2 components use Code Connect to integrate the Figma asset with its code counterpart. Detaching diminishes this integration.
- Use Figma variables with styling whenever possible. Avoid using the A1 Figma styles.
- Use semantic variables (labeled as
Anvil2 / Semantic in Figma) over primitive variables (labeled as Anvil2 / Primitive in Figma). This enables dark mode compatibility.
- Colors in particular should be defined using variables.
- Spacing values in general should use defined variables.
Figma Dev Mode (Code Connect)
| Primary audience | Capabilities |
|---|
| Engineers | Translate Figma designs into code that uses Anvil2. |
Code Connect using Anvil2
Code Connect is automatically set up for Anvil2. When viewing the frame of a Figma Design file, a consuming application can pull in the correct configuration of the component.
Code Connect using product-specific components
It is possible for product-specific components to also be paired with Code Connect. By creating your own consumable component in code, a designer can in turn create a Figma-equivalent asset, and then an engineer can pair both to Code Connect. This process is owned by individual product teams. More information on how to do this can be found in Figma’s documentation on Code Connect.
Figma Make
| Primary audience | Capabilities |
|---|
| Product Managers and Product Designers | Prompt out prototype-grade coded UI examples. |
It should be emphasized that Figma Make’s code output is not production-grade. The tool is intended as a way to explore ideas. Additional guidelines for builders on Figma Make can be found in
Confluence.
Combining Figma Make with Anvil2
When using Anvil’s official Figma Make template, Anvil2 is already integrated into the code. If starting from a fresh file, consult the official Figma Make documentation for guidance on how to include Anvil2 in your file (our package is called @servicetitan/anvil2 and is a public package).
Anvil2 Documentation Connector
You can also add an official Anvil2 connector to your Figma Make file that ties into the Anvil2 documentation site. This allows you to get access to Anvil2-specific rules and guidelines, as well as the ability to generate code examples from the documentation. This is a useful addition when not using the official Anvil2 template.
Using guidelines
Guidelines are a critical step in ensuring Figma Make generates accurate UIs. Within a Figma Make file, guidelines can be found by clicking on the gear icon (‘Make Settings’) and going to ‘Adjust guidelines’.
Anvil provides pre-made guidelines for Figma Make, and are provided in our starter template file.
Adding product requirements documents (PRDs)
Figma Make can intake in PRDs in a few different ways. Refer to the Figma Make documentation on how to do this.
Basic file hygiene
Many Figma Make files are produced by Builders from many backgrounds. This section outlines some basic practices for maintaining a Figma Make file.
- File location
- Make files should follow the convention of your product area. Read more about the proper workspace structure in Confluence.
- Make files should not live in a drafts directory. This makes them inaccessible to other Figma users, including as shared demos.
- Make files can co-exist with other Figma files (design, Figjam, etc.).
- You can move files after the fact (‘Move file…’ from the file name dropdown menu) if they are in the wrong location.
- Verify that guidelines in the file are accurate and up to date.
With AI-powered Code Editors
| Primary audience | Capabilities |
|---|
| Engineers and Product Designers | AI-assisted coding with Anvil2-specific rules and guidelines. |
Advantages of using AI-powered Code Editors over Figma Make
- Provides more powerful developer tooling than Figma Make.
- Can use many more models.
- Can more easily reference the codebase in prompts.
- Can be used in multiple frontend environments.
Disadvantages of using AI-powered Code Editors over Figma Make
- More difficult to share outside of a local environment.
- Can be more difficult to get started with.
With Storybook
| Primary audience | Capabilities |
|---|
| Engineers and Product Designers | Generate UIs and test components with Anvil2 in an interactive workshop environment. |
This section refers to setting up your own Storybook. Anvil2 itself also uses Storybook, but that setup is not related to this section.
- Can quickly set up a front-end environment with minimal setup or dependencies.
- Easy to use UI for navigating your own generative content.
- On its own, is a free tool to use.
- Can be hooked up to Chromatic for visual regression testing.
Disadvantages of using Storybook:
- It is more difficult to share outside of a local environment.
Visual Regression Testing
Storybook integrates with Chromatic for visual regression testing, ensuring components maintain their appearance across changes. Individual projects need to be manually set up to use Chromatic.
Anvil2 provides a MCP server that can be used to connect to other tools. For some tools, such as Figma Make, a connector is provided to do this. For other tools, you can manually set up the connection by taking the MCP server URL and adding it to the tool’s configuration. Most setups can be additionally guided through your preferred LLM chat assistant.
Mintlify Documentation
The Anvil2 documentation site is built on Mintlify, which provides:
- AI-powered chat assistant for asking questions about the design system
- MCP (Model Context Protocol) server for integration with other AI tools
- Searchable, comprehensive documentation
General prompting guidance
We recommend making sure some level of prompting guidance is applied to any AI tooling so that the AI is aware of the context of the project and the design system. Some specific tools mentioned above provide pre-configured prompting guidance and do not need to be manually configured.
Have the AI know which packages are available to use
**ALWAYS use components from @servicetitan/anvil2**
- Import components from `@servicetitan/anvil2` or its extensions:
- `@servicetitan/anvil2` (core components)
- Check `node_modules/@servicetitan/anvil2` to see what components are available
- Prefer Anvil2 components over any other UI library or custom implementations
- Use the Anvil2 design tokens, which can be imported from `@servicetitan/anvil2/tokens`
Have the AI know to use the correct styling
Without knowing the correct way to apply styling, AI tooling will frequently create its own system, or rely on an unsupported 3rd party library. This should be avoided.
**Don't use these design systems or frameworks:**
- ❌ **Tailwind CSS** - Do NOT use Tailwind utility classes or Tailwind components
- ❌ **shadcn/ui** - Do NOT use shadcn components
- ❌ **Custom UI components** - Do NOT create custom button, input, or other UI components when Anvil2 provides them
- ❌ **Other design systems** - Do NOT use Material UI, Ant Design, Chakra UI, or any other design system
**Styling Rules:**
- Use Anvil2's design tokens and styling system exclusively
- Do NOT invent colors, shadows, tokens, animations, or new UI elements
- Style aligned to Anvil2 design system only
- If you need styling, check Anvil2's tokens and theming system first
Additional Support
Choosing the right combination of these tools depends on your role and workflow—designers and PMs may lean on Figma, while engineers often pair Code Connect with an AI code editor and Storybook. Whatever path you take, the Anvil team is here to help in #ask-designsystem if you hit snags or want to extend Anvil2 into other tools. 
