How To Design In The Agent Era
In a Nutshell
Paper is an AI-native design tool that uses HTML/CSS as its rendering engine to enable seamless agent integration, allowing designers to work at agent speed while maintaining human oversight for taste and strategy. The key advantage is treating codebases as the single source of truth—agents can directly manipulate designs without translation overhead, enabling one person to handle work previously requiring entire teams. The critical takeaway is that agents excel at tactical execution and iteration but cannot replace human judgment in strategic design decisions like value proposition clarity, brand positioning, and what differentiates companies.
These notes were generated by AI and may contain inaccuracies.
Agents can speed up workflows and handle tasks like translation or resizing, but the human element of design remains essential. The goal is creating tools that enable humans to work faster with agents rather than replacing human creativity. Using whatever cloud design generates does not help companies stand out, as exceptional design differentiates great companies from the crowd. Every successful company from the last 10-20 years has had exceptional design, making investment in design essential for building a great company.
Steven Haney founded Paper, an AI-native design tool experiencing rapid adoption. Y Combinator uses Paper extensively for all internal design work. Paper is a design tool that uses HTML and CSS as the actual rendering engine, making it agent-native since agents understand HTML and CSS well. Traditional design tools with custom rendering engines create higher token spend, slower performance, and lower accuracy for agents.
Paper is a team of 12 designers and engineers who started from a love of design and are building the best design tool for the agent era. Many founders building AI-native companies specifically seek AI-native tools from the ground floor.
Paper originated from a love of design as a solo founder side project. Haney believes founders should pursue projects they would do anyway, emphasizing founder-market fit. Building tools for creative professionals is something Haney would wake up excited about daily, representing strong founder-market fit.
Existing tools like Figma have contributed significantly to the design industry and serve enterprise companies well, but there's opportunity for a new tool focused on designers that addresses AI and agent changes. The approach builds on HTML and CSS to create a next-generation, agent-native tool.
Being agent-native centers on fundamental technology choices. Using HTML and CSS as the rendering engine was initially intended to improve designer-developer handoff by creating constraint-free systems that feel like Figma or Sketch while being HTML underneath. This approach benefits agents because they understand HTML and CSS from their training data. When agents work with Paper files, they read CSS directly without translation issues.
Paper functions as both a design tool and a visual interface for agents. Sales professionals, engineers, and others use it because prompting isn't always optimal for agents - sometimes direct manipulation through drag and draw is faster.
As building software becomes easier, determining what to build and finding inspiration represents a major bottleneck. Paper addresses this by helping designers keep pace with rapid software creation. The observation is that software quantity has increased but quality hasn't necessarily improved - there haven't been standout software experiences in the last six months.
Paper enables designers to work at the speed of prompting and agents while maintaining traditional design capabilities at faster pace, helping people with taste contribute to better software quality.
Paper uses the browser rendering engine, enabling easy shader rendering through WebGL animations. Paper Shaders is a fully open-source library that brand designers use extensively for different visual effects. A single shader with different settings produces varied looks, making animated effects accessible that would have been difficult a year ago.
Designers need to create loading states for AI applications, and the shader library provides customizable animated effects. Users can tweak parameters, apply blending modes, and combine effects like neuron noise with halftone dots to create unique results. The library models randomness from physical paper effects to achieve high quality.
Quarter, known for their posters, now builds many designs in Paper to achieve retro vibes quickly. Y Combinator's Startup School uses custom animated shaders with YC branding featuring people's names on tickets that animate when people get accepted, creating thoughtful, intentional, highly designed experiences that recipients want to share.
Paper includes an image generation library supporting multiple models simultaneously. The variety pack feature rotates different models to explore illustration possibilities quickly. Users can provide inputs like copying shaders as images and feeding them back with prompts like "make this more colorful" to combine workflows for rapid graphic creation.
Vectorization and color extraction tools allow pulling colors from generated content to explore ideas rapidly and generate new textures. This brand and graphics focus complements product design capabilities, addressing needs that traditional tools handle less effectively.
Shaders represent marketing investment rather than product development - the effort spent building the library replaces advertising spend. Paper Mono is a new monospace font launching soon, designed as an all-rounder usable for marketing and code rather than terminal-focused fonts. The font emphasizes number legibility, addressing a common monospace font weakness. Someone was observed wearing a Paper Mono shirt at a YC dinner in New York City.
The product originated from solving design-to-dev handoff by making designs actual React components. Right-clicking any element allows copying as React, providing the literal code being viewed. This extends to copying frames as Tailwind or React since everything in Paper is code and essentially a website.
The December 2025 cloud code explosion prompted desktop app development since designers weren't expected to work in terminals. The desktop app includes an MCP server enabling agent integration. Conductor and Paper work together as a common pairing in the community, with Conductor handling code push and merge operations.
Agents can receive instructions like "Conductor in Paper please make a small test frame saying hello to YC" and the system provides tool calls for available fonts and page setup, then writes HTML directly. The Paper engine renders HTML without translation, saving tokens, increasing speed, and reducing hallucinations.
Cursor can take actual CSS files from the Paper codebase and render them onto the canvas as style guides. This enables codebase auditing, component architecture visualization, and diagram generation, integrating the design tool into the broader development stack rather than maintaining separation between design and code.
Traditional handoff problems include designs not being built as intended and code evolving without updating design files. Paper treats the codebase as the source of truth that both systems understand. Newer agentic companies avoid maintaining two copies of design systems, eliminating synchronization costs and accuracy problems.
A Chrome extension captures live sites and copies them into the Paper canvas, enabling iteration starting from actual user-facing content rather than screenshots.
Legion Health's psychiatry site shows generic AI-generated elements like pill imagery and spacing issues. While value proposition clarity works well, fit and finish problems affect brand perception of seriousness and trustworthiness. Missing YC company social proof represents a missed opportunity. Paper Snapshot captures live sections rather than screenshots, enabling real editing including alt-drag duplication.
Agents can generate multiple variations focusing on craft, alignment, and contrast choices. Simple prompting often suffices. The ability to reference specific canvas selections and generate variations helps escape creative ruts by providing multiple options to combine and iterate upon.
Designers can leave feedback directly on designs in Paper and then instruct an agent to address all comments at once. This approach enables overnight generation of hundreds of variations across design loops. The agent handles iterative fixes including alignment corrections and text overflow detection while working through multiple design iterations.
After agents generate multiple variations overnight, designers wake up to either addressed comments or numerous iterations ready for selection. This creates a new curation design process where designers combine promising elements from different variations rather than starting from scratch. The approach allows scaling beyond what a single designer could accomplish manually in the same timeframe.
Agents can take screenshots during iteration to identify issues like text running into elements and automatically correct alignment problems. They typically catch text overflow issues on cards and correct them without prompting. When agents don't catch errors automatically, designers can provide specific instructions like "correct the text overflow" to trigger fixes.
Different models offer distinct advantages based on use case. Fable delivers the best visual taste but operates too slowly for demos. Cursor's Composer 2.5 provides excellent speed and quality for precise work. Model 5.5 offers a good balance between performance and accuracy. For pure taste requirements, Fable works best while Composer excels at precision tasks across large numbers of artboards.
Cursor functions effectively as an agent harness because it avoids lazy behavior and frequently spins up sub-agents to complete tasks. This capability makes it particularly useful when managing extensive design systems or complex multi-step processes.
After receiving initial variations, designers can identify promising elements across different outputs and branch exploration accordingly. One effective approach involves asking five agents to generate five additional variations of each promising direction to find the optimal solution. This process provides inspiration and ideas while maintaining human oversight of the final direction.
Models frequently produce recognizable patterns that signal AI generation. Key tells include excessive use of bold font weights, multiple font sizes (five to eight different sizes), over-reliance on cards, gradient treatments, and purple color schemes. Models also tend to add unnecessary numbers, icons, and decorative elements that don't communicate meaningful information.
Specific typography adjustments dramatically improve AI-generated designs. Reduce font weights from bold to lighter weights like 500 or below, as models naturally gravitate toward heavy styling. Consolidate to three font sizes maximum rather than the five-to-eight sizes models typically generate. These simple changes create cleaner, more intentional appearances that feel more professionally designed.
Paper functions as a human design tool first that happens to integrate well with agents. This architecture allows designers to reach in and make direct edits rather than being locked into agent-generated outputs. Designers can delete unnecessary elements and watch the layout automatically adjust without leaving blank spaces or requiring complete regeneration.
Designs can be exported as React code for pasting into IDEs or agents can directly integrate selected designs into existing codebases. The agent understands existing coding styles and conventions, allowing seamless incorporation of new designs. If components already exist, agents update them rather than creating duplicates.
The combination of agents and integrated design tools enables one person to handle work previously requiring entire teams. Designers can build, ship, and iterate on designs without traditional handoff processes between design and development phases.
Teams using agent-based workflows need tools that communicate effectively with their chosen agents. This integration focus represents a fundamental shift in how design tools must operate to support modern development processes.
The Sciteex landing page demonstrates common AI generation patterns including excessive bold headlines, purple gradients, and multiple font sizes. The animation effectively demonstrates product functionality but the core value proposition lacks clarity above the fold. Construction imagery appears below the fold, making the industry focus unclear to initial viewers.
When addressing AI-generated designs, reducing font variations to three sizes and removing bold weights creates immediate improvement. Using agents to apply these systematic changes across entire sites proves more efficient than manual editing for large-scale projects.
Paper incorporates specific instructions to prevent common AI design mistakes like excessive gradients, unnecessary icons, and poor typography. These guardrails represent distilled knowledge from senior designers and significantly reduce the time required to achieve professional results.
Comparing original AI-generated designs with cleaned versions demonstrates how removing AI tells creates more trustworthy and intentional appearances. The refined version feels more professionally designed while maintaining the core content and messaging.
Using unrefined AI outputs makes companies appear average among competitors and reduces their ability to stand out. Exceptional design has characterized virtually every major successful company over the past 20 years, making intentional design investment essential for building great organizations.
Frequent AI-generated design elements include side color swoops on cards, excessive card usage, purple gradients, all-caps headers with letter spacing, badges with unnecessary icons, and light/dark mode toggles. These elements often appear because models include them by default rather than because they serve specific communication purposes.
Effective design often involves removing elements rather than adding them. Models tend to overbuild designs, making the editing process focus on deletion of unnecessary components. This approach allows designers to achieve thoughtful results without extensive manual recreation of layouts.
AI-generated dark modes frequently use pure black instead of appropriate dark colors or simply reverse light mode colors. These implementations represent another tell of AI generation and often fail to meet professional design standards.
Common AI design tells include excessive letter spacing in headers, unnecessary badges with icons, purple gradients, and overused decorative elements. These patterns emerged from early AI training on specific design trends and became encoded into model outputs.
Design standards continuously evolve, requiring ongoing attention to avoid appearing average. Companies with mediocre presentations struggle to attract talent and build exceptional organizations. Intentional design investment affects not only customer perception but also recruitment and team building capabilities.
The Moretta payment platform uses flags to indicate global coverage across Asia and Latin America. The design attempts to convey international energy but appears scattered and lacks the professional credibility needed for financial services. The QR code payment feature appears too low on the page, making it easy for users to miss.
The "How it Works" section demonstrates stronger professional presentation than the hero area. Moving key product features like QR code interaction into the main hero section would improve user engagement and clarify the value proposition above the fold.
When refining AI-generated designs, maintaining the original excitement and unique energy while improving professionalism creates better results. Text gradients and overly wild elements may reduce trustworthiness, but the core international feeling and invitation can be preserved through careful editing.
When using models to generate designs, outputs reflect training data patterns rather than specific brand vision. The critical missing piece involves gaining quick control over generated designs to align them with intended brand direction and user needs.
Agents accelerate design work and reduce manual effort while providing the foundation for human refinement. The combination enables designers to achieve professional results without compromising speed or settling for generic AI outputs.
Agents can speed you up and save a lot of work by handling tasks like translation or resizing, but the human element of design remains critically important. The goal is to create tools that let humans work really fast with agents rather than replacing human judgment.
Agents will get better at tactical things like letter spacing over time. Models like Fable seem more thoughtful and put actual thought into their decisions compared to previous models. However, design involves decision-making in organizations—showing people comps, incorporating stakeholder feedback, and understanding requirements and problem space. These are not things agents have skill at. Humans are essential for building stuff that stands out from the crowd.
There's a thought process that goes through a human's head when reacting to something and evaluating criteria, and this process is very implicit for humans. The question is whether you can verbalize what those things are and quantify them to teach a model to have taste like a human would. If all models could do that, everything might look the same, requiring humans to drive toward finding what's new and stands out.
Models will get good at tactics and better at not making everything bold. But design involves higher-order decisions like whether something shows value prop, which is more important than technical execution. A site that seems too wild might be important for a company to be fun and exciting if that's what their market needs. Models are far from making these strategic decisions—maybe 10 years away.
Paper uses agents extensively for coding but still reads all code every single line, with multiple humans reviewing each line. Design tools are hard to build and require precise, careful work with multi-dimensional systems. The experience needs 120 FPS, to be fast, and to work every single time—agents aren't there yet for that level of precision.
With a 12-person team, keeping the talent bar extremely high reduces communication burden and other costs. The approach is to use agents to accelerate people rather than replace them. Quality software takes time, and while competitors may have every feature, people want Paper to be better because of the precision and care put into the product.
Brand designer Agu, who codes a little but wouldn't call himself a programmer, made the entire website in about a week before the last launch, including shipping and all animations. He designed everything in Paper, then prompted the animations on top of his Paper file to convert designs into a Next.js codebase. No one else looked at it. This included Easter eggs and interactive elements that wouldn't have been possible without agent assistance due to time constraints.
Agents help with videos, marketing sites, and other peripheral work where they can help people go faster. For the core product, the team remains human-based for precision reasons. They use Cursor extensively, Cloud Code extensively, and Bugbot for PR reviews, though Bugbot can be too pedantic.
Paper has built a groundswell movement and cult following among designers. A huge part of this came from being values-aligned with the market before having a product, reaching 25,000 Twitter followers in the first year just by talking about values. Being authentic matters especially for design software, where the best and most authentic product wins. The company of 12 designers and engineers lives their values, and people resonate with that.
Every company eventually goes up-market and stops being as cool when selling to enterprises. Paper is the first company since Figma to make a dent in the design tools market, appearing alongside Figma and Sketch in Ramp's data about design tool subscriptions. Growth is happening quickly.
Previous company Modules worked on designer-developer handoff and built Radix UI as a side project that became the default React component library. Pre-AI, everything was harder. The team listened to both designers and engineers simultaneously and got confused because designers wanted engineers to change and engineers wanted designers to change. They learned hard lessons about making something people actually want, but Radix had amazing product-market fit. They made it free rather than building a venture-scale business around it, then sold Modules to WorkOS.
You can overcomplicate product building. The phrase "make something people want" is valuable. At the beginning, the priority was being part of the conversation and having Twitter followers, so they went on podcasts and talked to users to represent their values outwardly. The approach is to do the most straightforward thing possible rather than brilliant strategies. Don't be scared to do things that sound hard.
Bottlenecks first is a core philosophy. Currently, early adopters are using Paper, but people who aren't early adopter types are missing features like comments and components, making features the new bottleneck to release. Another tactical approach is talking to users every day—during the first year, there was a rule to talk to a designer every single day, which was useful because founders develop different perspectives and need to stay rooted in user conversations.
When onboarding people, they must be in Discord or Slack talking to users. This is important even if some come from bigger companies where they weren't allowed to talk to users. Having an informed employee base means good decisions get made throughout the company, not just by the founder, since one person can't make every decision even at 12 people.
A lot of design isn't changing. In organizations, the function of design remains important for exploring problem space, competitive analysis, and working with executive stakeholders. With more companies and more software being made, there's more and more need for design in the world. Tooling will accelerate to help designers keep up with engineering and product teams in the shipping process.
Paper is building out table stakes like components and comments as bottleneck reducers. They're working on a feature to organize prototypes that end up on Vercel or as HTML files, allowing people to leave comments on them. This addresses the problem of messy results from designers building playgrounds and vibe coding, providing a tool to organize feedback cycles. This will be a focus over the next 6 months alongside building expected table stakes features.
Keep Y Combinator in your library
Save the videos and channels worth coming back to, and find them again in one place.
