AI WORKFLOW

Design System

design-system
ChatGPT
arrow_right_alt
Figma
arrow_right_alt
Token Studio
arrow_right_alt
Sora
arrow_right_alt
Bolt
arrow_right_alt

Use ChatGPT to create your brand colors

Prompt

"As a design system engineer create me a JSON code I can import into Token Studio plugin for Figma using this color pallette. Make sure to add color ramps and system error colors that fit the same color palette."


Install Token Studio plugin inside of Figma.

Use Sora to generate a Figma Template using your JSON file

Prompt:
"As a UX Designer create a homepage template for a Portfolio websites. The header will have "[navigation]", "[logo]" use this color pallete [insert JSON file]"

Figma to Bolt

Inside of Bolt, use their Figma integration by first finding the layout you want to replicate and copying the Dev Frame and then copying that into Bolts Figma Frame feature.