brand-kit

You can extract a visual brand system from a URL by analyzing the website's computed DOM styles and screenshots. This process captures live palette, typography, and UI values to generate a reusable brand kit and HTML preview.

You can create a brand kit from existing brand files or from scratch using guided seed prompts. The process produces a durable markdown source of truth and a brand-styled HTML preview for downstream use.

Computed DOM extraction works better for brand analysis because it reads live browser computed styles rather than raw stylesheet variables. This ensures accurate capture of actual rendered palette and typography values.

You need Playwright to analyze a landing page because it enables fresh landing-page-summary generation and computed DOM extraction. It drives the live browser environment required to capture accurate visual styling and screenshots.

To ensure future content stays on-brand automatically, the skill appends an idempotent instruction to your user configuration file after the first build. This forces future branded generations to consult the saved kit.

Yes, you can build a brand system directly from website copy and messaging. The skill analyzes the target brand's landing page text to extract voice and messaging data, incorporating it into the final markdown source of truth.