Claude Generation of Prototypes that Match your Design Definition

Ever wanted to just create an MVP or an idea yourself without needing the technical knowledge required? This seems like it might be just around the corner with Claude Artifacts.

Ever wanted to just create an MVP or an idea yourself without needing the technical knowledge required? This seems like it might be just around the corner with Claude Artifacts, an amazing AI tool that can create real working code using a ChatGPT style generation.

This opens up all-new, incredible opportunities for teams to prototype new ideas for their applications; specifically on websites. Never before has there been as powerful of a tool for combining developers, product managers, testers, and designers all together into one force to prototype ideas. It’s also great if you aren’t on a team but just want to try building something out!

At Hint Services, we recently were able to go through a workshop where we worked in Claude Artifacts to prototype an entire form flow with our team. Working at the speed of ideas we quickly aligned on a vision for the application that took ideas from everyone. With the experts in the room, they were able to provide their ideas in real-time without needing to have costly feedback loops or demos.

We find this tool incredible for our work and want to help more people leverage this tool in their day to day. A big part of that is how to get the prototypes that are created to feel like your application rather than a generic application. That “feel” is a big part of creating a great prototype.

Here’s an example of a failure I created while trying to generate a design system for Claude’s Website:

So today, we’re going to help Claude develop our own Design System definition for our application. This definition will help us better create prototypes that fit the style and aesthetic of our application or an ideal application if you just have screenshots to go off of. If you’re non-technical, don’t worry about it. I’ll be including a lot of prompts that will help you get there in no time.

If you’d like to follow along on YouTube, here’s the link to our walkthrough for this code:

Creating the Design Definition

For this example, I’m going to be generating a design definition for Starbucks. We get some benefit that Starbucks has a lot of design that has been shared with the design system community, but that also replicates some of the design details you know about your own site.

Tip: Throughout this process, feel free to coach Claude to understand how design elements should be used in your own examples. It may need more details to match your vision.

First things first, we need to get some screenshots of our existing application. I took a few screenshots on my phone and uploaded two of them alongside a prompt for us to get started:

Act like a design system expert. Analyze this screenshot of our application and help me extract the style variables that will be helpful to reproduce this style across other components in our application. Focus on font, colors, spacing, and rounding. Think of the CSS variables that might make sense to represent these. Output the results in groupings based on category and place in a table for readability

This immediately starts generating some great variables and descriptions for us to start using and thinking about:

But this is hardly complete. I’m going to upload another screenshot now with the following prompt:

Expand on the colors a bit more and be sure to define how these colors should be used exactly. Take this additional screenshot into account too

Great, now the colors feel a bit better and more related to the application’s design. The fonts now need to be added, and we need to make sure it knows to pull fonts from Google Fonts due to some limitations of working in Artifacts. We want to be able to see our designs in Artifacts so I’ve added some details of how to specify the fonts in a way that renders what we need it to:

Can you get the font that is most similar to this screenshot that is available on Google Fonts.

Once you get that, let's take that font and add a definition for it using a link tag and a basic CSS snippet that can be used to use the font in a website0

Now we’re pretty much set for our design definition, but it’s hard to see just from these code snippets and tables. Let’s create a preview of our design in Artifacts so we can see everything:

This looks great. Can you take our style sheet and use it to build a style guide page in React using tailwind to highlight the guide visually to display colours, spacing, and other properties listed?

I want to see the output in Artifacts and many tailwind features do not work in Artifacts. Define our designs system colors as css or `style={}` props rather than assuming that we can specify custom inline colors `bg-[#000000]` with tailwind or custom tailwind classes `bg-primary-500` or variables referenced in tailwind `bg-[--var-text-color])`. Many tailwind features do not work in Artifacts. Also output the font as a link and css definition as some imports may not work either.

Just output a single snippet rather than breaking it up into multiple

Now we have a really great rendering of our design system:

This is great for previewing the elements but doesn’t capture enough of the rationale for why we use each color, spacing, etc. So we want to also generate a text file that has some of these properties listed in it.

Great! That looks awesome.

Let's take this and now generate a markdown file with all of the details of our design system in it. Let’s get the full list of variables and list them all out with their usage as a note. Don’t need to group it in a table now let’s just do sections, variables, values, and usage notes about how these variables should be used

This will create a document we can also reference when we want to use our design definition to create new prototypes:

Now we’re ready to build out a new prototype using our design definition of our application!

Creating Prototypes

Now, we can download the code and our design system document to be used in creating a new component. Feel free to keep the same chat going or start a new one with these documents as you start creating new components:

Act like an expert React and tailwind developer proficient with using design systems. Can you take the design system definition I've created to create a new date picker component?

I want to see the output in Artifacts and many tailwind features do not work in Artifacts. Use our designs system colors as css or style={} props rather than assuming that we can specify custom inline colors bg-[#000000] with tailwind or custom tailwind classes bg-primary-500 or variables referenced in tailwind bg-[--var-text-color]). Also output the font as a link and css definition as some imports may not work either.

Tip: I still find keeping this second part helpful as it eliminates a lot of the errors I encounter when trying to create working prototypes.

We’re now off to the races creating new prototypes and pages! While you may not get great results every time, you’re now in a position to better inform Claude of what looks right when building out new prototypes.

Have fun and be sure to follow us if you found this insightful or interesting!

Troubleshooting Errors Creating Prototypes

Lastly, I wanted to include a quick set of troubleshooting tips. Results may vary when creating prototypes, and there are a couple of things to watch out for if you have trouble along the way.

Sometimes it generates part of the code without the colors being defined, or where they are defined in a way that can’t be seen in Artifacts. That’s where the second part of the prompt comes in. Sometimes re-iterating that part can help ensure things output as expected.

Other times, Claude breaks prototypes into multiple blocks of code or generates too much data. This can cause some parts of the prototype to get ignored. Reminding it you want to see it all in one place for an Artifact can be helpful.

Eventually, you may also see errors if Claude generates a lot of code but gets cut off because the code is too long. Tailwind helps with this, but the size of the code can still grow too big. If you hit this issue consider breaking your prototype into smaller parts that can be rendered in Artifacts and then combine them into code after the prototypes have helped fully flesh out the ideas.

Leave a comment below if you find other helpful tips and tricks along the way!