opensourceghana/wireframe-ai

🧠 Wireframe-AI helps designers and developers generate, refine, and share UI wireframes using AI-assisted prompts. Built by Open Source Ghana to explore open, collaborative design tools that bridge creativity and accessibility in product prototyping. # AI Wireframing Tool A powerful AI-powered wireframing tool that generates wireframes from text descriptions using Hugging Face models. ## Features - **Text-to-Wireframe Generation**: Describe your wireframe in natural language - **Multiple Styles**: Low-fi, high-fi, mobile, and web layouts - **SVG & PNG Export**: Download wireframes in multiple formats - **Real-time Preview**: See your wireframes instantly - **Modern UI**: Clean, responsive interface built with React and Tailwind CSS ## Architecture This project uses a hybrid approach combining: - **ControlNet Wireframe** for AI generation - **FastAPI** backend for model inference - **React + TypeScript** frontend for user interface - **Tailwind CSS** for modern styling ## Quick Start ### Prerequisites - Python 3.9+ with GPU support (recommended) - Node.js 18+ - pnpm (for faster package management) - 16GB+ RAM for model inference ### Backend Setup ```bash cd backend pip install -r requirements.txt python main.py ``` The backend will start on `localhost` ### Frontend Setup ```bash cd frontend pnpm install pnpm run dev ``` The frontend will start on `localhost` ## Usage 1. **Enter Description**: Describe your wireframe (e.g., "Login page with email field, password field, and submit button") 2. **Select Style**: Choose from low-fi, high-fi, mobile, or web layouts 3. **Generate**: Click "Generate Wireframe" and wait for AI processing 4. **Download**: Export as SVG or PNG format ## Example Prompts - "E-commerce product page with image gallery, price, and add to cart button" - "Dashboard with sidebar navigation, charts, and data tables" - "Mobile app login screen with social media login options" - "Landing page with hero section, features, and contact form" ## API Endpoints - `POST /generate-wireframe` - Generate wireframe from prompt - `GET /wireframe-styles` - Get available wireframe styles - `GET /health` - Check API health status ## Development ### Backend Development `` …