Building with Cursor ft Designers from Cursor (Ryo Lu), Notion (Jin Park), and Ramp (Catherine Wang)

Building with Cursor: An Introduction

Welcome and Event Overview

• Elizabeth Lynn introduces the event "Building with Cursor," highlighting its competitive nature.

• She mentions the presence of guests from notable companies: Rio, Jyn, and Catherine representing Cursor, Notion, and Ramp.

• The format includes demos by each guest on using Cursor and AI tools in their design teams followed by a panel discussion.

Katherine's Insights on Design and AI

Embracing Change in Design Processes

• Katherine leads employee experience and mobile platform teams at RAMP, expressing excitement about evolving design processes.

• She emphasizes how her role has changed significantly over the past year due to new tools like Cursor.

Should Designers Code?

• Katherine poses a question about whether designers should learn coding, noting that Cursor was traditionally seen as an engineering tool.

• Reflecting on her early career, she shares her initial attempts at learning HTML/CSS/JavaScript for portfolio creation but later abandoned it.

The Impact of AI Prototyping

• A pivotal moment occurred when a teammate demonstrated rapid prototyping using AI tools like Chat PRG, Whisper, and V0ero.

• This sparked enthusiasm within the team about AI's potential rather than fear of job loss; many began experimenting with various tools.

Team Dynamics and Learning through Tools

Collaborative Experimentation

• The team's experimentation with different AI prototypes led to widespread sharing of knowledge and processes among members.

• Even seasoned professionals learned to use new tools effectively through collaborative efforts.

Real-world Applications of Cursor

• Katherine highlights TJ’s advocacy for AI prototyping despite initial skepticism; she became proficient in various tools over time.

• Examples include prototypes developed by team members that directly engaged customers to refine designs based on feedback.

Prototyping Success Stories

Customer-Centric Design Approaches

• One example involved TJ creating prototypes linked to a Notion database for testing customer interactions effectively.

Defining Roadmaps through Prototypes

• Pavan’s prototype aimed at digitizing expense policies inspired his team by demonstrating concept-to-demo progression within three weeks.

Conversational AI Workflows

• Andy utilized cursor to conceptualize workflows for conversational AI applications.

Testing Conversational Workflows and Prototyping

Importance of Realistic Testing

• The speaker emphasizes the limitations of testing conversational workflows in Figma, noting that manual scripting lacks realism and fidelity compared to actual agent interactions.

• High-fidelity prototypes are crucial for accurately assessing interactions; real-time testing provides insights that static designs cannot.

Utilizing Real Data for Prototyping

• A team member named Aaron used a tool called Cursor to create a prototype manager, allowing exploration within their web repository using real data.

• This approach enabled testing of various interaction patterns in real time, significantly reducing the time required compared to traditional methods.

Support from Design Systems Team

• Amber, a design engineering lead, provided guidance and created a sandbox environment utilizing the Ryu component library for higher fidelity prototyping.

• The engineering team supported designers by teaching them how to submit pull requests (PRs), enabling them to see changes in real time regardless of their coding experience.

Live Demos and Prototyping Experiences

Initial Prototype Creation

• The speaker shares their first prototype created in Cursor, inspired by another team member. They focused on achieving the right "vibes" rather than perfect aesthetics.

• They aimed to consolidate multiple table instances within Ramp but found traditional tools like Figma inadequate for capturing desired interactions.

Exploring Sandbox Features

• The sandbox created by Amber allows users to prototype with preloaded templates that reflect actual design system components, enhancing fidelity.

• Templates include various layouts such as full pages or inboxes, providing boilerplates for designers' projects.

Personalization and Fun with Prototypes

• The speaker experimented with personalizing Ramp cards by manipulating gradients in real-time, showcasing the flexibility of the sandbox environment.

• They also explored shaders and animation libraries while creating playful designs like Halloween-themed fragments inspired by other team members’ work.

Prototyping and Coding in Design

Importance of Prototyping Tools

• The speaker discusses various prototyping tools used for clients like Glossier and Glass Pass, highlighting a preference for Notion due to its capabilities.

• Emphasizes the significance of using web repositories for high-fidelity prototypes that incorporate real data, moving closer to production standards.

Learning and Adapting in Design

• The speaker shares a personal journey of learning coding, sparked by George's post and experimenting with Cursor, which unlocked new design possibilities.

• Describes testing different layouts in a QA environment using real data connected to templates, showcasing the limitations of traditional tools like Figma.

Collaboration and Support in Development

• Highlights the collaborative nature of their team where engineers assist with product specs, prototyping, and code reviews, fostering a supportive learning environment.

• Reflects on the nervousness experienced when submitting the first pull request (PR), but notes positive feedback from front-end engineers.

Evolving Roles in Design Teams

• Discusses how roles have evolved within teams; designers are now coding while engineers write product specifications.

• Concludes that rather than asking if designers should code, we should focus on continuous learning and adaptation within the field.

AI Integration in Design Workflows

Introduction to AI Applications at Notion

• Jyn introduces himself as a designer at Notion involved with AI search enterprise connectors and expresses excitement about sharing insights on AI integration.

Prototype Playground Overview

• Mentions Brian Loveven’s creation of "prototype playground," an environment allowing designers to duplicate projects or start from templates for collaborative work.

Chatbot Comparison Tool

• Describes an early prototype focused on chatbot comparison models that help understand interactions between different AI models based on their strengths and weaknesses.

Testing Modal Variants

• Shares examples from Andy Madrick's work testing modal designs for an upcoming conference. Feedback is gathered directly from peers during critique sessions.

Live Input Fields Utilization

• Notes that live input fields are utilized not just by designers but also by product managers (PM), indicating cross-functional collaboration within teams.

Introduction to Vibe Coding and Animation Techniques

Overview of Cursor and Its Applications

• The speaker acknowledges MJ, their PM, for using Cursor to prepare slides for a talk at Make with Notion, showcasing how it helped drive initiatives forward.

• A demonstration of an animation created live, emphasizing that it is not an SVG animation but rather coded in real-time, which aids in internationalization.

Benefits of Live Coding

• The speaker highlights the varying strengths and weaknesses across different teams, noting some lack front-end resources necessary for creating engaging animations.

• By stepping in to support engineers, the speaker can enhance user experiences without the typical back-and-forth communication required when designs are handed off from Figma.

Efficiency Gains Through Vibe Coding

• The process of achieving pixel perfection is described as a craft that requires close collaboration with engineers; otherwise, delightful experiences may be lost due to descoping.

• Introduction of vibe coding has drastically reduced project timelines from three weeks to just 45 minutes, empowering the speaker and enabling better collaboration with engineers.

The Process of Creating Animations

Steps Involved in Animation Creation

• The speaker introduces acronyms like "previve fetching," focusing on art direction and storyboarding while gathering raw artwork from Figma.

• "PVC previbe cleanup" involves organizing Figma files by grouping elements and ensuring proper naming conventions for effective translation into code.

First Pass Translation Challenges

• Initial attempts at translating designs into static code reveal discrepancies in colors and icons due to differences in color token systems used by Cursor.

• Adjustments are made after identifying issues with color tokens; custom hex values are applied instead for accuracy.

Final Adjustments and Prompt Engineering

Refining Designs Post Translation

• After initial translations miss certain icons or elements, manual adjustments are made to achieve desired outcomes while maintaining relevance to applications like Notion or Gmail.

Personal Approach to Prompt Engineering

• The speaker shares insights on their unique approach to prompt engineering for animations, emphasizing subject matter identification along with preferred technology instructions.

Understanding the Use of Tokens in Coding

The Concept of Warming Up the Database

• The speaker reflects on the idea of using a single token to "warm up" a database, suggesting that there is an element of fun in this process despite it being seen as a waste.

Communication and Clarity in Coding

• Emphasizes the importance of clear communication when giving instructions, noting that phrases like "makes sense" indicate readiness for real tasks and invite clarification if needed.

Feedback Mechanisms in Coding

• Discusses the practice of expressing gratitude after receiving responses, hinting at a desire for positive interactions with coding tools.

• Introduces a temperature metaphor to describe feedback: positive feedback indicates alignment with expectations, while requests for simplification suggest further optimization is needed.

Exploring Creative Applications of Coding

Testing Ideas Through Code

• The speaker shares their enthusiasm for testing ideas through coding, illustrating how they generated visual effects to assess browser GPU performance.

Portfolio Development and Learning New Technologies

• Highlights how quick demos can enhance one's portfolio and facilitate learning about new technologies like Interact.js, which allows drag-and-drop functionality.

Overcoming Challenges in Learning to Code

Embracing Curiosity in Learning

• Encourages learners to approach coding with curiosity akin to childlike playfulness, drawing parallels between learning processes and natural exploration.

Introducing Cursor 2.0: Enhancements and Features

Evolution of Cursor's Interface

• Describes changes made to Cursor's interface from a traditional code editor layout to a more user-friendly agent-first design that emphasizes simplicity.

Interactive Features and Real-Time Collaboration

• Mentions the addition of a built-in browser feature allowing users to interact live with their projects, enhancing usability during development.

Exploring Cursor's Capabilities

Introduction to Cursor Features

• The speaker discusses the ease of using Cursor for retrieving old pictures, indicating a need for improvements in voice functionality.

• A new model is introduced that enhances front-end development speed and efficiency, being faster and cheaper than its predecessor.

Enhancements in User Interaction

• Users can now easily adjust elements like size by simply issuing commands, showcasing the intuitive nature of the tool.

• Cursor has become more agentic, allowing less precise instructions while still achieving desired outcomes effectively.

Development of Baby Cursor

• The concept of "Baby Cursor" is introduced as a simplified version designed for rapid ideation without the overhead of large codebases.

• Baby Cursor includes features like command shortcuts and AI interaction capabilities, facilitating quick prototyping.

Practical Applications and Prototyping

• The speaker shares experiences with multi-agent interactions within Baby Cursor, demonstrating its versatility in handling tasks such as language translation.

• A project called Rios is mentioned where users can create applets; an example given involves tracking plant watering schedules.

Design Focus and AI Integration

• Emphasis is placed on designers focusing on aspects that AI cannot handle well, thus enhancing overall product quality.

• The agent feature allows users to navigate file systems efficiently, exemplifying practical applications in real-time coding scenarios.

Plan Mode Functionality

• Plan mode enables users to initiate new features or projects even when details are unclear; it assists in gathering necessary information autonomously.

• The system conducts research based on user prompts to generate relevant context and specifications for development tasks.

Conclusion: Research Capabilities

• Plan mode's ability to perform extensive research before providing feedback highlights its advanced capabilities compared to traditional methods.

• The speaker reflects on past experiences with similar tools, noting improvements in responsiveness during live demonstrations.

AI Tools in Design: Transforming Collaboration

Overview of AI Integration in Design

• The PRD (Product Requirements Document) is designed to be fully editable, resembling a Notion document, allowing for comprehensive review and iteration.

• Users can build projects directly in the cloud or locally, with an emphasis on simplicity and accessibility for those who may not want to engage with code.

• A new reviewer tool developed by Austin enhances understanding of how the code functions post-build.

Panel Discussion Introduction

• Transitioning into a panel discussion, participants express excitement about the evolving landscape of design influenced by AI tools.

• The moderator acknowledges the audience's enthusiasm and prepares to pose questions regarding AI's impact on design processes.

Impact of AI on Design Processes

• Many design teams are still exploring how to effectively utilize AI tools; best practices are yet to be established as teams navigate this new terrain.

• Jyn discusses how AI has transformed her ability to support engineers during final phases of design, reducing back-and-forth communication challenges across time zones.

Enhancing Collaboration Between Designers and Engineers

• Jyn highlights that using AI allows for more effective prototyping beyond Figma’s limitations, enabling real-time interaction with designs in a browser environment.

• Learning coding has fostered empathy between designers and engineers; it enables clearer communication about specific properties rather than vague descriptions.

Returning to Code as a Creative Medium

• The speaker reflects on the historical context where software creation was seen as an art form; modern roles have fragmented this view.

• Emphasizing the importance of returning to coding as a material for designers, they argue that this shift re-establishes direct engagement with software creation.

Getting Started with AI Tools

The Process of Building with AI

• The act of building with AI is compared to sculpting; initial attempts may seem rough, but refinement occurs through continuous engagement and exploration.

Understanding AI's Strengths and Weaknesses

• While AI excels at pattern matching and composition, it struggles with nuanced details that human engineers notice, emphasizing the importance of human insight in the development process.

Recommendations for Teams New to AI Tools

• For teams not yet utilizing tools like Cursor or Cloud Code, it's suggested to seek access to codebases from engineers or IT personnel as a starting point for experimentation.

Prototyping and Experimentation

• Starting small by creating prototypes is encouraged; even basic projects can lead to greater interest and deeper engagement with more complex tools later on.

Exploring Various Tools

• There are numerous tools available beyond Cursor; experimenting with different options helps users find the most effective method for achieving their goals.

The Importance of Play in Learning

Lowering Barriers to Entry

• The barrier to entry for using AI tools is decreasing, allowing individuals to start projects purely for enjoyment rather than work-related purposes.

Emphasizing Value Creation Over Coding Techniques

• The focus should be on producing valuable outcomes rather than debating coding methods (e.g., vibe coding). Ultimately, delivering great user experiences is paramount.

Learning Through Coding

Problem-Solving Skills Development

• Learning to code enhances problem-solving abilities by teaching how to break down tasks into manageable steps, which translates across various platforms like Figma and React.

Balancing Manual Work and Automation

• Despite the advantages of automation through AI, manual coding remains valuable for ensuring structure and quality in projects. It’s described as a collaborative "dance" between human input and machine assistance.

Prototyping and Collaboration in Design

The Complexity of Prototyping

• The complexity of a project can dictate the level of intervention required from designers, indicating that responses may vary based on specific circumstances.

• Preference for prototyping in Figma is highlighted due to familiarity and speed, emphasizing the effectiveness of tools like Smart Animate for creating engaging interactions.

• A background in film and post-production influences the speaker's enjoyment of motion design, favoring hands-on experimentation with timing and curves over coding.

Designer Responsibilities and Team Dynamics

• Designers should focus on their strengths—visual elements such as color, typography, and cohesion—while recognizing that vibe coding provides only initial frameworks.

• In smaller teams, designers often assist engineers by ensuring that detailed aspects of designs are accurately implemented, bridging gaps between mockups and final products.

Enhancing Collaboration Through Tools

• The role of designers includes creating "bricks" or components that can be easily utilized by engineers or agents to streamline development processes.

• Once foundational work is completed, designers have more time to explore innovative ideas rather than getting bogged down by minor adjustments.

Learning Through Interaction with AI

• Engaging with AI tools involves asking questions which fosters learning; this interaction is seen as a valuable part of the design process.

Future Evolution of Design Tools

• There’s an aspiration for tools like Cursor to evolve beyond being designer-centric towards fostering collaboration between designers and engineers through shared resources.

• Envisioned future tools would integrate seamlessly into existing workflows (e.g., Slack), allowing all team members to contribute without needing separate applications.

• The goal is to dissolve silos within teams so everyone shares responsibility in content creation and design processes, promoting a collaborative environment.

Vision for Cursor and User Interaction

Diverse User Needs in Software Development

• The speaker envisions Cursor as a versatile tool that accommodates various software developers, whether they are planning in Google Docs or managing tasks in Jira.

• Different users have unique interaction styles; some prefer 2D manipulation while others may be linear thinkers focused on text.

• The contrast between coding styles is highlighted, with some engineers using keyboard shortcuts (like Vim), while others are more comfortable with point-and-click methods.

Building an Inclusive System

• The goal is to create a unified system that feels simple and intuitive for all users, regardless of their primary mode of interaction.

• Emphasis on customizing the environment so everyone can find their place, breaking down barriers between tools and people.

Collaboration and Natural Interaction

• Users should interact with the code naturally without feeling like they are dealing with artifacts or outdated formats like Afig files.

• While GUI is favored, the speaker acknowledges that terminal use remains valid depending on user preference.

Challenges in Setting Up Development Environments

Barriers to Using Cursor

• An audience member shares frustrations about lengthy setup times for development environments, which can take days even for experienced engineers.

Strategies for Efficient Prototyping

• Suggestions include creating reusable prototyping environments with shared components to streamline the process.

• Users can leverage agents within Cursor to assist in running servers or setups when complexities arise.

Importance of Team Collaboration

• Encouragement for engineering teams to improve documentation and support users through clear instructions.

The Role of Design Engineers

Collaborative Problem Solving

• A design engineer's involvement has been crucial; hands-on sessions helped team members troubleshoot issues together effectively.

Creating Supportive Resources

• The design engineer developed onboarding guides and sandbox environments that facilitated smoother transitions into using Cursor.

Group Learning Dynamics

• Collective effort during setup sessions proved beneficial; working together rather than individually made a significant difference in overcoming challenges.

Astro and Lightweight Development Tools

Recommendations for Quick Setup

• The speaker suggests using Astro as a lightweight solution to quickly set up projects, emphasizing its efficiency in getting things running.

• Tailwind CSS is recommended for styling, with the suggestion to align its variables with Figma tokens for consistency in design.

• AlpineJS is highlighted as an easy-to-learn alternative to React, providing interactivity like dropdowns while maintaining a lightweight framework.

Preserving Iterations During Coding

• A question arises about preserving iterations during coding sessions, particularly when using tools like Cursor. The speaker shares their experience of drafting pull requests (PRs) that can be lost after engineers address them.

• The speaker mentions the challenge of documenting iterations effectively and expresses curiosity about better processes for tracking changes.

Using AI Tools for Documentation

• The speaker recommends creating a Fig Jam file to take screenshots of prompts used during the design process, allowing designers to maintain a visual history of their work.

• While this method may not scale well, it provides an engaging way to reflect on the entire design process over time.

Conclusion

• The session concludes with appreciation for the panelists and participants, indicating a positive engagement throughout the discussion.