Direct Answer
Design in the agent era is not prompt-and-ship. It is a loop in which agents make options cheap and humans make decisions expensive. Use agents to expand the possibility space, apply repetitive changes, connect real content, and turn approved designs into code. Use a visual canvas to compare alternatives. Then let a person remove generic patterns, protect trust, resolve stakeholder constraints, and verify the live result.
That is the durable lesson in Y Combinator's conversation with Paper founder Stephen Haney. Faster software production does not lower the need for design. It raises the cost of having no opinion. When every team can generate a polished-looking page, differentiation comes from what the interface chooses to emphasize, remove, prove, and make unmistakably its own.
Watch How to Design in the Agent Era
Video and editorial credit: Y Combinator. The episode features Paper founder Stephen Haney with YC General Partner Aaron Epstein. The live reviews, product demonstrations, opinions, and company anecdotes belong to the speakers. JQ AI SYSTEMS adds the implementation framework, verification checks, and evidence labels below.
Paper's current official site confirms the product architecture demonstrated in the episode: a canvas built on web standards, a desktop app with MCP connectivity, design-to-code and code-to-design workflows, and agent access to tokens, styles, components, and real data. Features are still evolving; use the current roadmap rather than assuming every previewed capability is generally available.
What Agents Actually Change About Design
Agents compress production. They can generate twenty directions, translate a page, resize a campaign, apply tokens, create responsive variants, pull data, and write implementation code. That moves the bottleneck upstream. The difficult question is no longer only "Can we build this?" It is "Which version deserves to exist, for whom, and what evidence makes it trustworthy?"
| Design responsibility | Agent contribution | Human responsibility |
|---|---|---|
| Problem framing | Summarize research, organize constraints, and surface contradictions. | Choose the audience, business objective, risk tolerance, and decision criteria. |
| Exploration | Generate bounded variations across layout, type, color, content, or interaction. | Judge which directions are relevant rather than merely attractive. |
| Production | Resize, translate, populate real content, create states, and implement approved patterns. | Protect coherence, accessibility, brand meaning, and edge-case priorities. |
| Review | Run structured audits and show before-and-after alternatives. | Resolve tradeoffs, challenge assumptions, and approve the final direction. |
| Shipping | Generate code, tests, screenshots, and handoff artifacts. | Verify the real product and own the consequence of release. |
Haney's strongest point is organizational: the pixels are an output of design, not its full definition. Product design includes competitive analysis, requirements, stakeholder alignment, value-proposition decisions, and choosing what not to build. Models can help with each, but speed does not grant them authority.
Why Paper Uses HTML, CSS, and MCP
Paper's technical bet is that the visual canvas and the shipped product should speak the same language. Its official product page says the canvas is built on HTML and CSS. The desktop application exposes an MCP connection so supported agents can read and write the canvas, sync design tokens and components, fetch content, and move between design and code.
In the demonstration, the agent sends HTML rather than translating through a proprietary drawing format. Designers can copy work as React or Tailwind, and Paper's current download page lists connections for Claude Code, Codex, Cursor, Copilot, and OpenCode. Paper Snapshot can bring a live web section back into the canvas as editable layers. This creates a bidirectional loop instead of a one-way handoff.
| Layer | Purpose | Control to preserve |
|---|---|---|
| Canvas | Keep alternatives, references, annotations, and direct manipulation visible. | The designer can select, move, rewrite, and delete without re-prompting. |
| Web standards | Represent layout in a language agents and browsers already understand. | Inspect the generated DOM, CSS, responsive behavior, and semantics. |
| MCP connection | Let agents exchange structured context and actions with Paper. | Limit tools, repositories, data sources, and write permissions to the task. |
| Codebase | Keep production components, tokens, and behavior close to the design source. | Use version control, review diffs, run tests, and prevent secrets entering design context. |
| Live product | Reveal actual content, device behavior, performance, and user constraints. | The shipped interface, not the canvas, is the final evidence. |
Paper says this architecture improves speed, accuracy, and token use. Treat those as vendor claims until reproduced in your own files. The more important architectural benefit is inspectability: a design element is closer to the material of the web, and a person can still manipulate it visually.
Paper also publishes Paper Shaders, an open-source, zero-dependency React shader collection with installable effects and image filters. The library makes sophisticated motion and texture easier to reach. Accessibility, performance, brand fit, and restraint remain the implementer's responsibility.
The Five-Stage Human-Agent Design Loop
1. Brief the decision, not the picture
Start with the audience, task, proof, emotional register, trust requirement, content priority, and constraints. "Make a modern landing page" invites the average of the training data. "Help a finance lead verify cross-border payment coverage before creating an account" gives the interface a job.
2. Expand one variable at a time
Ask for alternatives, but control the axis. Generate five information hierarchies with the same visual system, then five type directions using the chosen hierarchy. If content, layout, typography, color, imagery, and motion all change at once, comparison becomes theater.
3. Compare spatially
A chat log hides discarded possibilities. A canvas keeps several futures visible. Place alternatives side by side with the same real content and viewport. Annotate what each version makes clear, what it hides, and the user decision it supports. Pick with declared criteria, not with the last output's novelty.
4. Subtract before polishing
Haney repeatedly improves the reviewed pages by reducing weight, sizes, cards, badges, text, and decorative widgets. Deletion is a design operation. If an element does not explain the product, create trust, establish hierarchy, support an action, or express a distinctive brand idea, remove it and see whether anything is lost.
5. Verify in the real medium
Push the approved direction into code, use production content, and inspect real breakpoints and states. Verify keyboard navigation, focus, semantics, contrast, text resizing, slow loading, empty data, errors, localization, analytics, and performance. A canvas can approve intent; only the running product can prove behavior.
The AI Design Smell Checklist
The episode identifies recurring visual patterns in generated sites. These are smells, not bans. A pill, gradient, or card can be exactly right. The problem is using the pattern because the model offered it, not because the interface needs it.
| Smell | Why it weakens the page | Review action |
|---|---|---|
| Everything is bold | Hierarchy collapses when every line asks for maximum attention. | Use the lightest weight that preserves hierarchy; reserve bold for real emphasis. |
| Five to eight type sizes | The page feels assembled from widgets rather than designed as a system. | Try three primary sizes per section or view before adding exceptions. |
| Cards everywhere | Every idea becomes an isolated box, adding borders and gaps without clarifying relationships. | Remove containers; rebuild hierarchy with alignment, spacing, rules, and typography. |
| Pills, badges, and tiny icons | Decorative labels imitate product UI and consume attention without evidence. | Keep only labels that change comprehension, status, or action. |
| All-caps micro-kickers | Wide letter spacing and tiny uppercase labels have become a generic AI-era signature. | Use plain language or remove the pre-heading if the main heading already works. |
| Purple glows and gradients | The style can signal "AI startup" before it communicates a specific brand. | Choose color from audience, category, history, and differentiation; not model default. |
| Decorative metrics and widgets | Numbers, mini charts, and corner ornaments can look authoritative while saying nothing. | Require a real source, meaning, and user decision for every metric. |
| Automatic light and dark mode | A generated feature can consume design and QA time without helping the launch goal. | Ship the mode the audience needs; add the second only with a reason and full state review. |
| Too much copy | Agents explain every thought, pushing proof and action below the fold. | Keep one promise, one proof path, and one primary action in the first viewport. |
| Effects without a role | Motion, shaders, and texture become decoration rather than communication. | Connect the effect to state, hierarchy, brand behavior, or a meaningful interaction. |
The quickest audit is to ask of every component: what changes for the user if this disappears? If the honest answer is "the page looks less generated," deletion is probably an improvement.
What the Three Live Reviews Teach
Legion Health: clarity is not the same as finish
The reviewers can understand the psychiatric-care offer quickly, which is a real success. Their criticism targets the generic promotional pill, small spacing gaps, and weak brand finish. The lesson is to preserve the clear value proposition while making the trust layer deliberate. In health, reassurance, eligibility, privacy, clinician credibility, and the next step matter more than ornamental novelty.
Sytex: the visual world must match the operating world
Sytex is about field infrastructure operations, yet the page initially reads like a generalized software dashboard with bold type, purple glow, and abstract UI. The most useful feedback is not "remove purple." It is "make the user outcome and field context obvious." Real equipment, crews, process states, and before-and-after operational proof can connect the software to the environment where it earns value.
Moreta: energy and trust must coexist
Moreta's global payment page has energetic flags and an international feel, but payment products carry a high trust burden. Haney recommends bringing the useful "how it works" content higher and building a more professional foundation without erasing the brand's energy. The right move is not sterile minimalism. It is structured excitement: clear coverage, security, fees, steps, and proof, with expressive elements supporting rather than replacing them.
Can AI Learn Taste?
Haney expects models to improve at tactics: typography weight, fewer arbitrary elements, better spacing, and more thoughtful first drafts. He is more skeptical that they can replace the organizational role of design. Epstein adds the harder question: can experts verbalize the implicit criteria behind their reactions well enough to teach a model?
The useful answer is to decompose taste instead of mystifying it. Some parts are teachable rules. Some are pattern recognition from a body of work. Some depend on product strategy, market position, cultural timing, risk, stakeholder history, and a particular team's values. Agents can score declared criteria; they cannot choose the criteria without inheriting someone else's priorities.
Taste also moves. Once a successful style saturates training data and generated output, using it well is no longer enough to differentiate. The episode's Linear-style purple gradient example captures this dynamic: a good design language becomes generic through imitation. Humans remain responsible for noticing when the baseline has moved.
How Paper Uses Agents Without Lowering the Bar
Paper's internal practice is a useful counterweight to the product hype. Haney says the roughly twelve-person team uses coding agents extensively but still has humans read every line of core product code, often more than once. A high-performance design tool needs precision, speed, and reliability that the team does not delegate blindly.
The company uses more agent leverage around the core: its brand designer built and shipped the marketing site from Paper designs with agent help, and the team uses agents for videos, campaign assets, coding, and pull-request review. That is a risk-based boundary. Repetitive and reversible surfaces get more autonomy; the editor's performance-critical core gets deeper human review.
The broader operating lesson is not "move slowly." It is to keep a small, capable team and use agents where they multiply the team without erasing understanding. Shipping more features is not the only measure of product progress. Reliability, care, and whether users want the product to improve are strategic assets.
Claim Ledger
| Claim or impression | Grounded reading | Status |
|---|---|---|
| Paper is one of the fastest-growing design tools since Figma. | A strong host description. Paper's official site documents growth and a $34M Series A, but the comparative ranking is not independently established here. | Promotional claim |
| HTML/CSS makes agent flows faster, cheaper, and more accurate. | The shared language can reduce translation work. Paper makes benchmark claims, but teams should reproduce them on their own designs and agents. | Vendor claim with plausible mechanism |
| Paper Shaders is open source. | The official shader site provides installable React packages and source-linked usage for the collection. | Documented |
| Great companies have exceptional design. | A persuasive design philosophy, not a universal causal finding. Distribution, timing, product value, operations, and market structure also matter. | Opinion |
| AI will not replace human design decisions. | A forecast. Current evidence supports keeping humans in problem framing, stakeholder judgment, trust, and approval, but future capability is uncertain. | Prediction |
| Paper's brand designer shipped the company site in one week. | An internal anecdote described by the founder; useful as a workflow example, not a controlled productivity benchmark. | Creator report |
| Paper reviews every line of core code with humans. | The founder's description of current team practice in the episode. | Creator report |
| Agent-generated pages share recognizable visual tells. | The live reviews supply examples, but the patterns are heuristics. They should not be used to accuse a team of AI use or to ban styles categorically. | Review heuristic |
Three Copy-Ready Design Prompts
1. Expand without changing everything
Create six alternatives for this page using the exact same content,
brand tokens, components, and viewport.
Change only the information hierarchy and layout. Keep typography,
color, imagery, and interaction behavior fixed.
For each alternative, label:
- primary user task
- first thing noticed
- proof surfaced above the fold
- tradeoff introduced
Place all six side by side. Do not choose a winner.2. Run an anti-slop subtraction pass
Audit this design for elements that exist without a communication job.
Check: font weights, number of type sizes, cards, pills, badges, icons,
all-caps kickers, gradients, glows, decorative metrics, duplicate copy,
automatic dark mode, and effects without meaning.
For every flagged element, state its current job. If no job can be
identified, create a version with it removed. Preserve the value
proposition, required proof, primary action, and distinctive brand idea.
Return before and after side by side. Do not make production changes.3. Turn an approved design into a verification contract
Implement the approved frame using the existing production components
and tokens. Do not invent copy, data, icons, or interactions.
Verify at 390, 768, 1024, and 1440 px. Check text overflow, keyboard
navigation, focus visibility, semantics, contrast, loading, empty,
error, success, and reduced-motion states.
Return:
1. changed files and diff,
2. screenshots at every viewport,
3. automated checks and results,
4. visual differences from the approved frame,
5. unresolved decisions.
Do not deploy. Stop if the design conflicts with an existing component,
accessibility requirement, or product behavior.A 45-Minute Agent-Era Design Workshop
- Minutes 0-5: define the decision. Name the user, task, trust burden, evidence, primary action, and one thing the page must feel unlike.
- Minutes 5-12: collect reality. Add production copy, data, screenshots, current components, constraints, and three relevant references.
- Minutes 12-20: expand one axis. Generate six information hierarchies with everything else fixed.
- Minutes 20-27: compare visibly. Score clarity, proof, differentiation, trust, and implementation risk. Keep the discarded versions visible.
- Minutes 27-33: subtract. Remove unsupported cards, labels, icons, weights, sizes, effects, and copy.
- Minutes 33-38: restore the human idea. Add one intentional brand behavior, image system, interaction, or narrative device that the default generation missed.
- Minutes 38-45: write the contract. Define responsive states, accessibility checks, content ownership, implementation evidence, and the person who can approve shipping.
Video Chapters
| Time | Chapter | Design lens |
|---|---|---|
| 00:00 | Great companies have great design | Why cheap execution raises the value of differentiation. |
| 01:04 | What is Paper and why build it? | Founder-market fit and a new design-tool architecture. |
| 03:17 | What makes Paper agent-native | HTML/CSS as the shared language for canvas and agent. |
| 05:11 | Shaders, image generation, and brand design | Powerful effects still need brand purpose and restraint. |
| 11:32 | Design-to-code and the new agent stack | MCP, React, Tailwind, Snapshot, and bidirectional work. |
| 16:48 | Design review: Legion Health | Keep value clarity; improve finish and trust. |
| 24:11 | How to avoid AI design slop | Reduce type weight, type sizes, and default patterns. |
| 28:26 | Design review: Sytex | Connect abstract software to field operations and outcomes. |
| 32:42 | Biggest tells of AI-generated design | Cards, pills, icons, gradients, kickers, and empty widgets. |
| 37:39 | Design review: Moreta | Balance expressive global energy with financial trust. |
| 41:11 | Can AI learn taste? | Tactical rules versus contextual judgment. |
| 43:56 | How Paper uses agents internally | Risk-based autonomy and deep review for the core product. |
| 46:52 | Building a community around Paper | Values, product quality, and market alignment. |
| 49:15 | Lessons from Stephen's first startup | Bottlenecks, user conversations, and simpler strategy. |
| 53:30 | What is next for design and Paper | Faster tooling, persistent human design work, and prototype feedback. |
Bottom Line
Agents are excellent production multipliers. They make variation, translation, resizing, content population, responsive implementation, and code generation dramatically easier. Paper's interesting contribution is giving those agents a visual, HTML/CSS-backed canvas where a person can still compare, manipulate, annotate, and delete.
The resulting workflow is neither traditional mockup handoff nor autonomous prompt-and-ship. It is a connected loop. Humans define the problem and hold several possibilities in view. Agents perform the repetitive transformations. Humans narrow the field, protect meaning and trust, and approve the result. The codebase and live product provide the final evidence.
The biggest risk is not that every generated interface looks terrible. It is that every interface looks competent in the same way. A useful agent-era designer therefore needs two habits: explore more than one future, and delete more than the model expects. Speed creates the room. Care decides what fills it.
Sources and Useful Links
- Y Combinator: How To Design In The Agent Era - primary source for the Paper demonstration, three design reviews, anti-slop heuristics, team practices, founder lessons, and predictions.
- Y Combinator on YouTube - publisher credit.
- Paper official site - current product positioning, HTML/CSS canvas, agent connections, design-to-code loop, and product links.
- Paper downloads and MCP quick start - current desktop availability and listed agent connections.
- Paper roadmap - current status of MCP, Snapshot, tokens, components, live data, assistant, and other features.
- Paper: A real space to design in the age of agents - official argument for spatial comparison, web standards, human judgment, and bidirectional code-design work.
- Paper: Series A announcement - official company and funding context plus the vendor's benchmark claim.
- Paper Shaders - official open-source shader library and React installation reference.
- JQ AI SYSTEMS: Paper and Fable 5 - a companion product walkthrough and MCP setup guide.
- JQ AI SYSTEMS: Use Design Systems Before You Vibe Code - the token, component, and inspiration workflow behind consistent AI interfaces.