Communitygithub.com

siuserxiaowei/visual-taste-lab

VI 우선 UI/UX 디자인 언어 스킬로, Codex와 Claude Code에서 AI가 먼저 시각적 정체성 감사를 수행한 후 페이지를 작성하도록 합니다.

visual-taste-lab란 무엇인가요?

이 스킬은 AI 에이전트(Codex, Claude Code)가 UI/UX 작업을 시작하기 전에 시각적 정체성(VI) 감사를 먼저 수행하도록 하는 설계 중심 도구입니다. 개발자는 브랜드 가이드, 로고, 컬러 팔레트, 타이포그래피 샘플 등 시각적 참조 자료를 제공하면, 스킬이 이를 분석하여 일관된 디자인 언어를 도출합니다. 그런 다음 AI는 이 감사 결과를 바탕으로 페이지, 컴포넌트, 스타일시트를 생성하여 모든 출력물이 브랜드와 시각적으로 일관되도록 보장합니다. 기존 UI 프레임워크와 완벽하게 통합되며, AI가 코딩 전 디자인 의도를 이해하도록 하여 수정 작업을 줄이고 결과물의 품질을 높입니다.

지원 대상✓Claude Code✓Codex CLI~Cursor
npx skills add siuserxiaowei/visual-taste-lab

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

visual-taste-lab은(는) 무엇을 하나요?

VI 우선 UI/UX 디자인 언어 스킬로, Codex와 Claude Code에서 AI가 먼저 시각적 정체성 감사를 수행한 후 페이지를 작성하도록 합니다.

개요

이 스킬은 AI 에이전트가 시각적 정체성 감사(Visual Identity Audit)를 먼저 수행하도록 하여 디자인 결정을 안내합니다. 브랜드 가이드, 로고, 컬러 팔레트, 타이포그래피 등 시각적 참조 자료를 분석한 후, 일관된 UI/UX를 생성합니다.

사용 방법

  1. 참조 자료 제공: 브랜드 로고, 컬러 팔레트, 타이포그래피 샘플을 첨부하거나 설명합니다.
  2. 감사 실행: AI가 시각적 정체성을 분석하고 디자인 언어를 도출합니다.
  3. 페이지 생성: 감사 결과를 바탕으로 AI가 일관된 페이지와 컴포넌트를 작성합니다.

지원 플랫폼

  • Codex
  • Claude Code

예시

  • "이 로고와 컬러 코드를 바탕으로 랜딩 페이지를 만들어 주세요."
  • "제공된 타이포그래피 가이드를 사용하여 버튼 컴포넌트를 생성하세요."

참고

  • 모든 생성 결과물은 제공된 시각적 참조 자료와 일관됩니다.
  • 필요시 감사 결과를 수동으로 조정할 수 있습니다.

관련 스킬