Extract visual branding (colors, typography, layout patterns) from a client's website and generate a style preset compatible with the HTML slides skill and a brand config JSON for the content asset creator. Uses WebFetch to read pages and analyzes CSS/HTML to identify the color palette, font pairings, and aesthetic patterns.
SkillScore82Maintained
Automatic
◆Design & UX Review pack
Last verified 8/16/2026
What it changes
Passed 16 of 20 test cases with the skill, and 7 of 20 without it.
Without skill36%
With skill82%
Checks it passed that the model alone missed
The --accent CSS variable is assigned hex value #10B981.
The brand JSON schema includes the flat key font_heading.
The brand JSON schema includes the flat key primary_color.
and 13 more in the full report
10 fixed8 passed either way4 still failing0 broke
Pass-rate lift
+45 pp
Tokens
+144%
Agent turns
0%
Response time
-23%
Model gemini-3.6-flashMeasured 8/16/2026v118 of 22 cases passed with skill · 20 comparable
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 10 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 10
Prompt
When analyzing a site for Client Epsilon, DOM inspection shows Tailwind CSS utility classes bg-slate-900 on the root container and bg-slate-800 on cards. Extract the visual brand colors.
What was checked, without and with the skill
Checked
Without skill
With skill
The background color variable --bg-primary is assigned hex value #0F172A.
Missed
Passed
The secondary background color variable --bg-secondary is assigned hex value #1E293B.
Missed
Passed
case-11 · gemini-3.6-flash · 8/16/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md394 linessingle file
Visual Brand Extractor
Extract a client's visual identity from their website and generate reusable style presets for slides and content assets. This is an agent-executed skill — the AI reads pages via WebFetch and performs the analysis directly.
Quick Start
Extract visual branding from https://vapi.ai for the Vapi client.
Inputs
Input
Required
Description
Website URL
Yes
Client's homepage or landing page URL
Client name
Yes
For naming the output files
Additional pages
No
Product page, docs page, etc. for richer extraction
Output
Two files saved to clients/<client-name>/brand/visual-identity.md:
Slide preset — CSS custom properties, typography, and signature elements matching the format in skills/create-html-slides/STYLE_PRESETS.md
Brand config JSON — Simple color/font config matching skills/content-asset-creator format
Process
Phase 1: Fetch Target Pages
Fetch 2-3 pages to get a representative sample of the brand:
Homepage (mandatory) — the primary brand expression
Product/feature page (if available) — deeper color and layout usage
Blog or about page (optional) — secondary design context
Use WebFetch on each URL with a prompt like:
"Extract the full content of this page. I need: all color values (hex, rgb, hsl), font family names, CSS class names (especially Tailwind utility classes), any CSS custom properties/variables, meta tags, and the general structure of the page layout. Preserve exact color codes and font names."