Use LLM's to convert figma components

A task I had is to convert this figma design to a react component.

It's a button with 8 possible different states.

My patience was at 0 to write them by hand so I tried to use ai things as much as possible and see how good it works.

1. I used Builder.io figma plugin to generate the initial code. The way it works is that it uses the figma source json structure and feeds it to it's refined llm model.

Unfortunately it's not smart enough to see it all should be just one component and I had to get creative.

So I generated just one state, the default one and got something like this:

<button
      className="text-black text-center text-base leading-[106.667%] uppercase self-stretch min-w-[56px] justify-center items-center border border-[color:var(--primary-black,#000)] px-3 py-3.5 rounded-sm border-solid"
      onClick={handleChange}
    >
      {label}
    </button>

1. and then wrote this chatgpt prompt:

here is a button in react using tailwind: 
"{code from before}" 

This button has the state: Default Active 

Make this button support all the possible states:

1. Default Inactive: border #000, text #000, background transparent
2. Default Active: border #000, text #fff, background #000
3. SoldOut Inactive: border #7B7B7B, text #7B7B7B, background transparent, text strikethrough
4. SoldOut Active: border #7B7B7B, text #000, background #7B7B7B
5. Notify Inactive: same as SoldOut Inactive but with an icon near text
6. Notify Active: same as SoldOut Active but with an icon near text
7 Low Stock Inactive: same as Default Inactive but with a circle icon near text
7 Low Stock Active: same as Default Active but with a circle icon near text

Combine all these states in ONE react component and make it so you can pass PROPS to it to activate each

Because the state variations are quite small this solution worked quite well, in more complex cases I expect that generating all the states with the figma plugin and then combining them all in chatgpt can be optimal even though more prompt work will need to be done to not let it mess it all up.

Below are the prompts I used to refine what I got. Nothing special, standard chatgpt stuff

1. make this use tailwind instead of style
2. add typescript types
3. the states "active" and "inactive" are too combined. Isolate them so you can pass active true or false as a separate prop
4. having the react code that you generated above, convert all the colors to tailwind using tailwind theme of "copy paste of tailwind.config.js"
5. using this code convert the pixels to REM using the tailwind theme in base 10

this all works excellently while the model is knowledgeable enough about the asked task. It fails hard once it is being asked to use a specific library that it doesn't really knows about much.

One such library we had agreed to use in the team is cva (replaces switch with a fancy style state machine)

TODO