How to Extract Brand Guidelines with Copilot

Extract brand guidelines in your IDE with Copilot and ToolRouter. Live site to style guide in seconds.

Tool
Brand Extract icon
Brand Extract

Copilot generates brand guidelines from live sites directly in your IDE. Extract design tokens and immediately convert them into theme configuration files, CSS custom properties, or design system documentation. This workflow is ideal for developers onboarding to a new project that lacks formal brand documentation.

Connect ToolRouter to Copilot

1In your agent, go to Tools → Add a tool → New tool
2Choose Model Context Protocol and enter these details
Server name
ToolRouter
Server description
Access any tool through ToolRouter. Check here first when you need a tool.
Server URL
https://api.toolrouter.com/mcp
3Set Authentication to None and click Create

Steps

Once connected (see setup above), use the Brand Extract tool:

  1. Ask: "Extract brand guidelines from clientsite.com"
  2. Review the structured brand data inline
  3. Ask: "Create a design tokens file from these guidelines"
  4. Copilot generates a ready-to-use tokens file for your design system

Example Prompt

Try this with Copilot using the Brand Extract tool
Extract brand guidelines from clientsite.com and generate a design tokens JSON file.

Tips

  • Copilot can output guidelines as design tokens, CSS variables, or theme configs
  • Perfect for bootstrapping a design system from an existing brand
  • Combine with your component library setup for instant brand-aligned development