Vibe Coding UI Markdown Generator

License: MIT JavaScript HTML5 CSS3

Overview

Vibe Coding UI Markdown Generator is an intuitive UI design system creation tool for web designers and developers. It automatically generates comprehensive UI guidelines in markdown format through 9 core design categories.

Key Features

Multilingual Support

Korean/English full support
Real-time language switching
Complete translation of all UI elements

9 Design System Categories

1 Layout System - Sidebar, Navigation, Grid

2 Color System - Ocean, Forest, Sunset & 6 more

3 Interaction Animations - Slide, Bounce, Fade

4 Font System - Modern, Classic, Creative

5 Grid System - 12-column, CSS Grid, Flexbox

6 Component Styles - Rounded, Glass, Retro

7 Spacing Design - Tight, Standard, Luxury

8 Responsive Strategy - Mobile-first, Progressive

9 Performance Optimization - Ultra-fast, SEO

Theme Support

Light Mode / Dark Mode automatic switching
CSS variable-based theme system
Automatic user system preference detection

Responsive Design

Perfect support for mobile, tablet, desktop
Tailwind CSS-based grid system
Touch-friendly interface

How to Use

1. Select Options

Click to select your desired design options in each section.

2. Real-time Preview

View the combination of your selected options in real-time.

3. Generate Markdown

Click "Download Markdown" to download your completed guidelines.

4. Language Switch

Use the "한글/ENG" button at the top to freely change languages.

Tech Stack

Frontend

HTML5, CSS3, JS

Styling

Tailwind CSS

Fonts

Pretendard, Inter

Build

Vanilla JS

Project Structure

vibe-ui-markdown-generator/
├── index.html              # Main application
├── script.js              # Core logic and translations
├── README.md              # Korean documentation
├── README-EN.md           # English documentation
├── README-KO.html         # Korean HTML documentation
└── README-EN.html         # English HTML documentation

Features

Fast Performance

Optimized with vanilla JavaScript

Intuitive UI

One-click option selection

Ready to Use

Apply immediately after download

Global Ready

Complete multilingual support

Contact

Developer: Jinho Jung

Email: jvisualschool@gmail.com

Website: https://jvibeschool.com