Cursor curious designers

Starting with Something Familiar: Markdown Recipes

The participants’ first file they edited in Cursor wasn’t a code file, but in fact a recipe. Learning code and learning Cursor are actually two separate skills, and by inviting participants into Cursor with something familiar and recognizable, we could focus on the tool itself.

At its core, IDEs are souped up text editors. By starting with markdown recipe files, participants could see this fundamental truth without being overwhelmed by syntax highlighting, error messages, or complex file structures.

Starting with recipes made AI-assisted editing tangible and relatable

The beauty of starting with markdown was that participants could verify the output - they knew if a recipe made sense or not. This built confidence in the AI assistant’s capabilities while introducing core concepts like:

• Command + K for inline edits
• The agent loop concept
• Breakpoints and model selection

From Recipes to Meal Plans: Understanding AI Agents

Once everyone had created a collection of recipes, we used Cursor’s agent feature to generate meal plans. Participants could ask questions about their recipes and see how the AI could reason across multiple files.

This phase was crucial for understanding:

• How AI agents can synthesize information from multiple sources
• The importance of context in AI responses
• The difference between simple edits and complex reasoning tasks

The Leap to Code: Shopping Lists Come Alive

Next came the magic moment - we transformed markdown shopping lists into interactive HTML pages with plain CSS and JavaScript. This was where designers saw their first “aha!” moment.

From markdown to interactive HTML - designers could see their lists come to life

What made this powerful was seeing the variation in output quality based on:

• Model selection (GPT-4 vs Claude vs others)
• Prompt specificity
• Context provided to the AI

This tangible demonstration helped newcomers understand model capabilities in a way that abstract explanations never could.

The Unexpected Success: Everyone Running Next.js

The most ambitious part of the workshop was getting designers to install Node.js/npm and run a Next.js application. I intentionally did not ask students to install the Node dependency before class, as I was concerned this could be a negative experience, causing some panic and concern.

Sure enough, in class as we opened up our Terminal pane in Cursor, we did have one student remark that they were out of their depth and feeling uneasy with the next steps. In fact, that participant had correctly followed the steps and just needed me to visually confirm that everything was working as expected.

The key insight: Cursor could meet each participant where they were at, providing customized assistance based on their specific setup and experience level. By handling installation in real-time, we turned a potential blocker into a learning opportunity about how AI can provide personalized technical support.

Pushing the Frontier: OpenAI Realtime Integration

For the final segment, we worked with an OpenAI Realtime starter I had prepared. Participants:

• Dropped documentation directly into Cursor
• Modified the voice interface behavior
• Experimented with multimodal AI capabilities
• the design and look and feel of the list using Shadcn design system

The variation in Next.js app quality helped illustrate model capabilities

This highlighted a crucial point: only with tools like Cursor can non-programmers experiment with frontier AI capabilities. Traditional no-code tools can’t keep pace with the rapid evolution of AI APIs.

Participant Feedback and Impact

The positive feedback was overwhelming. Many designers expressed that for the first time, they could see how they fit into modern development workflows.

Several participants have since:

• Started using Cursor for prototyping
• Integrated AI tools into their design workflow
• Begun collaborating more closely with developers using shared tools

Lessons for Future Workshops

The Future of Design-Development Collaboration

This workshop demonstrated that the barriers between design and development are becoming increasingly permeable. With AI-powered tools like Cursor, designers can:

1. Prototype with Production Code: No more throwaway prototypes - designers can create real, functional applications
2. Understand Technical Constraints: By working directly with code, designers gain deeper empathy for implementation challenges
3. Contribute to AI Context Design: As AI becomes central to applications, designers who understand how to craft effective prompts and contexts become invaluable

The overwhelmingly positive response from participants suggests we’re at an inflection point. The question isn’t whether designers should learn to code, but how AI tools can make that learning curve not just manageable, but enjoyable.