Agent skill · aaaaqwq
brand-design-language-reverse
Reverse-engineer the design language of any live website into structured, immediately-usable CSS design tokens, interaction/motion rules, and a feel- reproducing "recipe". Feed it a URL (Apple, FlexClip, Flourish, Stripe, Linear, any brand or SaaS site) and it produces a full breakdown — color system, typography rhythm (exact body line-height/weight, heading weights, clamp formulas), interaction & motion (hover/focus property changes, transition duration, keyframes, image-hover treatment, link-underline tricks, page-transition behavior), components, icon/animation technique, tech stack — plus ready-to-copy tokens and a replication quality gate. Colors alone never clone a site; this digs the CSS rules that make it *feel* right. MAKE SURE to use this skill whenever the user wants to: study a real site's design, copy the look/feel/colors/fonts of a competitor or admired brand, extract a brand's visual language before rebuilding it in React/CSS, compare how different products do UI, or turn an existing brand into tokens. Also use when the user asks "what tech does X use", "how did they style that", or wants to recreate a site's component style in their own project — even if they don't name the skill.
What it needs
About 7k tokens when loaded.
What this skill does
Brand Design Language Reverse Turn any live site into a copy-paste design system. Reads a real URL, extracts what is observable (colors, fonts, component patterns, icon/animation technique, framework), and outputs a five-part report ending in usable CSS tokens. Analysis + delivery in one pass. When to Use You admire a brand/product and want to recreate its visual feel in your own project (landing, dashboard, component). You need a competitor's palette/type/components as a reference before designing. Someone asks "what tech/framework does that site use?" or "how did they do that animation/icon?". You are starting UI work and want a grounded, real-world reference instead of guessing at colors and patterns. Core Principles 1. Evidence over guessing. Distinguish three confidence levels in every report (see grading below). Never present an industry-known value as if you scraped it, and never invent values. 2. Observe, don't reverse-engineer internals. Inspect the public HTML/CSS/JS the server sends. Do not decompile, do not probe authenticated product internals, do not harvest private endpoints. Marketing/home pages are public and fair game; a logged-in editor is not. 3. Deliver working output. End every run with a concrete tokens.css / component snippet the user can drop in, not just an analysis essay. Evidence Grading Annotate each claim in the report so the user knows what to trust: Grade Meaning Example ------- --------- --------- [observed] Read directly from served HTML/CSS this run inline #00b67a present in page styles [inferred] Reasoned from a visible pattern / public CSS variable gradient palette derived from two observed stops [known] Industry-public fact (Apple brand blue #0071e3) but NOT read this run mark it clearly as known, not scraped Workflow: URL → Design Tokens 1. Fetch the target URL Use WebFetch (or curl for raw inspection) on the public page. 2. Extract the five dimensions Gather raw evidence into a working notes table. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aaaaqwq/brand-design-language-reverse