Codex 네이티브
성공
👍 0 · 투표하기
taste-skill (design-taste-frontend)
taste-skill v2: 웹사이트와 앱 화면을 위한 아트 디렉션입니다. 스크립트가 247개 사이트를 연구한 방향 라이브러리에서 세 가지 방향을 제시하면, 에이전트가 고른 방향으로 페이지를 만들고 함께 들어 있는 검사 도구로 실제 브라우저에서 확인합니다. 지침과 Node 스크립트로 이루어져 있으며 Node 22 이상, Chrome, 그리고 이미지를 찾기 위한 네트워크가 필요합니다.
- 경로
skills/taste-skill· SKILL.md- 고정 커밋
12af471f62- 라이선스
- MIT
각 프롬프트는 Codex 네이티브, Codex + skill, Claude Code 네이티브, Claude Code + skill의 고정 2×2로 표시됩니다. 스크린샷을 클릭하면 전체 페이지를 볼 수 있습니다. 설치 및 사용 ↓
강점
skill의 자체 문서가 내세우는 강점을 출처와 함께 정리했습니다. 이는 주장일 뿐 결과가 아니므로, 아래의 실제 페이지와 비교해 보시기 바랍니다.
- 엄선된 갤러리 사이트 247곳(One Page Love, Awwwards Sites of the Day)을 연구해 뽑아낸 웹사이트용 아트 디렉션 출처
- 코딩 에이전트가 평균적인 랜딩 페이지를 조립하는 대신 웹사이트와 앱 화면을 디자인하게 한다 출처
- 에이전트에게 아트 디렉션, 실제 사진, 그리고 실제 브라우저에서 자기 작업을 확인할 방법을 준다 출처
- 아이디어는 주제에서 나오고, 에이전트는 자기 스크린샷을 검토하고 고친다 출처
테스트 범위: SaaS 랜딩 페이지, 데이터 대시보드, 개인 블로그 및 포트폴리오. 범위 밖의 프롬프트는 ‘대기 중’이 아니라 ‘범위 밖’으로 표시합니다.
2차 실행 전에 skill 원문을 바탕으로 정했습니다.
SaaS 랜딩 페이지
landing-saas
데이터 대시보드
dashboard
개인 블로그 및 포트폴리오
blog-portfolio
설치 및 사용
프로젝트 수준 설치: skill 폴더(SKILL.md가 들어 있는 폴더)를 고정 커밋 기준으로 프로젝트에 복사합니다. 갤러리 실행에서도 같은 방식으로 설치했습니다.
Claude Code
설치
폴더를 <project>/.claude/skills/design-taste-frontend/에 복사합니다.
git clone https://github.com/Leonxlnx/taste-skill.git /tmp/design-taste-frontend-src
git -C /tmp/design-taste-frontend-src checkout 12af471f627f866411b4bd785b19646d3672784c
mkdir -p .claude/skills
cp -R /tmp/design-taste-frontend-src/skills/taste-skill .claude/skills/design-taste-frontend사용
# 대화형
/design-taste-frontend <작업 내용>
# 또는 요청 끝에 다음 문장 추가
Use the design-taste-frontend skill.
# 헤드리스(갤러리 실행과 동일)
claude -p '<작업 내용> Use the design-taste-frontend skill.'모든 프로젝트에서 사용하려면 대신 ~/.claude/skills/design-taste-frontend/에 폴더를 두면 됩니다. 요청이 skill 설명과 일치하면 Claude Code가 skill을 스스로 로드할 수도 있습니다.
Codex
설치
폴더를 <project>/.agents/skills/design-taste-frontend/에 복사합니다.
git clone https://github.com/Leonxlnx/taste-skill.git /tmp/design-taste-frontend-src
git -C /tmp/design-taste-frontend-src checkout 12af471f627f866411b4bd785b19646d3672784c
mkdir -p .agents/skills
cp -R /tmp/design-taste-frontend-src/skills/taste-skill .agents/skills/design-taste-frontend사용
# 대화형: 이름으로 언급하거나 /skills에서 선택
$design-taste-frontend <작업 내용>
# 헤드리스(갤러리 실행과 동일)
codex exec -s workspace-write '<작업 내용> Use the $design-taste-frontend skill.'모든 프로젝트에서 사용하려면 대신 ~/.agents/skills/design-taste-frontend/에 폴더를 두면 됩니다. Codex도 설명을 보고 skill을 스스로 선택할 수 있습니다.
참고
- The upstream folder name (taste-skill) differs from the skill name (design-taste-frontend); the gallery installs it under the skill name.
- Writes working files to .taste-skill/ and may save pictures and scripts next to index.html; the run scripts keep the files index.html references (output.kept_assets) and flag them as extra_files.
- Codex cells have no network, so the picture search step cannot run there.
- Its two signature strengths, real pictures and scroll scenes with a motion layer, are limited by the shared prompt rules (no remote images) and invisible in static screenshots; each cell also has a scroll recording.
- Upstream released v2.0.0 to v2.1.5 within 12 days; always use the pinned commit.
메타데이터: skills/design-taste-frontend/meta.yaml · Copyright (c) 2026 Leonxlnx