design-taste-frontendcommit af8a897SKILL.md · UI·인터랙션

Taste Skill 프론트엔드

엄선된 247개 사이트 연구에 기반한 웹 아트 디렉션. 방향을 뽑고 실제 브라우저로 검사하며 화면을 보고 고칩니다.

스크립트에는 Node 22 이상과 Chrome·Edge·Chromium 중 하나가 필요합니다.

npx skills add Leonxlnx/taste-skill --skill design-taste-frontend

권한: read-repo
write-files
shell
network
호환 도구: Claude Code, Codex
GitHub: 107.3k
출처: 커뮤니티 · Leon Lin
상태: 스캔 통과
라이선스: MIT
카테고리: UI·인터랙션
저장소: github.com/Leonxlnx/taste-skill/skills/taste-skill

핵심 규칙

방향은 라이브러리에서 뽑고 아이디어는 주제 자체에서 얻으며, 고객·후기·수치는 지어내지 않습니다.

실행 단계

01단계요구와 프로젝트 읽기
스크롤해 읽는 페이지인지 앱 화면인지 먼저 정하고, 프로젝트와 쓸 수 있는 이미지 출처를 확인합니다.
02단계방향 뽑기
draw.mjs로 연구된 20개 방향 중 3개를 뽑고, 고른 방향에 글꼴·팔레트·히어로·섹션 구성을 배정합니다.
03단계블루프린트대로 구축
토큰과 히어로부터 만들고 각 섹션을 블루프린트대로 구현하며, 주제의 실제 사진과 살아 있는 요소를 넣습니다.
04단계검사와 확인
inspect.mjs로 실제 브라우저에서 규칙을 검사하고 세 가지 폭의 스크린샷을 기준으로 고쳐 FAIL이 없을 때까지 반복합니다.
05단계모션 추가 후 보고
대표 모션, 섹션 등장, 컨트롤 피드백을 더하고 실제로 실행한 검사만 보고합니다.

권한 설명 (SKILL.md 기준)

기능	필요 여부	설명
파일 쓰기	필요	프로젝트의 페이지 코드를 수정하고, 작업 파일은 프로젝트 루트의 .taste-skill/에 씁니다.
명령 실행	일부 필요	스킬에 포함된 Node 스크립트(draw, inspect, assets 등)를 실행하고 로컬 Chrome/Edge/Chromium으로 캡처하며, 의존성은 설치하지 않습니다.
네트워크 송신	일부 필요	네트워크는 공개 이미지 자료를 가져오는 assets.mjs만 사용하며 API 키는 쓰지 않습니다.

SKILL.md 프런트매터(YAML)commit af8a897

---
name: design-taste-frontend
description: >-
  tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of
  247 curated gallery sites (One Page Love, Awwwards Sites of the Day). Deals researched directions
  (idea, composition, type, palette, photographs, section blueprints) from a library, enforces a strict
  no-slop house style with a real-browser inspector, and runs a look-and-fix loop on screenshots. Use
  this whenever you build, design, redesign, restyle, polish or review a landing page, marketing site,
  portfolio, product page, one-pager, hero or any public-facing web page, in any stack (HTML/CSS, React,
  Next.js, Vue, Svelte, Astro, Tailwind) — also when the user says a page looks generic, templated,
  "AI-made", sloppy, or asks to make it look designed, premium, award-level or less like every other
  site. Also for app screens: dashboards, admin and analytics views, settings, inboxes and other screens
  people work in, with their own run and rules.
---

핵심 규칙

실행 단계

01단계요구와 프로젝트 읽기

02단계방향 뽑기

03단계블루프린트대로 구축

04단계검사와 확인

05단계모션 추가 후 보고

권한 설명 (SKILL.md 기준)

SKILL.md 프런트매터(YAML)

관련 스킬