Prompt Tools
Paste the design system’s Figma variables and styles, then spec the component. Token fields accept only names from that list, raw values such as #1F5BD6 or 16px are blocked, and the prompt adapts to the model and the tool in use.
The composer runs in the browser, so it needs scripting turned on.
The composer needs the names of your design system’s variables, styles, modes and components. If they already live in Figma, an AI can write them out in the exact file this tool loads. 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 tool, so follow the format exactly and write nothing outside it except a short note at the end. Look at my design system and write a file called design-system.md. If you can read my Figma file through a Figma connection, use its real variables, styles and components. If you cannot, ask me to paste them (a variables export or a plain list of names is fine) and use only what I give you. Never invent a name. Keep every name exactly as it appears: the same slashes and capitals. Write the whole answer in ONE code block, in this format: --- format: design-system-md/1 name: <the design system's name> figma_file: <the Figma link, or leave this line out> updated: <today's date as YYYY-MM-DD> --- ## About <two sentences on what the system is for> ## Tokens <one line for every variable or style, as kind: name, with no values. The kinds are color, spacing, size, radius, typography, effect and other. For example: color: color/bg/brand> ## Modes <one line for every set of modes, for example: Theme: Light, Dark> ## Library components <one line for every component other components reuse, as Name: how it is used. For example: Icon: used through instance swap> ## Components - <the name of every component that already exists> ## Naming - <one bullet for every naming rule you can see, such as how layers and properties are capitalized> After the code block, add a short note listing anything you were unsure about or left out.
