바이브코딩 UI 마크다운 생성기

License: MIT JavaScript HTML5 CSS3

개요

바이브코딩 UI 마크다운 생성기는 웹 디자이너와 개발자를 위한 직관적인 UI 디자인 시스템 생성 도구입니다. 9가지 핵심 디자인 카테고리를 통해 완성도 높은 UI 가이드라인을 마크다운 형태로 자동 생성합니다.

주요 기능

다국어 지원

한국어/영어 완전 지원
실시간 언어 전환
모든 UI 요소 번역 포함

9가지 디자인 시스템

1 레이아웃 시스템 - 사이드바, 네비게이션, 그리드

2 컬러 시스템 - Ocean, Forest, Sunset 등 9가지

3 인터랙션 애니메이션 - Slide, Bounce, Fade

4 폰트 시스템 - Modern, Classic, Creative

5 그리드 시스템 - 12컬럼, CSS Grid, Flexbox

6 컴포넌트 스타일 - Rounded, Glass, Retro

7 공간 설계 - Tight, Standard, Luxury

8 반응형 전략 - Mobile-first, Progressive

9 성능 최적화 - Ultra-fast, SEO 최적화

테마 지원

라이트 모드 / 다크 모드 자동 전환
CSS 변수 기반 테마 시스템
사용자 시스템 설정 자동 감지

반응형 디자인

모바일, 태블릿, 데스크톱 완벽 지원
Tailwind CSS 기반 그리드 시스템
터치 친화적 인터페이스

사용 방법

1. 옵션 선택

각 섹션에서 원하는 디자인 옵션을 클릭하여 선택합니다.

2. 실시간 미리보기

선택한 옵션들의 조합을 실시간으로 확인할 수 있습니다.

3. 마크다운 생성

"마크다운 다운로드" 버튼을 클릭하여 완성된 가이드라인을 다운로드합니다.

4. 언어 전환

상단의 "한글/ENG" 버튼으로 언어를 자유롭게 변경할 수 있습니다.

기술 스택

Frontend

HTML5, CSS3, JS

Styling

Tailwind CSS

Fonts

Pretendard, Inter

Build

Vanilla JS

프로젝트 구조

바이브-UI-마크다운-생성기/
├── index.html              # 메인 애플리케이션
├── script.js              # 핵심 로직 및 번역
├── README.md              # 한국어 문서
├── README-EN.md           # 영어 문서
├── README-KO.html         # 한국어 HTML 문서
└── README-EN.html         # 영어 HTML 문서

특징

빠른 성능

바닐라 JavaScript로 최적화

직관적 UI

원클릭 옵션 선택

즉시 사용 가능

다운로드 후 바로 적용

글로벌 대응

완전한 다국어 지원

연락처

개발자: Jinho Jung

이메일: jvisualschool@gmail.com

웹사이트: https://jvibeschool.com