https://Hybridego.net/ <Ho Cheol Jeon>

Taste Skill 2.5.1은 코딩 에이전트가 흔한 랜딩 페이지를 대충 조립하는 대신, 단일 디자인 시스템과 실제 사진 또는 실제 제품 UI를 바탕으로 회사 웹사이트를 만들고 실제 브라우저 검증을 통과한 결과물을 돌려주게 한다.

짧은 브리프만 보고 에이전트가 회사 사이트를 새로 만들거나 개편해야 할 때, 그리고 결과물을 넘기기 전에 페이지 전체가 하나의 레이아웃 시스템을 따르도록 묶어야 할 때 개발자가 사용한다.

업종을 분류하고, 화면당 한 섹션을 유지하며, 고칠 수 있는 FAIL이 남아 있으면 끝내지 마라.

없을 때와 있을 때

이 스킬이 없으면 브리프를 받아 회사 사이트를 만들어 달라는 요청에 에이전트가 흔한 랜딩 페이지를 조립해 내놓기 쉽다. 기본 경로에는 단일 팔레트를 고르거나, 좌우 콘텐츠 여백을 똑같이 맞추거나, 결과물을 돌려주기 전에 브라우저에서 페이지를 렌더링해 보는 단계가 전혀 없다.

스킬을 켜면 에이전트는 design-taste-frontend를 불러오고 프로젝트에 assets/를 복사한 뒤 assets/starter.html에서 시작한다. 먼저 업종을 분류해 화면 단위로 페이지를 설계하고, 결과물을 반환하기 전에 검사기를 실행한다. 상점 브리프와 소프트웨어 브리프는 서로 다른 비주얼을 받지만 둘 다 같은 디자인 시스템과 동일한 완료 게이트 안에서 동작하며, 저장소 예제인 커피숍과 테크노 나이트 페이지에도 스킬이 출처를 표기한 오픈 아카이브 사진이 들어가 있다.

무엇을 결정하나

저장소에는 스킬 1개와 파일 1663개, 그리고 SKILL.md 1개가 들어 있다. 에이전트는 마크업부터 작성하지 않는다. 클라이언트를 software, gaming, tech, product, service, place 중 하나로 분류한 뒤 각 화면을 계획한다. scripts/start.mjs는 해당 업종에 맞춘 팔레트와 Google Fonts 조합을 배정하고 head 링크와 :root 토큰을 출력한다. assets/layout/deal.mjs는 검증된 11가지 히어로 레이아웃(split, centred, product, photo, place, collage, editorial, word, film, statement, triptych) 중 하나를 고른다. assets/starter.html, assets/system.css, assets/layout/layout.css는 데스크톱 1440×900 해상도에서 화면당 한 섹션, 동일한 좌우 콘텐츠 끝선, 고정 내비게이션 바, 그리고 footer.closing이라는 한 화면짜리 마무리 푸터를 유지한다.

이 시각 도구들이 모든 페이지 유형에 전부 적용되지는 않는다. 소프트웨어와 기술 페이지는 assets/ui/의 기능 카드와 assets/diagrams/의 노드-라인 다이어그램으로 채우고, scripts/icons.mjs로 실제 브랜드·인터페이스 아이콘을 로컬 SVG 파일로 저장한다. 장소, 상점, 숙박·외식업, 비기술 제품 페이지는 scripts/photos.mjs의 사진, 타이포그래피, 단색 배경을 전면에 내세우며, 이미지 아래 캡션 없이 접고 펼칠 수 있는 푸터 한 줄에 출처를 담는다. 셰이더 배경, 스크롤 씬, 절차적 3D 프린트는 software, tech, gaming 페이지에서만 최대 4개 WebGL 컨텍스트 제한 안에서 돌아가며, 모바일과 동작 줄이기 설정에는 정적 폴백을 제공한다. 그래도 모든 페이지는 히어로 등장 효과와 scripts/moments.mjs의 모션 1~2가지를 적용받는다. 카페, 호텔, 상점, 스튜디오, 서비스 페이지는 사진과 타이포그래피 중심의 연출만 들어가고 WebGL은 전혀 쓰지 않는다.

완료 경로는 루프로 돌아간다.

scripts/consistency.mjs는 빌드된 페이지를 HTTP로 띄워 헤드리스 Chrome에서 1440, 1024, 820, 768, 390 너비로 렌더링하고 규칙마다 PASS, WARN, FAIL을 출력한다. 여기에 assets/layout/check.mjs, scripts/perf.mjs, scripts/shoot.mjs가 함께 동작하며 빈 영역, 깨진 셰이더, 대비 저하, 열 정렬 어긋남, 섹션 높이 틀어짐, 자리표시자 텍스트, 지어낸 도로명 번지, 느린 네트워크에서의 이미지 누락을 잡아낸다. scripts/gate.mjs는 최대 세 라운드까지 완료를 보류하며, 이 게이트는 Stop 훅으로도 동작한다.

사용 방법

쓸 때

새 프로젝트 폴더에서 소프트웨어 페이지의 첫 팔레트와 폰트 조합을 받고, 동시에 그 폴더의 완료 게이트를 켜야 할 때 사용한다.

node scripts/start.mjs deal --page software

해당 페이지 유형에 맞는 head 링크와 root 토큰이 출력되고, 그 폴더에서 완료 게이트가 켜진다.

쓸 때

이미 페이지를 만든 상태에서, 지정한 페이지 유형 기준으로 URL이나 로컬 파일이 규칙을 통과하는지 점검해야 할 때 사용한다.

node scripts/consistency.mjs <url or file> --page <kind>

헤드리스 Chrome으로 HTTP에서 페이지를 렌더링해 점검한 뒤 규칙별 PASS, WARN, FAIL 결과를 돌려받는다.

설치

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

Claude Code에서:

/plugin marketplace add Leonxlnx/taste-skill
/plugin install taste-skill@taste-skill

Codex에서:

codex plugin marketplace add Leonxlnx/taste-skill
codex plugin add taste-skill@taste-skill

복제한 저장소에서 복사 대신 연결하려면:

./install.sh

./install.sh는 스킬을 Claude Code에 링크로 연결하며, --codex를 넘기면 Codex를, --all-agents를 넘기면 둘 다 선택해 나중에 git pull만 해도 연결된 스킬이 바로 업데이트된다. 설치가 끝나면 에이전트에게 회사 사이트 구축이나 개편을 요청하면 된다. 스크립트를 돌리려면 Node 22 이상과 Chrome, Edge, Chromium 중 하나가 필요하며 ffmpeg는 선택 사항이다. MIT 라이선스를 따르는 이 저장소는 스타 115,782개, 포크 7,773개, 열린 이슈 9개를 기록하고 있으며, 2026-02-19에 만들어졌고 마지막 푸시일은 2026-11-08이다.

이 도구가 맞지 않을 때

카페, 호텔, 상점, 스튜디오, 서비스 페이지에 셰이더 배경이나 스크롤 씬, WebGL 효과를 넣고 싶다면 Taste Skill은 맞지 않는다. 이런 페이지에는 사진과 타이포그래피 중심의 연출만 들어가고 WebGL은 전혀 적용되지 않기 때문이다.

많이 묻는 질문

어떤 에이전트에 이 스킬을 설치할 수 있을까?

npx skills CLI는 design-taste-frontend라는 이름의 스킬을 설치한다. Claude Code는 다른 스킬과 충돌하지 않도록 taste-skill: 네임스페이스 아래에 taste-skill@taste-skill 플러그인을 설치하며, Codex는 새 세션을 시작한 뒤 taste-skill@taste-skill을 불러온다.

카페, 상점, 서비스 페이지에는 무엇을 추가하지 않나?

셰이더 배경, 스크롤 씬, 절차적 3D 프린트는 소프트웨어, 기술, 게이밍 페이지에만 배정한다. 카페, 호텔, 상점, 스튜디오, 서비스 페이지에는 사진과 타이포그래피 중심의 연출만 들어가고 WebGL은 전혀 쓰지 않는다.

사진은 어디에 저장되며 API 키가 필요한가?

별도 패키지를 설치하지 않으며 API 키도 쓰지 않는다. 기본 포함된 Wikimedia Commons 사진은 디스크에 남아 오프라인에서도 동작하며, 추가 사진이나 Google Fonts, 브랜드 아이콘을 내려받을 때만 네트워크에 접속한다.

Taste Skill은 코딩 에이전트가 단일 디자인 시스템과 실제 브라우저 완료 게이트를 지키도록 묶어 주는 프론트엔드 스킬이며, 모든 엔지니어링 작업을 아우르는 범용 방법론은 아니다.

출처: https://github.com/Leonxlnx/taste-skill