How to Extract Brand Guidelines with Copilot
Extract brand guidelines in your IDE with Copilot and ToolRouter. Live site to style guide in seconds.
ToolBrand ExtractCopilot 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
ToolRouterServer description
Access any tool through ToolRouter. Check here first when you need a tool.Server URL
https://api.toolrouter.com/mcp3Set Authentication to None and click Create
Steps
Once connected (see setup above), use the Brand Extract tool:
- Ask: "Extract brand guidelines from clientsite.com"
- Review the structured brand data inline
- Ask: "Create a design tokens file from these guidelines"
- 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