MCP Studio improves spacing, typography, contrast, and visual hierarchy directly in your code—without touching business logic.
{
"mcpServers": {
"mcpstudio": {
"command": "npx",
"args": ["mcpstudio"]
}
}
}The problem
When you're building features at speed, design polish is the first thing cut. Spacing gets inconsistent. Contrast drifts. Typography hierarchy flattens. The app works, but it doesn't feel right.
Spacing
Inconsistent padding and margins across components
Typography
Flat hierarchy — headers, body, and labels blur together
Contrast
Low-contrast text and unclear visual boundaries
How it works
Add MCP Studio to your Cursor, VS Code, or Windsurf config. One JSON block, no plugins.
Point MCP Studio at any Tailwind component or page. Choose a mode and let the AI analyze your UI.
Get updated Tailwind classes with better spacing, typography, contrast, and hierarchy. Accept, tweak, or rollback.
Why MCP Studio
Understands utility classes, design tokens, and component patterns. Outputs clean Tailwind — not inline styles or arbitrary values.
Only modifies presentation classes. Your state management, data fetching, event handlers, and routing stay exactly as they are.
Every redesign is a diff you review. Compare before and after side-by-side. Accept individual changes or revert entirely.
The AI's design knowledge is updated continuously — new patterns, improved heuristics, better spacing and typography decisions.
Runs inside your IDE through MCP protocol. No browser tabs, no SaaS dashboards. Output goes directly into your codebase.
Modes
Refines spacing, sizing, alignment, and contrast. Preserves your existing design direction while making everything feel more intentional and consistent.
Introduces subtle gradients, refined color relationships, iconographic enhancements, and decorative details that elevate flat interfaces.
Transforms flat layouts with layered shadows, perspective shifts, dimensional cards, and spatial depth cues that create visual weight.
Results
See how MCP Studio refines actual Tailwind interfaces. Every change is a class-level diff you can review.
Before
After
Spacing hierarchy + card consistency
Before
After
Contrast ratios + typography scale
Before
After
Component alignment + visual rhythm
Before
After
Data density + reading flow
Before
After
Message spacing + action hierarchy
Before
After
Section cadence + CTA prominence
Setup
{
"mcpServers": {
"mcpstudio": {
"command": "npx",
"args": ["mcpstudio"]
}
}
}MCP Studio runs through the Model Context Protocol inside your IDE. No browser, no SaaS dashboard. Output goes directly into your codebase.
Pricing
Try a redesign and see the difference.
For developers who ship UI regularly.
For teams with design standards.
Connect your IDE, point MCP Studio at any Tailwind component, and see the difference. No credit card required.