Frontend AI Design Studio

intermediate

Generate, inspect, motion-audit, and browser-test frontend UI iterations.

Architecture

Extract Design System

Extracts token candidates and visual references

74/100

npx skills add arvindrk/extract-design-system

Stitch Skills

Provides structured UI generation skills

80/100

npx skills add google-labs-code/stitch-skills --list

21st.dev Magic MCP

Generates frontend components through MCP

76/100

npx @21st-dev/cli@latest install <client> --api-key <key>

Design Motion Principles

Audits motion, accessibility, and interaction polish

73/100

npx add-skill kylezantos/design-motion-principles

Playwright MCP

Verifies the result in a real browser

92/100

npx @playwright/mcp@latest

Expected Output

Frontend AI Design Studio Design references extracted: 4 UI variants generated: 6 Motion findings: 5 Browser checks: 14 passed -> Reviewable frontend iteration ready

Related Recipes

Full-Stack Testing Suite

INTERMEDIATE

Complete testing pipeline with unit tests, E2E browser tests, and TDD workflow.

codetesting

3 components

Visual Technical Briefing

INTERMEDIATE

Create architecture diagrams, editable whiteboards, and browser-ready briefing decks.

docsdesigncode

4 components

Frontend Growth Launch

INTERMEDIATE

Design, test, optimize, and publish a conversion-oriented frontend experience.

frontenddesignmarketing

5 components