skills.rest
DeliciousHouse
DeliciousHouseCOMMUNITY
Explore all skills by this author →
GitHub

website-brand-analysis

Crawl a website to generate a Markdown brand bible and design-system CSS.

2|1|Updated Mar 8, 2026
Search Tags:#typography#brand#design-system#visual-design#color-palette#website-analysis#brand-bible
One-click install
npx skills add https://github.com/DeliciousHouse/aries-app --skill website-brand-analysis
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: website-brand-analysis
Source: https://github.com/DeliciousHouse/aries-app/tree/main/skills/website-brand-analysis
Command: npx skills add https://github.com/DeliciousHouse/aries-app --skill website-brand-analysis

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automatically turning a website into a cohesive brand bible with positioning, voice, design tokens, and visual guidelines, streamlining brand creation and design handoff.

Core Features & Use Cases

  • Live crawl of target pages and capture of full-page screenshots to build an accurate brand snapshot.
  • Extraction of colors, typography, spacing, and component patterns to generate a production-ready design system CSS.
  • Deliverables suitable for content and design teams, including a Markdown brand bible and a CSS design-system file.

Quick Start

Analyze the target website URL to generate a brand bible and a design system CSS file, returning both as outputs ready for review.

Frequently Asked Questions about website-brand-analysis

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

FAQPage Schema
How do I extract a design system CSS from an existing website?▼

You can extract a design system CSS by providing a target website URL; the skill performs a live crawl, captures full-page screenshots, and extracts colors, typography, and spacing to generate a production-ready CSS file.

What is a website brand bible and what does it include?▼

A website brand bible is a comprehensive document of visual and verbal guidelines. This skill generates one by analyzing live pages to include positioning, voice, extracted design tokens, and visual guidelines delivered in Markdown format.

Can I generate a brand bible and design tokens for multiple page types like blog and pricing?▼

Yes, you can generate a brand bible for various page types including marketing, product, pricing, about, and blog pages. The skill performs page-by-page analysis to ensure accurate component pattern extraction across all specified live site URLs.

How do I capture typography and color palette data from a live site?▼

To capture typography and color palette data from a live site, the skill performs live page crawling and screenshot capture, automatically extracting visual design elements to compile them into a cohesive brand snapshot and design tokens.

Does the generated design system CSS work for production handoff?▼

Yes, the generated design system CSS is production-ready for handoff. It extracts component patterns and design tokens directly from the crawled website, delivering a CSS file that content and design teams can immediately review and apply.

Related Skills

Explore More Design & Creative Skills→
while-basicwhile-basic

enact/firecrawl

Extract web page content as Markdown or structured data via the Firecrawl API.

Community
Advanced
vanducngvanducng
5

opendesign

Generate static HTML/CSS artifacts from a design-system catalog.

Community
Advanced
ncsound919ncsound919

visual-design-foundations

Standardize typography, color, spacing, and iconography into design tokens and guidelines.

Community
Advanced
DeliciousHouseDeliciousHouse
2

page-designer

Transform brand guidelines into self-contained HTML landing pages with inline CSS.

Community
Intermediate