Repolode
제출하기
smokeeaasd

smokeeaasd/flawless-ui-ux

코딩 에이전트가 UI를 만들고, 재설계하고, 검토하도록 안내하는 UI/UX 디자인 스킬과 실행 중인 페이지의 접근성 및 레이아웃 문제를 점검하는 CLI입니다.

GitHub에서 보기
스타
80
포크
1
열린 이슈
0
마지막 커밋
어제

어떤 프로젝트인가요?

flawless-ui-ux는 Codex, Claude Code, OpenCode, Cursor 같은 코딩 에이전트에 인터페이스 디자인 지침을 제공하는 스킬 패키지입니다. 제품의 대상 사용자, 콘텐츠, 정체성을 구성, 타이포그래피, 색상, 정보 밀도, 상호작용과 연결하며, 새 화면 제작, 기존 화면 재설계, 세부 요소 개선, 파일을 수정하지 않는 작업 검토를 지원합니다.

이 프로젝트는 npm CLI도 제공합니다. 프로젝트의 맥락을 수집하고, 선택한 소스 파일이나 헤드리스 브라우저로 실행 중인 개발 서버를 점검해 접근성 대비 및 이름 지정 문제, 계산된 글꼴 크기, 가로 넘침, 깨진 이미지, 처리되지 않은 JavaScript 오류를 보고합니다. 저장한 기준선을 변경 후 다시 실행하면 계속 남아 있는 문제, 새로 생긴 문제, 해결된 문제를 구분할 수 있습니다.

설치할 때는 지원되는 에이전트의 프로젝트 디렉터리 또는 전역 디렉터리에 스킬을 복사하며, Node 22.12 이상이 필요합니다. CLI 검사는 표본 점검 도구이며, 완전한 WCAG 준수 여부나 시각적 품질을 보장하지는 않습니다.

핵심 기능

  • 01기존 스택에서 인터페이스를 만들고, 재설계하고, 다듬고, 검토하도록 안내
  • 02지원되는 코딩 에이전트 12종의 프로젝트 또는 전역 디렉터리에 설치
  • 03소스 파일과 실행 중인 페이지에서 접근성 및 레이아웃 문제를 점검
  • 04저장된 기준선을 비교해 계속 남아 있는 문제, 새로 생긴 문제, 해결된 문제를 구분
  • 05대화형 설치 프로그램 또는 스크립트 실행용 명시적 플래그 지원

활용 사례

  • 코딩 에이전트에 명확한 시각적 방향을 갖춘 새 랜딩 페이지나 대시보드 제작 요청
  • 기존 화면의 가독성, 탐색 구조, 반복적이고 개성이 부족한 패턴 검토
  • 로컬 개발 서버에서 모바일 너비일 때 대비 문제와 가로 넘침 점검
  • UI 수정 작업 후 같은 문제가 남아 있지 않은지 확인

빠른 시작

  1. 1

    npm으로 프로젝트에 skill을 설치합니다

    npx flawless-ui-ux@latest install
  2. 2

    코딩 에이전트에게 skill을 사용해 인터페이스를 만들거나 검토하도록 요청합니다

사용 전 알아둘 점

  • Node 22.12 이상이 필요합니다.
  • 브라우저 기반 검사를 실행하려면 Playwright Chromium을 설치해야 합니다.
  • 검사는 일부 뷰포트만 대상으로 하며 WCAG 완전 준수를 입증하지 않습니다.

포함된 컬렉션

AI 코딩 에이전트용 UI 디자인 스킬오픈소스 AI 에이전트 프레임워크와 앱AI 코딩 어시스턴트와 에이전트AI 에이전트 스킬 라이브러리프론트엔드 프레임워크 & UI 컴포넌트

토픽

#ui-design#ux-design#accessibility#agent-skills#frontend#design-systems#ai-agents#playwright#anti-slop#codex

자주 묻는 질문

flawless-ui-ux은(는) 무엇인가요?
코딩 에이전트가 UI를 만들고, 재설계하고, 검토하도록 안내하는 UI/UX 디자인 스킬과 실행 중인 페이지의 접근성 및 레이아웃 문제를 점검하는 CLI입니다. flawless-ui-ux는 Codex, Claude Code, OpenCode, Cursor 같은 코딩 에이전트에 인터페이스 디자인 지침을 제공하는 스킬 패키지입니다. 제품의 대상 사용자, 콘텐츠, 정체성을 구성, 타이포그래피, 색상, 정보 밀도, 상호작용과 연결하며, 새 화면 제작, 기존 화면 재설계, 세부 요소 개선, 파일을 수정하지 않는 작업 검토를 지원합니다.
flawless-ui-ux은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
flawless-ui-ux은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
flawless-ui-ux은(는) 아직 유지보수되고 있나요?
활발히 유지보수 중. flawless-ui-ux의 마지막 커밋은 2026년 11월 6일입니다.
flawless-ui-ux은(는) 어디에 사용할 수 있나요?
코딩 에이전트에 명확한 시각적 방향을 갖춘 새 랜딩 페이지나 대시보드 제작 요청 기존 화면의 가독성, 탐색 구조, 반복적이고 개성이 부족한 패턴 검토 로컬 개발 서버에서 모바일 너비일 때 대비 문제와 가로 넘침 점검 UI 수정 작업 후 같은 문제가 남아 있지 않은지 확인
flawless-ui-ux는 어떻게 설치하나요?
npm으로 프로젝트에 skill을 설치합니다: npx flawless-ui-ux@latest install 코딩 에이전트에게 skill을 사용해 인터페이스를 만들거나 검토하도록 요청합니다
flawless-ui-ux은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/smokeeaasd/flawless-ui-ux

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트