First workflow
A practical hello-world path from setup to governed output. Five steps; under an hour.
Goal
Connect one design system, create one artifact, validate it, and distribute it to AI and dev workflows.
Connect your system
From the app:
- Choose or create a design system
- Use Connect to attach upstream sources (Figma, codebase, or both)
- Verify connection status in Connect
After this step a design-system workspace exists and source context is available for import and governance.
Build your first artifact
Choose one quick path:
- Tokens path: define base semantic tokens
- Preset path: create or edit a preset in Studio
- Content path: establish core terminology and voice constraints
Recommended first artifact: a primary-action preset backed by semantic tokens.
After this step at least one canonical artifact exists and can be referenced by code or AI.
Use AI with system context
Connect your coding assistant through MCP (via Connect / AI coding tools flow). For the one-line install on Claude Code:
claude mcp add --transport http preset https://mcp.presetai.dev/mcp
Then ask for an implementation using preset AI primitives. A realistic first prompt:
Build a form using my presets and tokens.
Expected behavior from the agent:
- discovers valid components and presets
- uses token-aligned outputs
- avoids forbidden primitives and hardcoded values
After this step generated code is closer to system standards by default.
Validate and review
Run validation in the surface that fits your workflow:
- In app: Health, audits, and related status surfaces
- In MCP: validation and drift tools
- In CI/CLI: drift and compliance checks in pipelines
If issues appear, generate a proposal or fix recommendation. Review before applying in stricter environments.
After this step changes are validated before broad rollout.
Apply and distribute
After validation:
- Approve or apply changes to the canonical model
- Distribute through docs, MCP responses, and CI policy
After this step humans and AI consume the same updated system definition.
What success looks like
By the end of your first workflow:
- the design system has a canonical baseline
- at least one preset is reusable
- AI output references system artifacts
- validation catches drift early
- a governance path exists: propose → validate → apply
Suggested next moves
- Define 3-5 high-value presets (primary, secondary, destructive, text input, dialog action)
- Enable CI drift checks on key repos
- Set an initial compliance mode and review cadence
See Set up enforcement for the MCP install in detail, and Agent resources for every surface AI tools can read.