Design like Ras Mic

1. 012:35

   Start from a site you love

   You don't need design skills to begin. Find an app or site that looks right to you on Mobbin or X, even outside your niche, and screenshot it.

   How
2. 023:22

   Turn it into a design system

   Give the agent the screenshot and the link. It writes down the colors, fonts, spacing, corners and components in Paper. He calls this “the most important part.”

   How
3. 0310:07

   Fix the page, then the system

   A sheet of swatches tells you little. Build a real page, fix it until you like it, then have the agent write the changes back into the design system.

   How
4. 048:19

   Rough comments are enough

   He pins notes like “not a fan” right on the design, then asks the agent to address all the comments. You don't have to know why something is wrong.

   How
5. 0510:40

   It takes days, not one prompt

   Page, comments, update the system, and again. In his words: “Go multiple rounds, multiple days.”

   How
6. 0615:10

   Ask for many versions

   “I would never build one version.” One exploration prompt gets several layouts of a page, all on the same design system.

   How
7. 0712:04

   Short prompts work once the system exists

   He calls his dashboard prompt terrible, and it still came back looking right. The design system does the heavy lifting.

   How
8. 0815:17

   The system matters more than the model

   He uses Claude Opus 5.5 and finds Claude models best at design. But with no design system to follow, any model's work looks “AI smelly.”

   How

Agent

The AI that does the work: Claude Code, Codex or Cursor, running a model. Here it's Claude Opus 5.5, which Ras Mic thinks is best at design.

Harness

The app you run the agent in. His is T3 Code, a free desktop app over Claude Code and Codex. Plain Claude Code works too.

Thread

One running conversation with the agent. He gives each design job its own thread and runs several side by side.

Paper

A Figma-style design app where every frame is real HTML and CSS. The design system, the pages and his comments all live there.

MCP

Short for Model Context Protocol. It's the plug that lets the agent read and draw on Paper. It only works while Paper Desktop is open, and the free plan allows 100 MCP calls a week.

Canvas and frame

The canvas is Paper's open workspace. A frame is one board on it, like a page. He copied a whole design system frame from one project into another.

Mobbin

A library of screens from real, well-designed apps and websites. He browses it by niche to find a site to borrow from.

Design tokens

The named values in a design system: each color, size and spacing step. His devin.ai build had 105. Telling the agent to use the tokens stops it inventing new values.

Radii and surfaces

Radii are how rounded the corners are. Surfaces are how a card sits on the page; his file had four: hairline, raised, frosted and floating.

AI smell

Ras Mic's name for the generic look you get when a model designs on its own, with no design system to follow.

Vibe-coded

Built by telling an AI what you want instead of writing the code. He vibe-coded his own screenshot tool.

DESIGN.md

A plain text file in your project that writes down the design system. FakeNerd's take: the loop works with one of these and screenshots, without Paper.

What he's made this way: a portfolio redesign, the Pluto app (dark and light mode, animations, a little character), his Goshen Labs site, and a dashboard for Bezalel. He sees his own style starting to form across them. 0:40

• Canvas

  2:15
  Paper

  A Figma-style design app where every frame is real HTML and CSS. Its MCP lets the agent read and draw on the canvas. Also where he leaves comments and generates images.

  Free: 100 MCP calls a week. Pro: $20 a month per editor.

• Harness

  3:36
  T3 Code (nightly)

  Theo's open-source desktop app for running coding agents in threads. He runs one thread per design job, several at once.

  Free, MIT. Nightly builds on GitHub.

• Model

  15:17
  Claude Opus 5.5

  On screen: Opus 5.5, Extra High effort, 1M context, full access. “Generally, the Claude models are the best at design.”

  Your Claude plan or API.

• Inspiration

  2:35
  Mobbin

  A library of screens from real, well-designed apps and websites. Browse by niche, find a site you like. He also follows designers on X.

  Free to browse. MCP needs a paid plan.

• Capture

  2:24
  A screenshot tool

  He vibe-coded his own. Any works: the screenshot of a site you like is the input to step 2. On a Mac, ⌘⇧4.

  Free.

On the model: “Honestly, generally, the Claude models are the best at design.” He has also used Astra. Any model does fine “as long as you have a design system and you're telling it to follow the design system.” 15:17

• Make the design system

  Typed3:36

  Create a project on paper using the MCP, create this website and it's design system

  Attached: a screenshot of devin.ai and the link. Opus 5.5 worked 28m 15s and came back with a Paper file: the rebuilt homepage (1440 × 7214), a Foundations page (color system, type specimen, spacing scale with grid rules measured from the site, corner radii, four surface styles) and a Components page. 105 design tokens in all.

• Add color

  Said7:55

  I want us to explore adding color.

  The first Pluto was pure black and white. This got a few versions back; he kept blue accents and colored buttons, in dark and light mode.

• Act on the comments

  Said8:27

  Address all the comments I left.

  His comment on one card: more space around the picture, and rounder. The agent came back with a new version of the card.

• Mix two systems

  Said9:53

  Combine these two design systems and build me a new page.

  He copied his portfolio's design system frame in Paper, pasted it into another project next to the new one, and asked for this.

• Explore one page

  Said11:01

  Can we do an exploration of the banking page?

  Pluto's connect-your-bank page was “pretty ugly.” One prompt, several full layouts back.

• Design the product

  Typed11:47

  Build out the product dashboard using the Paper MCP on the Paper project. You already have access to the code so you know what the app can do. Using the design system and the landing page that was created, design for me the product, which is the dashboard

  For Bezalel, his agent project. The thread already knows the codebase, so the agent knows what the dashboard has to show. A few minutes later: a dashboard he calls beautiful.

• Recolor a system

  Said12:48

  Please go on the GitBook project on Paper using the MCP. I want you to change the design system. I actually want different versions because the base color is orange. I like everything else, I'm just not a fan of orange. Create for me different versions with different colors.

  Started in a separate thread while the dashboard was cooking. Back came blue, teal and purple versions. He deleted orange and purple.

He runs these in separate T3 Code threads at the same time: one recolors a design system while another designs a dashboard. His thread names on screen read like a to-do list: Explore Banking Page, Review and Rebuild Icon System, Redesign Site in Pluto Style.

1. 01

   Install Paper Desktop

   The MCP only works while the desktop app is open. The web app alone won't do.

   paper.design
2. 02

   Connect Paper to your agent

   In Paper Desktop, open the MCP panel and click Add to Claude Code (or Codex, or Cursor). Restart the agent. Or from a terminal:

   claude plugin marketplace add paper-design/agent-plugins && claude plugin install paper-desktop@paper

   Paper MCP docs
3. 03

   Optional: a harness like his

   T3 Code is a desktop app over Claude Code and Codex, with threads you can run side by side. Plain Claude Code works too.

   brew install --cask t3-code

   T3 Code releases
4. 04

   Optional: Mobbin in your agent

   So the agent can search real app screens itself. Needs a paid Mobbin plan. You'll sign in once in the browser.

   claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp

   Mobbin MCP

# 1 · Design system (attach a screenshot of the site you like)
Create a project on Paper using the MCP. Recreate this website [URL] and
extract its design system: colors, type, spacing, radii, surfaces and
components, each on its own page. Then build a landing page for [my app]
that uses only that design system.

# 2 · Iterate (after leaving comments on the canvas)
Address all the comments I left on the Paper project.

# 3 · Write it back (once the page looks right)
Update the design system so it matches the landing page as it is now.
List every change you made to the system.

# 4 · Explore
Do an exploration of the [page name] page: 3 different layouts, all on
the design system. Put them side by side in Paper.

# 5 · New pages
Using the design system and the landing page, design the [dashboard].
You have the code, so you know what the app can do.

# 6 · Ship
Build the [dashboard] design from Paper into the app. Use the design
system's tokens, not new values.

Swap the brackets for your own site and app. Run step 1 once, steps 2 and 3 as many times as it takes, then 4 to 6 for each new page.

More from Ras Mic on this site: his software factory, for how he ships what he designs, and his stack, for everything he builds with.

• Ras Mic · My Secret Method For Creating Beautiful Apps using AI (Sept 28, 2026). Typed prompts, Paper comments and the model picker are read from the video; quotes are from its captions. Sponsored by Firecrawl, which isn't part of the workflow.
• rasmic.xyz, Michael Shimeles (Ras Mic), Goshen Labs.
• Paper, T3 Code and Mobbin docs for setup commands and prices, checked Sept 28, 2026.