Using a iterative prototyping process applied to build custom tools with AI
Using a iterative prototyping process applied to build custom tools with AI
This article is a case example of how to use the iterative process to ping-pong together with an AI to build a custom tool to maintain a json file with color tokens. As a designer code is not my primary tool. But to I am very familiar with building prototypes and working iterative.
So to all designers — your wellknow processes can be used to collaborate with AI as well.
User pain: The json file needs to be correct formatted in order to work as a source of truth in order for developers to generate the colors from it.
Establishing the correct output
First we inform our AI college about the json format we use. This establish a baseline for what is the correct output we are aiming for.
Now we were ready to build some features.
Missing commas
The first feature I prompted was to provide a error log that could help me find missing commas. The json structure is strict and I am not super familiar with it. So to get clear feedbackpointing to the correct line of the error was helpful.
Wrong reference / typos
Next up was fixing my typos. If a semantic is pointing to a non existing primitive it should cause an error.
Did I remember all of them?
Inn my figma library I can see how many variables I have. So I prompted the tool tell me how many I have in json. Makes it easy to see if the two numbers match.
Bad with alphabet
I am not super duper with the alphabet. So I prompted a sort function. Then I can add new values at the bottom and have them sorted by the script afterwards.
Beyond MVP
I now actually felt like I had everything I wanted from the tool. However as a visual person I would love to check that the colors looked correct. So I got the script to auto generate a simple page displaying all the colors.
Wrapping things up
Since I properly won’t be able to remember how to use this when I need it next time. -> Make me a readme file with instructions.
