Codex와 Claude Code의 프론트엔드 스킬은 어디서 품질을 확인하나

같은 프론트엔드 작업을 맡겨도 에이전트가 먼저 만드는 것은 다를 수 있다. OpenAI의 공식 플러그인 스킬 frontend-app-builder는 화면별 이미지 시안에서 시작한다. Anthropic의 Claude Code 공식 스킬 frontend-design은 제품에 맞는 색·글꼴·배치 계획부터 요구한다. 두 문서는 모두 상투적인 화면을 경계하지만, 품질을 확인하는 지점은 다르게 적어두었다.

Codex 스킬은 시안을 구현 기준으로 고정한다

frontend-app-builder는 새 웹사이트, 앱, 대시보드, 게임 화면과 명시적인 재설계 요청을 다룬다. 기본 순서는 이미지 생성으로 요청 범위 전체의 시안을 만들고, 채택한 시안에서 디자인 시스템을 뽑아 코드를 작성한 다음, 브라우저 화면을 시안과 대조하는 것이다. 기존 디자인 시스템 안의 작은 수정이나 사용자가 이미지 생성을 원치 않는 경우에는 시안 생성 규칙의 예외를 둔다.

한 페이지가 여러 구간으로 나뉘면 구간마다 읽기 쉬운 시안을 따로 만드는 것이 기본값이다. 복잡한 앱에서는 표·도구막대·모달처럼 전체 화면 이미지에서 작아지는 부분의 상태나 세부 시안도 요구한다. 이미지에 문구나 배치가 흐릿하게 보이는데 개발자가 추측해서 채우는 일을 줄이려는 절차다. 시안이 채택되면 색, 글꼴, 간격, 아이콘, 컴포넌트와 문구를 구현 기준으로 취급한다.

검증도 세밀하다. 스킬은 브라우저에서 주요 흐름과 모바일 화면을 확인하고, 채택한 시안과 최종 화면의 이미지를 직접 비교하며, 발견한 차이와 수정 결과를 기록하도록 지시한다. 빌드가 통과하고 버튼이 눌린다는 사실만으로 시각적 충실도를 확인했다고 보지 않는다. 다만 스킬이 말하는 ‘10/10 일치’는 측정된 성능 점수가 아니라 작업자가 목표로 삼으라는 품질 기준이다.

Claude Code 스킬은 첫 디자인 선택을 다시 묻는다

frontend-design은 제품의 소재, 사용자, 화면의 주된 일을 파악한 뒤 시각적 방향을 정한다. 첫 단계에서 이름 붙인 색상 4~6개의 코드, 글꼴의 역할, 배치 개념과 ASCII 와이어프레임, 이 화면만의 원칙을 짧게 적도록 한다. 그 계획을 다시 읽고 다른 제품에도 그대로 붙일 수 있는 선택이라면 고친 뒤 코드를 쓰라는 순서다.

금지 목록처럼 보이는 대목도 맥락에 따라 읽어야 한다. 크림색 배경과 세리프 제목, 산뜻한 형광색을 둔 검은 화면, 똑같은 둥근 카드 묶음은 모두 특정 제품에는 맞을 수 있다. 스킬이 경계하는 것은 그 요소가 제품과 무관하게 습관처럼 반복되는 일이다. 원래 브리프가 그런 스타일을 요구했다면 그대로 따르라고도 명시한다.

이 스킬은 글과 움직임까지 디자인의 일부로 본다. 버튼은 누르면 무엇이 일어나는지 알 수 있게 쓰고, 빈 화면과 오류 메시지는 다음 행동을 알려줘야 한다. 움직임은 사용자의 조작이나 중요한 변화에 집중한다. 모바일 대응, 키보드 포커스, 움직임 줄이기 설정도 품질의 기본선으로 제시한다. 스크린샷 검토를 권하지만, Codex 스킬처럼 채택 시안과 최종 화면을 반드시 나란히 검증하는 절차까지 고정하지는 않는다.

같은 요청에서 확인할 산출물이 달라진다

첫 산출물. Codex 스킬은 전체 화면과 필요한 상태의 이미지 시안을 요구한다. Claude Code 스킬은 색·글꼴·배치·원칙을 적은 짧은 디자인 계획을 요구한다.

코딩 전 확인. Codex 스킬은 채택 시안에서 컴포넌트와 스타일 기준을 추출한다. Claude Code 스킬은 계획을 브리프와 대조하고 흔한 선택을 고친다.

완료 증거. Codex 스킬은 브라우저 실행 화면과 시안의 차이를 기록한다. Claude Code 스킬은 구현 중 자기 비평을 하고, 환경이 허용하면 스크린샷을 검토한다. 이는 공식 지시의 차이이며 실제 결과물의 우열을 측정한 것은 아니다.

ZDL의 해석으로는 두 스킬이 다루는 실패 시점이 다르다. Claude Code 스킬은 제품과 상관없이 익숙한 미감으로 출발하는 일을 막는 데 시간을 쓴다. Codex 스킬은 정한 시안이 구현 과정에서 문구·밀도·색·동작을 잃는 일을 막는 데 더 많은 절차를 쓴다. 어느 쪽도 다른 문제를 무시하지는 않는다. Codex도 시안의 독창성을 요구하고, Claude Code도 코드와 접근성의 품질을 다룬다.

새 브랜드 사이트처럼 시각적 방향과 구현을 함께 정해야 한다면, 짧은 디자인 계획으로 제품의 성격을 먼저 명확히 하고 그 계획을 시안의 입력으로 쓸 수 있다. 여러 화면과 상태를 실제 제품으로 옮겨야 한다면 브라우저 비교까지 포함한 Codex 절차가 유용하다. 반대로 기존 디자인 시스템의 작은 화면 수정에서는 Codex 스킬 자체가 이미지 생성의 예외를 허용한다. 선택 기준은 도구 이름보다 이번 작업에서 디자인 방향과 구현 충실도 중 무엇을 더 확인해야 하는가에 있다.

이 비교는 2026년 9월 24일 공개된 두 공식 스킬 문서를 읽은 결과다. 같은 요구사항을 두 스킬에 각각 실행해 화면 품질, 작업 시간, 비용을 측정한 실험은 아니다. 따라서 위의 적용 판단은 문서에 적힌 절차를 바탕으로 한 ZDL의 해석이다.