design-research

name	design-research
description	Research website design, styling, and frontend implementation using Playwright CLI to capture screenshots and analyze structure. Use when a software engineer wants to understand and implement a similar design. Keywords: design research, website design, frontend analysis, UI study, design system, screenshot, Playwright

Design Research

Research and analyze website design, styling, and frontend implementation to help engineers understand and replicate design patterns.

Overview

This skill uses Playwright CLI to systematically capture screenshots, inspect HTML structure, analyze CSS styling, and document design systems. It produces a comprehensive report covering layout, typography, colors, spacing, components, and implementation recommendations.

Prerequisites

Playwright CLI must be available. If not installed:

# Check if available
npx playwright --version

# Install if needed (user should approve)
npm install -D playwright
npx playwright install chromium

Instructions

When this skill is activated, follow this research workflow:

1. Validate Target URL

• Confirm the URL with the user if not provided
• Check if the site is publicly accessible
• Note: This skill works best with public websites; authentication flows require additional setup

2. Screenshot Capture Strategy

Use Playwright CLI to capture multiple views:

# Full page screenshot
npx playwright screenshot --full-page <URL> full-page.png

# Viewport screenshot (above the fold)
npx playwright screenshot <URL> viewport.png

# Mobile viewport
npx playwright screenshot --viewport-size=375,667 <URL> mobile.png

# Tablet viewport
npx playwright screenshot --viewport-size=768,1024 <URL> tablet.png


npx playwright screenshot --color-scheme=dark <URL> dark-mode.png