Key Moments
How To Design In The Agent Era
Y CombinatorWant to know something specific about what's covered?
We've already dissected every moment. Ask and we will deliver (with timestamps).
Key Moments
AI design tools can speed up workflows and save effort, but relying solely on them risks creating generic designs that fail to stand out. Exceptional design remains a key differentiator for great companies.
Key Insights
Paper utilizes HTML and CSS as its rendering engine, making it inherently easier for AI agents to understand and interact with compared to tools with custom rendering engines, leading to higher accuracy and lower token spend.
The Paper Shader library, an open-source collection of WebGL animations, allows designers to easily create modern, cutting-edge animated effects that would have been difficult to achieve previously, even allowing for detailed customization.
Paper aims to bridge the gap in the designer-developer handoff by allowing code to be copied directly as React or Tailwind CSS, and now, with its desktop app and MCP server, it integrates with coding agents like Cursor and Conductor, making the codebase the single source of truth.
Common AI design tells include overuse of bold font weights, too many font sizes (aim for three), generic gradients, overuse of cards, and excessive use of small icons or unnecessary numbers.
Paper's approach to countering AI tells involves distilling expert designer knowledge into instructions for models and providing direct manipulation tools, allowing users to easily pull font weights back, reduce font sizes, and delete unnecessary elements.
Paper aims to be an agent-native design tool that prioritizes the human element, enabling designers to work rapidly with agents and maintain control over the creative process, rather than being replaced by AI.
Agent-native design for enhanced workflows
The conversation introduces Paper, an AI-native design tool built by a team of 12 designers and engineers, leveraging HTML and CSS as its core rendering engine. This fundamental choice makes Paper uniquely accessible to AI agents, which understand HTML and CSS well. Unlike traditional design tools with custom rendering engines, Paper's architecture leads to more efficient AI interactions, characterized by lower token expenditure, faster processing times, and higher accuracy. The tool aims to augment human designers, enabling them to work at the speed of agents while retaining the crucial human element that differentiates exceptional design. Stephen Haney, Paper's founder, emphasizes that while agents can automate tasks like translation or resizing, design remains a critical differentiator for successful companies, highlighting the need for tools that empower humans to stand out.
The power of Paper's shader library
A key feature demonstrated is Paper's open-source shader library, Paper Shaders, which utilizes WebGL for animations. This library allows designers to easily create modern, dynamic visual effects, a significant advancement from a year prior when such effects were complex to implement. These shaders are highly customizable, enabling brand designers to achieve unique aesthetics. For instance, they can blend effects, incorporate elements like 'neuron noise,' and even model randomness found in physical materials, like studying literal paper. This library has proven popular with brands and designers, enabling fast creation of visually engaging assets, from stylized reports to unique animated elements for events like YC's Startup School, where custom shaders with personalized branding were used to create memorable digital tickets.
Bridging the designer-developer gap with code-native output
Paper's foundation in HTML and CSS was initially conceived to improve designer-developer handoff. By using a constraint-free system that feels familiar to designers but is built on web standards, the output is inherently compatible with agents. This means that when an agent interacts with a Paper file, it's essentially reading CSS, understanding it directly. Paper functions as a visual interface for agents, allowing for direct manipulation that is often faster than traditional prompting. This capability extends to extracting code directly, with options to copy elements as React components or Tailwind CSS. The recent surge in cloud code and desktop app integration has further solidified Paper's role in the new agent stack, enabling seamless interaction with tools like Cursor and Conductor, and positioning the codebase itself as the definitive source of truth.
Common AI design tells and how to fix them
The discussion highlights common visual cues that indicate a design was generated solely by AI without human refinement. These 'AI tells' include overuse of bold font weights, an excessive number of font sizes (ideally stick to three), generic gradients, over-reliance on cards, and gratuitous use of small icons or numbers. These elements often arise because models tend to favor bolding and complexity. Paper provides mechanisms to counteract these tendencies. Users can directly edit elements, reduce font weights to lighter styles, limit font sizes, and simply delete extraneous elements. The process of 'designing is deleting' is emphasized as crucial for achieving a more intentional and polished look. By applying simple typographic rules and contrast checks, designers can elevate AI-generated concepts into something that feels more human-crafted and trustworthy.
Leveraging agents for rapid iteration and refinement
Paper empowers designers to rapidly iterate on designs using AI agents. Features like 'Paper Snapshot' allow users to capture live website sections and import them as editable layers within Paper. From there, agents can be prompted to generate multiple variations of a selected area, focusing on specific aspects like craft, alignment, or contrast. This iterative process allows designers to explore a wide range of possibilities, identify elements they like from different variations, and combine them to overcome creative blocks. The tool supports leaving comments on design elements, which agents can then address, facilitating a workflow where designers can delegate tasks and receive numerous iterations to curate. This accelerates the process of refining designs, particularly for elements that might otherwise require significant manual effort.
The evolving role of humans in AI-assisted design
Despite the advancements in AI design tools, the human element remains indispensable. While agents can handle tactical tasks and generate variations with increasing sophistication, they currently lack the nuanced understanding of taste, strategic decision-making, and organizational context that human designers possess. The ability to make subjective judgments, understand stakeholder needs, and navigate complex problem spaces are inherently human skills. Paper emphasizes that its tool is designed to augment, not replace, human designers. The human role is crucial for injecting unique vision, ensuring brand authenticity, and pushing creative boundaries beyond what current models are trained to do. This is particularly relevant when considering the strategic goals of a design, such as conveying excitement or trustworthiness, which may require human judgment to balance with AI-generated aesthetics.
Paper's growth strategy: values alignment and community
Paper's success is partly attributed to its strategy of aligning with user values and fostering a strong community. Even before a full product was available, the company garnered significant attention by articulating its passion for design through content and discussions. This authentic approach resonates with designers, who are forgiving of product gaps if they perceive genuine commitment to the craft. Paper's focus on building a high-quality, agent-native tool for creative professionals has carved out a significant niche, distinguishing it from larger, more established competitors. The company's commitment to precision, thoughtful design, and user feedback has cultivated a loyal user base that sees Paper as the modern, cool way to work.
Future directions: components, feedback, and continued human-centricity
Looking ahead, Paper is focused on building out essential features like components and comments to address user feedback and reduce bottlenecks. A significant upcoming feature is the ability to organize and leave feedback on prototypes directly within the Paper canvas, aiming to streamline collaboration and organization for companies building various interactive playgrounds. While acknowledging the growing capabilities of AI, Paper remains committed to its core philosophy: agents accelerate human designers, but the human element is essential for creating standout work. The company believes that while AI will excel at tactical execution, the strategic thinking, taste, and ultimate decision-making in design will remain a human domain, ensuring that design continues to be a crucial function in organizations.
Mentioned in This Episode
●Software & Apps
●Companies
●Concepts
●People Referenced
Designing in the Agent Era: Dos and Don'ts
Practical takeaways from this episode
Do This
Avoid This
Common Questions
Paper is an AI-native design tool that uses HTML and CSS as its rendering engine, making it highly compatible with AI agents. This differs from traditional tools with custom engines, allowing for faster iteration, better accuracy, and seamless designer-developer handoff.
Topics
Mentioned in this video
An AI-native design tool built using HTML and CSS as its rendering engine, designed to help humans work faster with agents. It offers features like shaders, image generation, vectorization, and aims to improve designer-developer handoff.
HyperText Markup Language, used as a rendering engine in Paper, making it easier for AI agents to understand and work with design files.
Cascading Style Sheets, used alongside HTML as Paper's rendering engine, which aids AI agents in understanding design files.
A design tool mentioned as a reference point for familiar interfaces, similar to Paper's design.
A JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins. It's used in Paper for creating shader animations.
An open-source library of WebGL animations and effects developed by Paper, designed to be easily customizable for brand designers.
A utility-first CSS framework. Paper allows users to copy designs as Tailwind code, facilitating easier integration with development workflows.
A tool that integrates with Paper, allowing users to push, merge, and manage code directly from the app. It's highlighted as a key pairing with Paper for developers.
A code editor that integrates with AI agents. Cursor is used with Paper for tasks like applying CSS style guides to the design canvas and is mentioned as a preferred tool for precision and speed.
An AI model praised for its visual taste and thoughtfulness, though noted as being slow. It's recommended for when pure aesthetic quality is paramount.
Likely referring to Cursor's AI composer model, used for precision tasks like processing many artboards or applying specific styles.
A feature within Paper that allows users to grab content from live websites and paste it into the Paper canvas as editable layers, replacing screenshots.
A version of GPT mentioned for use with Conductor to generate design variations, focusing on craft, alignment, and contrast. It's noted as a faster model suitable for demos.
A tool used by Paper for PR (Pull Request) reviews, specifically for catching bugs. While sometimes pedantic, it's considered helpful for code quality.
An author identity company that acquired Stephen Haney's first company, Modules. Paper uses Work OS for its own operations.
A popular React component library that originated as a side project from Stephen Haney's first company, Modules. It became a default for many React projects.
A popular design tool. While acknowledged as a significant player, Paper aims to focus more on individual designers and leverage AI-native capabilities.
A team that creates 'Quarter posters', often for earnings reports. They have transitioned to using Paper for their work to achieve a retro vibe.
Stephen Haney's first company, which focused on designer-developer handoff and built Radix UI.
A global wallet that enables local QR code payments in Asia and Latin America. Its website was reviewed, noting energy but also sloppiness, with suggestions for increased trustworthiness.
A cloud platform for frontend developers. Prototypes built by users often end up on Vercel, and Paper aims to provide a way to organize these prototypes and manage feedback.
A company offering online medication management for mental health conditions. Their website was reviewed and critiqued for its design elements, with suggestions for improvement.
A company focused on accelerating field infrastructure operations. Their website was reviewed for design improvements, highlighting issues with bold headlines, color choices, and clarity.
More from Y Combinator
View all 621 summaries
58 minMax Hodak: What Really Kills Deep Tech Startups?
43 minGarry Tan: "Personal AGI Is How You Stay Under Your Own Power"
37 minBuilding the First Data Centers in Space
50 minWaymo Co-CEO Dmitri Dolgov: The Demo Is Only 1% Of The Work
Ask anything from this episode.
Save it, chat with it, and connect it to Claude or ChatGPT. Get cited answers from the actual content — and build your own knowledge base of every podcast and video you care about.
Get Started Free