98.8K+다운로드
사용 가이드로 건너뛰기
high-end-visual-design작성자 Leonxlnx

High End Visual Design 스킬.

UI 디자인을 위한 Claude Code 및 Codex 스킬: 타이포그래피, 간격, 그림자, 카드, 모션 등 고급 에이전시 수준의 디테일을 학습합니다.

  • Web & UI
OpenDesign 다운로드사용 가이드 보기
Leonxlnx/taste-skill · skills/soft-skill/SKILL.mdSKILL.md
--- name: high-end-visual-design description: Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic. --- ## 1. Meta Information & Core Directive ## 2. THE "ABSOLUTE ZERO" DIRECTIVE (STRICT ANTI-PATTERNS) ## 3. THE CREATIVE VARIANCE ENGINE ## 4. HAPTIC MICRO-AESTHETICS (COMPONENT MASTERY) ## 5. MOTION CHOREOGRAPHY (FLUID DYNAMICS) ## 6. PERFORMANCE GUARDRAILS
2026-09-14에 업스트림 파일에서 읽은 전문 및 섹션 제목 · 전체 10,545자

01 기능

Claude Code와 Codex에서 high-end-visual-design 스킬이 하는 일

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

이 스킬은 정확한 타이포그래피 선택, 공간 리듬, 그림자 기법, 카드 구조, 유동적인 모션 패턴을 정의함으로써 코딩 에이전트가 15만 달러 이상 규모의 에이전시급 비주얼 디자인을 만들어내도록 가르칩니다. Inter, Roboto, 두꺼운 선의 아이콘, 강한 그림자, 표준 이징 같은 일반적인 기본값을 금지하고, Geist나 Clash Display, 초경량 아이콘, 커스텀 cubic-bezier 트랜지션 같은 프리미엄 대안을 적용합니다.

모든 결과물은 반복을 방지하기 위해 고유한 Vibe Archetype(Ethereal Glass, Editorial Luxury, Soft Structuralism 중 하나)과 Layout Archetype(Asymmetrical Bento, Z-Axis Cascade, Editorial Split 중 하나)을 결합해야 합니다. 컴포넌트는 중첩된 Double-Bezel 테두리, Button-in-Button 후행 아이콘, 넓은 여백(py-24~py-40), 스크롤에 따라 보간되는 진입 애니메이션을 사용합니다. 모든 모션은 transform과 opacity만을 통해 실제 물리 법칙을 시뮬레이션하며, 모바일에서는 엄격한 성능 가드레일을 적용합니다.

산출물

  • 선택된 Vibe와 Layout Archetype을 더블베젤(Double-Bezel) 컴포넌트 구조, 커스텀 cubic-bezier 모션, 모바일 반응형 축소와 함께 구현하는 완벽한 픽셀 퍼펙트 React/Tailwind/HTML 코드
예시 프롬프트 보기 ↗

작동 방식

  1. 01
    Variance Engine 실행

    코드를 작성하기 전에 에이전트는 프롬프트의 맥락을 기반으로 사전에 정의된 프리미엄 조합 중 하나의 Vibe Archetype과 하나의 Layout Archetype을 조용히 선택하여 고유하게 맞춤화된 결과물을 보장합니다.

  2. 02
    배경과 타이포그래피 구성

    선택된 텍스처(방사형 그라디언트가 있는 OLED 블랙, 노이즈 오버레이가 있는 웜 크림, 소프트 섀도우가 있는 실버 그레이)를 적용하고 과장된 매크로 여백과 함께 매우 큰 타이포그래피 크기를 설정합니다.

  3. 03
    중첩 컴포넌트 구조 설계

    모든 주요 카드, 입력창, 그리드를 더블베젤(Double-Bezel) 기법으로 구성합니다. 즉, 얇은 선 테두리와 패딩을 가진 외부 셸이 자체 배경과 수학적으로 계산된 더 작은 라운드값을 가진 내부 코어를 감싸는 구조입니다.

  4. 04
    유동적인 모션을 연출합니다

    모든 상태 변화에 커스텀 cubic-bezier 트랜지션을 적용하고, translate-y 및 opacity 변화를 활용한 단계적 내비게이션 노출, 대각선 이동과 스케일링이 있는 마그네틱 버튼 호버 물리 효과를 구현합니다.

  5. 05
    스크롤 인터폴레이션 적용

    요소는 IntersectionObserver 또는 Framer Motion의 whileInView를 사용하여(window 스크롤 리스너는 절대 사용하지 않음) 800ms 이상에 걸쳐 부드러운 페이드업 애니메이션(translate-y-16 blur-md opacity-0에서 해소)으로 뷰포트에 진입합니다.

  6. 06
    출력 전 체크리스트로 검증

    금지된 패턴이 없는지, archetype 선택이 올바른지, 더블베젤(Double-Bezel) 구조인지, 커스텀 이징이 적용되었는지, 모바일 축소가 되는지, GPU에 안전한 애니메이션인지를 확인하는 11개 항목 매트릭스로 전달 전 코드를 평가합니다.

02 적합성 확인

high-end-visual-design 스킬을 사용해야 하는 경우

UI 디자인 작업 시 Claude Code 또는 Codex에서 high-end-visual-design 스킬을 사용하십시오. 적용 범위와 제약은 스킬 자체 파일을 참조합니다.

적합한 경우

  • SaaS, AI, 기술, 라이프스타일, 부동산, 소비자, 헬스, 포트폴리오 프로젝트를 위해 세밀한 마이크로 인터랙션과 시네마틱한 공간 리듬을 요구하는 15만 달러 이상의 에이전시급 디지털 경험 구현
  • 커스텀 cubic-bezier 트랜지션과 스크롤 인터폴레이션 진입 애니메이션으로 햅틱한 깊이감과 완벽하게 유려한 모션을 발산해야 하는 인터페이스 구축

한계 인지하기

  • 타이포그래피로 Inter, Roboto, Arial, Open Sans, Helvetica를 사용해야 하는 프로젝트에는 이 skill을 사용할 수 없습니다
  • 일반적인 두꺼운 선의 Lucide, FontAwesome, Material Icons가 필요한 디자인은 이 skill의 초경량 아이콘 요구사항과 맞지 않습니다
  • 상단에 고정된 엣지투엣지 스티키 내비바나, 큰 여백 간격 없이 대칭적인 3열 부트스트랩식 그리드를 가진 인터페이스는 레이아웃 제약을 위반합니다
  • 보간 없이 표준 linear 또는 ease-in-out 트랜지션이나 즉각적인 상태 변화를 사용하는 모션 패턴은 명시적으로 금지됩니다

제공할 사항

  • Archetype 선택을 위한 프롬프트 맥락사용자 요청에는 프로젝트 유형(SaaS, 라이프스타일, 포트폴리오 등)이 명시되어야 하며, 이를 통해 에이전트가 Variance Engine에서 적절한 Vibe와 Layout Archetype 조합을 선택할 수 있습니다.

03 스킬 내부

high-end-visual-design Skill이 Claude Code와 Codex에 부여하는 규칙

SKILL.md가 에이전트에게 설정하는 8가지 구체적인 지시, 기본값, 제한 — 결과를 바꾸는 파일의 부분입니다.

  1. 모든 일반적인 기본값 금지

    Inter, Roboto, Arial, Open Sans, Helvetica, 두꺼운 선의 Lucide나 Material Icons, 1px solid gray 테두리, 강한 드롭 섀도우(shadow-md, rgba(0,0,0,0.3)), 엣지투엣지 스티키 내비바, 대칭적인 부트스트랩 그리드, linear/ease-in-out 트랜지션은 절대 사용하지 않습니다.

  2. 같은 레이아웃을 두 번 반복하지 않기

    에이전트는 다양한 프리미엄 레이아웃 아키타입과 텍스처 프로필을 역동적으로 조합하면서도 엘리트 디자인 언어를 엄격히 준수해야 하며, 두 개의 결과물이 동일하게 보이지 않도록 해야 합니다.

  3. 프리미엄 타이포그래피와 아이콘만 사용

    Geist, Clash Display, PP Editorial New, Plus Jakarta Sans 등의 폰트를 사용할 수 있다고 가정합니다. Phosphor Light 또는 Remix Line과 같이 초경량이고 정밀한 라인의 아이콘만 사용합니다.

  4. 모든 주요 컴포넌트에 더블 베젤 적용

    프리미엄 카드나 컨테이너를 절대 평면적으로 배치하지 않습니다.

  5. 매크로 화이트스페이스를 위한 이중 표준 패딩

    섹션 패딩에는 py-24에서 py-40을 사용하여 디자인이 충분히 여유롭게 숨 쉬도록 합니다. 표준 패딩으로는 프리미엄한 느낌을 내기 부족합니다.

  6. transform과 opacity만 애니메이션 처리

    top, left, width, height는 레이아웃 재계산을 유발하므로 절대 애니메이션 처리하지 않습니다. GPU 가속되는 성능 안전 모션을 위해 오직 transform과 opacity만 사용합니다.

  7. backdrop-blur는 고정 요소에만 제한

    backdrop-blur는 내비게이션 바나 오버레이처럼 fixed 또는 sticky 요소에만 적용합니다.

  8. 768px 이하에서 모든 비대칭 레이아웃 축소

    md: 브레이크포인트 이상의 모든 비대칭 레이아웃은 768px 이하의 뷰포트에서 반드시 w-full, px-4, py-8로 적극적으로 폴백되어야 합니다.

04 활용하기

Claude Code 또는 Codex에 high-end-visual-design 설치

npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

Claude Code, Codex 또는 사용자의 에이전트에 high-end-visual-design 추가

프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

Terminal
npx skills add https://github.com/Leonxlnx/taste-skill --skill high-end-visual-design

skills/soft-skill/SKILL.md용 일반 skills CLI 형식이며, 저장소는 자체 경로를 문서화할 수 있습니다.

스킬에 첫 UI 디자인 작업 부여하기

스킬 자체의 용어로 작성되었습니다. 대괄호 부분은 각자의 자료로 교체합니다.

Starter prompt
Design a hero section for [SaaS product name] that feels like a $150k agency build. The product is an AI-powered analytics platform targeting enterprise clients. Include a floating navigation pill, a massive headline with an eyebrow tag, and a primary CTA with nested trailing icon. Use the Ethereal Glass vibe with deepest OLED black background and radial mesh gradients. Apply the Asymmetrical Bento layout with varying card sizes showcasing three key features. Ensure all elements have scroll-interpolated entry animations and the layout collapses gracefully on mobile.

출처: 스킬 자체의 용어로 SKILL.md에서 작성했습니다.

첫 번째 결과 확인

SKILL.md 자체가 올바른 결과의 모습으로 제시하는 내용:

  • 금지된 폰트(Inter, Roboto, Arial, Open Sans, Helvetica), 아이콘(두꺼운 선의 Lucide, FontAwesome, Material), 테두리(1px solid gray), 그림자(shadow-md, 거친 드롭 섀도), 레이아웃(엣지투엣지 sticky 내비게이션 바, 대칭형 그리드), 모션 패턴(linear, ease-in-out)이 없는지 확인
  • 바이브 아키타입(Ethereal Glass, Editorial Luxury, Soft Structuralism)과 레이아웃 아키타입(Asymmetrical Bento, Z-Axis Cascade, Editorial Split)이 의식적으로 선택되고 적용되었는지 확인
  • 모든 주요 카드와 컨테이너가 외부 셸(헤어라인 테두리, 패딩, 큰 라운드)이 내부 코어(별도 배경, 더 작게 계산된 라운드)를 감싸는 더블 베젤 중첩 구조를 사용하는지 확인
  • 섹션 패딩이 최소 py-24이며 레이아웃이 과장된 매크로 화이트스페이스로 숨 쉬는지 확인
  • 모든 트랜지션이 커스텀 cubic-bezier 커브를 사용하며 linear나 ease-in-out 이징이 없는지 검증
  • 스크롤 진입 애니메이션이 존재하여 어떤 요소도 정적으로 나타나지 않는지, 그리고 모든 애니메이션이 top, left, width, height 같은 레이아웃 유발 속성을 애니메이션 처리하지 않고 오직 transform과 opacity만 사용하는지 확인

OpenDesign에서 SKILL.md 링크를 통해 high-end-visual-design을 임포트합니다: Plugins → Add → Skill → Import from link, 그런 다음 상단 바에서 선택합니다.

OpenDesign 다운로드빠른 시작 가이드 읽기

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

Author
Leonxlnx
Repository
github.com/Leonxlnx/taste-skill 브랜치 main
스킬 파일
skills/soft-skill/SKILL.md 검증 시 기록된 콘텐츠 체크섬; 커밋 ccbc156
License
MIT LICENSE에서 확인
리포지토리 스타
86,946 GitHub 스냅샷은 2026-09-14에 11개의 스킬을 포함한 Leonxlnx/taste-skill 저장소 전체를 대상으로 촬영되었습니다. high-end-visual-design의 평가 또는 사용 횟수가 아닙니다.
OpenDesign에서 검증됨
2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 스타 수가 확인되었습니다. OpenDesign 메인에 번들로 포함되지 않음(2026-08-28 확인); 이 페이지에 실제 실행 기록이 없습니다.

SKILL.md 내부

  1. 메타 정보 및 핵심 지침Vanguard_UI_Architect 페르소나, $150k+ 에이전시 목표, 고유한 결과물을 요구하는 Variance Mandate를 정의합니다
  2. "ABSOLUTE ZERO" 지침 (엄격한 안티패턴)즉각적인 디자인 실패를 유발하는 금지된 폰트, 아이콘, 테두리, 그림자, 레이아웃, 모션 패턴을 모두 나열합니다
  3. THE CREATIVE VARIANCE ENGINE고유한 프리미엄 결과물을 위해 조합할 세 가지 바이브 아키타입과 세 가지 레이아웃 아키타입, 모바일 축소 규칙을 명시합니다
  4. 햅틱 마이크로 미학(컴포넌트 마스터리)더블 베젤 중첩 구조, 버튼 안의 버튼 트레일링 아이콘 패턴, 아이브로우 태그가 있는 매크로 화이트스페이스 공간 리듬을 상세히 설명합니다
  5. 모션 코레오그래피(플루이드 다이내믹스)커스텀 cubic-bezier 트랜지션, 햄버거 모프가 포함된 Fluid Island Nav, 마그네틱 버튼 호버 물리, 스크롤 보간 애니메이션을 정의합니다
  6. 퍼포먼스 가드레일애니메이션을 transform과 opacity로만 제한하고, backdrop-blur를 고정 요소에만 적용하며, z-index 규율을 강제합니다
  7. 실행 프로토콜무음 아키타입 선택부터 스캐폴딩, 아키텍처, 코레오그래피, 픽셀 퍼펙트 결과물 전달까지 정확한 5단계 시퀀스를 제공합니다
  8. 사전 출력 체크리스트금지된 패턴, 아키타입 적용, 더블 베젤 아키텍처, 모션 품질, 모바일 축소, 성능에 대한 11가지 필수 검증 항목을 나열합니다
스킬 자체 설명
"AI가 고급 에이전시처럼 디자인하도록 가르칩니다. 웹사이트를 고급스럽게 만드는 정확한 폰트, 간격, 그림자, 카드 구조 및 애니메이션을 정의합니다. AI 디자인을 저렴하거나 일반적으로 보이게 만드는 모든 일반적인 기본값을 차단합니다."

SKILL.md의 앞부분 설명입니다. 전체 파일은 약 10,545자입니다. GitHub에서 전체 파일 읽기.

06 설치하기 전에

high-end-visual-design 스킬에 대한 질문

이 답변은 2026-09-14 기준으로 확인한 SKILL.md 내용을 근거로 하며, 실행 기록을 바탕으로 한 것이 아닙니다.

이 스킬은 JavaScript 라이브러리나 프레임워크를 포함합니까?

이 스킬은 시각 디자인 패턴에 초점을 맞추며 스크롤 리빌을 위해 IntersectionObserver나 Framer Motion의 whileInView 사용을 권장하지만, 이 라이브러리들을 포함하거나 설치하지는 않습니다.

window.addEventListener('scroll')을 절대 사용하지 말라고 명시적으로 지시합니다. 이는 지속적인 리플로우를 유발하고 모바일 성능을 저하시키기 때문입니다. 애니메이션 라이브러리는 직접 제공해야 합니다.

High End Visual Design

실제 UI 디자인 작업에서 high-end-visual-design을 실행합니다.

OpenDesign을 다운로드하고, SKILL.md 링크에서 high-end-visual-design을 가져오고, 위 프롬프트를 붙여넣은 후 결과 전에 계획을 확인하십시오.

OpenDesign 다운로드모든 스킬 보기
터미널
npx skills add https://github.com/Leonxlnx/taste-skill --skill high-end-visual-design

OpenDesign 데스크톱

하나의 디자인 시스템으로 모든 결과물에 브랜드 일관성을

완전한 Vibe Design Workspace에서 하나의 브랜드 규칙을 웹사이트, 슬라이드, 인터랙티브 프로토타입, 대시보드, 이미지, HTML 영상에 적용하세요. 로컬 Codex, Claude Code, Cursor 등을 연결해 무료로 제작할 수 있습니다.

  • 웹, 슬라이드, 프로토타입, 대시보드, 이미지, 영상
  • 140개+ 디자인 시스템과 전체 템플릿·스킬 라이브러리
  • 로컬 Codex 및 21개+ 코딩 에이전트 연결 · 무료
무료 다운로드

macOS, Windows 지원