Draft and change a DESIGN.md with AI

Goal

Use AI to get a first draft quickly and to adjust tokens by asking, while you keep the final say in the Raw text.

Before you start

• An API key from Groq, OpenAI or Google Gemini. The AI runs on your own key.

Steps

1. Add your API key Click Settings in the sidebar, open the API Key tab, choose the AI Provider (Groq AI, OpenAI or Google Gemini), paste the key, click Test & Detect Capabilities, then Save API Settings.
2. Draft from a website Click + New, type an address under From a URL, such as https://brand.com, and click Create. The AI is asked to write a DESIGN.md based on that site; when it answers, the draft lands in the Raw tab.
3. Open the AI tab With a document open, switch from Raw to AI. Type a request in the chat, for example "Set colors.primary to #1E40AF".
4. Check the change The AI changes tokens in the YAML block at the top of the document. The status line says how many tokens it updated. Switch back to Raw to read the result.
5. Save Changes from the chat are not saved on their own. Click Save to keep them.

Tips

• The chat knows that a DESIGN.md is open, but it does not read the document's text. Tell it the token paths and values you want rather than asking it to review the file.
• Add background about your project under Settings > Context; the chat uses it with every request.

Result

A DESIGN.md drafted or adjusted with AI, saved in your library.

If something goes wrong

• "Looks like AI is not set up yet." No provider is set. Add an API key under Settings > API Key.
• The chat answered, but nothing changed in the document. Name the token by its path at the top of the document, such as colors.primary. The chat can change top-level tokens and one level below them, not deeper ones like typography.body-md.fontSize; edit those in Raw.
• The website draft never appeared in the Raw tab. The plugin does not open the site itself; the result depends on your AI model. If the answer has no DESIGN.md in it, ask again in the chat or try another provider.

Related guides

• CREATE A DESIGN.MD
  Create a DESIGN.md file from your Figma design Click + New and start from your selection, the current page, your variables, an empty scaffold or a built-in example, then edit and save it.
  →
• ASSIGN TO FRAMES
  Assign a DESIGN.md to frames and recolor them Save the document, select frames, and click Assign. The layers are linked to the DESIGN.md and take on its palette; Reset assignment brings the old colors back.
  →