Leonxlnx/taste-skill

Agent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages

TL;DR

Taste Skill 은 LLM 기반 코딩 어시스턴트(ChatGPT, Claude, Codex, Cursor 등)에게 더 깔끔하고 세련된 프론트엔드 UI 코드와 디자인 에셋을 생성하는 방법을 알려주는 작고 휴대 가능한 명령어 파일인 Agent Skills 의 모음입니다. 단일 npx skills add … 명령어로 스킬을 설치하면, 에이전트가 내장된 규칙(레이아웃 변형, 모션 강도, 시각적 밀도, 조잡한 코드 방지 가이드라인)에 따라 HTML/CSS/JS 또는 디자인 목업을 생성합니다.

주요 기능

디자인 중심 코드 생성 – 개요를 읽고 디자인 언어를 선택하여 완전한 프론트엔드 구현(GSAP 기반 애니메이션 스켈레톤, 엄격한 간격, 타이포그래피 등)을 출력합니다.
조정 가능한 "다이얼" – 3개의 숫자 매개변수(DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY)를 통해 출력물의 실험적 수준이나 밀도를 제어할 수 있습니다.
전문 변형 – 더 엄격한 GPT/Codex 출력을 위한 gpt‑taste, 프리미엄 UI 외관을 위한 soft‑skill, 고대비 산업 스타일을 위한 brutalist‑skill, 기존 코드베이스를 감사하고 수정하기 위한 redesign‑skill 등이 있습니다.
이미지 생성 스킬 – 이미지 처리 능력이 있는 에이전트에 제공할 수 있는 레퍼런스 보드(웹, 모바일, 브랜드 키트)를 생성하고, 해당 프레임을 코딩 스킬(image‑to‑code)에 전달할 수 있습니다.
휴대용 SKILL.md 파일 – 각 스킬은 skills/ 하위의 자체 폴더에 존재하며, Vercel‑Labs의 npx skills add CLI를 통해 설치하거나 프로젝트나 채팅에 복사하여 사용할 수 있습니다.

대상 사용자

AI 코딩 어시스턴트를 사용하는 개발자 – 모든 CSS 규칙을 수동으로 작성하지 않고도 일관되고 고품질의 UI를 원하는 분.
디자인-투-코드 파이프라인 – 먼저 목업(ChatGPT Images, DALL‑E 등 사용)을 생성하고 이를 자동으로 프로덕션 준비가 완료된 코드로 변환하려는 분.
React, Vue, Svelte 또는 기타 프론트엔드 프레임워크 전반에서 반복 가능한 스타일 가이드가 필요한 팀 – 기본 라이브러리에 관계없이 스킬이 레이아웃 및 모션 규칙을 강제합니다.

시작하기

기본 스킬 설치(v2, 실험적):

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

LLM에 대한 프롬프트에서 스킬 이름을 참조합니다. 예:

Use skill "design‑taste‑frontend" to build a landing page for a fintech startup. Keep motion intensity low and visual density high.

원래 동작만 필요한 경우 대신 design‑taste‑frontend‑v1을 설치하세요.
이미지 우선 워크플로우의 경우 imagegen-frontend-web(또는 mobile/brandkit)을 추가한 다음 image‑to‑code를 실행합니다.
더 실험적인 레이아웃을 원하면 SKILL.md 상단에 DESIGN_VARIANCE: 7과 같은 줄을 추가하여 3개의 다이얼을 조정하세요.

저장소 내용

skills/ 폴더 – 각 하위 폴더에는 프롬프트 템플릿, 다이얼 기본값 및 헬퍼 스크립트를 정의하는 SKILL.md가 포함되어 있습니다.
research/ – 스킬의 근거가 되는 조잡한 디자인 방지 원칙에 대한 배경 메모.
CHANGELOG.md – v1에서 v2로의 재작성 세부 정보 및 향후 로드맵.
MIT 라이선스 – 자유롭게 사용 및 수정 가능.

제한 사항 및 미해결 과제

스킬은 프레임워크에 구애받지 않는 마크업을 생성합니다. 특정 컴포넌트 라이브러리에 맞게 출력을 조정해야 할 수도 있습니다.
이미지 생성 스킬은 레퍼런스 이미지만 생성합니다. 실제로 시각적 요소를 렌더링하려면 별도의 이미지 처리 모델(ChatGPT Images, Kimi 등)에 의존합니다.
기본 design‑taste‑frontend는 실험적(v2)으로 표시되어 있습니다. 안정성 및 엣지 케이스 처리는 계속 발전 중입니다.

빠른 링크

웹사이트: https://tasteskill.dev
설치 문서: 위의 #installing 섹션
전체 스킬 목록: #skills
라이선스: MIT