design-taste-frontend (Leonxlnx/taste-skill)

리뷰

Codex CLI 0.166 (gpt-6-astra, low reasoning)을 전용 Windows 테스트 PC에서 실행했고, 실행마다 새 임시 프로젝트와 임시 HOME/TMPDIR/캐시를 사용했습니다. 스킬 설치(스킬 사용군), 미설치(대조군), 미설치 상태에서 스킬의 핵심 요구사항만 한 문장으로 압축해 프롬프트에 덧붙인 경우(한 문장 프롬프트군)로 나눴으며, 과제·그룹당 2회씩 실행했습니다. 네트워크는 끄고 /tmp 쓰기는 차단했습니다. 프롬프트에는 스킬 이름을 언급하지 않았습니다(아래에 적은 경우 제외). 모든 그룹에 ui-ux-pro-max, frontend-design 테스트와 동일한 세 가지 과제를 적용했습니다: Tidepool 해조 스낵 브랜드의 랜딩 페이지, 지방자치단체 수질 대시보드, Granite Peak 클라이밍 짐 홈페이지의 콘텐츠를 유지한 리디자인입니다. 한 문장 프롬프트는 특정 콘셉트와 팔레트를 하나로 정하고, 개성 있는 서체 조합과 비대칭 레이아웃을 쓰며, 보라색 그라데이션·기본 Inter·3장 카드 그리드·번호 마커·대문자 아이브로 라벨을 피하고, 이미지는 CSS/SVG로 그리며, 데스크톱과 모바일 너비를 확인하라고 요구합니다. 페이지는 오프라인에서 스크린샷(데스크톱·모바일)을 찍고 섞은 콘택트 시트로 블라인드 채점했습니다.

3개 그룹 비교

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

판정: 상황에 따라 다름 (16.2 / 30). 출처: Leonxlnx/taste-skill, skills/taste-skill, 커밋 12af471에 고정. 설치: npx skills@latest add Leonxlnx/taste-skill --skill taste-skill. 라이선스: MIT(저장소 LICENSE).

무엇인가

design-taste-frontend 스킬(Leonxlnx/taste-skill)은 웹 페이지를 위한 아트 디렉션 워크플로입니다. 로컬 스크립트를 실행해 브리프에서 디자인 '방향'을 고르고(예: '페이지가 곧 오브제'), 방향 파일과 보고서를 .taste-skill/ 폴더에 쓴 뒤, 그 방향에 맞춰 페이지를 만듭니다. 흔한 AI스러운 레이아웃을 피하는 규칙, 고정된 섹션 집합, 시각 검사도 포함합니다.

테스트 방법

전용 Windows 테스트 PC에서 Codex CLI 0.166(gpt-6-astra, 낮은 추론)을 실행했고, 실행마다 새 임시 프로젝트와 임시 HOME/TMPDIR/캐시를 사용했습니다. 스킬을 설치한 경우(스킬 사용군), 설치하지 않은 경우(대조군), 스킬 없이 스킬의 핵심 요구사항을 한 문장으로 압축해 프롬프트 끝에 붙인 경우(한 문장 프롬프트군)로 나눴고, 작업마다 각 군 2회씩 실행했습니다. 네트워크는 끄고 /tmp 쓰기는 차단했습니다. 프롬프트에는 스킬 이름을 전혀 언급하지 않았습니다(아래에 적은 표현은 예외).

ui-ux-pro-max, frontend-design과 같은 작업 세 가지를 모든 군에 적용했습니다. Tidepool 김 스낵 브랜드의 랜딩 페이지, 지방자치단체 수질 대시보드, 그리고 콘텐츠를 유지한 채 Granite Peak 클라이밍 짐 홈페이지를 재디자인하는 작업입니다. 한 문장 프롬프트는 이 소재에 맞는 구체적인 콘셉트와 팔레트 하나를 고르고, 보라색 그라데이션, 기본 Inter, 흔한 3장 카드 그리드, 01/02 번호 마커, 대문자 아이브로 라벨을 피하며, 개성 있는 서체 조합과 비대칭 레이아웃을 쓰고, 이미지는 CSS/SVG로 그리고, 데스크톱과 모바일 너비에서 확인하라고 요청합니다. 페이지는 오프라인에서 스크린샷(데스크톱·모바일)을 찍고, 순서를 섞은 콘택트 시트로 블라인드 채점했습니다.

1. 브리프로 새 랜딩 페이지 만들기 — 소량 생산 김 스낵 브랜드 Tidepool의 원페이지 랜딩 사이트를 만드세요. 구독으로 판매하며(맛 3종, 상자당 $14, 매월 배송) 합니다. 인라인 CSS를 사용한 자체 완결형 index.html 하나를 작성하고, 필요한 경우에만 최소한의 JS를 쓰세요. 프레임워크와 빌드 도구는 사용하지 마세요…
2. 데이터 밀도 높은 대시보드 UI — 지방자치단체 수질 모니터링 팀을 위한 대시보드 페이지를 만드세요. 6개 관측소의 현재 수치(pH, 탁도, 염소, 수온), 각 관측소의 7일 추세, 경보 패널이 포함되어야 합니다. 인라인 CSS/JS와 하드코딩된 판독값으로 구성된 자체 완결형 dashboard.html 하나를 작성하세요.
3. 기존의 밋밋한 페이지 재구성 — old.html은 Granite Peak Climbing Gym(콜로라도주 볼더)의 현재 홈페이지입니다. 실제 콘텐츠(요금, 수업, 운영 시간, 주소)는 모두 유지하면서 이 특정 암장에 어울리는 페이지로 new.html을 새로 디자인하세요. 프레임워크 없이 자체 완결형 HTML/CSS로 작성하세요…

점수는 Grok Bot이 고정 루브릭에 따라 블라인드로 읽고 매긴 것입니다(아이디를 섞고 조건은 표시하지 않음). 실행당 0~5점이며 AI 심사자이므로 작은 차이는 노이즈로 보세요.

결과

세 번째 군에 전달한 한 문장 프롬프트: "AI 슬롭에 맞서 아트 디렉션하세요. 이 소재에 맞는 구체적인 콘셉트와 팔레트 하나를 고르고, 보라색 그라데이션, 기본 Inter, 흔한 3장 카드 기능 그리드, 01/02 번호 마커, 대문자 아이브로 라벨을 피하세요. 개성 있는 서체 조합과 비대칭 구성을 쓰고, 이미지는 CSS/SVG로 그리세요. 데스크톱과 모바일 너비에서 페이지를 확인하고 어색한 부분을 고치세요."

평균 점수: 스킬 없음 3.96, 스킬 사용 3.58(차이 -0.38). 실행당 토큰: 115k 대 431k(3.74배), 시간: 175초 대 198초. 한 문장 프롬프트 군: 4.29(한 문장 프롬프트 대비 스킬의 이득 -0.71, 스킬 없음 대비 한 문장 프롬프트의 이득 +0.33). 한 문장 프롬프트의 실행당 토큰은 298k이므로 스킬은 한 문장 프롬프트의 1.44배 비용을 씁니다.

무슨 일이 있었나

• 블라인드 평균: 한 문장 프롬프트 4.29, 대조군 3.96, 스킬 사용 3.58(각 n=6). 작업별로 스킬 사용군은 재디자인에서 4.5 / 4.5(대조군 4.0, 한 문장 4.1), 대시보드에서 3.5(대조군 3.75, 한 문장 4.4), 랜딩 페이지에서 2.75(대조군 4.1, 한 문장 4.4)를 받았습니다.
• 랜딩 페이지 평균이 낮은 것은 망가진 페이지 하나 때문입니다. 스킬 사용군의 한 실행에서 텍스트가 깨져 나왔습니다(맛 선택기가 마크업을 텍스트로 출력해 버튼 안에 '</span>'가 나타남). 내비게이션도 접혀 있었고 도형이 흩어져 있었습니다. 다른 스킬 사용군 랜딩 페이지는 정상이었습니다(4.0). 스킬 자체 워크플로가 '브라우저 확인이 차단됨'이라고 보고해 시각적 확인 없이 결과물을 내보냈습니다. 그 실행을 빼면 스킬 평균은 4.0으로 대조군과 같은 수준입니다.
• 스킬은 실제로 페이지의 모습을 바꿉니다. 스킬이 지목한 흔한 AI 티는 사라졌습니다. 페이지당 대문자 아이브로 라벨 수: 대조군 0~5, 스킬 사용 0~1. 01/02 번호 마커: 대조군은 6장 중 3장에서 3~6개, 스킬 사용은 6장 모두 0개. 한 문장 프롬프트도 같은 티를 없앴습니다(라벨 0~1, 마커 0). 즉 그 부분은 한 문장만으로 달성됩니다.
• 비용은 매우 높습니다. 실행당 스킬 사용 431k 토큰, 한 문장 298k, 대조군 115k(각각 3.7배, 1.4배)이며, 실행당 셸 명령이 25.7개입니다(대조군 7.7개). 또한 실행마다 스킬·방향 파일 약 40개를 프로젝트에 떨어뜨립니다(스킬의 direction.json과 report.md는 .taste-skill/ 아래에 기록됨).
• .taste-skill/direction.json이 있는 스킬 사용군의 대시보드와 랜딩 페이지는 모양새가 독특했습니다(에디토리얼한 종이와 잉크 레이아웃). 그러나 대조군과 한 문장 프롬프트가 수렴하는 소박한 짙은 초록색 세리프 이탤릭 스타일보다 일관되게 낫지는 않았습니다.

항목별 점수

이 테스트의 한계

• 리뷰어가 전체 페이지 콘택트 시트(페이지당 데스크톱 600 px, 모바일 300 px)를 보고 블라인드로 시각 평가했습니다. 0.25 차이는 심사자 노이즈 범위입니다. 망가진 페이지 하나가 스킬 평균을 약 0.3 움직입니다.
• 셀당 n=2, 작업 3개. 망가진 페이지 하나는 체계적 결함이 아니라 운이 나빴던 것일 수 있습니다.
• 오프라인에서는 폰트가 로드되지 않아 서체 조합 선택이 보이지 않습니다.
• 스킬 자체의 브라우저 스크린샷 단계는 샌드박스에서 실행할 수 없었고, 이는 다른 군보다 스킬에 더 불리하게 작용했을 것입니다.
• 작업·군당 n = 2: 약 1점 미만의 차이는 노이즈입니다.
• 블라인드 AI 평가: 심사자가 하나이고 평가자 간 검증이 없습니다. 최초의 대조군·스킬 사용군 실행과 나중의 한 문장 프롬프트 실행을 별도 세션에서 평가했으므로(한 문장은 2026-11-02), 세션 간 편차가 생길 수 있습니다.

보안

security.md를 참조하세요. 스캔: CRITICAL 10 / HIGH 44 / MEDIUM 9. 판정: 실행해도 안전(네트워크 차단 샌드박스). 깨끗한 스캔 결과가 스킬의 안전성을 증명하지는 않습니다.

결론

흔한 AI 느낌을 없애고 이번 테스트에서 가장 좋은 재디자인을 만들어 냈습니다. 하지만 토큰이 3.7배 들었고, 6회 중 1회는 눈에 띄게 망가진 페이지를 알아채지 못한 채 내보냈습니다. 한 문장짜리 아트 디렉션 프롬프트가 약 3분의 1의 토큰으로 더 높은 점수를 받았습니다. 사람이 결과를 확인하는 아트 디렉션 마케팅 페이지에 시도해 보되, 무인 기본값으로 쓰지는 마세요.