조합 레시피중급개발·코딩디자인·프론트

웹 화면 만들고 브라우저로 직접 테스트하기

기능 개발 플러그인으로 설계와 구현을 하고, 디자인 스킬로 화면을 다듬은 뒤, 실제 브라우저로 눌러 보며 확인해요.

준비물

플러그인·모드중급공식

기능 개발 플러그인

/feature-dev로 코드 탐색, 설계, 구현, 리뷰까지 7단계로 나눠 새 기능을 만들어요.

스킬중급공식

프론트엔드 디자인 스킬

frontend-design

흔한 AI 느낌을 벗어난 개성 있는 웹 화면을 만들도록 글꼴, 색, 애니메이션, 디테일을 안내해요.

MCP입문공식

플레이라이트 브라우저 MCP

클로드가 실제 브라우저를 열어 페이지를 이동하고, 클릭하고, 입력하고, 화면을 읽을 수 있게 해요.

스킬중급공식

웹앱 테스트 스킬

Playwright로 내 컴퓨터에서 돌아가는 웹앱을 열어 동작을 확인하고, 화면을 찍고, 브라우저 로그를 봐요.

목표

"만들었는데 막상 눌러 보니 안 돼요"를 줄이기. 클로드가 만든 화면을 클로드가 직접 써 보게 해요.

1. 설치

/plugin install feature-dev@claude-plugins-official
/plugin install frontend-design@claude-plugins-official
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

터미널에서 브라우저 MCP도 추가하세요.

claude mcp add playwright npx @playwright/mcp@latest

2. 기능 설계와 구현

/feature-dev 상품 목록에 가격순 정렬과 검색 추가

탐색, 설계, 구현, 리뷰 단계를 차례로 거쳐요. 설계 단계에서 질문이 오면 답해 주세요.

3. 화면 다듬기

이 목록 화면을 흔한 템플릿 느낌이 안 나게 다듬어 줘. 글꼴과 여백부터.

4. 브라우저로 확인

개발 서버를 띄우고 브라우저로 목록 페이지를 열어서 정렬과 검색을 직접 써 봐. 모바일 너비에서도 확인하고 문제가 있으면 고쳐 줘.