에이전트 skill은 웹 페이지를 어떻게 바꾸는가
같은 프롬프트로 Codex와 Claude Code가 각각 웹 디자인 skill(SKILL.md)을 쓸 때와 쓰지 않을 때 페이지를 만듭니다. 각 프롬프트는 Codex 네이티브, Codex + skill, Claude Code 네이티브, Claude Code + skill의 2×2 구성으로 실행됩니다. 네이티브 셀은 모든 skill이 공유합니다.
46개 셀 중 46개 실행 완료.
개요
행은 skill, 열은 프롬프트입니다. 각 칸의 왼쪽은 Codex 결과, 오른쪽은 Claude Code 결과입니다(페이지 상단, 데스크톱 너비).
landing-saasdashboardblog-portfolio
Skill
frontend-design
Anthropic의 공식 프런트엔드 디자인 skill입니다. 코드를 작성하기 전에 디자인 방향(팔레트, 서체, 레이아웃, 원칙)을 먼저 정하고, 흔한 AI 기본값과 비교해 점검하도록 에이전트에게 요구합니다. 지침만 있고 스크립트는 없습니다.
anthropics/skills · Apache-2.0 · 6개 셀 중 6개
ui-ux-pro-max
커뮤니티에서 만든 UI/UX 지식 베이스 skill입니다. 로컬 CSV 데이터(스타일, 팔레트, 폰트 조합, UX 규칙, 차트 유형, 기술 스택)와 Python 검색 스크립트로 구성되며, 에이전트가 페이지를 작성하기 전에 디자인 시스템을 만들어 냅니다.
nextlevelbuilder/ui-ux-pro-max-skill · MIT · 6개 셀 중 6개
web-design-engineer
출력이 항상 HTML(페이지, 대시보드, 프로토타입, 슬라이드, 데이터 시각화)인 프런트엔드 디자인 skill입니다. 디자인 방향을 정하는 단계로 시작하며, 25가지 스타일 레시피를 함께 제공합니다. 지침만 있고 스크립트는 없습니다.
ConardLi/garden-skills · MIT · 6개 셀 중 6개
taste-skill (
design-taste-frontend)taste-skill v2: 웹사이트와 앱 화면을 위한 아트 디렉션입니다. 스크립트가 247개 사이트를 연구한 방향 라이브러리에서 세 가지 방향을 제시하면, 에이전트가 고른 방향으로 페이지를 만들고 함께 들어 있는 검사 도구로 실제 브라우저에서 확인합니다. 지침과 Node 스크립트로 이루어져 있으며 Node 22 이상, Chrome, 그리고 이미지를 찾기 위한 네트워크가 필요합니다.
Leonxlnx/taste-skill · MIT · 6개 셀 중 6개
frontend-ui-engineering
Addy Osmani가 만든 엔지니어링 품질의 프런트엔드 skill입니다. 접근성 있고 반응형인 UI, 로딩·빈 상태·오류 상태, 시맨틱 토큰, 그리고 피해야 할 “AI 스타일” 기본값 표를 다룹니다. 지침만 있고 스크립트는 없습니다.
addyosmani/agent-skills · MIT · 8개 셀 중 8개
theme-factory
Anthropic의 테마 도구 모음입니다. 글꼴 조합이 딸린 프리셋 색상 팔레트 10개(또는 생성한 사용자 지정 테마)를 랜딩 페이지 같은 완성된 결과물에 적용합니다. 색상과 서체만 다루며 레이아웃은 다루지 않습니다. 지침, 작은 테마 파일 10개, 쇼케이스 PDF로 이루어져 있습니다.
anthropics/skills · Apache-2.0 · 6개 셀 중 6개
프롬프트
SaaS 랜딩 페이지
가상의 온콜 일정 관리 도구 Rotaline의 마케팅 페이지입니다. 제품 일러스트가 들어간 히어로, 기능, 사용 단계, 성과, 고객 후기, 월간/연간 전환 토글이 있는 요금제, FAQ, 푸터로 구성됩니다.
landing-saas· 버전 1 · 14개 셀 중 14개데이터 대시보드
Kestrel Coffee Roasters의 매출·운영 대시보드입니다. KPI 카드, 채널 필터가 있는 월별 매출 차트, 카테고리별 비중, 정렬 가능한 카페 표, 최근 주문, 재고 경고로 구성되며 모두 고정 데이터를 사용합니다.
dashboard· 버전 1 · 14개 셀 중 14개개인 블로그 및 포트폴리오
가상의 프로덕트 디자이너 Maya Lindqvist의 원페이지 사이트입니다. 사례 연구 4개, 필터링 가능한 글 목록, 전체 글 1편, 타임라인이 있는 소개 섹션, 뉴스레터 양식, 라이트/다크 전환으로 구성됩니다.
blog-portfolio· 버전 1 · 14개 셀 중 14개폼과 피드백 컴포넌트 상태 쇼케이스
가상의 온라인 은행이 쓰는 폼과 피드백 컴포넌트 참고 페이지로, 모든 상태를 한꺼번에 보여 줍니다. 텍스트 입력, 선택 컨트롤, 버튼, 이체 목록(로딩, 빈 상태, 오류, 데이터 있음), 안내 메시지, 이체 폼.
form-states· 버전 1 · 4개 셀 중 4개
방법
| 에이전트 | 모델 | Effort | CLI 버전 | 실행 |
|---|---|---|---|---|
| Codex CLI | gpt-6.1-sol | high | 0.164.0 | 23회 |
| Claude Code | claude-opus-5-5 | high | 2.1.308 | 23회 |
모델과 effort는 실행 스크립트에 고정되어 있습니다. 표에는 run.json 파일에 기록된 값을 표시합니다.
- 셀마다 한 번만 생성, 결과 골라내기 없음
- 각 셀은 후속 턴 없이 한 번에 한 번만 생성합니다. 결과는 실패한 실행을 포함해 나온 그대로 보여 줍니다. 셀을 다시 실행하면 이전 시도는
runs/<prompt>/_attempts/에 보관됩니다. - 네 셀 모두 같은 프롬프트
- 프롬프트는 스타일 형용사 없이 중립적인 표현으로 작성했습니다. skill 셀에는 skill 이름을 지정하는 마지막 문장 하나만 덧붙입니다. Claude Code는
Use the <name> skill., Codex는Use the $<name> skill.입니다. - 격리
- 모든 실행은 저장소 밖의 새 임시 디렉터리에서 시작하며, 빈
HOME, 전용 설정 홈(CLAUDE_CONFIG_DIR또는CODEX_HOME), 처음부터 새로 구성한 환경을 사용합니다. 사용자 설정, 플러그인, 사용자 수준 skill, MCP 서버, 메모리는 전혀 로드하지 않습니다. 테스트 대상 skill은 해당 임시 프로젝트의 skill 폴더(.claude/skills/또는.agents/skills/)에만 복사합니다. 각 CLI에 번들된 skill은 그대로 사용할 수 있으며 네이티브로 간주합니다. 근거는 각 에이전트의 자체 로그에서 가져오며run.json의isolation항목에 저장됩니다. - skill이 실제로 호출되어야 함
- skill 셀은 로그에 skill이 로드되었다는 기록(
skill_triggered)이 있어야 합니다. 기록이 없으면 그 셀은 skill 결과로 보여 주지 않고 실패로 표시합니다. - 스크린샷
- 네트워크가 유휴 상태가 되고 폰트가 로드된 뒤, 애니메이션을 끈 상태에서 1440 CSS px 및 390 CSS px 너비로 전체 페이지를 캡처합니다 (playwright 1.64.1, playwright-chromium 156.0.8078.4). 썸네일은 페이지 상단을 보여 줍니다. “페이지 열기”를 누르면 원본
index.html을 샌드박스 iframe(sandbox="allow-scripts", same-origin 접근 불가)에서 불러옵니다. - 접근성 검사
- 각 페이지는 자동 접근성 검사 도구로도 확인하며, 위반 수를 심각도별로 보여 줍니다. 자동 검사는 접근성 문제의 일부만 다룹니다(예를 들어 대체 텍스트나 포커스 순서가 적절한지는 판단하지 못합니다). 따라서 이 숫자는 참고용이며 결론이 아닙니다.
- 스크롤 녹화
- 움직임은 스크린샷에 나타나지 않으므로, 일부 셀에는 데스크톱 너비에서 페이지를 스크롤한 짧은 녹화도 있습니다. 셀 페이지에서 재생을 누를 때만 불러옵니다.
- 실행 날짜
- 2026-10-25 – 2026-10-26 (UTC), 셀 46개.
- 투표
- 각 결과 페이지에서 giscus로 👍 투표를 할 수 있습니다. giscus는 서드파티 위젯으로, 결과 페이지를 열었을 때만 로드되며, 갤러리의 다른 페이지에서는 로드되지 않습니다. 투표하려면 GitHub 로그인이 필요합니다. 투표는 이 저장소의 GitHub Discussions에 반응으로 저장되며, 셀마다 토론 하나를 모든 언어가 함께 사용합니다. 비교 페이지의 득표수는 몇 시간마다 갱신됩니다. 득표수는 방문자의 선호를 보여 줄 뿐 평가 결론이 아닙니다.
알려진 한계
- 네이티브는 skill이 하나도 없는 상태가 아니라 기본 설치 상태를 뜻합니다. 네이티브 셀을 포함한 모든 셀에서 각 에이전트에 기본으로 들어 있는 skill을 사용할 수 있습니다. Claude Code에 내장된 skill 19개와 Codex의 시스템 skill(
imagegen,openai-docs,skill-creator,skill-installer)입니다.dashboard프롬프트에서는 Claude Code에 내장된datavizskill이 스스로 두 번 실행되었습니다.claude__native에서 한 번,claude__frontend-design에서 한 번이며,run.json의builtin_skills_used에 기록되어 있습니다. 이는 의도한 것입니다. 독자가 에이전트를 설치했을 때 실제로 얻는 결과를 비교하기 때문입니다. - 격리는 “아무것도 로드하지 않음”을 뜻할 뿐, “아무것도 읽을 수 없음”을 뜻하지는 않습니다. 에이전트는 여전히 디스크의 나머지 부분을 읽을 수 있습니다. Codex의 기본
workspace-write샌드박스는/를 읽을 수 있고,bypassPermissions로 실행한 Claude Code에는 샌드박스가 없습니다. v0 실행에서는 에이전트가 상위 디렉터리에서AGENTS.md를 찾았고, 한 에이전트는 운영자의 npm 캐시에 있던 Playwright를 사용했습니다. 더 강한 격리(별도 사용자 계정이나 컨테이너)는 향후 과제입니다. - 스크린샷 속 고정 사이드바. 전체 페이지 캡처는 높이가
100vh인position: fixed또는sticky요소를 첫 화면 높이로만 그리기 때문에, 대시보드 사이드바가 900 px에서 끊긴 것처럼 보일 수 있습니다. 이는 페이지가 아니라 캡처 방식 때문입니다. - 샘플 하나로는 벤치마크가 되지 않습니다. 각 셀은 한 번 생성한 결과입니다. 갤러리는 점수가 아니라 skill이 보이는 경향을 보여 주는 예시로 보아야 합니다.