17_YC_Design_In_The_Agent_Era

7 min read

Overview

Steven, founder/CEO of Paper (paper.design), talks with YC’s Jay about designing in the agent era. Paper is a design tool that is also a visual interface for agents — it’s HTML/CSS-native, so agents (Claude Code, Cursor, Conductor) can read and write to the canvas directly with no format translation. The conversation covers Paper’s shaders (WebGL animations) and image generation for brand design, the MCP-based tool integration, live design review of real YC startup sites (pulling them in via Paper Snapshot and iterating), and a set of concrete typography/contrast rules that eliminate “AI tells.” The throughline: the code base becomes the single source of truth, and design tools become part of the whole stack instead of a walled-off island. Includes a candid company-growingly and design-process philosophy.

Key Insights

  1. Paper is a design tool and a visual interface for agents — because everything is HTML/CSS, an agent can read the CSS directly from a Paper file (“when you ask an agent to work with a Paper file, it’s literally just reading the CSS out”). This is the design-to-dev handoff solved: build a great handoff for humans and you’ve built one for agents too. [3:29]
  2. “Prompting isn’t always the best input mechanism for agents” — sometimes you want to drag and draw; direct manipulation is faster than prompting for many tasks. [4:01]
  3. The code base becomes the source of truth — newer, more agentic companies “are treating the code base as the source of truth” rather than maintaining a separate design system copy that drifts. Components aren’t needed in Paper because you summon things from the codebase as needed. [16:18]
  4. The new agent stack: Cursor + Claude Code (agents) + Paper (visual way to communicate with agents) + GitHub (code review). Often consolidated further into a single app like Conductor, which pairs with Paper. [12:50]
  5. Copy as React/Tailwind — anything you look at in Paper is code (a website already), so you can right-click and copy it as a React component or Tailwind, and paste the literal code into your IDE. [11:41]
  6. No format translation between agent and design = fewer hallucinations, saves tokens, runs faster — the Paper engine takes HTML the agent writes and renders it directly. [14:28]
  7. Paper Snapshot / Chrome extension grabs your live site into editable layers — replaces screenshots; you pull what users actually see, paste it in, and iterate on real content. [16:38]
  8. Agent loops run overnight — designers leave comments on the work, set an agent to “address my comments,” and wake up to hundreds of variations addressed. A new “curation design process.” [20:38, 21:00]
  9. Typography/contrast rules fix most AI-slop — models love bold and love too many font sizes. “Just try to pull them back as light as you can get, and it’ll just magically look better designed.” Work toward ~3 font sizes; pull the bold way back. [24:44]
  10. Common AI tells — over-bold headlines, 5–8 font sizes, purple gradients, gradients in general, icons everywhere, all-caps tiny headers/kickers with extra letter-spacing, “widgets for widgets’ sake,” a meaningless side-swoop of color on every card, 20 cards everywhere, badges with extra icons, and the fact that every vibe-coded app has light AND dark mode. [33:34, 36:12]
  11. “A lot of design is deleting” — agents overbuild (they’re “very insecure” and want to fill space with little ones and twos); pulling back is how you avoid the agent look, and it’s far easier when you can select and delete on a canvas than describe edits in a prompt. [34:57]
  12. Paper itself uses agents for marketing/motion/code but still reads all its code by hand — “quality software takes time”; a small elite team of 12 keeps the talent bar high and uses agents to accelerate, not replace, people. [43:59, 46:26]

Actionable Techniques

  1. Pull back font weight and consolidate font sizes — “try to get down to like three font sizes, and just pull all that bold way back. And you’ll immediately get something that feels more designed and intentional.” [26:22]
  2. Ask for a bunch of variations, then branch — “just ask it for a bunch of variations… It’s the best way to get inspiration.” Pick favorites from different variations and combine. [19:07]
  3. Leave comments on the canvas for the agent to address — “My favorite is actually leaving comments.” Leave all your feedback, then “set your agent on it” and let it spin overnight. [31:09]
  4. Name your frames/selection to give the agent context clues — name a frame “SciTex” so the agent knows exactly what to work on. [30:37]
  5. Pull a real site in with Paper Snapshot and iterate on real content — grab the live section (not a screenshot), paste it as editable layers, and make tweaks. [16:38, 18:38]
  6. Use simple prompting — “I often find simple prompting is fine, honestly.” Don’t over-engineering prompts; give intent + aesthetic + reference. [19:32]
  7. For real work use a cutting-edge model, fast models for demos — fast models make more mistakes; use the best model for production. Fable is the best visual taste right now (slow); Cursor’s Composer 2.5 is good for speed/precision; GPT-5.5 is a good balance. [22:48]
  8. Copy the design back as React/Tailwind code — right-click → copy as React, paste into IDE, or ask the agent to build your selection into a new component in the codebase, matching existing conventions. [26:36]
  9. Build feedback loops for prototypes — Paper plans to iframe prototypes onto the canvas so people can leave comments like they’re used to, organizing the “messy result” of vibe-coded playgrounds. [54:39]

Tools & Skills Mentioned

  • Paper (paper.design) — agent-native HTML/CSS design tool; the visual interface for agents. [throughout]
  • Paper Shaders — open-source WebGL animation library, brand designers love it. [5:27]
  • Paper Mono — a brand mono font being launched. [10:36]
  • Paper Snapshot — Chrome extension to grab live-site content into the canvas. [16:38]
  • Conductor — app that pairs with Paper; push/merge code from the app. [13:15]
  • Cursor / Claude Code / BugBot — the agents/stack around Paper. [12:54, 46:08]
  • GPT 5.5, Cursor Composer 2.5, Fable — models with different strengths (Fable = best taste, slow; Composer = precise/fast; 5.5 = balance). [22:58]
  • Paper MCP server — the MTP/MCP into the desktop app for agent tool calls. [13:41]

Quotes Worth Keeping

  • “Paper is a design tool, but it’s also this visual interface for agents.” [3:54]
  • “When you ask an agent to work with a Paper file, it’s literally just reading the CSS out. And agents know exactly what to do with it.” [3:45]
  • “prompting isn’t always the best input mechanism for agents. Sometimes you want to drag and draw.” [4:01]
  • “the code is the source of truth and both systems know how to work on that same code base.” [15:59]
  • “models love bold… Just try to pull them back as light as you can get, and it’ll just magically look better designed.” [24:47]
  • “Too many sizes… Try to work with three.” [25:01]
  • “A lot of design is deleting.” [34:57]
  • “The agents are very insecure and they want to fill it out.” [34:41]
  • “if all the models were able to do [taste], does everything just look the same again? … you always need the humans to be driven to finding the next thing.” [42:52]
  • “Design is this great differentiator… it makes you look less intentional.” [33:15]

Graph View

Backlinks