SaaS: An AI/Designer Collab

In this example, I partner with Claude Design & Figma in order to create a MVP app prototype for an app for Sales Managers to converse with the data from their dashboard. How might this app work well on mobile,

1: start with a Hand-Drawn User flow

Mapping out what we want our target audience to do brings vision to the app MVP AND is a way to write prompts. Each step is an opportunity to add to a prompt document (md), which we can later give to Claude Design.

Mapping out what we want our target audience to do brings vision to the app MVP AND is a way to write prompts. Each step is an opportunity to add to a prompt document (md), which we can later give to Claude Design.

2: Choose A Flow to Prototype

I want to show that a Sales Manager doesn’t need to know all of the right prompts in order to find out what the future of their business holds. The UI will surface logic, such as setting a time in the future or asking ‘why’.
I want to show that a Sales Manager doesn’t need to know all of the right prompts in order to find out what the future of their business holds. The UI will surface logic, such as setting a time in the future or asking ‘why’.

3: Create a Design System in Claude (& Figma)

I start by attempting to create a design system in Claude Design from a flat image. When that didn’t work well, I made a small design system in Figma, that I can reuse, and tried again with Claude Design. That worked.
I start by attempting to create a design system in Claude Design from a flat image. When that didn’t work well, I made a small design system in Figma, that I can reuse, and tried again with Claude Design. That worked.

4: Add Figma Skills And Connect Claude to Figma

To add components to Figma with less work, I connected Figma skills to Claude and made a repository in Github. This process takes time to set up the first time, but I’ll make it part of my workflow. Claude can now make components in Figma.
To add components to Figma with less work, I connected Figma skills to Claude and made a repository in Github. This process takes time to set up the first time, but I’ll make it part of my workflow. Claude can now make components in Figma.

5: Create a prompt Markdown File for Claude

I’ve made a template of an extended prompt which reads much like a project spec. It describes the audience, the tone, the sections, colors, design style and output. I start with this and a hand-drawn sketch. It saves me time to sketch by hand vs laying out in Figma.
I’ve made a template of an extended prompt which reads much like a project spec. It describes the audience, the tone, the sections, colors, design style and output. I start with this and a hand-drawn sketch. It saves me time to sketch by hand vs laying out in Figma.

6: Work in Claude Design to Build Sections … Then Iterate

Before adding interactions and too many details of visual design, I start by working with Claude Design to build the primary sections: Top nav, Chart Section and Conversation Section.

7: Then, Focus on the Interactions

In this case, a Sales Manager wants AI to predict a question’s answer at a time in the future. As the conversation about the data proceeds, strong risks or opportunities may be spotted by AI, which can then highlight them in the chat.
A Sales Manager can then pin these to their main view so they can take action.
In this case, a Sales Manager wants AI to predict a question’s answer at a time in the future. As the conversation about the data proceeds, strong risks or opportunities may be spotted by AI, which can then highlight them in the chat.
A Sales Manager can then pin these to their main view so they can take action.

A good designer (and team) knows how to make it work, what to include, to leave out, and what makes the business different.

HERE IS ANOTHER EXAMPLE: AN AI PROTOTYPE MADE IN CURSOR.

I designed a conversation-first interface hat still highlighted standouts, in the chat, to return to such as project milestones and artifacts, while keeping discussion clean. Humans think in chunks of information and one long stream can be overwhelming when it comes to work. We know humans get interrupted all the time. The working prototype is hosted on Github pages.