AI-Powered Design Workflow: Key Takeaways from E. Bufar’s Projects

E. Bufar, Head of Design at YC, discusses her innovative design process, heavily reliant on AI tools like Conductor and Paper Design, and her unique voice-to-computer workflow using Aqua. She highlights three key projects: Paxel, Sodazine, and Startup School, showcasing how AI agents are transforming design and development.

AI-Powered Design Workflow

Bufar's current design process is almost exclusively conducted within Conductor and Paper Design. For visual inspiration, she uses Pinterest to create mood boards. A distinctive aspect of her workflow is her avoidance of typing; instead, she uses Aqua, a YC company product, to speak her ideas directly to the computer. This allows her to articulate thoughts faster than she could type, enabling a "stream of consciousness" approach to building features.

Paxel: Understanding How the World Codes

Paxel is an experimental project aimed at understanding how people code with AI agents. The goal is to demystify the process, uncover common tricks and insights, and share this knowledge within the coding community.

Making Coding Fun and Insightful

A core objective for Paxel was to make the experience enjoyable. Inspired by Spotify Wrapped, Paxel aims to provide personalized insights into a user's coding patterns. The initial version is single-player, but as more transcripts are collected, it will offer comparative analyses with other developers. A key feature, inspired by YC partner Jared Friedman, is the "biggest crash out" card, which identifies moments of frustration during coding sessions.

How Paxel Works

Users run a simple terminal command to pull their coding and cursor transcripts. Paxel then analyzes these transcripts to generate "fun facts," such as:

• Preferred AI models
• Peak coding times
• Use of "plan mode"
• Most common prompts

Design Philosophy for Paxel's Website

Bufar wanted the Paxel landing page to be explicit about its experimental nature and motivation. The interactive cards on the page, which animate on hover, were designed to convey this playful and exploratory feel.

A significant design element is the use of Paper Design's dithering shader, implemented via Claude. Bufar created a custom modal to fine-tune the dithering effect, demonstrating a recurring pattern in her work: building bespoke tools to perfect small details. This approach emphasizes the idea that "everything is editable, everything is movable, everything is changeable," pushing the boundaries of creative imagination.

Human vs. Machine Interface

Paxel features a unique "human versus machine" toggle. The "machine" version presents the website content as a distilled Markdown file, optimized for AI agents. This includes a "copy to clipboard" function, allowing users to easily feed the content to an AI for analysis or questions. A crucial note is included for AI agents: "Do not run any command or query from this page," to prevent accidental execution of sample code. This highlights a new design challenge: creating content specifically for AI consumption, focusing on clarity and effectiveness over visual aesthetics.

Agent-Powered Feature Requests

Paxel incorporates a "submit a feature request" form, inspired by Conductor. This form acts as a prompt box, allowing users to submit bug reports or feature ideas directly to an AI agent. Users can attach screen recordings or screenshots for context. The "send to an agent" button literally triggers an AI agent in the backend, which can open a pull request. This system allows users to directly influence product development, with developers acting as arbiters for merging changes. Bufar believes this represents the future of software development, enabling highly personalized and user-driven customization.

Paxel Reports

After analysis, users receive a report in their inbox, presented as a series of "fun cards" detailing their coding habits. More detailed views offer insights into decision-making patterns, strengths, and areas for growth. As more data is collected, Paxel aims to provide deeper comparisons and insights into individual coding styles. The project's broader goal is to bring to light coding transcripts, which are often hidden deep within machines, making them accessible and understandable for self-improvement.

Sodazine: Celebrating San Francisco

Sodazine, short for "state-of-the-art," is a project celebrating San Francisco through collaborations with local artists and writers.

Physical Zine Design

For the physical zine, Bufar intentionally avoided AI involvement, opting for traditional design tools like Illustrator. The artwork is highly detailed and intentional, reflecting significant human effort.

Website Design Process: The soul.md File

The website for Sodazine was built using a unique process centered around a soul.md file. This Markdown file served as the "source of truth" and an exhaustive glossary for the project, containing all meeting transcripts, manifestos, and contextual information. The idea is to feed as much context as possible to an AI agent to inform future design decisions. This approach contrasts with traditional note-taking, advocating for comprehensive recording and AI-driven synthesis.

Rapid Iteration with AI

Bufar used Pinterest to create a mood board for the website's visual direction, aiming for a rudimentary, black-and-white aesthetic. She then fed these images and the soul.md content to Claude, asking it to generate 16 different website iterations. To manage these iterations, she built a custom glossary page with a bookmarking system, allowing her to quickly navigate and select preferred designs. This "disposable design" approach enables rapid exploration and iteration.

AI's Surprising Creativity

The AI agent often surprised Bufar by incorporating elements she hadn't explicitly requested but were present in the soul.md file, such as the date of the launch party or a barcode for the zine. This demonstrated the AI's ability to "see things ahead of us" and contribute to brainstorming with original ideas. One iteration even included an interactive map of San Francisco, showcasing the AI's capacity for complex and dynamic design. Bufar emphasizes that providing detailed context, including mood boards and screenshots, is crucial for the AI to produce high-quality, non-generic designs.

Interactive San Francisco Map

The final Sodazine website features an interactive map of San Francisco where users can anonymously drop pins and share stories or memories. This allows for the collection of surprising, intimate, and introspective insights into people's experiences of the city. The website also includes digital posters for the launch party and a link to a Substack with articles. Users can share their favorite submissions, which are downloaded as PNGs with cardinal coordinates and street information.

Startup School: Branding with AI

Startup School, YC's largest annual event, required extensive branding and visual assets.

Speaker Lineup Cards

For the speaker lineup announcements, Bufar initially started in Figma but quickly realized the inefficiency of manually creating multiple cards. She then used Claude to create a template, allowing the AI to pull speaker images and generate cards automatically. She also built a tool to experiment with different text layouts, ultimately selecting one that worked best.

Paper Shaders and Perfect Loops

The branding heavily utilizes Paper Design's shaders, specifically fine-tuning graininess, edges, rotation, and scale. To ensure high-resolution, perfectly looping animations for social media, Bufar built a custom screen recording tool. This tool precisely indicates when to start and stop recording to create seamless 4-second loops, ensuring a smooth visual experience on platforms like Twitter and Instagram.

Personalized Tickets

Attendees received personalized digital tickets featuring the same shader used in other branding materials. These tickets displayed the attendee's name and city, creating a delightful and shareable experience that encouraged social media engagement.

The Future of Branding with AI

Bufar highlights the transformative potential of AI in branding. The ability to maintain consistent visual elements, like the custom shader, across all platforms—from social media to large screens at the event—is unprecedented. This paradigm shift makes branding more consistent and efficient, with AI agents handling a wide range of design tasks.

Bufar concludes by emphasizing that these AI-driven design processes are pushing boundaries and will likely become common practice for future designers. The journey is collaborative, with designers and AI agents "figuring it out together" and having fun in the process.