Taste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop
이 번역은 AI가 원문 README를 옮긴 것입니다. 원문이 항상 우선합니다.
<p align="center"> <img src="assets/readme-banner.webp" alt="Taste Skill - 프리미엄 프론트엔드를 위한 안티-슬롭 에이전트 스킬" width="100%" /> </p>
<p align="center"> <em>AI 에이전트를 위한 안티-슬롭 프론트엔드 프레임워크</em> </p>
<p align="center" style="margin-bottom: 8px;"> <a href="https://tasteskill.dev" title="tasteskill.dev 방문"><img src="assets/readme-buttons/btn-site.webp" alt="tasteskill.dev 방문" height="56" /></a> </p>
<h3 align="center">스폰서</h3>
<p align="center"><a href="https://animations.dev"><img src="assets/sponsors/animations-dev.webp" alt="animations.dev" width="62" height="62" valign="middle" /></a><sub><a href="https://github.com/emilkowalski"><strong>Emil Kowalski</strong></a> · <a href="https://animations.dev">animations.dev</a></sub></p>
<p align="center"><a href="https://vercel.com/open-source-program"><img alt="Vercel OSS Program" src="assets/vercel-oss-program-badge.svg" height="24" /></a></p>
<p align="center"><sub><a href="https://github.com/sponsors/Leonxlnx">스폰서 되기</a></sub></p>
휴대용 에이전트 스킬로 AI가 구축한 인터페이스를 업그레이드합니다: 기본 UI 대신 강력한 레이아웃, 타이포그래피, 모션, 간격을 제공합니다. 이 저장소에는 참조 보드(웹, 모바일, 브랜드 키트)를 위한 이미지 생성 스킬도 포함되어 있습니다. ChatGPT Images 또는 유사한 생성기와 함께 사용한 후, 프레임을 Codex, Cursor 또는 Claude Code에 전달하여 구현할 수 있습니다.
<p align="center"> <a href="LICENSE"><img src="assets/readme-buttons/btn-mit.webp" alt="MIT 라이선스" height="45" valign="middle" /></a> <a href="https://github.com/vercel-labs/agent-skills"><img src="assets/readme-buttons/btn-agent-skills.webp" alt="Agent Skills 호환" height="45" valign="middle" /></a> <a href="#installing"><img src="assets/readme-buttons/btn-tools.webp" alt="Codex, Cursor, Claude" height="45" valign="middle" /></a> <a href="https://www.tasteskill.dev/changelog"><img src="assets/readme-buttons/btn-changelog.webp" alt="변경 로그" height="45" valign="middle" /></a> </p>
Taste Skill은 공식 토큰, 코인 또는 암호화폐 프로젝트가 없습니다. 제 이름, 이미지 또는 프로젝트를 사용하는 모든 토큰은 관련이 없으며 제가 보증하지 않습니다.
<p align="center"><sub><a href="#disclaimer">면책 조항</a> · <a href="#installing">설치</a> · <a href="#skills">스킬</a> · <a href="#settings-taste-skill-only">설정</a> · <a href="#examples">예제</a> · <a href="#sponsors">스폰서</a> · <a href="#research">연구</a> · <a href="#common-questions">FAQ</a> · <a href="#license">라이선스</a></sub></p>
여러분의 피드백을 환영합니다. 제안 및 버그 신고:
npx skills add CLI는 이 저장소의 skills/ 폴더를 스캔하므로, 아래 모든 스킬(코드 및 이미지 생성)은 동일한 방식으로 설치됩니다.
npx skills add https://github.com/Leonxlnx/taste-skill설치 이름(SKILL 프론트매터의 name: 필드, 폴더 이름 아님)으로 단일 스킬을 설치하려면:
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"또한 SKILL.md 파일을 프로젝트에 복사하거나 ChatGPT/Codex 대화에 붙여넣을 수 있습니다.
기본 taste-skill(설치 이름 design-taste-frontend)은 이제 v2(실험적)로, 원래 v1의 대대적인 재작성입니다. 이미 v1이 설치되어 있다면 설치 명령어를 다시 실행하면 업그레이드됩니다:
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"설치 이름은 변경되지 않았으므로 스크립트 업데이트가 필요하지 않습니다. 최신 SKILL.md가 이전 파일을 대체합니다.
v1의 정확한 동작에 의존하고 명시적으로 고정하려면:
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend-v1"전체 v1에서 v2로의 변경 사항 및 이유는 CHANGELOG.md를 참조하세요.
각 스킬은 하나의 작업을 수행합니다. 모든 스킬을 동시에 사용할 필요는 없습니다. 구현 스킬은 코드를 출력합니다. 이미지 생성 스킬은 참조 이미지만 출력합니다.
설치 이름 열은 --skill에 전달하는 정확한 값입니다.
| 스킬 (폴더) | 설치 이름 | 설명 | ||
|---|---|---|---|---|
| taste-skill | design-taste-frontend |
🆕 v2 (실험적) - 기본 스킬의 대대적인 재작성. 브리프를 읽고 디자인 언어를 추론하며 세 가지 다이얼(VARIANCE / MOTION / DENSITY)을 조정합니다. 브리프 추론, 디자인 시스템 맵, 하드 em-dash 금지, 표준 GSAP 코드 스켈레톤, 재설계 감사 프로토콜, 엄격한 사전 점검. v2.0.0 안정화를 위해 적극적으로 반복 중입니다. | ||
| taste-skill-v1 | design-taste-frontend-v1 |
원래 taste-skill의 v1으로, 정확한 동작에 의존하는 프로젝트를 위해 보존되었습니다. v2 기본값이 워크플로우에서 특정 문제를 일으키는 경우에만 사용하세요. | ||
| gpt-tasteskill | gpt-taste |
GPT/Codex용 더 엄격한 변형: 더 높은 레이아웃 변동성, 더 강력한 GSAP 방향, 적극적인 안티-슬롭. | ||
| image-to-code-skill | image-to-code |
이미지 우선 파이프라인: 사이트 참조를 생성하고 분석한 후 일치하는 프론트엔드를 구현합니다. | ||
| redesign-skill | redesign-existing-projects |
기존 프로젝트: 먼저 UI를 감사한 후 레이아웃, 간격, 계층 구조, 스타일링을 수정합니다. | ||
| soft-skill | high-end-visual-design |
세련되고 차분하며 고급스러운 UI: 부드러운 대비, 여백, 프리미엄 폰트, 스프링 모션. | ||
| output-skill | full-output-enforcement |
모델이 미완성 작업을 제공할 때: 전체 출력, 플레이스홀더 주석 없음. | ||
| minimalist-skill | minimalist-ui |
편집형 제품 UI(Notion/Linear 느낌), 절제된 팔레트, 깔끔한 구조. | ||
| brutalist-skill | industrial-brutalist-ui |
하드 기계적 언어: 스위스 타이포그래피, 날카로운 대비, 실험적 레이아웃. | ||
| stitch-skill | stitch-design-taste |
Google Stitch 호환 규칙, 선택적 DESIGN.md 내보내기 형식 포함. |
이 스킬들은 디자인 이미지만 생성합니다(코드 없음). ChatGPT Images, Codex 이미지 모드 또는 이미지를 생성하는 모든 에이전트와 함께 사용하세요.
| 스킬 (폴더) | 설치 이름 | 설명 | ||
|---|---|---|---|---|
| imagegen-frontend-web | imagegen-frontend-web |
웹사이트 컴포: 히어로, 랜딩, 여러 섹션, 강력한 타이포그래피, 간격, 안티-슬롭 아트 디렉션. | ||
| imagegen-frontend-mobile | imagegen-frontend-mobile |
모바일 화면 및 플로우: iOS/Android/크로스 플랫폼, 목업, 읽기 쉬운 타입, 일관된 세트. | ||
| brandkit | brandkit |
브랜드 키트 보드: 로고 방향, 팔레트, 타입, 카테고리별 아이덴티티 적용. |
image-to-code-skill의 경우 프롬프트에 파이프라인을 명시하세요. 예: 스킬을 따르세요: 이미지 생성, 분석, 그 다음 코딩.
imagegen-frontend-web, imagegen-frontend-mobile 또는 brandkit을 첨부하거나 붙여넣고 필요한 프레임을 요청한 후, 렌더링 결과를 Codex, Cursor 또는 Claude Code에 전달하세요. 참조를 생성하고 사이트를 코드로 구현하는 단일 워크플로우를 원한다면 image-to-code-skill을 사용하세요.
파일 상단의 숫자는 1-10 다이얼입니다:
taste-skill로 생성된 예제:
<p> <img src="examples/floria-top.webp" width="400" /> <img src="examples/floria-bottom.webp" width="400" /> </p>
Taste Skill이 도움이 되었다면 스폰서를 고려해 주세요:
<a href="https://animations.dev" title="Emil Kowalski · animations.dev"><img src="assets/sponsors/animations-dev.webp" width="62" height="62" alt="Emil Kowalski" title="Emil Kowalski · animations.dev" /></a> <a href="https://github.com/dnakov"><img src="https://github.com/dnakov.png" width="40" height="40" style="border-radius:50%" alt="dnakov" title="dnakov" /></a> <a href="https://github.com/AkramReshad"><img src="https://github.com/AkramReshad.png" width="40" height="40" style="border-radius:50%" alt="AkramReshad" title="AkramReshad" /></a> <a href="https://github.com/ajmalaksar25"><img src="https://github.com/ajmalaksar25.png" width="40" height="40" style="border-radius:50%" alt="ajmalaksar25" title="ajmalaksar25" /></a> <a href="https://github.com/krikkkk"><img src="https://github.com/krikkkk.png" width="40" height="40" style="border-radius:50%" alt="krikkkk" title="krikkkk" /></a> <a href="https://github.com/navanchauhan"><img src="https://github.com/navanchauhan.png" width="40" height="40" style="border-radius:50%" alt="navanchauhan" title="navanchauhan" /></a> <a href="https://github.com/robinebers"><img src="https://github.com/robinebers.png" width="40" height="40" style="border-radius:50%" alt="robinebers" title="robinebers" /></a> <a href="https://github.com/JKc66"><img src="https://github.com/JKc66.png" width="40" height="40" style="border-radius:50%" alt="JKc66" title="JKc66" /></a> <a href="https://github.com/u2393696078-rgb"><img src="https://github.com/u2393696078-rgb.png" width="40" height="40" style="border-radius:50%" alt="u2393696078-rgb" title="u2393696078-rgb" /></a> <a href="https://github.com/a-human-created-this"><img src="https://github.com/a-human-created-this.png" width="40" height="40" style="border-radius:50%" alt="a-human-created-this" title="a-human-created-this" /></a> <a href="https://github.com/AtharvaJaiswal005"><img src="https://github.com/AtharvaJaiswal005.png" width="40" height="40" style="border-radius:50%" alt="AtharvaJaiswal005" title="AtharvaJaiswal005" /></a> <a href="https://github.com/ghughes7"><img src="https://github.com/ghughes7.png" width="40" height="40" style="border-radius:50%" alt="ghughes7" title="ghughes7" /></a> <a href="https://github.com/mccun934"><img src="https://github.com/mccun934.png" width="40" height="40" style="border-radius:50%" alt="mccun934" title="mccun934" /></a> <a href="https://github.com/techmedic5"><img src="https://github.com/techmedic5.png" width="40" height="40" style="border-radius:50%" alt="techmedic5" title="techmedic5" /></a> <a href="https://github.com/bytewerk-dev"><img src="https://github.com/bytewerk-dev.png" width="40" height="40" style="border-radius:50%" alt="bytewerk-dev" title="bytewerk-dev" /></a>