yoshi/VibeDesigner
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Activity Actions
Web-based WYSIWYG UI designer for AI prompt generation
9 commits 1 branch 0 tags 164 KiB
  • TypeScript 95.1%
  • Shell 4.2%
  • JavaScript 0.3%
  • HTML 0.2%
  • CSS 0.2%
Find a file
Exact
Yoshi 495cee46c6 Core Features: Undo/Redo, Resize, Duplicate, Copy/Paste 
- Added useHistory hook with undo/redo stack (50 entries max)
- Undo (Ctrl+Z) and Redo (Ctrl+Y / Ctrl+Shift+Z) keyboard shortcuts
- Undo/Redo buttons in editor toolbar
- Element resize handles (8 handles: 4 corners + 4 edges)
- Duplicate button on selected elements
- Ctrl+D to duplicate element
- Ctrl+C/Ctrl+V copy/paste with clipboard
2026-01-31 19:50:37 +01:00
backend Phase 9: Multi-Screen Navigation 2026-01-31 19:39:45 +01:00
docs Add implementation plan documentation 2026-01-31 19:15:40 +01:00
frontend Core Features: Undo/Redo, Resize, Duplicate, Copy/Paste 2026-01-31 19:50:37 +01:00
scripts Phase 9: Multi-Screen Navigation 2026-01-31 19:39:45 +01:00
shared Initial commit: VibeDesigner MVP 2026-01-31 19:15:30 +01:00
.gitignore Initial commit: VibeDesigner MVP 2026-01-31 19:15:30 +01:00
README.md Initial commit: VibeDesigner MVP 2026-01-31 19:15:30 +01:00
setup-db.sh Initial commit: VibeDesigner MVP 2026-01-31 19:15:30 +01:00

README.md

VibeDesigner

Ein web-basiertes WYSIWYG-Tool zum Designen von App-UIs, das strukturierte Prompts für KI-gestützte Code-Generierung erstellt.

Features

  • 🎨 WYSIWYG Editor - Drag & Drop UI-Elemente auf einen Canvas
  • 📝 Dual-Perspektive - Requirements (Kunde) + Technical (Entwickler) pro Element
  • 🔧 Bootstrap 5 Elemente - Buttons, Cards, Forms, Navbar, Tables, etc.
  • 📤 Prompt Export - Markdown, JSON oder Plain Text für KI-Tools
  • 👥 Multi-User - Projekte mit Team teilen
  • 🔐 Authentifizierung - JWT-basierte Anmeldung

Tech Stack

  • Frontend: React 18, TypeScript, Vite, Tailwind CSS, Zustand, dnd-kit
  • Backend: Express 5, TypeScript, Prisma 7
  • Database: PostgreSQL

Installation

Voraussetzungen

  • Node.js 20+
  • PostgreSQL 15+

Setup

# Repository klonen
git clone https://github.com/YOURUSER/VibeDesigner.git
cd VibeDesigner

# PostgreSQL einrichten (Fedora/RHEL)
./setup-db.sh

# Backend
cd backend
npm install
cp .env.example .env  # Anpassen!
npx prisma db push
cd ..

# Frontend
cd frontend
npm install
cd ..

Starten

# Terminal 1 - Backend
cd backend && npm run dev

# Terminal 2 - Frontend
cd frontend && npm run dev

Öffne http://localhost:5173

Projektstruktur

VibeDesigner/
├── frontend/          # React App
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── stores/
│   │   └── utils/
├── backend/           # Express API
│   ├── src/
│   │   ├── routes/
│   │   └── middleware/
│   └── prisma/
└── shared/            # Gemeinsame Types

Verwendung

  1. Login/Registrieren
  2. Projekt erstellen - Name und Beschreibung
  3. Screen hinzufügen - Pages, Modals, Drawers
  4. Elemente platzieren - Aus der Palette auf den Canvas ziehen
  5. Properties bearbeiten:
    • Requirements Tab: Was soll das Element tun? (Kunden-Sicht)
    • Technical Tab: API, Datenquelle, Validierung (Entwickler-Sicht)
    • Style Tab: Bootstrap-Varianten
  6. Export Prompt - Für ChatGPT, Claude, Copilot, etc.

Lizenz

MIT