Design Studio: Describe It, Annotate It, Compare It, Ship It
A walkthrough of the Design Studio app: designs from a prompt, pinned feedback that becomes edits, before-and-after compare, and a link to build from.
Yantra Team1 min read
On this page
Design tools ask you to draw. Design Studio asks you to describe, then gives you the tools a reviewer needs: widths, pins, compare, revert, and a way to hand the result to code.
Describe
"Design a landing page for my coffee brand." "Mock up a pricing page with three tiers." "Generate a mobile onboarding flow with three screens." Design Studio opens beside the chat and the creation appears on a board. All designs lists your boards; start a blank one from there.
Templates, design systems and design tools for motion, polish, image and video, and creative direction come from your workspace's marketplace, so a house style is a pick, not a prompt.
Look at it properly
Each creation has Preview, Code and Compare tabs. Switch the frame between Desktop, Tablet at 768 pixels and Mobile at 390 pixels. Most design tools show you one width; most design problems show up at the other two.
Annotate
Click anywhere on a creation to pin feedback: "make this headline bolder", "less color here", "this button should be secondary". Pins are sent to the agent as edits, and a new version appears. This is the loop a designer and a reviewer already have, without the screenshots.
Compare and revert
Compare shows Before, Swipe and After. If the new version is worse, revert. Nothing is lost between iterations.
Ship it
Download the HTML. Or Use in code: publish the design and copy a link that Codezen can build from, so the mockup becomes a pull request.
What it is not
Plain image or video generation with no design document is Canvas. A real, deployable website with pages and a preview sandbox is Web Builder. Design theory questions are answered in chat.