enesozturk/dimensional-drawing

외부 오픈소스 저장소를 소개하는 글입니다. HDATF 제품이 아닙니다.

무엇을 하나

이 저장소는 UI 컴포넌트의 간격, 모서리 반경, 레이어와 화면 배치를 기술 도면으로 설명하는 에이전트 스킬을 제공합니다. 스크린샷만으로 전달하기 어려운 컴포넌트 명세를 정리하려는 개발자와 디자이너가 대상입니다. 소스 파일, Storybook 예제, URL이나 스크린샷을 출발점으로 삼으며, 측정 절차는 실제 소스와 Playwright로 표시한 요소의 경계 및 계산된 스타일을 확인하도록 설명합니다. 결과물은 평면도, 레이어 분해도, 상세도와 변수표를 담은 독립 HTML 및 SVG 문서입니다. 치수는 변수와 수식으로 적고 실제 문구는 제외하며, 근거가 없는 값은 만들지 않고 TBD로 남깁니다. 도면 작성에는 스킬을 읽고 관련 소스와 브라우저 환경에 접근할 수 있는 에이전트가 필요합니다. 선택적인 모션 스킬은 Claude Motion을 대상으로 하며, 별도 렌더링 경로는 Node 18 이상, Playwright Chromium과 ffmpeg로 프레임을 캡처해 MP4를 만듭니다. 도면 작성 절차와 렌더링 보조 도구이므로 스크린샷만으로 정확한 치수를 얻거나 원래 컴포넌트가 올바르게 작동한다고 보장하는 자료는 아닙니다.

라이선스

MIT 허용 범위가 넓습니다. 저작권 표시를 유지하면 상업적 이용과 수정이 가능합니다.

같은 분야 저장소

• JimLiu/baoyu-design
  baoyu-design은 로컬 코딩 에이전트로 시각 결과물을 만들고 수정하려는 사용자를 위한 커뮤니티 관리 에이전트 스킬 모음입니다. 디자인 요청과 스크린샷, 코드, HTML/CSS 또는 Figma 파일 같은 참고 자료를 받아 화면 시안, 시제품, 발표 자료와 다른 HTML 결과물을 만들도록 에이전트를 안내합니다. 중심 스킬은 공통 디자인 방법, 에이전트 환경별 도구 안내와 작업별 프롬프트 또는 시작용 구성 요소를 불러오는 구조입니다. 프로젝트 안에 버전을 고정한 디자인 시스템 사본을 가져오고 그 연결을 프로젝트 정보 파일에 기록하는 흐름도 설명합니다. 함께 제공하는 스킬은 슬라이드, 캔버스, 디자인 시스템과 데이터 대시보드에 각각의 파일 형식과 로컬 편집기를 사용합니다. 파일을 다루는 AI 에이전트와 그 모델 서비스가 필요하며 로컬 편집 도구에는 Node.js를, 간단한 미리보기 서버에는 Python을 사용할 수 있습니다. README는 대부분의 결과물 편집기에 Node 20 이상, 대시보드에는 Node 22 이상을 명시하며 선택적인 내보내기나 생성 기능에는 추가 도구 또는 서비스가 필요합니다. Anthropic이 승인한 제품은 아니며 결과물을 로컬에 저장한다고 모델이 오프라인으로 실행되거나 운영용 화면과 내보내기 품질이 보장되는 것은 아닙니다.
• current/deadcell-framework
  이 저장소는 별도로 존재하는 deadcell 메뉴가 사용하는 Dear ImGui 기반을 제공하며, 메뉴 애플리케이션 자체는 아닙니다. 네이티브 창과 대화형 조작 항목이 필요한 C++ 개발자를 대상으로 합니다. 애플리케이션의 위젯 호출과 운영체제 입력을 그리기 자료로 바꾸고, DirectX 11 백엔드가 이를 GPU에 전달합니다. 화면 요소의 트리를 유지하는 대신 프레임마다 초기화, 위젯 호출, 렌더링을 반복합니다. 빌드 설정은 ImGui 핵심 코드와 Win32 및 DirectX 11 백엔드를 정적 라이브러리로 묶습니다. 문서상 시작 환경은 CMake 3.16 이상과 C++17 컴파일러이며, 호출하는 애플리케이션이 창과 그래픽 장치를 준비해야 합니다. Windows 빌드는 Direct3D 관련 라이브러리를 연결하고, 백엔드 소스는 셰이더 컴파일러도 사용합니다. 공개 헤더에 고정된 1.89.5 WIP 버전이 명시되어 있으므로 최신 원본의 기능을 모두 포함한다고 볼 수 없습니다. README는 다른 동봉 백엔드를 이 버전에서 시험하지 않았다고 밝히며, 실제 메뉴 구현은 이 저장소 밖에 있습니다.
• heydamir/unslop
  AI가 만든 화면에서 반복되는 장식과 불균일한 간격을 찾아 제품 성격에 맞게 고치는 Claude용 디자인 스킬입니다. 독립된 화면 생성 모델이나 설치 즉시 사이트를 수정하는 서비스가 아니라 지침과 참고 자료, 보조 스크립트의 묶음입니다. 사용자가 화면 코드나 사이트 주소, 화면 이미지를 주면 먼저 문제를 정리하고 디자인 방향을 제안하도록 구성되어 있습니다. 이후 간격, 색, 아이콘, 문구, 글꼴, 배치, 세부 표현, 시각 자료, 움직임 순서로 개선합니다. 원본 코드가 없으면 저장한 페이지나 재구성한 정적 HTML 사본이 결과가 되며 실제 운영 사이트 반영과는 구분해야 합니다. Claude Code가 읽는 스킬 위치에 파일을 두고 호출하는 방식이며 실제 수정에는 해당 에이전트의 파일과 브라우저 접근 권한이 필요합니다. 선택형 이미지 생성에는 별도 외부 서비스 연결과 유료 생성 확인이 필요하고, 변화 과정을 영상으로 만드는 보조 기능에는 Playwright와 ffmpeg가 필요합니다. 디자인 판단은 지침에 따른 제안이며 사용성 개선이나 모든 프레임워크의 정상 작동을 보장하지 않습니다. CC BY 4.0 자료이므로 복제하거나 바꿔 배포할 때 저작자 표시와 저장소 연결을 유지해야 합니다.
• pengchujin/aerial-tv
  Aerial은 광고와 추천 목록 대신 앱과 배경화면을 보여주는 Android TV용 홈 화면 앱입니다. 주요 사용자는 Xiaomi와 TCL 등 TV의 기본 화면을 바꾸려는 소유자입니다. 리모컨 입력과 설치된 앱 목록, 신호원 및 사진을 받아 앱 격자와 제어 센터, 화면 보호기를 표시합니다. Kotlin과 Jetpack Compose 기반이며, 스마트폰은 QR 주소를 통해 사진 업로드와 배경 설정을 할 수 있습니다. APK 설치와 TV의 ADB 허용 및 필요한 권한 설정이 필요하며, 시스템 앱을 삭제하지 않는 복원 절차도 안내합니다. 직접 빌드할 때는 JDK 17과 Android SDK 36이 필요합니다. 항공 영상과 일일 배경은 Apple과 Bing의 외부 자료를 사용하므로 네트워크와 별도 저작권 조건을 고려해야 합니다. 기종별 기본 화면 복귀와 자동 시작 동작이 다르며, 강한 시스템 권한과 선택적인 ADB 유지 설정은 신중하게 검토해야 합니다.
• patch-gg/pixelfx
  pixelfx는 게임과 시각 시제품 개발자를 위한 JavaScript 픽셀 효과 모음과 제작 절차입니다. README는 불, 날씨, 화면 애니메이션, 마법, 캐릭터 동작을 포함한 효과 244개를 소개합니다. 각 효과는 저장된 그림이 아니라 코드이며 시간 기반 그리기 함수 또는 상태를 갱신하고 그리는 시뮬레이션으로 구성합니다. 사용자는 색상표, 난수 기준값, 위치, 반전, 회전, 밝기를 전달하고 실행부는 픽셀 색상과 빛을 합쳐 프레임을 만듭니다. 캐릭터 효과는 별도 동작 정보로 준비 자세, 타격 정지, 대상 반응, 회복 동작을 포함할 수 있습니다. 브라우저 재생, 미리보기 이미지, 투명 스프라이트 시트, 프레임 정보를 출력하며 선택적인 GIF와 MP4 내보내기에는 ffmpeg가 필요합니다. 갤러리로 살펴보거나 Node.js 18 이상 도구로 시작할 수 있고 Claude Code 스킬은 생성 모델 대신 초안 작성, 렌더링, 눈으로 확인, 수정 절차를 안내합니다. 기본 캐릭터에 맞춘 효과는 자체 캐릭터에 맞게 손봐야 하며 MIT 코드 라이선스는 별도 권리 조건이 있는 동봉 PatchPixel 글꼴에 적용되지 않습니다.

Trendshift 순위 목록에 오른 저장소만 담았고, 목록은 후보를 찾는 데만 썼습니다. 순위 숫자는 옮기지 않았습니다. 설명과 라이선스, 별 수는 각 GitHub 저장소에서 확인했습니다. 해설은 우리의 판단입니다. 이 프로젝트들을 직접 시험한 것은 아니며, 상승 목록에 올랐다고 품질이 증명되지는 않습니다.