taste-skill

Sponsors

interfaces.dev · Jakub Krehel이 만든 디자인 엔지니어링 매거진

React Bits · 크리에이티브 인터페이스를 위한 애니메이션 React 컴포넌트

IMG.LY · CreativeEditor SDK

Sent.dm · SMS, WhatsApp, RCS용 메시징 API

스폰서 되기

Taste Skill은 코딩 에이전트가 평범한 랜딩 페이지를 조립하는 대신 웹사이트와 앱 화면을 디자인하도록 만드는 Agent Skill입니다. 에이전트에게 아트 디렉션, 실제 사진, 그리고 실제 브라우저에서 자기 작업을 검증할 방법을 제공합니다.

이 스킬이 만든 페이지들, 각각 하나의 브리프에서 출발했습니다:

사진은 실제 사진으로, 오픈 아카이브에서 찾아 스킬이 출처를 표기합니다( credits ). 런치 필름 을 시청하세요.

설치
npx skills add https://github.com/Leonxlnx/taste-skill --skill " design-taste-frontend "
npx skills CLI로 스킬을 설치합니다.

스킬은 Node 22+와 설치된 Chrome, Edge 또는 Chromium 으로 스크립트를 실행합니다. 아무것도 설치하지 않으며 API 키도 필요 없습니다. 사진을 찾으려면 네트워크 접근이 필요합니다.

Claude Code 플러그인
Claude Code 안에서 다음을 실행하세요. 스킬은 taste-skill: 네임스페이스 아래에 있어 다른 스킬과 충돌하지 않습니다.

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

/plugin update 로 나중에 업그레이드할 수 있습니다.

Codex 플러그인
codex plugin marketplace add Leonxlnx/taste-skill
codex plugin add taste-skill@taste-skill
이후 새 Codex 세션을 시작하면 스킬이 로드됩니다.

클론에서 복사 대신 링크로
./install.sh는 스킬을 Claude Code에 심볼릭 링크합니다( --codex 는 Codex용, --all-agents 는 둘 다). 따라서 git pull로 제자리에서 업데이트됩니다.

이미 스킬이 있나요? 설치 명령을 다시 실행하세요. 설치 이름은 바뀌지 않았습니다. 이전 스킬 중 하나를 찾고 있나요? 이동된 스킬 을 참고하세요.

v2 작동 방식
이 스킬은 247개의 엄선된 사이트 연구를 바탕으로 만들어졌습니다. 빌드는 여섯 단계로 진행됩니다:

브리프를 읽고 이 클라이언트만 가진 것을 나열합니다.
스크립트가 연구된 20가지 방향 중 세 가지를 나눠주고 에이전트가 하나를 고릅니다.
아이디어를 찾습니다: 클라이언트 자신의 소재를 그 방향에 연결하는 한 문장.
오픈 컬렉션의 실제 사진과 영상으로, 출처를 표기하여 빌드합니다.
실제 브라우저에서 세 가지 너비로 페이지를 검사하고, 조잡하면 실패 처리합니다.
자신의 스크린샷을 보고 상위 세 가지 문제를 수정합니다. 최대 세 라운드까지.

빌드에는 대략 30~45분과 수십만 토큰이 소요됩니다. 자세한 내용은 changelog 와 study 에 있습니다.

대시보드와 앱 화면(v2.1)은 자체 경로를 따릅니다: 스킬이 실제 제품 화면에서 추출한 앱 스타일 중 하나를 나눠주고, 그 수치에 맞춰 셸, 데이터, 차트, 테이블을 빌드하며, 앱 규칙으로 결과를 검사합니다: 조용한 패널, 정렬된 수치, 데이터에만 쓰인 색, 내비게이션이 접히는 폰 레이아웃. 제품의 랜딩 페이지도 보여주는 앱을 같은 방식으로 빌드하므로 스크린샷이 실제 작동하는 제품처럼 보입니다.

v2.1은 또한 모든 페이지의 프레임을 검사하고(첫 화면의 명확한 제목, 균등한 여백, 한쪽으로 밀린 섹션 없음, 무작위 빈 공간 없음), 최신 100개의 Awwwards Sites of the Day에서 측정한 강력한 수상 사이트들이 움직이는 방식을 따릅니다.

이동된 스킬
이 저장소에는 design-taste-frontend 스킬 하나가 있습니다. 나머지는 각자의 저장소로 이동했고 설치 이름은 유지했습니다:

설치 이름
현재 위치

high-end-visual-design , minimalist-ui , industrial-brutalist-ui , gpt-taste , stitch-design-taste , design-taste-frontend-v1 , design-taste-frontend-v2-experimental
Leonxlnx/taste-skill-classics

imagegen-frontend-web , imagegen-frontend-mobile , brandkit , image-to-code
Leonxlnx/imagegen-skills

redesign-existing-projects
design-taste-frontend 의 일부로, 변경 전에 실제 브라우저에서 기존 페이지를 감사합니다

full-output-enforcement
제거됨. 같은 문제는 Leonxlnx/unlazy 를 참고하세요

이동된 스킬은 새 저장소에서 같은 이름으로 설치하세요:

npx skills add https://github.com/Leonxlnx/taste-skill-classics --skill " high-end-visual-design "
자주 묻는 질문
스킬에는 무엇이 필요한가요?

Node 22 이상과 Chrome, Edge 또는 Chromium. 아무것도 설치하지 않으며 API 키도 사용하지 않습니다. 사진을 찾을 때만 인터넷이 필요합니다.

사진은 어디서 오며, 사용해도 되나요?

Wikimedia Commons, Openverse, Met 같은 오픈 컬렉션에서 가져옵니다. 퍼블릭 도메인, CC0, CC BY, CC BY-SA 파일만 제공되며 스킬이 페이지에 출처를 표기합니다. 직접 가진 사진이 있으면 교체하세요.

React, Vue, Svelte, 순수 HTML에서 작동하나요?

네. 규칙은 프레임워크가 아니라 디자인에 관한 것입니다.

대시보드와 앱 화면용인가요?

네, v2.1부터입니다. 스킬은 페이지와 앱 화면을 구분하고 대시보드, 관리자 뷰, 설정 화면을 자체 실행으로 빌드합니다: 실제 제품 화면 연구에서 나눠준 스타일, 조용한 패널, 정직한 데이터와 차트, 그리고 자체 검사( inspect.mjs --app ).

프로젝트 후원
Taste Skill이 도움이 된다면 후원을 고려해 주세요:

GitHub에서 후원

오픈 소스 서포터

Kimi API 키 받기 : taste-skill 사용자는 첫 구매 시 10% 보너스 API 크레딧을 받습니다.

커뮤니티 스폰서

피드백: 이슈나 풀 리퀘스트를 열거나, @lexnlin 또는 @blueemi99 에게 DM을 보내거나, [email protected] 로 이메일을 보내세요.

Taste Skill은 공식 토큰, 코인, 암호화폐 프로젝트가 없습니다. 제 이름, 이미지, 프로젝트를 사용하는 모든 토큰은 무관하며 제가 보증하지 않습니다.

라이선스
MIT License · Copyright (c) 2026 Leonxlnx