skills.rest
octavehq
octavehqOFFICIAL
Explore all skills by this author →
GitHub

octave-get-brand-components

Capture website design systems to generate reusable component kits with CSS and HTML templates.

Updated Apr 28, 2026
Search Tags:#automation#branding#design-system#ui-components#web-scraping#css-tokens
One-click install
npx skills add https://github.com/octavehq/lfgtm-codex --skill octave-get-brand-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: octave-get-brand-components
Source: https://github.com/octavehq/lfgtm-codex/tree/main/skills/octave-get-brand-components
Command: npx skills add https://github.com/octavehq/lfgtm-codex --skill octave-get-brand-components

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, pillow, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This skill solves the problem of visual inconsistency and manual design work by automatically capturing a brand's design system from its website and generating a reusable, high-fidelity component kit.

Core Features & Use Cases

  • Automated Design Capture: Scrapes websites to derive design tokens, typography, spacing, and component structures.
  • Reusable Component Library: Produces a self-contained HTML gallery, CSS tokens, and a machine-readable manifest for consistent branded output.
  • Use Case: When you need to generate on-brand collateral like battlecards or one-pagers for a specific company, use this skill to build a design kit that ensures your outputs look like they came directly from the target brand.

Quick Start

Use the octave-get-brand-components skill to capture the design system for acme.com and build a reusable component kit.

Frequently Asked Questions about octave-get-brand-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract a brand design system from a website automatically?▼

This skill captures a brand design system from a website by scraping visual elements to derive design tokens, typography, spacing, and component structures, generating a reusable component kit for UI consistency.

Can I generate reusable CSS tokens and HTML templates from web scraping?▼

You can generate reusable CSS tokens and HTML templates from web scraping. This skill produces a self-contained HTML gallery, CSS tokens, and a machine-readable manifest for consistent branded output.

Do I need Playwright installed to capture design tokens from a target site?▼

Playwright is required to capture design tokens from a target site. The skill also requires the Octave scrape tool and local file system access to store and manage the extracted brand assets.

What's the best way to build a component kit for on-brand collateral generation?▼

The best way to build a component kit for on-brand collateral is to capture the target brand's visual design system and generate a high-fidelity library, ensuring outputs like one-pagers look like they came directly from the brand.

Does web scraping for UI components work for ensuring branding consistency across multiple documents?▼

Web scraping for UI components works for branding consistency by generating a machine-readable manifest and reusable component library. This ensures all generated collateral maintains high-fidelity visual alignment with the target brand.

Related Skills

Explore More Design & Creative Skills→
octavehqoctavehq

get-brand-components

Extract design tokens and components from a website into CSS and HTML files.

Official
Advanced
athina-aiathina-ai
1.1k

content-asset-creator

Generate branded HTML content assets from structured data.

Official
Intermediate
Adelie-SquadAdelie-Squad
17

ui-designer

Create and apply design tokens for color, typography, and spacing.

Official
Intermediate
chlmmchlmm

create-user-skill

Generate instructional guides and templates for manually operated tools and workflows.

Community
Basic