AI Overview
The CFA Design System ships two AI tools for Cursor. Install both. The plugin teaches the agent how to decide. The MCP returns facts from the package versions in your app. The @cfa/react-core, @cfa/icons and @cfa/design-tokens-core packages also ship version-matched skills for using them. See Get started with AI.
Mental model
Section titled “Mental model”design-system-core plugin
Section titled “design-system-core plugin”The plugin adds skills for judgment calls: which CFA pattern fits, how to structure content, when to stay on a documented component, when token-backed styling is the right call.
Skills version on their own schedule. They do not return prop contracts or generated component docs.
Current skills:
cfa-design-system: patterns, typography, compliance, design-system-first UIdesign-tokens: token tier selection, naming, and usage for custom styling
@cfa/design-system-mcp
Section titled “@cfa/design-system-mcp”The MCP server returns the component catalog, prop contracts, usage guidance, design tokens, and icons from the packages bundled with that release.
Install @cfa/design-system-mcp at the same version as @cfa/react-core in your application. A version mismatch means the MCP describes an API your app does not use.
When to use which
Section titled “When to use which”| You need… | Use |
|---|---|
| Pattern or layout guidance before coding | Plugin (cfa-design-system) |
| Token selection for custom styling | Plugin (design-tokens) |
| Component props, exports, or defaults | MCP (get_component_props) |
| Usage examples and composition guidance | MCP (get_component_guidance) |
| Token or icon lookup | MCP (search_tokens, search_icons, etc.) |
Next steps
Section titled “Next steps”See Get started with AI to install the plugin and a version-matched MCP in Cursor.