스크린샷 속 UI를 코드로 바꿔주는 오픈소스 도구
GitHub 스타를 무려 7.4만개나 받음
AI가 레퍼런스 스크린샷 화면을 분석해서
자동으로 레이아웃, 간격, 버튼 등을 코드로 재구성해 줌
바이브코딩할 때 레퍼런스와 결과물이
자꾸 다르게 나온다면 이 도구로 빠르게 초안을 잡고
내 프로젝트에 맞게 수정해가면 좋을 듯
화면 녹화 영상으로 사용 흐름을 보여주면
인터랙션/애니메이션도 구현할 수 있음
Codex나 Claude Code에서
레퍼런스 스크린샷과 프롬프트를 같이 입력
[프롬프트 예시]
https://t.co/j04laLaPoS
이 레포를 활용해서 첨부한 스크린샷을 실제 동작하는 프론트엔드 화면으로 구현해줘.
스크린샷을 기준으로 화면 구성, 비율, 여백, 글꼴, 색상, 이미지 위치를 재현하되 새로운 요소는 임의로 추가하지마.
구현 후 결과를 캡처해 원본과 비교하고, 눈에 띄는 차이를 순차적으로 보정해.
컴포넌트와 스타일은 역할별로 나누고, 반복되는 UI 패턴은 재사용 가능한 구조로 정리해줘. 완료 후 실행 방법과 남은 차이점을 간단히 알려줘.
OpenGym is a self-hosted fitness tracker built with React and Docker. It automates weekly training plans with animated demos and charts body weight progress, ensuring all sensitive workout data remains local rather than stored on third-party servers.
https://t.co/UcNtIdyYoO
podpdf is an ultra-fast, zero-dependency PDF generation library for Node.js, Bun, and the browser, offering significantly better speed and a smaller footprint than alternatives like jsPDF.
https://t.co/b2Lxwpqkb9
Obsidian Mind provides persistent memory for AI coding agents via a local Obsidian vault. It works with Claude Code, Codex CLI, and Gemini CLI to help agents retain context, notes, and project history across different sessions.
https://t.co/sdrDs7mJiE