taste-skill - GitLite

KO | EN

gitlite — search

#javascript #react #ai #typescript #llm #go #rust #java #cli #kubernetes #vue #awesome-list #pytorch #security

taste-skill

(★ 78,877)

Taste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop

파일 탐색기

최종 버전 다운로드 (.zip)

- marketplace.json
- plugin.json
- copilot-instructions.md
- FUNDING.yml
- - btn-agent-skills.webp
  - btn-changelog.webp
  - btn-mit.webp
  - btn-site.webp
  - btn-tools.webp
- - animations-dev.webp
  - emil-animations-dev.webp
  - imgly-logo.svg
  - interfaces-dev-icon.webp
  - kimi-icon.png
  - reactbits-icon-dark.svg
  - reactbits-icon-light.svg
  - reactbits-logo-dark.svg
  - reactbits-logo-light.svg
  - sentdm.png
  - vercel-logo.svg
- .gitkeep
- readme-banner.webp
- readme-cta-tasteskill.svg
- taste-skill-logo.png
- taste-skill-logo.webp
- vercel-oss-program-badge.svg
- floria-bottom.webp
- floria-full.webp
- floria-top.webp
- - README.md
- README.md
- build-emil-sponsor-row.mjs
- convert-readme-assets-webp.mjs
- process-readme-buttons.mjs
- process-sponsor-badge.mjs
- - SKILL.md
- - SKILL.md
- - SKILL.md
- - SKILL.md
- - SKILL.md
- - SKILL.md
- - SKILL.md
- - SKILL.md
- - SKILL.md
- - SKILL.md
- - DESIGN.md
  - SKILL.md
- - SKILL.md
- - SKILL.md
- llms.txt
CHANGELOG.md
LICENSE
README.md
skill.sh

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<p align="center">
  <img src="assets/readme-banner.webp" alt="Taste Skill - Anti-slop Agent Skills for premium frontends" width="100%" />
</p>

# Taste Skill

<p align="center">
  <em>AI 에이전트를 위한 안티 슬롭(Anti-Slop) 프론트엔드 프레임워크</em>
</p>

<p align="center" style="margin-bottom: 8px;">
  <a href="https://tasteskill.dev" title="Visit tasteskill.dev"><img src="assets/readme-buttons/btn-site.webp" alt="Visit tasteskill.dev" height="56" /></a>
</p>

<h3 align="center">스폰서</h3>

<p align="center">
  <a href="https://novamira.ai/" title="Novamira"><img src="https://github.com/use-novamira.png" alt="Novamira" height="56" align="middle" /></a>
  &nbsp;
  <strong><a href="https://novamira.ai/">Novamira</a></strong> · AI 에이전트를 위한 완전한 워드프레스(WordPress) 액세스
  &nbsp;&nbsp;&nbsp;&nbsp;
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="https://kimi-file.moonshot.cn/prod-chat-kimi/kfs/4/1/2026-06-05/1d8h69mt3v89kkekg24gg" />
    <img alt="Kimi Open Source Friends" src="https://kimi-file.moonshot.cn/prod-chat-kimi/kfs/4/1/2026-06-05/1d8h69fudcmosb3pipls0" height="56" align="middle" />
  </picture>
</p>

<table align="center">
  <tr>
    <td align="center" width="76"><a href="https://img.ly/"><img src="assets/sponsors/imgly-logo.svg" alt="IMG.LY" width="62" height="62" /></a></td>
    <td><sub><a href="https://img.ly/"><strong>IMG.LY</strong></a> · CreativeEditor SDK</sub></td>
  </tr>
  <tr>
    <td align="center" width="76"><a href="https://animations.dev"><img src="assets/sponsors/animations-dev.webp" alt="animations.dev" width="62" height="62" /></a></td>
    <td><sub><a href="https://github.com/emilkowalski"><strong>Emil Kowalski</strong></a> · <a href="https://animations.dev">animations.dev</a></sub></td>
  </tr>
  <tr>
    <td align="center" width="76"><a href="https://www.sent.dm"><img src="assets/sponsors/sentdm.png" alt="Sent.dm" width="62" height="62" /></a></td>
    <td><sub><a href="https://www.sent.dm"><strong>Sent.dm</strong></a> · SMS, WhatsApp, RCS용 메시징 API</sub></td>
  </tr>
  <tr>
    <td align="center" width="76"><a href="https://vercel.com/open-source-program"><img src="assets/vercel-logo.svg" alt="Vercel" width="62" height="62" /></a></td>
    <td><a href="https://vercel.com/open-source-program"><img src="assets/vercel-oss-program-badge.svg" alt="Vercel Open Source Program" height="32" /></a></td>
  </tr>
</table>

<p align="center"><sub><a href="https://github.com/sponsors/Leonxlnx">스폰서 되기</a></sub></p>

AI가 구축한 인터페이스를 업그레이드해주는 휴대용 **Agent Skills**입니다. 뻔한 보일러플레이트 느낌의 UI 대신 더 탄탄한 레이아웃, 타이포그래피, 모션, 여백을 제공합니다. 이 저장소에는 레퍼런스 보드(웹, 모바일, 브랜드 킷)를 위한 **이미지 생성 스킬(image-generation skills)**도 포함되어 있습니다. **ChatGPT Images** 또는 유사한 생성기와 함께 사용한 뒤, 생성된 프레임을 Codex, Cursor, Claude Code에 전달해 구현하세요.

<p align="center">
  <a href="LICENSE"><img src="assets/readme-buttons/btn-mit.webp" alt="MIT License" height="45" valign="middle" /></a>
  &nbsp;
  <a href="https://github.com/vercel-labs/agent-skills"><img src="assets/readme-buttons/btn-agent-skills.webp" alt="Agent Skills compatible" height="45" valign="middle" /></a>
  &nbsp;
  <a href="#installing"><img src="assets/readme-buttons/btn-tools.webp" alt="Codex, Cursor, Claude" height="45" valign="middle" /></a>
  &nbsp;
  <a href="https://www.tasteskill.dev/changelog"><img src="assets/readme-buttons/btn-changelog.webp" alt="Changelog" height="45" valign="middle" /></a>
</p>

## 면책 조항 (Disclaimer)

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>

## 피드백 및 기여 (Feedback & Contributions)

여러분의 피드백을 환영합니다. 제안 및 버그 신고 방법:

- GitHub에 Pull Request 또는 Issue 열기  
- [@lexnlin](https://x.com/lexnlin) 또는 [@blueemi99](https://x.com/blueemi99)에게 DM 보내기  
- [hello@tasteskill.dev](mailto:hello@tasteskill.dev)로 이메일 보내기

## 설치 (Installing)

[`npx skills add`](https://github.com/vercel-labs/agent-skills) CLI는 이 저장소의 `skills/` 폴더를 스캔하므로, **아래의 모든 스킬(코드 및 이미지 생성)이 동일한 방식으로 설치됩니다.**

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

**설치 이름(install name)**(폴더 이름이 아니라 SKILL 프론트매터 내의 `name:` 필드)을 사용하여 단일 스킬을 설치할 수도 있습니다:

```bash
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이 설치되어 있다면 설치 명령어를 다시 실행하기만 하면 업그레이드됩니다:

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

설치 이름이 변경되지 않았으므로 스크립트를 수정할 필요가 없습니다. 새로운 SKILL.md가 기존의 것을 제자리에 덮어씁니다.

만약 v1의 정확한 동작에 의존하고 있어 버전을 고정(pin)하고 싶다면 다음과 같이 하세요:

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

v1에서 v2로의 전체 변경 내용 및 배경에 대해서는 [CHANGELOG.md](CHANGELOG.md)를 참조하세요.

## 스킬 (Skills)

각 스킬은 한 가지 역할을 수행하며, 한 번에 모든 스킬이 필요하지는 않습니다. **구현 스킬(Implementation skills)**은 코드를 출력하고, **이미지 생성 스킬(Image-generation skills)**은 레퍼런스 이미지 페이지만 출력합니다.

`Install name` 열은 `--skill`에 전달하는 정확한 값입니다.

| 스킬 (폴더) | 설치 이름 (Install name) | 설명 |
| --- | --- | --- |
| **taste-skill** | `design-taste-frontend` | 🆕 **v2 (실험적)** - 기본 스킬의 대대적인 재작성 버전. 브리프를 읽고, 디자인 언어를 유추하며, 세 가지 다이얼(VARIANCE / MOTION / DENSITY)을 조절합니다. 브리프 유추, 디자인 시스템 맵, 엄격한 엠대시(em-dash) 금지, 표준 GSAP 코드 스켈레톤, 리디자인 감사 프로토콜, 엄격한 사전 점검(pre-flight check)을 포함합니다. v2.0.0 안정 버전을 향해 활발히 반복 개선 중입니다. |
| **taste-skill-v1** | `design-taste-frontend-v1` | taste-skill의 오리지널 v1으로, 정확한 동작에 의존하는 프로젝트를 위해 보존되었습니다. v2 기본값이 워크플로우의 특정 부분을 깨뜨리는 경우에만 사용하세요. |
| **gpt-tasteskill** | `gpt-taste` | GPT/Codex를 위한 더 엄격한 변형: 더 높은 레이아웃 가변성, 강력한 GSAP 방향성, 공격적인 안티 슬롭(anti-slop). |
| **image-to-code-skill** | `image-to-code` | 이미지 우선 파이프라인: 사이트 레퍼런스를 생성하고, 분석한 후, 그에 맞춰 프론트엔드를 구현합니다. |
| **redesign-skill** | `redesign-existing-projects` | 기존 프로젝트: 먼저 UI를 감사(audit)한 후 레이아웃, 간격, 계층 구조, 스타일링을 수정합니다. |
| **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` | 선택적 `DESIGN.md` 내보내기 형식을 포함하여 Google Stitch와 호환되는 규칙. |

### 이미지 생성 스킬 (Image generation skills)

디자인 이미지만 생성합니다(코드 없음). ChatGPT Images, Codex 이미지 모드 또는 이미지를 생성하는 모든 에이전트와 함께 사용하세요.

| 스킬 (폴더) | 설치 이름 (Install name) | 설명 |
| --- | --- | --- |
| **imagegen-frontend-web** | `imagegen-frontend-web` | 웹사이트 컴프: 히어로, 랜딩, 강력한 타이포그래피·간격·안티 슬롭 아트 디렉션을 갖춘 멀티 섹션. |
| **imagegen-frontend-mobile** | `imagegen-frontend-mobile` | 모바일 화면 및 플로우: iOS/Android/크로스 플랫폼, 목업, 가독성 좋은 타입, 일관된 세트. |
| **brandkit** | `brandkit` | 브랜드 킷 보드: 로고 방향성, 팔레트, 타입, 카테고리별 아이덴티티 적용. |

### 어떤 것을 사용해야 할까요?

- 가장 안전한 일반 기본값으로는 **taste-skill**로 시작하세요. (현재 v2 실험적 버전 - [CHANGELOG](CHANGELOG.md)에서 변경 사항을 확인하세요.)
- 기존 taste-skill의 정확한 동작에 의존해야 하는 경우, 대신 **taste-skill-v1**을 설치하세요. 
- 더 엄격한 GPT/Codex 중심 규칙과 모션/레이아웃 적용을 원할 때는 **gpt-taste**를 사용하세요. 
- 이미지 → 분석 → 코드 웹사이트 워크플로우에는 **image-to-code-skill**을 사용하세요. 
- 그린필드(신규) 스타일링 대신 기존 코드베이스를 개선하려면 **redesign-skill**을 사용하세요. 
- 시각적 방향성이 이미 정해져 있다면 **soft-skill**, **minimalist-skill**, **brutalist-skill**을 추가하세요. 
- 에이전트가 출력을 자꾸 잘라내는(truncating) 경우 **output-skill**을 추가하세요. 
- 산출물이 **이미지**(컴프, 플로우, 아이덴티티 보드)인 경우 **imagegen-frontend-web**, **imagegen-frontend-mobile**, 또는 **brandkit**을 사용한 뒤 결과를 코딩 에이전트에 전달하세요.

### 이미지 우선 팁 (Image-first tip)

**image-to-code-skill**의 경우 프롬프트에 파이프라인을 명시하세요. 예: `follow the skill: generate images, then analyze, then code` (스킬을 따르세요: 이미지 생성, 분석 후 코드 작성).

### ChatGPT Images 및 Codex

**`imagegen-frontend-web`**, **`imagegen-frontend-mobile`**, 또는 **`brandkit`**을 첨부하거나 붙여넣고 필요한 프레임을 요청한 다음, 렌더링된 결과물을 Codex, Cursor, Claude Code에 피드백하세요. 레퍼런스 생성과 사이트 코드 구현을 모두 수행하는 단일 워크플로우를 원할 때는 **image-to-code-skill**을 사용하세요.

## 설정 (Settings - taste-skill 전용)

파일 상단의 숫자는 1부터 10까지의 다이얼입니다:

- **DESIGN_VARIANCE**: 레이아웃 실험성 (낮음: 중앙 정렬/깔끔함 · 높음: 비대칭/모던함).
- **MOTION_INTENSITY**: 애니메이션 깊이 (낮음: 호버 · 높음: 스크롤/자석 효과).
- **VISUAL_DENSITY**: 뷰포트당 정보량 (낮음: 널찍함 · 높음: 조밀한 대시보드).

## 예시 (Examples)

taste-skill로 제작된 결과물:

<p>
  <img src="examples/floria-top.webp" width="400" />
  <img src="examples/floria-bottom.webp" width="400" />
</p>

## 프로젝트 지원하기 (Support the project)

Taste Skill이 도움이 되었다면 스폰서를 고려해 보세요:

[GitHub에서 스폰서하기](https://github.com/sponsors/Leonxlnx)

### 커뮤니티 스폰서

<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>
<a href="https://github.com/LuisGot"><img src="https://github.com/LuisGot.png" width="40" height="40" style="border-radius:50%" alt="LuisGot" title="LuisGot" /></a>
<a href="https://github.com/oskar-collab"><img src="https://github.com/oskar-collab.png" width="40" height="40" style="border-radius:50%" alt="oskar-collab" title="oskar-collab" /></a>

<p align="center">
 <a href="https://www.star-history.com/leonxlnx/taste-skill">
  <picture>
   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/badge?repo=Leonxlnx/taste-skill&theme=dark" />
   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/badge?repo=Leonxlnx/taste-skill" />
   <img alt="Star History Rank" src="https://api.star-history.com/badge?repo=Leonxlnx/taste-skill" />
  </picture>
 </a>
</p>

## 연구 (Research)

이러한 스킬들을 형성하는 데 바탕이 된 배경 글은 [`research/`](research/)에 있습니다.

## 자주 묻는 질문 (Common Questions)

**다른 AI 디자인 스킬과 무엇이 다른가요?**  
다양한 특화 변형, 주요 스킬의 조절 가능한 다이얼, 그리고 전용 연구를 바탕으로 한 반복 방지 규칙을 제공합니다. 주요 코딩 에이전트 전반에서 프레임워크에 구애받지 않고 작동합니다.

**React, Vue, Svelte에서 작동하나요?**  
네. 규칙들은 특정 프레임워크 API가 아닌 디자인 의도를 타겟으로 합니다.

**SKILL.md란 무엇인가요?**  
에이전트가 자동으로 로드할 수 있는 휴대용 지침 파일입니다. `npx skills add`를 통해 설치하거나 저장소 또는 대화창에 복사하여 사용할 수 있습니다.

**이미지 생성 스킬도 `npx skills add`로 설치되나요?**  
네. 코드 스킬과 함께 `skills/` 아래에 위치하므로 동일한 CLI로 감지됩니다.

## 라이선스 (License)

[MIT License](LICENSE) · Copyright (c) 2026 Leonxlnx