Prompt Tools
Describe a design system’s foundation (modes, colors, spacing, sizes, radii, text styles and effects) and get two things: a prompt that builds exactly those variables and styles in Figma, and a design-system.md that records them for the Consistent Component Prompt Composer.
The composer runs in the browser, so it needs scripting turned on.
The form needs a design system’s modes, colors, spacing, sizes, text styles and effects, with their values. If they live in Figma, or you are starting fresh, an AI can write them out in the exact format the form reads. Any AI chat works, and one that can open your Figma file will be the most accurate.
I will use your answer to fill in a form, so follow the format exactly and write nothing outside it except a short note at the end. I need the foundation of a design system written out: its modes, colors, spacing, sizes, radii, text styles and effects, with every value. If you can read my Figma file through a Figma connection, use its real variables and styles. If you cannot, ask me to paste them or describe my system and use only what I give you. If I do not have a design system yet, ask me up to five short questions (brand colors, fonts, light and dark, how tight or airy the spacing should feel) and then propose one. Never invent a value for something I already have. Keep every name exactly as it appears: the same slashes and capitals. Write the whole answer in ONE code block, in this format: ## Name <the design system's name> ## About <two sentences on what the system is for> ## Modes <for example: Theme: Light, Dark. The first mode is the default.> ## Color <one line per color variable, as name = value for each mode in the order of the modes, split by |. For example: color/bg/brand = #49358D | #9E85C3> ## Spacing <one line per variable, as name = pixels. For example: space/2 = 8> ## Size <one line per variable, as name = pixels. For example: size/control/md = 44> ## Radius <one line per variable, as name = pixels. For example: radius/md = 8> ## Text styles <one line per style, as name = font, weight, size, line height. For example: Label/MD = Inter, Semibold, 16, 20> ## Effects <one line per style, as name = a plain description. For example: Focus/ring = outside ring, 3 px, color/bg/brand> ## Library components <one line per component other components reuse, as Name: how it is used> ## Naming - <one bullet per naming rule you can see> After the code block, add a short note listing anything you were unsure about or left out.
