How To Design In The Agent Era

Product reviewed: Paper (AI-native / agent-native design tool)

What Paper is

• An “agent-native design tool” built for designers working with AI agents.
• Uses HTML + CSS as the rendering engine, so agents can directly read the design as code instead of dealing with a custom rendering system.
• Positioning: human-first design tool that’s “really good with agents,” not a fully automated “agent-only” generator.

---

Key features mentioned

1. Agent-native rendering via HTML/CSS

   • Paper renders designs using HTML/CSS, which agents can understand well.
   • Claimed benefits vs custom engines:
     • lower token spend
     • faster execution
     • higher accuracy

2. Visual interface for agents (direct manipulation)

   • Goes beyond prompting: supports drag/draw / direct manipulation.
   • Used by roles beyond designers (e.g., sales, engineers) because prompting alone isn’t always ideal.

3. Design-to-dev output

   • Copy visuals as code:
     • Right-click → copy as React (example shown with shaders/components)
     • Also copy as Tailwind or React from what you’re viewing.
   • Anything in Paper is described as code-backed (the canvas is effectively a website).

4. MTP server + desktop “agent stack” workflow

   • The desktop app includes an MTP server so agents can tool call directly with Paper.
   • Example: agents generate HTML that Paper renders without translation.
   • Emphasis: reduces format switching and avoids “weird hallucinations.”

5. Paper Snapshot

   • Pulls live site content into Paper as editable layers (described as replacing screenshots).
   • Enables fast iteration on real pages/design sections.

6. Paper Shaders (open-source library)

   • Uses browser rendering (WebGL animations) for custom brand/animated shader effects.
   • Used by brand designers for:
     • animated loading states for AI
     • poster-like retro vibes
     • effects like blending modes, halftone dots, and “neuro noise”
   • Fully open source and customizable.

7. Image generation library

   • Uses multiple models at once (a “variety pack” that rotates models is mentioned).
   • Supports workflows like feeding an existing image to change color/style.

8. Vectorization / texture + color workflows

   • Example mentioned: extract colors from generated art.

9. Design workflow with agent loops + comments

   • Leave comments/feedback on frames, then tell the agent to address the comments.
   • Many users run agents overnight to generate hundreds of variations, then curate.
   • It’s iterative—not “done once it outputs something.”

10. Guidance/guardrails for design quality

    • Paper is described as embedding rules so models avoid common issues.
    • Shared emphasis: design improvements often come from basic typography and contrast guardrails.

---

Pros (as presented)

• Faster agent workflows than prompting-only approaches.
• More accurate / efficient agent rendering due to HTML/CSS compatibility.
• Better design-to-code handoff (code is treated as the source of truth).
• Direct manipulation + comments give humans practical control without re-prompting everything.
• Inspiration at scale: generating many variations helps users escape creative ruts.
• High shareability / polished visuals via shaders and fast brand asset creation.
• Improves trust vs “vibe-coded” output through tooling and typography constraints.
• Integrates into broader agent stacks:
  • examples mentioned with Conductor and Cursor (and code-repo/PR tooling conceptually)

---

Cons / limitations (as mentioned)

• Models still make design mistakes (e.g., alignment/text overflow) and may need correction or follow-up agent tasks.
• “AI tells” still happen if you don’t edit. Common issues include:
  • overuse of bold fonts
  • too many font sizes
  • poor contrast or excessive decorative widgets/icons
  • purple gradient / linear-style overfitting
  • clutter such as too many cards, badges, pills, tiny all-caps headers
• Paper lacks some requested capabilities (explicitly: no components yet), though the argument is that codebase-as-source-of-truth reduces reliance on design components.
• Performance/quality tradeoffs from model selection: some “best taste” models are slow for demos.
• Desktop vs agent precision: some areas still describe Paper’s core product as human-based for precision.

---

Comparisons made (directly or implied)

• Against tools with custom rendering engines
  • Paper claims HTML/CSS rendering improves token usage, speed, and agent accuracy.
• Against “Cloud Design” / generic AI design outputs
  • Guest strongly advises not to accept outputs blindly because it can harm differentiation.
• Against Figma/Sketch positioning
  • Compared to Figma/Sketch “feel,” but built on HTML/CSS for agent compatibility and better handoff.
• Cursor + Conductor pairing
  • Paper is framed as part of an “agent stack,” especially alongside Cursor/Conductor workflows.
• Design component tools vs code as source of truth
  • Discussion contrasts keeping two copies (design system + code system) vs moving toward codebase-as-source-of-truth in agentic workflows.

---

User experience notes (how it feels to use)

• The UI is described as familiar to canvas tools.
• Browser rendering can handle modern visuals like shaders.
• Paper Snapshot supports:
  • importing live sections
  • editing them as real layers
  • generating multiple improved variations with agents
• Workflow style:
  • leave a selection or comment, then agent iterates
  • users curate results and quickly delete “AI clutter” (deletion causes layout to snap/relayout)

---

Ratings / numerical scores

• No explicit overall ratings (e.g., stars) were provided.
• Model/version numbers mentioned:
  • “GPT 5.5” (used in demo examples)
  • “Cursor’s Composer 2.5”
  • “Fable” (strong taste but slow)

---

Unique points mentioned about Paper (complete list)

• Agents can speed up work and do tasks like translation/resizing.
• Philosophy: humans remain essential; agents assist speed.
• Uses HTML/CSS for agent-native rendering.
• Custom design tool engines can lead to higher tokens, slower times, lower accuracy.
• Started from love of design and “founder-market fit.”
• Vision: enable humans to work fast with agents.
• Acts as a visual interface for agents (not just prompting).
• Shaders are open source and easy to customize.
• Shader examples include halftone dots, neuro noise, blending modes, and retro brand vibes.
• “Paper Mono” font launching soon; emphasis on legibility of numbers and brand-use.
• End-to-end copying:
  • copy as React/Tailwind
  • treat canvas as code
• Agents can write HTML that Paper renders directly (via the MTP server workflow).
• Users connect Paper to code-review/build systems (examples: Cursor/Conductor/GitHub conceptually).
• Common pain addressed: design-to-dev handoff often gets out of sync; Paper aims for code as source of truth.
• Demo feature: generating a frame “hello to YC,” including tool calls like font listing.
• Chrome extension: copy from live site into Paper canvas (start from what users see).
• Paper Snapshot: replace screenshots with live editable layers.
• Variation workflow: ask for “three new variations” focusing on alignment/contrast.
• Feedback workflow: leave comments then “address my comments.”
• Overnight loop usage: generate hundreds of variations; users curate.
• Iteration reality: agent might output something partially wrong (alignment/text overflow), then fix via additional requests.
• Model guidance:
  • Fable for “taste,” slow
  • Composer 2.5 for speed/precision
  • 5.5 as a good balance
• Typography rules shared:
  • avoid overly bold type
  • reduce to ~three font sizes
  • check contrast/readability
• Common “AI tells” discussed:
  • purple gradients/glows
  • extra widgets/icons
  • overuse of cards (too many)
  • tiny all-caps headers
  • badge clutter with icons
  • insecure/generic alignment/contrast
  • too many decorative shapes/badges/pills
• Deleting clutter is presented as easy and fast (snap/relayout).
• Example site reviews emphasize:
  • trustworthiness in finances matters
  • moving QR code placement to hero could improve usability
  • less text, fewer styles = more professional foundation
• Paper internal usage:
  • careful code review; agents used more for marketing/creative tasks
  • brand designer “Agu” built site animations/design in Paper in about a week, then prompted to turn into Next.js
• Growth strategy:
  • values-aligned marketing (design/taste/typography discussions)
  • community mindshare, merch/shows, etc.
  • expectation: “quality software takes time”
• Roadmap direction:
  • “table stakes” features: components, comments
  • bottleneck reducers
  • prototype organizing via iframe prototypes + comment cycles

---

Verdict / recommendation (concise)

Paper is recommended for design teams and builders who want a human-controlled, agent-friendly design workflow—especially for rapid iteration, design-to-code output, and high-quality brand visuals (shaders/image tools). However, it still requires human taste and cleanup to avoid common “AI tells” (clutter, over-bolding, excessive font styles), and some expected features like components are still not fully present.

---

Speakers / viewpoints (grouped)

• Steven Haney (founder, Paper)
  • Differentiation via HTML/CSS rendering for agents, handoff philosophy, shaders/image generation, code export, agent-loop workflows, and roadmap focus.
• YC host(s) / design reviewers (live critique & workflow discussion)
  • Emphasized brand trust, “vibe-coded” pitfalls, typography/contrast fundamentals, and practical UX for editing/curation.
• Community/examples mentioned (YC internal team members referenced)
  • Evidence of usage: custom animated shaders, event acceptance animations, and practical integrations (e.g., YC branding).

---