I’m super excited to start a new project in exploring how AI can be leveraged in design practice – I believe were reaching a new era of design, where the boundaries between design and development are truly becoming blurred with AI tools such as Claude Desktop, Claude Code, Cursor, Figma Make, and Figma Code Layers.
I will gather quotes, notes, and resources on this page as I go.
Start exploring yourself!
If you want to start exploring with AI in the design process I’d recommend starting with these following tools:
For AI prompted UI design:
- Figma Make – Figma’s new AI prompting tool, where you can use natural language to generate design prototypes. You can copy the generated prototypes into Figma files to further manually edit them. Pretty cool stuff!
- Figma Sites
For AI-vibe coding:
- Claude Desktop
- Claude Code – An AI code assistant in the terminal, with access to your code files, which affords it contextual awareness of the code you are working with. The generated code from Claude code in terminal is truly incomparable to what you get from general LLM desktop tools (e.g. ChatGPT & Claude Desktop).
- Cursor – Another AI code assistant tool with an AI agent built into an interface similar to VSCODE. This tool has been created for developers working in teams with bigger code bases. Also really great, and better for more detailed edits compared to Claude Code.
Other related tools:
My AI Workflow
My current AI-infused workflow for developing functional prototypes fast involves doing the initial thinking and planning manually (e.g. talking to stakeholders, brainstorming, looking at similar products out there), and then using large language models (e.g. ChatGPT or Claude) to help fletch out the ideas. I then quickly prompt in Claude Code to generate the first version of the prototype in code. Then, I move on to Cursor where I iterate the design in smaller increments, using the built-in AI agent. If needed, I also manually edit code in VSCODE – switching between AI-mediated coding sessions and manual coding sessions since I believe that using AI to code changes how we think.
So far, I have not incorporate AI prompting in Figma in this process, but that is on my agenda to start exploring with.
Links
- Youtube video: When Designers Start Shipping Real Code: Emmet Connolly from Intercom – This talk by Emmet Connolly includes many hands-on examples and inspiration on how you as a designer can start exploring with AI tools to build prototypes.
Stay tuned for updates on this page! Feel free to leave a comment if you’re experimenting with this as well.