CldKit
홈탐색RECIPES제출CLIAI 큐레이터로그인
로그인
CldKit
탐색Recipes제출CLI·소개개인정보약관

AI 개발자를 위해 만들었습니다. 모든 components 를 검토합니다.

© 2026 CldKit

언어
홈>Recipes>Frontend AI Design Studio

Frontend AI Design Studio

intermediate

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

아키텍처

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

예상 출력

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

관련 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

모두 설치

npx skills add arvindrk/extract-design-system
npx skills add google-labs-code/stitch-skills --list
npx @21st-dev/cli@latest install <client> --api-key <key>
npx add-skill kylezantos/design-motion-principles
npx @playwright/mcp@latest

난이도

intermediate

Components

5

생성일

May 1, 2026

장면

frontend
design
testing