Dessn in your agent

Dessn is a design canvas where every frame is your real app, running live from your own code. One install gives your coding agent Dessn's tools (the Dessn MCP, signed in with your Dessn account) and its design skills.

• Your real app, not a drawing of it. Every route of your app on a page in one call, and any live site's URL as a frame beside your design.
• Your design system, with file:line. The components your app really uses, its tokens, and how each kind of UI is done in it.
• Edit the code, see the picture in seconds. Frame and board writes spend no credits; only runs of Dessn's own design agent do.
• Git both ways. Push your working tree onto a frame; take a frame's change home as a patch, its commits or a bundle.
• Local or in the cloud. A remote MCP with OAuth: Claude Code, Codex, Cursor and VS Code on your computer, and cloud agents and web chats too (Codex Cloud, Cursor's cloud agents, claude.ai, ChatGPT).
• Design skills. Explore the app before designing, reuse its design system, make variations as copies checked against real pictures, give a new page a brief and a look at every section, and lay out boards people can read.

The skills

• dessn

  Start here for Dessn (create.dessn.ai), a design canvas where every frame is the person's real app running live from their own code. People who connected it ask in their own words, mostly without naming Dessn (design a new settings page, make variations of a screen, a page I can click through, review our onboarding and propose changes, map our sign-up flow, show the checkout flow with each step and where errors go), and what they ask to see goes on their Dessn canvas as live frames they click through and share, where a local file or a written answer stays on this computer alone. Also when they mention Dessn, paste a create.dessn.ai link, lay out a board, review frames, or bring a Dessn design into their code. Covers connecting and signing in, finding their projects and pages (with none yet, setting their own app up from the folder you are in, or a starter app whose frames play when there is no app), which Dessn tool fits each job, and which Dessn skill to load next.

• dessn-board

  Lay out Dessn canvas pages a person can read without the chat. QA boards of an app's surfaces grouped by area, user flows of the app's live screens joined by labelled arrows (the main path in a row, each failure a real state of its step's screen under it), diagrams drawn from Mermaid or nodes and edges, title and caption notes, sections, and frames fitted to their content. Use for "put every surface of our app on a page", "map our sign-up flow", "show the checkout flow with each step and where errors go", "lay out the onboarding journey for a new user", "draw this architecture or state diagram on the canvas", "tidy / arrange this board", "label these frames", or "make the frames fit".

• dessn-cloud-code

  Work with the app's code in Dessn's cloud when there is no local checkout. Find a surface from the person's words, find the code behind it, explain how it's built, change it on a copy, look at the result, put it on a board beside the original, and undo, all through the Dessn MCP. Use when the user has no code locally (a PM or designer with Claude Desktop, claude.ai or Claude Code in an empty folder) and wants to understand, change or explore a surface of their Dessn project, such as "where does this text come from", "change the copy on the pricing page", "how is the empty state built", "make this friendlier and show me".

• dessn-design

  Design on the person's Dessn canvas, the way Dessn's own design agent does. People ask in their own words, mostly without naming Dessn (design a new settings page, make 3 variations of the pricing, add an empty state to the projects list, make a landing page for a feature, a pricing page I can click through, review our onboarding and propose changes, explore different directions, mock this change, show it at phone width). With Dessn connected, each becomes frames of their real app on their canvas, a copy whose code you write in seconds with no credits, that they click through, compare and share, kept 1:1 with their local code by git; a local edit shows on this computer alone. Reuse the app's components (dessn_designSystem_get), never recreate them, check each result against a real picture, mock a UI change as a copy of the app's frame whose code you write, and keep HTML frames for notes and annotations. Also for a design-system sheet, denser or darker versions, and empty, error and loading states.

• dessn-sync

  Move code between the person's local clone of their app and Dessn with git, both ways, through the Dessn MCP. Push the local checkout to a Dessn frame (their own copy) and put frames of its routes on a board; or take a Dessn frame's change home into the clone as git (status, a patch to git apply, its commits for git am, a bundle to git fetch) and build it. Use when the user codes locally in a clone of a Dessn project's repository, such as "push my local changes to Dessn", "put my branch on the board", "sync my working tree to Dessn", "take this frame's change into my repo", "bring the design from Dessn into my code", "apply this frame".