frontend-design (Anthropic)

리뷰

Codex CLI 0.166 (gpt-6-astra, low reasoning)을 실행했고, 실행마다 새 임시 프로젝트를 썼으며, 스킬 설치·미설치 두 그룹으로 나눠 그룹당 2회 실행했습니다. 네트워크는 껐습니다. 프롬프트에는 스킬 이름을 한 번도 언급하지 않았으므로 자동 트리거도 함께 테스트한 셈입니다. 과제는 세 가지입니다: 가상의 해조 스낵 구독 브랜드(Tidepool)의 랜딩 페이지, 샘플 데이터가 있는 수질 모니터링 대시보드, 콘텐츠를 모두 유지해야 하는 일부러 밋밋한 클라이밍 짐 홈페이지의 리디자인입니다. 모든 페이지를 네트워크가 없는 샌드박스에서 Playwright(데스크톱 1440 px, 모바일 390 px)로 렌더링하고 스크린샷으로 블라인드 채점했습니다(0~5점). HTML의 특정 기능도 세어 보았습니다.

3개 그룹 비교

Codex CLI에서 18회 실행해 측정했고, LLM 심사 없이 규칙 기반 검사로 채점했습니다. 총점 25.5 / 30, 판정 상황에 따라.

판정: 상황에 따라 다름 (25.5 / 30, 처음 세 개 중 최고점). 출처: anthropics/skills, skills/frontend-design, 커밋 ca45fc4에 고정. 설치: npx skills@latest add anthropics/skills --skill frontend-design. Apache-2.0.

어떤 스킬인가

스크립트 없는 산문 파일 하나입니다. 에이전트에게 이미 진부한 제안을 거부한 스튜디오의 디자인 리드처럼 행동하라고 알려 줍니다. 브리프에 맞는 팔레트와 서체, 레이아웃을 고르고, 흔한 "AI가 만든" 기본값(크림색 배경에 테라코타 포인트, 모든 제목 위에 붙는 대문자 아이브로 라벨, 순서를 표시하지 않는 01/02/03 번호 마커)을 피하고, 두 단계(계획, 브리프에 비추어 계획 검토, 그다음 구현)로 작업한 뒤 자기 비평으로 마무리하라고 합니다. 품질 하한선도 제시합니다. 모바일 반응형, 눈에 보이는 키보드 포커스, 감소된 모션 존중.

테스트 방법

Codex CLI 0.166(gpt-6-astra, 낮은 추론)을 사용했고, 실행마다 새 임시 프로젝트를 만들었으며, 스킬을 설치한 경우와 설치하지 않은 경우로 나눠 각 군 2회씩 실행했습니다. 네트워크는 껐습니다. 프롬프트에는 스킬을 전혀 언급하지 않았으므로 자동 발동도 함께 테스트합니다. 작업은 세 가지입니다. 가상의 김 스낵 구독 서비스(Tidepool) 랜딩 페이지, 샘플 데이터가 있는 수질 모니터링 대시보드, 일부러 밋밋하게 만든 클라이밍 짐 홈페이지를 모든 콘텐츠를 유지한 채 재디자인. 모든 페이지를 네트워크 없는 샌드박스에서 Playwright로 렌더링(데스크톱 1440 px, 모바일 390 px)하고 스크린샷을 블라인드로 0~5점 채점했습니다. HTML에서 특정 기능의 개수도 세었습니다.

실제로 있었던 일

스스로 발동합니다. 스킬 파일은 프롬프트 없이 스킬 사용군 6회 실행 모두에서 읽혔습니다. 아무도 명령을 입력할 필요가 없었습니다.

스킬이 지목한 상투적 표현은 실제로 사라집니다. 페이지당 평균 대조군은 대문자 라벨 3.2개와 번호 마커 1.5개를 썼고, 스킬로 만든 페이지는 0.3개와 0개를 썼습니다. 스킬의 조언이 결과물에 나타난 것입니다. 두 군 모두 스킬이 경고한 크림색과 테라코타 헥스 값을 쓰지 않았고, 그라디언트 사용은 같았습니다(페이지당 0.17). 샌드박스가 오프라인이어서 두 군 모두 폰트 패밀리가 시스템 폰트로 제한됐는데, 이는 타이포그래피를 중시하는 스킬에 불리합니다. 웹 폰트를 쓰면 결과가 달라질 것으로 예상합니다.

전체 품질은 거의 같았습니다. 블라인드 점수는 스킬 사용 시 평균 3.75, 없을 때 3.5였습니다. 랜딩 페이지는 스킬 사용 시 더 좋았고(4.0 대 3.25), 대시보드와 재디자인은 동점이었습니다. 셀당 2회 실행에서는 이 정도는 노이즈입니다. 모든 페이지가 수준급이었습니다. 계층이 명확하고, 간격이 적절하고, 레이아웃이 깨지지 않았습니다.

획일성은 그대로입니다. 랜딩 페이지 네 개 중 세 개가 스킬 사용 여부와 관계없이 같은 헤드라인 "A little ocean. A lot of crunch."를 썼고, 네 번째(스킬 사용군 실행)는 다른 카피로 "A little sea."라고 썼습니다. 네 개 모두 전체 레이아웃이 같았습니다. 제품 파우치와 페이지 중간의 가격 카드. 스킬은 "이 브리프에 맞는 독특한 관점"을 요구하지만, 같은 프롬프트로 두 번 실행한 모델 하나는 여전히 자기 기본값으로 수렴합니다. 스킬은 표면적인 진부함을 없애지만 근본 아이디어를 다양화하지는 않습니다. 재디자인 작업에서는 타이포그래피의 다양성이 조금 더 나왔습니다. 대조군은 Arial/Helvetica와 Courier를, 스킬 사용군은 Impact 스타일 디스플레이 서체에 Helvetica Neue 또는 Avenir Next를 골랐습니다. 이는 시스템 폰트 안에서의 다양성일 뿐입니다.

품질 하한선은 동등하게 충족했습니다. 뷰포트 메타 태그, @media 쿼리, :focus 스타일은 두 군의 모든 페이지에 있었습니다. 감소된 모션 처리는 두 군 모두 두 대시보드에서 빠져 있었습니다. 모바일 오버플로는 12개 페이지 중 10개에서 0이었고, 각 군의 랜딩 페이지 하나씩이 2〜6픽셀 넘쳤습니다.

비용 없음. 스킬 사용 실행은 평균 87,900토큰으로 스킬 없는 93,000토큰보다 적었고(0.95배), 155초 대 189초가 걸렸습니다. 페이지 자체에 비하면 파일 읽기는 저렴합니다.

우리 검사 자체에 대한 주의

"$22 / $79 / $720 가격을 유지한다"는 자동 검사가 두 군 모두에서 재디자인 실행 네 개 중 세 개에서 실패했습니다. 이는 페이지가 아니라 정규식의 결함입니다. 가격이 <span> 태그로 나뉘어 있었고, 스크린샷에는 세 가격이 모두 있습니다. 이 검사는 점수에 쓰지 않았습니다.

안전성 검토

Markdown 파일 하나와 라이선스 파일 하나입니다. 스캐너는 아무것도 찾지 못했고, 유일한 도메인은 라이선스 본문 안의 apache.org입니다. 스크립트, 바이너리, 숨은 문자, 비밀 정보에 관한 지시는 없습니다. security.md를 참조하세요.

점수

누가 쓰면 좋을까

에이전트가 만든 페이지에 늘 같은 대문자 아이브로 라벨과 01/02/03 마커가 붙는다면, 이 스킬은 추가 토큰 비용 없이 그것을 확실히 멈춥니다. 설치해 두지 않을 이유가 거의 없습니다. 평범한 모델이 눈에 띄게 더 독창적인 디자인을 내놓기를 기대한다면, 우리는 그런 결과를 보지 못했습니다. 여전히 모델이 평소 만드는 것과 비슷한 수준급 페이지를 얻게 됩니다. 획일성에 대한 확실한 해결책은 더 강한 브리프(팔레트, 레퍼런스, 분위기)를 주는 것이며, 스킬도 브리프의 문구가 항상 우선한다고 말합니다.

이 테스트의 한계

셀당 2회 실행, 모델 하나, 시스템 폰트만 있는 오프라인 샌드박스, 작업 세 개, 패널이 아닌 블라인드 심사자 한 명의 채점. 디자인 판단은 주관적입니다. 사이트 규칙에 따라 Codex 티어는 Codex와 Claude Code에 적용됩니다.

업데이트(2026년 11월 2일): 한 문장 프롬프트군 추가

세 번째 군을 추가했습니다. 스킬은 없지만 프롬프트 끝에 스킬의 핵심 규칙을 한 문장으로 붙인 군입니다("페이지에 구체적이고 대담한 시각적 관점 하나를 부여하세요 ... 보라색 그라디언트, 대문자 아이브로 라벨, 01/02 번호 마커, 똑같은 3장 카드 그리드 같은 흔한 AI 디자인 상투어를 피하세요"). 6회 실행했고, 같은 Codex 빌드의 Windows 머신에서 네트워크를 끄고 돌렸습니다.

한 문장은 스킬과 동등하고(한 문장 대비 스킬의 이득: 0.00), 스킬 없음보다 0.25 앞서며, 모두 n=2에서 노이즈 범위입니다. 한 문장 프롬프트 실행은 대조군 토큰의 약 1.4배를 썼고, 스킬은 그렇지 않았습니다. 전체 세트에서 가장 보기 좋은 페이지(세리프 대시보드 헤드라인 "A clear view of your water.")는 한 문장 프롬프트 실행에서 나왔고, 명백히 버그가 있는 페이지(문자 그대로 ?/b> 텍스트가 섞인 티커)는 재디자인 작업의 다른 한 문장 프롬프트 실행에서 나왔습니다. 새 군의 점수는 기존 6회 비교와 별도의 블라인드 세션에서 매겨졌으므로 약간의 드리프트가 가능합니다(같은 랜딩 페이지가 한 세션에서는 4.5, 다른 세션에서는 평균 3.25였습니다). 스킬에서 비용이 들지 않는 부분은 여전히 같습니다. 스킬이 지목한 특정 상투어를 없애 줍니다. 한 문장 프롬프트도 그 대부분을 해냅니다.