The Schema MCP Plugin gives your AI agent direct access to your ACSS-powered design system. Here’s how to work with it effectively.
How it works
When you connect an AI client (Claude, Cursor, Claude Code, etc.) to the plugin, the agent gains access to MCP tools that can read and write your ACSS configuration. You talk to the agent in natural language. The agent translates your intent into precise design decisions via token changes.
The agent follows a consistent workflow:
- Reads site context: Checks for site-specific instructions, behaviors, and constraints
- Loads relevant skills: Pulls domain knowledge for the area you’re working in (colors, spacing, typography, etc.)
- Proposes changes: Shows you what it plans to do and why
- Applies the patch: Writes to ACSS and triggers CSS regeneration
What you can ask
Apply a niche profile
“Create an ACSS config for a fintech website”
“Suggest ACSS typographic settings that match a more editorial look”
“Make this feel like a creative agency site”
The agent matches your request to a niche profile – a preconfigured combination of design anchors for a specific industry. Each niche implies radius, spacing, type scale, font, and layout.
Adjust individual design parameters
“Make the spacing more airy”
“Sharpen the radius”
“Use a more dramatic type scale”
The agent detects your current position on the anchor scale and steps up or down. You don’t need to know the exact values, describe the direction and the agent resolves it.
Change specific values
“Change the primary color to match the new client brand guide”
“Set base radius to 8px”
“Set the heading scale to 1.333”
Direct value changes are applied immediately. The agent validates the format and warns you if the change conflicts with other settings (e.g. Unified Lightness).
Save and load kits
“Save the current config as a kit called Client A v1”
“Show me my saved kits”
“Apply the Editorial Warm kit”
Load and manage fonts
“Use Playfair Display for headings and Outfit for body text”
The agent downloads the font as a self-hosted woff2 file and configures the ACSS font slots.
Design Anchors
The agent understands named levels for each design engine, which allows it to take action on more abstract terms in natural language.
You can use these anchor names in your prompts:
Radius: square → sharp → subtle → soft → default → rounded → very-rounded
Spacing: very-dense → dense → compact → comfortable → airy → very-airy
Typography: minimal → calm → default → bold → dramatic
Layout: narrow → contained → default → wide
“Set radius to subtle and spacing to compact” works because these are registered anchor names the agent resolves into precise ACSS values.
Tips for effective prompting
- Be specific about what you want to change. “Make it look better” gives the agent nothing to work with. “Make the spacing more compact and sharpen the radius” does.
- Use anchor names when you know them. “Set spacing to airy” is faster than “add more whitespace.”
- Stack changes in one prompt. “Apply the SaaS niche, change primary to #5E6AD2, and save as a kit called Dashboard v1” works as a single request.
- Describe the feel, not the pixels. “This should feel more editorial and refined” lets the agent reason about which anchors to adjust.
- Ask the agent to explain. “Why did you choose that type scale?” gives you visibility into its reasoning.