taste-skill: AI가 만드는 지루한 랜딩페이지를 실제 브라우저에서 검증하는 법

코딩 에이전트가 웹페이지를 만들 때 흔히 보이는 '범용 AI 디자인'을 방지하는 에이전트 스킬이다. 단순한 코드 생성을 넘어 아트 디렉션을 부여하고, 실제 브라우저에서 결과물을 확인하는 과정을 포함한다. 247개 큐레이션 사이트를 연구해 만든 6단계 빌드 프로세스를 적용한다.

1 / 6

Wikimedia Commons, Openverse, Met 등 오픈 아카이브에서 저작권이 없는 실제 사진과 영상을 찾아 페이지에 배치한다. 모든 이미지에 크레딧을 자동으로 표기하며, React, Vue, Svelte, 일반 HTML 등 프레임워크에 구애받지 않고 동작한다. v2.1부터는 대시보드와 앱 화면도 실제 제품 스크린을 분석해 만든 규칙에 따라 생성한다.

완성된 페이지를 실제 브라우저에서 세 가지 폭으로 렌더링해 '슬롭(slop)' 여부를 검사한다. 에이전트가 자신의 스크린샷을 분석해 상위 3가지 문제를 최대 3회까지 수정하는 자기 검증 루프를 가진다. Awwwards Sites of the Day 상위 100개 사이트를 분석해 적용한 레이아웃과 모션 규칙도 포함된다.

Claude Code, Codex, Cursor 등 주요 코딩 에이전트와 호환되며, Node 22 이상과 Chrome 계열 브라우저만 있으면 API 키 없이 사용할 수 있다. 약 30~45분, 수십만 토큰의 비용으로 브랜드 아이덴티티가 담긴 웹페이지나 앱 화면을 생성하려는 개발자에게 적합하다.