Labsco
visily-app logo

Visily MCP

★ 5

from visily-app

Turn UI designs into responsive applications with Visily MCP

🔥🔥🔥✓ VerifiedFreeQuick setup
#automation#git#design

Visily MCP

Visily is an AI design canvas that turns text prompts, screenshots, URLs & more into UI designs that are as easy to edit as a Google Slide. The Visily MCP server brings those designs into your AI coding agent: point it at a Visily board or screen and your agent can find it, turn it into application code, or pull its theme tokens.

[!NOTE] Access requirement. The Visily MCP works only on workspaces on a Pro or Business plan where you are the workspace creator or have an editor license. Free workspaces and viewer/guest roles are not supported. This is enforced on every request.

What you can do

  • Turn a Visily design into code. Generate production-ready code from a Visily screen or board — whether the UI was AI-generated in Visily or hand-authored. The agent rebuilds semantic, responsive components (default stack: React + TypeScript + Tailwind v4 + shadcn/ui) instead of pasting a static export.

  • Find a board or screen and get its link. Ask for a design by description ( "the board I was working on for the 4.6 release" ) and the agent returns a link to open it — without leaving your editor.

  • Apply a board's theme. Pull a board's design system as shadcn/Tailwind v4 tokens and apply it to another app's styling.

Prompting your agent

Give the agent a Visily link and a clear intent. The agent extracts the IDs from the URL — it doesn't open the page.

Examples

  • "Find the Visily board I was working on for the 4.6 release and give me the link."

  • "Build this Visily screen as React + Tailwind: https://app.visily.ai/projects/abc/boards/456/elements/789"

  • "Implement this board in Next.js, reusing my src/components/ui components."

  • "Apply my Visily board theme to this app's globals.css."

A Visily URL looks like:

Copy & paste — that's it
https://app.visily.ai/projects/{projectId}/boards/{boardId}/elements/{elementId}

Structure your Visily file for better code

The more intent your design carries, the better the generated code:

  • Name your screens and key groups semantically in Visily — names flow into the export and into the link-matching for "find my board."

  • Lean on Visily's theme / design system so the agent can apply real tokens instead of guessing colors and radii.

  • Ask for one screen at a time for large boards — smaller selections produce more reliable results.

Tools

Tool Use get_design_context Primary. Returns designData + theme + screenshot metadata for one element. get_screenshot Fetch a screenshot for visual verification. get_board_theme Board design system as shadcn tokens (JSON / CSS / Tailwind). list_workspaces, list_projects, list_boards, list_elements Discovery / find-a-board. get_workspace, get_project, get_board, get_element, get_element_export Advanced — metadata and raw exports rarely needed for the three use cases; prefer the tools above.

The server also ships prompts (e.g. find_visily_board, generate_code_from_element, apply_board_theme) and resources (visily://docs/...) that your agent reads on demand.

Custom rules (optional)

Set project-level guidance so output stays consistent — like onboarding notes for a new teammate.

Cursor (.cursor/rules/visily-quality.mdc):

Copy & paste — that's it
---
description: Visily code-generation rules
alwaysApply: false
---
- Treat Visily `designData` as a reference, not final code — rebuild semantically.
- Apply the Visily `theme` tokens; never hardcode hex, radii, or spacing.
- Reuse existing components in `src/components/ui` instead of duplicating.
- Verify against `get_screenshot` for 1:1 layout before finishing.

Claude Code (CLAUDE.md):

Copy & paste — that's it

## Visily MCP rules

- Treat Visily `designData` as a reference, not final code — rebuild semantically.
- Apply the Visily `theme` tokens; never hardcode hex, radii, or spacing.
- Reuse existing components instead of duplicating; verify with `get_screenshot`.

How this repo is built

plugins/ is generated from a single shared source (shared/) by scripts/build.mjs. To change the integration, edit shared/ and run npm run build — never edit plugins/ by hand. See CONTRIBUTING.md.