DEV Community: Dan

Use LLM's to convert figma components

Dan — Fri, 03 Nov 2023 09:00:05 +0000

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.

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>

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

make this use tailwind instead of style
add typescript types
the states "active" and "inactive" are too combined. Isolate them so you can pass active true or false as a separate prop
having the react code that you generated above, convert all the colors to tailwind using tailwind theme of "copy paste of tailwind.config.js"
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

Make Tailwind Intelisense Work Everywhere in Vscode

Dan — Wed, 01 Nov 2023 16:12:11 +0000

If you're using the Tailwind CSS IntelliSense vscode extension you might have noticed that this

const tailwindClasses = "text-15 p-6"

will not show any tooltips.

The easiest method without using something like Class Variance Authority if you don't need state machines is to

const tw = String.raw

const tailwindClasses = tw`text-15 p-6`

and add to settings.json

"tailwindCSS.experimental.classRegex": [
    "tw`([^`]*)"
  ]

Very similar in how people use gql

Make Github Copilot Work in Wsl With Zscaler

Dan — Sat, 02 Jul 2022 23:45:09 +0000

TLDR: replace every occurence of rejectUnauthorized: x to rejectUnauthorized: false in ~/.vscode-server/extensions/github.copilot-xxx/dist/extension.js and restart vscode

There is an ongoing issue with copilot in vscode in that it doesn't pick up the system chain of certificates and instead uses a hardcoded list of certificates. This causes problems with zscaler and similar man in the middle apps that causes it to fail to activate because it doesn't trust the certificate and gives the error Extension activation failed: "unable to get local issuer certificate".

There are several ways to fix this proposed on the internet:

use win-ca or mac-ca vscode extension to make available the additional certificates
add zscaler self-signed certificate in Chrome by going to chrome://settings/privacy more
run code --ignore-certificate-errors

The only way that worked for me though and unfortunately the most hacky is to change in the extension bundle rejectUnauthorized to false

open ~/.vscode-server/extensions/github.copilot-xxx/dist/extension.js
search every occurrence of rejectUnauthorized:[a-z] regex find and change to rejectUnauthorized: false
Important!! In some cases rejectUnauthorized will be as part of an destructured object. For example when having

const {
  h1: r,
  options: { h1: i, rejectUnauthorized: s },
} = e;

change it to

const {
  h1: r,
  options: { h1: i, rejectUnauthorized: s },
} = { ...e, options: { ...e.options, rejectUnauthorized: false } };

restart vscode

Based on https://github.com/github-community/community/discussions/8866 and https://stackoverflow.com/questions/36506539/how-do-i-get-visual-studio-code-to-trust-our-self-signed-proxy-certificate