Trusted by builders

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

Connect Alpy MCP and put a creative director behind every AI build. You get a complete design system and 37 design skills for consistent and intentional UI and UX designs.

Connect Alpy MCP to your AI

CursorCodexClaudeGeminiFigma

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 21 web design styles, 12 UI skills, and your Alpy Library context.

    • Visual Direction
    • Define to Review
    • Agent Guidance
  5. UX Guidelines

    Guide AI to create thoughtful user experiences that make your product clear, intuitive, and easy to use.

    • User Experience
    • Usability
    • Inclusive Design
  6. 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

21 web design styles and 12 UI 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