템플릿

AI 에이전트를 위한 UI 템플릿.

테마만이 아니라 완성된 앱·웹사이트 디자인입니다. 제품에 필요한 모든 화면을 실제 같은 콘텐츠와 함께, 순수 HTML과 Tailwind로 담았습니다. 하나를 복제하면 Codex나 Claude Code가 내 제품으로 바꿔 줍니다.

• 러닝 앱Mobile app무료 러닝·피트니스 앱 UI 템플릿: HTML과 Tailwind로 만든 화면 8개와 디자인 시스템. Codex나 Claude Code로 내 앱으로 바꾸세요.8 screens · Free and open source
• 음식 배달 앱Mobile app무료 음식 주문·배달 앱 UI 템플릿: 메뉴부터 주문 추적까지 HTML과 Tailwind 화면 8개. Codex나 Claude Code로 내 앱으로 바꾸세요.8 screens · Free and open source
• 가계부 앱Mobile app무료 가계부·지출 관리 앱 UI 템플릿: 숫자가 딱 맞는 HTML과 Tailwind 화면 8개. Codex나 Claude Code로 내 앱으로 바꾸세요.8 screens · Free and open source
• 명상 앱Mobile app무료 명상·수면 앱 UI 템플릿. 플레이어와 호흡 가이드부터 수면 이야기까지 휴대폰 화면 8개를 HTML과 Tailwind로 만들었고, Codex나 Claude Code로 바로 쓸 수 있습니다.8 screens · Free and open source

템플릿 사용 방법

1. 만들려는 제품에 맞게 템플릿을 고르세요.
2. 그 템플릿만 복사하세요. npx degit ummydev/ui-templates/apps/<name> my-app 명령을 쓰면 됩니다.
3. 에이전트에게 내 제품으로 바꿔 달라고 요청하세요. 모든 템플릿에는 디자인 시스템이 DESIGN.md로 들어 있어서, 새로 만드는 화면도 기존 화면과 똑같은 스타일로 맞춰집니다.

모든 템플릿은 무료이며 MIT 라이선스의 오픈 소스입니다. GitHub의 ummydev/ui-templates에서 볼 수 있습니다. SaaS 랜딩 페이지와 SaaS 대시보드 템플릿도 곧 추가됩니다.

자주 묻는 질문

왜 프레임워크가 아니라 HTML과 Tailwind를 쓰나요?

순수 HTML은 어디서나 열리고 어떤 AI 에이전트든 읽을 수 있습니다. 디자인을 내 것으로 만든 뒤에 에이전트에게 React, Next.js, React Native, SwiftUI, Flutter로 다시 만들어 달라고 하면 됩니다.

디자인 시스템에서 시작할 수도 있나요?

네. 디자인 시스템 라이브러리에는 웹사이트와 앱용 시스템 24개가 있어서, DESIGN.md로 에이전트에게 줄 수 있습니다.