skills.rest
akornmeier
akornmeierCOMMUNITY
Explore all skills by this author →
𝕏@akornmeierGitHub

ui-cloner-forensic-audit

Analyze website UI to generate a Site DNA document with design tokens and architecture.

Updated Feb 3, 2026
Search Tags:#design tokens#web scraping#ui audit#ux research#animation audit#forensic analysis#site dna
One-click install
npx skills add https://github.com/akornmeier/clawd-config --skill ui-cloner-forensic-audit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-cloner-forensic-audit
Source: https://github.com/akornmeier/clawd-config/tree/main/skills/ui-cloner-forensic-audit
Command: npx skills add https://github.com/akornmeier/clawd-config --skill ui-cloner-forensic-audit

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the detailed forensic analysis of a target website, capturing its design tokens, motion patterns, and interaction behaviors to create a comprehensive "Site DNA" document.

Core Features & Use Cases

  • Deep Website Audit: Analyzes every aspect of a website's UI, from architecture to micro-interactions.
  • High-Fidelity Documentation: Generates detailed ASCII wireframes, design token tables, animation timelines, and composition maps.
  • Use Case: Before redesigning a competitor's website, use this Skill to perform a forensic audit to understand their exact design system, animation logic, and interactive elements.

Quick Start

Run a forensic audit on the website at 'https://example.com' in high-fidelity mode.

Frequently Asked Questions about ui-cloner-forensic-audit

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

FAQPage Schema
How do I extract design tokens and UI components from a website for cloning?▼

You can perform a forensic UI audit to extract design tokens, component blueprints, and motion patterns from a target website. This process generates a comprehensive Site DNA document detailing the technical stack and micro-interactions for cloning.

What is a Site DNA document in forensic web design analysis?▼

A Site DNA document is the high-fidelity output of a forensic UI audit, containing detailed ASCII wireframes, design token tables, animation timelines, and composition maps. It captures a website's complete interactive behavior and technical architecture.

Do I need browser automation tools to perform a website UI audit?▼

Yes, performing a forensic website audit requires browser automation tools and DevTools inspection capabilities to accurately capture page architecture, animations, and micro-interactions. These tools enable deep extraction of the target site's technical stack.

Can I capture CSS animation timelines and micro-interactions during a UI audit?▼

Yes, a forensic UI audit captures CSS animation timelines and micro-interactions by analyzing the target website's motion patterns. It documents these interaction behaviors within the generated Site DNA document for high-fidelity cloning.

What's the best way to analyze a competitor's design system before a redesign?▼

Performing a forensic audit is the best way to analyze a competitor's design system before a redesign, as it extracts exact design tokens, component blueprints, and animation logic. This generates a detailed Site DNA document for accurate UI cloning.

Does a forensic website audit generate documentation for component blueprints?▼

Yes, a forensic website audit generates high-fidelity documentation including detailed component blueprints, ASCII wireframes, and composition maps. This output provides the exact structural and visual specifications needed for UI cloning.

Related Skills

Explore More Design & Creative Skills→
tradertunantetradertunante

browser-testing-with-devtools

Inspect live web pages via Chrome DevTools MCP for UI debugging.

Community
Advanced
shaunandrewsshaunandrews
8

wordpress-mockups

Create WordPress/Gutenberg UI mockups from design tokens, icons, and components.

Community
Advanced
Xza85hrfXza85hrf

browser-control

Automate browser navigation, clicks, and data extraction via PinchTab commands.

Community
Intermediate
IziedkingIziedking
4

yield-strategies

Aggregate and filter DeFi yield pool data across protocols, chains, and token families.

Community
Intermediate