Repolode
제출하기
educlopez

educlopez/ui-craft

AI 코딩 에이전트가 흔한 AI 느낌의 인터페이스 대신 세련되고 프로덕션 품질에 맞는 UI를 만들도록 돕는 에이전트 스킬 및 CLI입니다.

GitHub에서 보기웹사이트
스타
435
포크
23
열린 이슈
3
마지막 커밋
어제

어떤 프로젝트인가요?

UI Craft는 AI 코딩 에이전트를 위한 디자인 엔지니어링 시스템입니다. 주관이 뚜렷한 인터페이스 디자인 규칙, 화면을 만들고 검토하고 다듬는 슬래시 명령 모음, 보라색 그라데이션, 바운스 이징, 똑같은 카드 그리드처럼 AI가 생성한 UI에서 흔히 보이는 패턴을 찾아내는 결정론적 검사를 제공합니다. 특정 스택에 종속되지 않으며 Tailwind, CSS Modules, styled-components, 일반 CSS, 단일 파일 컴포넌트 스타일에 맞춰 사용할 수 있습니다.

크로스 플랫폼 Go CLI(`ui-craft install`), Claude Code 플러그인, Cursor 플러그인 또는 다른 하네스에서 사용할 수 있는 Agent Skills 사양을 통해 설치할 수 있습니다. CLI는 백업 및 롤백 기능을 제공하며 각 하네스의 기본 설정에 스킬, 명령, MCP 품질 검사, 리뷰 에이전트를 기록합니다. 대시보드, 랜딩 페이지, 인증 화면 같은 UI를 만들 때는 이름이 지정된 구성 레시피와 승인 체크리스트를 참고할 수 있습니다.

함께 제공되는 `ui-craft-detect` 패키지는 의존성 없이 동작하는 스캐너로, 안티패턴, 접근성, 폼, 임시 문구를 다루는 43개 규칙을 포함합니다. 로컬 소스, 실제 URL, 변경된 줄만 검사할 수 있으며 Claude Code와 Cursor의 편집 시점 훅은 물론 pre-commit 및 GitHub Actions 워크플로도 설치할 수 있습니다.

핵심 기능

  • 01AI 에이전트가 계층 구조, 절제된 모션, 프로젝트별 토큰을 고려하도록 유도하는 디자인 규칙과 세부 완성도 가이드입니다.
  • 02개별 화면을 만들고 비평하고 다듬고 애니메이션을 적용하는 슬래시 명령입니다.
  • 03대시보드, 랜딩 페이지, 인증 화면을 위한 명명된 레시피와 출시 전 승인 기준입니다.
  • 04백업 및 롤백을 지원하며 Claude Code, Cursor, Codex, Gemini, OpenCode에서 사용할 수 있는 크로스 하네스 설치 프로그램입니다.
  • 05CI나 git 훅에서 사용할 수 있는, 안티패턴·접근성·문구 규칙 43개를 갖춘 무의존성 감지기입니다.

활용 사례

  • AI 코딩 에이전트가 첫 작업부터 프로덕션에 바로 쓸 수 있는 대시보드나 마케팅 페이지를 만들도록 합니다.
  • 병합 전에 기존 프런트엔드에서 흔한 AI 패턴과 접근성 문제를 검토합니다.
  • 새 UI 안티패턴이 추가된 경우에만 pull request를 실패 처리하는 CI 게이트를 추가합니다.
  • 저장된 디자인 브리프와 토큰으로 세션 간 디자인 결정을 일관되게 유지합니다.

빠른 시작

  1. 1

    Homebrew로 ui-craft CLI를 설치합니다(macOS)

    brew install --cask educlopez/tap/ui-craft
  2. 2

    README에서 사용 중인 OS용 공식 설치 스크립트를 실행합니다(macOS/Linux 또는 Windows)

  3. 3

    AI 코딩 하네스를 감지하고 skill, commands, gates를 설정합니다

    ui-craft install
  4. 4

    에이전트에게 craft 명령으로 surface를 만들어 달라고 요청합니다

사용 전 알아둘 점

  • Intel 기반 macOS용 빌드는 공개되어 있지만 테스트된 적은 없습니다.
  • Linux arm64 및 Windows arm64 바이너리는 빌드되었지만 CI에서 실행해 보지는 않았습니다.

포함된 컬렉션

Claude Code·Codex 스킬 팩AI 코딩 에이전트용 UI 디자인 스킬Claude Code 도구·스킬·플러그인AI 코딩 어시스턴트와 에이전트AI 에이전트 스킬 라이브러리프론트엔드 프레임워크 & UI 컴포넌트

토픽

#agent-skills#design-system#frontend#css#claude-code#cursor#accessibility#ui-review#anti-slop#codex

자주 묻는 질문

ui-craft은(는) 무엇인가요?
AI 코딩 에이전트가 흔한 AI 느낌의 인터페이스 대신 세련되고 프로덕션 품질에 맞는 UI를 만들도록 돕는 에이전트 스킬 및 CLI입니다. UI Craft는 AI 코딩 에이전트를 위한 디자인 엔지니어링 시스템입니다. 주관이 뚜렷한 인터페이스 디자인 규칙, 화면을 만들고 검토하고 다듬는 슬래시 명령 모음, 보라색 그라데이션, 바운스 이징, 똑같은 카드 그리드처럼 AI가 생성한 UI에서 흔히 보이는 패턴을 찾아내는 결정론적 검사를 제공합니다. 특정 스택에 종속되지 않으며 Tailwind, CSS Modules, styled-components, 일반 CSS, 단일 파일 컴포넌트 스타일에 맞춰 사용할 수 있습니다.
ui-craft은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
ui-craft은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
ui-craft은(는) 아직 유지보수되고 있나요?
활발히 유지보수 중. ui-craft의 마지막 커밋은 2026년 11월 6일입니다.
ui-craft은(는) 어디에 사용할 수 있나요?
AI 코딩 에이전트가 첫 작업부터 프로덕션에 바로 쓸 수 있는 대시보드나 마케팅 페이지를 만들도록 합니다. 병합 전에 기존 프런트엔드에서 흔한 AI 패턴과 접근성 문제를 검토합니다. 새 UI 안티패턴이 추가된 경우에만 pull request를 실패 처리하는 CI 게이트를 추가합니다. 저장된 디자인 브리프와 토큰으로 세션 간 디자인 결정을 일관되게 유지합니다.
ui-craft는 어떻게 설치하나요?
Homebrew로 ui-craft CLI를 설치합니다(macOS): brew install --cask educlopez/tap/ui-craft README에서 사용 중인 OS용 공식 설치 스크립트를 실행합니다(macOS/Linux 또는 Windows) AI 코딩 하네스를 감지하고 skill, commands, gates를 설정합니다: ui-craft install 에이전트에게 craft 명령으로 surface를 만들어 달라고 요청합니다
ui-craft은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/educlopez/ui-craft

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

관련 프로젝트

pbakaus / impeccable

AI 코딩 에이전트를 위한 디자인 가이드: 디자인 스킬, 24개 명령어, 브라우저 실시간 반복 작업, AI 생성 프런트엔드 UI를 검사하는 61개의 결정론적 탐지 규칙을 제공합니다.

AI·머신러닝#ai-agents#frontend#design
10.5만+7.8천 이번 주6.2천RustApache-2.0활발히 관리됨업데이트 그저께