ddd

Validate UI design intent via Playwright MCP screenshot checks across desktop, tablet, and mobile viewports.

1|Updated Jan 6, 2026
One-click install
npx skills add https://github.com/Levezze/devkit --skill ddd-levezze
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ddd
Source: https://github.com/Levezze/devkit/tree/main/skills/ddd
Command: npx skills add https://github.com/Levezze/devkit --skill ddd-levezze

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

DDD helps you validate UI design intent by checking what users will actually see, avoiding slow and brittle automated visual test suites.

Core Features & Use Cases

  • Greenfield loop (build → verify → fix): Create a visual checklist, build the UI, screenshot at key viewports, verify, and iterate until the design matches.
  • Regression loop (before/after verification): Capture a baseline screenshot, specify exactly what should change and what must be preserved, implement updates, then confirm the result improved without unintended breakage.
  • Viewport-first design checks: Uses a consistent set of breakpoints (Desktop, Tablet, Mobile) so layout and visual hierarchy are verified across responsive states.
  • Tooling approach: Uses Playwright MCP screenshot checks for quick visual confirmation rather than DOM/computed-style assertions.

Quick Start

Use the ddd skill to create a visual checklist, then run the Playwright MCP screenshot verification at 1280×800, 768×1024, and 375×812 to confirm your UI matches the intended design.

Frequently Asked Questions about ddd

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

FAQPage Schema
How do I verify UI design visually without slow computed-style assertions?▼

Visual regression testing via Playwright MCP screenshot checks validates UI design intent by capturing what users actually see across viewports, replacing brittle automated DOM and computed-style assertions with fast visual confirmation.

What's the best way to test responsive layouts across desktop, tablet, and mobile viewports?▼

Responsive layout testing uses Playwright MCP to resize and screenshot at key breakpoints like 1280×800, 768×1024, and 375×812, verifying layout and visual hierarchy across desktop, tablet, and mobile states.

How do I perform visual regression testing for UI restyling changes?▼

Visual regression testing captures a baseline screenshot, specifies what should change and what must be preserved, implements updates, then confirms via targeted re-screens that the result improved without unintended breakage.

Can I use Playwright for screenshot testing instead of DOM assertions?▼

Playwright MCP screenshot checks provide quick visual confirmation of UI design intent, bypassing slow computed-style assertions to validate component, page, and layout work across multiple viewport sizes.

How do I create a checklist-driven workflow for greenfield UI building?▼

Greenfield UI building uses a visual checklist workflow to build the UI, capture screenshots at key viewports, verify pass/fail against the design, and iterate with targeted re-screens until the visual intent matches.

Does visual regression testing work for preserving existing layouts during updates?▼

Preservation checks in visual regression testing confirm that implemented updates improve the design without unintended breakage, validating what must be preserved through before and after screenshot verification.