2025년 11월 14일6 min read@hovelopin

Playwright MCP와 Shadcn을 활용한 AI 기반 디자인 시스템 구축하기

임의의 웹사이트를 Playwright MCP로 분석해 디자인 시스템 명세를 뽑고, Shadcn MCP로 컴포넌트와 페이지까지 자동 구성한 실험.

#ai #mcp #shadcn #playwright #design-system

웹 개발을 하다 보면 마음에 드는 사이트의 디자인을 참고하고 싶을 때가 있습니다. 이 글에서는 Playwright MCP로 특정 웹사이트의 시각 구조를 분석하고, 그 결과를 Shadcn MCP에 넘겨 재사용 가능한 컴포넌트와 페이지까지 한 번에 만들어 보는 실험을 정리합니다.

1. Playwright MCP 셋팅

Playwright는 웹 페이지를 자동화·분석할 수 있는 도구입니다. MCP 버전은 Microsoft 공식 패키지가 있지만 설정 과정에서 문제가 있어, 동일한 기능을 제공하는 executeautomation/mcp-playwright를 대신 사용했습니다.

Cursor의 MCP Tools Setting에 다음을 추가합니다.

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@executeautomation/playwright-mcp-server"]
    }
  }
}

2. Playwright로 페이지 분석

설정이 끝나면 Playwright로 임의의 웹사이트를 시각적으로 분석할 수 있습니다. 이번에는 lovable.dev를 대상으로, 디자인 시스템과 스타일 가이드를 한 문서로 뽑아내도록 요청했습니다.

Playwright MCP를 이용해 https://lovable.dev/ 의 UI/UX를 따라할 수 있도록 디자인 시스템과 스타일 가이드라인을 만들고 싶어. xml 형태로 하나의 문서를 만들어줘.

요청을 보내면 Cursor가 Playwright 도구를 호출해 페이지에 직접 접속하고, 시각적 분석 결과를 XML 형식의 명세 파일로 정리해 줍니다.

lovable.dev 분석 결과 XML

XML을 쓴 이유

AI 모델은 자유 형식 텍스트보다 태그로 명시적으로 구조화된 입력을 더 잘 이해합니다. 그래서 디자인 시스템 명세처럼 컴포넌트·색상·타이포·간격이 위계로 묶이는 데이터는 XML로 두는 편이 후속 단계에서 더 일관된 결과를 만듭니다.

3. Shadcn MCP로 컴포넌트 구축

추출한 XML을 Shadcn MCP에 넘겨 디자인 시스템 컴포넌트를 만듭니다.

@lovable-design-system.xml 이 디자인 시스템을 기반으로 /ui-components 페이지를 만들어줘.

이 페이지에서는 디자인 시스템에 표현된 모든 컴포넌트를 한눈에 확인할 수 있어야 해.

이 컴포넌트들을 이용해서 다른 페이지들의 UI/UX를 구현할 거니까 잘 모듈화해줘.

Shadcn MCP로 만들 거고, 나만의 테마를 만들고 싶으니 globals.css를 적절히 수정/추가하면서 구현해줘.

명령을 받으면 Playwright로 분석한 페이지 정보를 바탕으로 필요한 컴포넌트 목록을 추리고, Shadcn MCP가 실제 코드를 생성합니다.

Shadcn MCP가 컴포넌트 생성하는 모습