Varelyo

Design real React screens inside your own codebase with AI agents

Intermediate
Screenshot of Varelyo, Design real React screens inside your own codebase with AI agents

What is Varelyo?

Varelyo is a coding tool that designs real React screens inside your own codebase with AI agents. Varelyo is a macOS design tool that turns prompts or Figma designs into working React UI inside your codebase, reusing your components, then lets you refine visually while your own coding agent CLI does the work.

Varelyo is a desktop design tool that works directly on a React codebase instead of producing separate mockups. A user describes a screen in a prompt or imports a Figma design, HTML or CSS, and the tool generates working UI built from the components the project already contains. Each new screen is meant to reuse existing parts and extend the design system, so later pages start from a larger base. There are two ways in. Starting from scratch, a user picks a foundation and describes what is needed; Varelyo creates tokens and components, then assembles the page from them. Bringing an existing library, it reads component APIs and tokens, reuses what is available, and adds props or variants only when needed. Varelyo Foundation, an open-source React library with typed APIs and design tokens, is offered as a starting point, and shadcn/ui, MUI, Chakra, Mantine, Radix UI and Tailwind CSS are listed as supported libraries. Editing happens visually on real components. Layers map to components from the kit, props can be changed in an inspector with the live component re-rendering, and token edits (core, semantic and component levels) propagate across screens. Feedback can be drawn on the screen and sent to the agent, or pinned as comments tied to a file and line. The agent can ask clarifying questions first, run up to six agents in parallel on one plan, and every applied change is saved as a restorable version. Git integration creates a branch, commits approved changes and opens a pull request for normal team review. Varelyo does not bundle its own model. It runs on a Mac and drives agent CLIs the user has installed, including Claude Code, Codex, Gemini CLI, OpenCode, Kimi CLI or a custom CLI, giving each the same component context, tokens, rules and validation tools. The vendor states it never receives source code. It suits front-end teams and product engineers who want design and code to stay in one place, and it sits between prompt-to-UI generators that output isolated code and traditional design tools that require handoff.

How do you use Varelyo?

  1. 1Download the macOS app
    Install Varelyo on a Mac from the homepage download button. The app runs locally and drives the agent CLI you already have.
    Varelyo — Download the macOS app
  2. 2Watch the demo video
    Review the demo to see how prompts, visual editing and pull requests fit together before starting a project.
    Varelyo — Watch the demo video
  3. 3Connect an agent CLI
    Link Claude Code, Codex, Gemini CLI or another supported CLI so Varelyo can use your own subscription and model choice.
  4. 4Choose a foundation or your library
    Start with Varelyo Foundation or connect your existing React component library so the tool can read its APIs and tokens.
    Varelyo — Choose a foundation or your library
  5. 5Describe a screen and refine it
    Prompt or import a Figma design, answer the agent's questions, then adjust props and tokens visually in the inspector.
  6. 6Open a pull request
    Connect Git so Varelyo can create a branch, commit the approved change and open a pull request for review.

Pros and cons

Pros

  • Generates UI from your existing React components and tokens instead of producing throwaway mockupsAI
  • Works with several agent CLIs (Claude Code, Codex, Gemini CLI, OpenCode, Kimi CLI) using your own subscriptionAI
  • Visual editing of props and design tokens on real components, with common edits written straight to sourceAI
  • Saved versions and automatic pull requests fit normal team code review workflowsAI
  • Open-source Varelyo Foundation library gives a typed starting point for projects without a design systemAI

Cons

  • Only a macOS download is offered on the homepage, so Windows and Linux teams are left outAI
  • Focused on React, which excludes projects built on other front-end frameworksAI
  • Requires a separately installed and paid agent CLI, so total cost and quality depend on that providerAI
  • Pricing is not stated on the homepage, which makes budgeting difficult before downloadingAI
  • Setup involves connecting a component library and Git, which is heavier than a browser-based generatorAI

How much does Varelyo cost?

Integrations

Works with Claude Code, Codex, Gemini CLI, OpenCode, Kimi CLI and custom CLIs. Supports shadcn/ui, MUI, Chakra UI, Mantine, Radix UI and Tailwind CSS, plus Figma and HTML/CSS import and Git.

Learn more

Features

Prompt and Figma/HTML import to React UI, reuse and extension of existing components, visual prop and token editing, drawn and code-pinned feedback, clarifying questions, up to six parallel agents, version history, and Git pull request creation.

Learn more

Frequently asked questions about Varelyo

  • How do you use Varelyo?
    The walkthrough on this page covers 6 steps: 1. Download the macOS app 2. Watch the demo video 3. Connect an agent CLI 4. Choose a foundation or your library 5. Describe a screen and refine it 6. Open a pull request.
  • What platforms does Varelyo support?
    Varelyo is available on MacOS.
  • What does Varelyo integrate with?
    Works with Claude Code, Codex, Gemini CLI, OpenCode, Kimi CLI and custom CLIs. Supports shadcn/ui, MUI, Chakra UI, Mantine, Radix UI and Tailwind CSS, plus Figma and HTML/CSS import and Git.
  • What are the limitations of Varelyo?
    Only a macOS download is offered on the homepage, so Windows and Linux teams are left out. Focused on React, which excludes projects built on other front-end frameworks. Requires a separately installed and paid agent CLI, so total cost and quality depend on that provider.

Status

StatusActive
Views0
Outbound clicks0
Added10/18/2026

Platforms

MacOS

Pricing

Paid

Categories