Aesthetic Analysis

This is a landing page cloning tool that uses Playwright to screenshot reference sites, then iteratively rebuilds them in React Native until they match. It walks through capturing a design, extracting colors and typography, implementing it in your target file, then comparing screenshots and refining through 3-5 iterations until the visual fidelity is right. The workflow is methodical: capture, analyze, build, screenshot your version, compare, fix gaps, repeat. It's built for Expo projects and knows to work around React Native limitations like web fonts and shadow syntax. Useful when a client says "make it look like Stripe" and you need a systematic approach rather than eyeballing it. The iteration loop is the real value here.

skills.sh installs: 190
GitHub stars: 48
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add qodex-ai/ai-agent-skills --skill aesthetic-analysis --agent claude-code

Installs into .claude/skills of the current project.

Files

Landing Page Redesign

Instructions

When requested to redesign a landing page based on a reference:

1. User Interview

If not provided in the initial request, ask the user for:
- Reference URL or Image: The landing page or design to replicate (can be a live website URL or an image URL)
- Target Page: Which file in the codebase should receive the design (e.g., app/(tabs)/index.tsx, app/landing.tsx)
If details are provided in the initial request, skip to step 2

2. Capture Reference Design

Use Playwright MCP to open the reference URL:
- Navigate to the page
- Take a full-page screenshot to understand structure
- Interact with the website, mouse hover, click around
- Analyze the page deeply
Analyze the landing page/image for:
- Layout structure (header, hero, sections, footer)
- Interactive elements
- Color palette
- Typography (fonts, sizes, weights)
- Spacing and padding patterns
- UI components (buttons, cards, forms, etc.)
- Responsive design patterns