JimLiu/baoyu-design

Run Claude Design locally as an Agent Skill — Cursor, Claude Code & more. Produce polished UI mockups, prototypes, decks & wireframes as self-contained HTML, without claude.ai/design. Best with Opus or Claude.

해결하는 문제

baoyu-design를 사용하면 사용자는 claude.ai/design 뒤에 있는 디자인 엔진을 자신의 코딩 에이전트(Cursor, Claude Code, Codex 등) 내에서 로컬로 실행할 수 있습니다. 별도의 웹사이트 구독이나 수동 업로드 절차 없이, 로컬 개발 환경에서 고급 UI 모크업, 인터랙티브 프로토타입, 와이어프레임, 슬라이드 데크를 직접 생성할 수 있으며, 모든 아티팩트는 사용자의 리포지토리에 보관됩니다.

작동 방식

이 프로젝트는 Markdown 파일과 JSX/JS 스크래핑으로 구성된 포터블한 "에이전트 스킬"로 구현됩니다. 시스템 프롬프트에 정의된 핵심 방법론과 기술 기준을 기반으로 에이전트는 디자인 작업에 따라 로드합니다. 이후 에이전트는 특정 환경(Cursor 또는 Claude Code 등)을 식별하고, 해당 환경에 맞는 도구 맵을 적용하여 질문, 미리보기, 검증을 처리합니다.

출력물은 로컬 HTTP 서버를 통해 제공되는 자체 포함형 HTML 파일로 생성됩니다. 이를 통해 사용자는 실시간 브라우저 미리보기에서 요소를 가리키고, 에이전트에게 하위 소스 코드에 특정 변경을 요청함으로써 디자인을 반복적으로 개선할 수 있습니다.

대상 사용자

AI 코딩 에이전트를 사용하고, 에디터를 벗어나지 않고도 프로페셔널 수준의 UI/UX 디자인 기능을 워크플로우에 통합하고자 하는 개발자 및 디자이너.

주요 특징

  • 광범위한 디자인 기능: 고해상도 디자인, 인터랙티브 프로토타입, 와이어프레임, 랜딩 페이지, 모바일 앱, 슬라이드 데크를 지원합니다.
  • 디자인 시스템 통합: 디자인 시스템 생성, 가져오기(포함하여 Figma .fig 파일의 오프라인 디코딩), 버전 관리된 디자인 시스템 적용을 통해 프로젝트 간 시각적 일관성을 보장합니다.
  • 고급 슬라이드 데크: 복잡한 빌드 애니메이션을 갖춘 HTML 기반 데크를 생성하며, 로컬 CLI를 통해 편집 가능한 네이티브 PowerPoint (.pptx) 파일로 내보낼 수 있습니다.
  • 로컬 우선 워크플로우: 모든 출력물은 프로젝트 리포지토리에 저장되어 버전 관리가 가능하고, 쉽게 내보낼 수 있습니다.
  • 에이전트 독립성: skills CLI를 통해 Cursor, Claude Code, Codex 등 다양한 에이전트와 호환됩니다.

관련

  • 프로젝트
    plugin87/ux-ui-agent-skills

    AI 에이전트를 시니어 UX/UI 아키텍트로 변환하여 접근성이 뛰어나고 즉시 배포 가능한 인터페이스를 생성할 수 있도록 돕는 지침, 디자인 토큰, 자동화된 검증 게이트를 포함한 종합 키트입니다.

  • 프로젝트
    shengjidaguai-china/personal-homepage-skill

    Personal Homepage Skill은 Claude 스타일 에이전트가 18개의 완성도 높은 시각 템플릿을 사용해 고품질 개인 웹사이트, 포트폴리오, HTML 슬라이드 데크를 생성할 수 있도록 해주는 AI 에이전트 플러그인입니다. React/Tailwind 갤러리, 싱글 파일 HTML 템플릿, 참조 우선 설계 및 품질 검사 강제를 위한 문서화된 워크플로우를 포함합니다. Claude 스킬로 설치하거나 로컬에서 갤러리를 실행해 스타일을 선택한 후 공유 가능한 HTML 페이지를 내보낼 수 있습니다.

  • 프로젝트
    alchaincyf/huashu-skills

    huashu‑skills는 57개의 Claude 호환 *Agent Skills*(디자인, 데이터, 비디오, 페르소나 등)의 큐레이션된 인덱스입니다. 22개의 경량 스킬이 이 저장소에 있습니다. 나머지는 별도 저장소입니다. 한 줄의 `git clone`(또는 하위 폴더 복사)으로 설치하고 에이전트를 재시작하면 스킬을 사용할 수 있습니다. 포함된 업데이터가 최신 버전을 확인합니다. 이 컬렉션은 코드를 작성하지 않고 AI 에이전트에 기성 플러그인 기능을 제공합니다.

  • 프로젝트
    yejy53/Editable-Design

    Editable‑Design은 AI 기반의 편집 가능한 시각적 자산(포스터, 인포그래픽, 연구 다이어그램) 생성을 위한 Codex Skills를 제공하는 GitHub 프로젝트입니다. 사용자는 Skill을 설치하고 자연어 프롬프트를 입력하면 실제 텍스트, 별도의 이미지 레이어, 시각적 편집기, 에이전트의 디자인 단계 재생이 포함된 구조화된 HTML/CSS(또는 PPTX)를 받습니다.

  • 프로젝트
    alchaincyf/huashu-design

    huashu-design은 간단한 자연어 프롬프트에서 바로 사용할 수 있는 디자인 산출물(앱 프로토타입, PPT 덱, 짧은 애니메이션, 인포그래픽, 디자인 방향 목업 및 5차원 비평)을 생성하는 오픈소스 Claude 호환 스킬입니다. 로컬에서 실행되며, 84개의 순수 HTML/CSS 스타일 템플릿 라이브러리를 사용하고, 브랜드 자산 프로토콜을 적용하며, GUI 없이 HTML, MP4/GIF, PPTX 및 PDF를 내보냅니다.