Build websiteswith your AI agents,add taste with Alpy MCP.

Connect Alpy MCP and put a creative director behind every AI build. A complete design system and 30+ UI and web design skills keep every design consistent, polished, and intentionally yours.

https://alpymcp.com/api/alpy-mcp

Not sure how to set it up? Set up guide

Everything you need to build beautiful and consistent designs.

Customize type, color, and tokens in your Alpy design system, and Alpy MCP automatically keeps everything in sync. Claude, Codex, Cursor, Figma, and Gemini can pull approved React and Vue components, tokens, styles, and skills to build anything with a consistent look and feel.

Explore Alpy MCP
  1. Color Palettes

    Choose a color profile and contrast model, then generate and fine-tune an accessible palette. Your library colors and component styles stay automatically in sync.

    • Accessible
    • Bound to semantic tokens
  2. Typography

    Choose fonts, base size, ratio, steps, and spacing. Your library typography and component styles stay automatically in sync.

    • Responsive
    • Bound to tokens
  3. Components

    Use 23 accessible components with canonical variants, token bindings, runtime behavior, and light and dark modes.

    • 23 Components
    • Canonical
    • Token Bindings
  4. AI Taste

    Choose a visual direction and help AI agents create or polish better websites and interfaces using 20+ web design styles, 30+ UI skills, and your Alpy Library context.

    • Visual Direction
    • Define to Review
    • Agent Guidance
  5. AI Skills

    Install all 45 registered AI workflows and style profiles for design intent, website design, front-end work, responsive adaptation, and accessibility.

    • 45 Skills
    • Design
    • UX
    • Audit
  6. UX Guidelines

    Guide agents with product direction, governance, brand, composition, content, inclusive UX, visual principles, and accessibility.

    • Accessibility
    • Governance
    • Composition
  7. Tech Stacks

    Use React, Vue, Alpy MCP, the Figma plugin, Alpy Connect, JSON, CSS, and command-line install paths.

    • React
    • Vue
    • MCP
    • CLI
    • Figma

One flow from zero to ready.

A tool for colors. Another for type scale. Another for components. Another for Figma. Another for Codex or Claude.

Alpy brings scattered workflows into one synced flow, from setup to shipping.

A component library you need to build websites.

Accordion
Alert
Badge
Breadcrumbs
Button
Card
Checkbox
Date Picker
Dropdown
Icons
Image
Modal
Pagination
Popover
Progress Bar
Progress Indicator
Radio
Table
Tabs
Text Input
Textarea
Toggle
Tooltip

User Experience, Accessibility Audit, Website Design, UI Design, Front-end design, Responsive Adaptation

The source of truth and design taste for AI code agents. Ready.

Your design system, creative direction, and AI tools. Connected.

See Alpy MCP in action

How Alpy MCP works

  1. Make Alpy your design system

    Sign in and customize your typography, colors, and components.

  2. Connect your AI agents

    Add Alpy MCP to your AI, select your library, and restart your tool. Need help getting connected? Click your tool’s logo below for a quick setup guide.

    ClaudeCodexCursorFigma

  3. Bring your next idea to life

    Describe a website, app, or your next idea.

Inside Alpy MCP

Your Alpy design system

React and Vue components, or semantic and component tokens in light and dark modes.

Button
Satoshi
Aa Bb Cc
0123456789
Button
Satoshi
Aa Bb Cc
0123456789

Taste and design skills

20 web design styles and 10+ UX, UI, and visual design skills, plus responsive and accessibility audit skills.

Playful GeometricModern DarkBauhaus

Ready to build

Use Figma Connector to Insert tokens and components or build anything with React or Vue components.

FigmaReactVue

Pricing

Try Alpy Library for free. Use your Alpy Library with Install Code, AI Skills, Alpy MCP, and the Alpy Figma plugin, or choose Enterprise for unlimited libraries and library switching.

  • Free

    Start here

    Customize your Alpy Library with your type, colors, tokens, and component styles, then preview the results locally.

    $0

    always

    Included

    • 1 design system
    • Type Scale Generator
    • Palette Generator
    • Light + Dark themes
    • Component demo
    • Token management
    • A11y audit
    • Automated documentation
    • Alpy MCP
    • 45 AI design skills
    • React component preview
    • Vue component preview

    Limits

    • Browser-local save
    • No downloads
    • No Figma plugin package
    Try for Free

  • Pro

    1 library

    Use your Alpy Library in production with Install Code, AI Skills, Alpy MCP, and the Alpy Figma plugin.

    $49

    First library on Alpy

    Everything in Free, plus

    • 1 design system
    • 45 AI design skills
    • React component install
    • Vue component install
    • Alpy MCP server
    • Figma plugin
    • E-mail support

    Limits

    • No extra design systems
    • No library switching

  • Enterprise

    Unlimited

    Create and switch between unlimited libraries for brands and client work.

    $490

    Lifetime accessOne-time payment

    Everything in Pro

    • Unlimited design systems
    • Switch between libraries
    • 45 AI design skills
    • Priority support and onboarding
CapabilityFreeProEnterprise
Design systems11Unlimited
Type scale generatorYesYesYes
Palette generatorYesYesYes
ThemesLight + DarkLight + DarkLight + Dark
Token managementYesYesYes
Component demoYesYesYes
Automated documentationYesYesYes
A11y auditYesYesYes
AI context
Alpy MCPYesYesYes
AI design skills454545
Code and Figma
ReactPreviewCode exportCode export
VuePreviewCode exportCode export
Alpy library for Figma pluginNoYesYes
Limits
Save and downloadsBrowser-localDownloads includedDownloads included
Extra design systemsNoNoUnlimited
Library switchingNoNoYes
Team
SupportE-mailE-mailPriority support

Questions? Answers!

Need help connecting your AI tools or choosing a plan? Get in touch and we’ll help you get started with Alpy MCP.

Build with your AI agents, add taste with Alpy.

Bring your Alpy design system into Claude, Codex, Gemini, and Figma.

Build everywhere with the same AI skills, tokens, components, and design guidance.