What problem does it solve? Maintaining consistent brand identity across generated designs requires manually tracking colors, fonts, spacing, and logos for every project. This Skill centralizes brand tokens in a design system store and applies them automatically to generated HTML. ## Core Features & Use Cases - Design System CRUD: Create, read, update, list, and set default design systems storing colors, typography, spacing, borders, and logos via actions like create-design-system and update-design-system. - Multi-Source Brand Import: Extract design tokens from websites, GitHub repositories, local code files, documents (DOCX, PPTX, PDF), and existing projects, then synthesize them into a unified DesignSystemData schema. - Token Application: Replace default CSS custom properties, Google Fonts links, logos, and custom CSS in generated HTML with the linked design system's tokens, and seed tweak options with brand values. - Use Case: A user provides a company website URL and a brand PowerPoint; the agent imports both sources, merges the extracted tokens, creates a design system, and applies it to every generated design for that brand. ## Quick Start Ask the agent to import brand tokens from your company website URL and create a design system, then apply it to your next generated design.
