Why Wireframes.online?

Building UI wireframes with AI tools is powerful — but writing the right prompt is the hardest part. A vague prompt gives you a vague result. Wireframes.online solves this by letting you visually configure every detail — category, page type, fidelity, color scheme, typography, device target — and then generates a perfectly structured prompt you can paste directly into any AI tool.

No signup. No tracking. No paywall. Just prompts.

✨ What You Get

| Feature | Details | |---------|---------| | 30+ UI Categories | Website, Mobile App, Dashboard, E-Commerce, SaaS, Social Media, Healthcare, Finance, Gaming, Education, and more | | 200+ Page Types | Homepage, Login, Checkout, Analytics Dashboard, Chat Interface, Property Listing, Recipe Page, and beyond | | 1000+ Prompt Variations | Combine fidelity, style, device, theme, framework, and AI tool settings | | 17 AI Tool Pages | Dedicated prompt generators optimized for each AI platform | | Full Customization | Fidelity level, color scheme, typography, icon style, grid system, annotations, aspect ratio | | Dark/Light Mode | System-aware theme switching | | Save & Export | LocalStorage save, .txt download, one-click copy | | Zero Dependencies Runtime | Pure HTML + CSS + JavaScript — no React, no Vue, no frameworks | | Privacy First | Everything runs client-side, zero data collection |

🚀 Try It Live

→ wireframes.online — Start generating prompts instantly, no installation needed.

📦 Install via npm

npm install wireframes-online

The npm package includes the production-ready dist/ folder with minified HTML, obfuscated JS, optimized CSS, and auto-generated sitemaps.

🛠️ Local Development

Prerequisites

• Bun v1.3+ (JavaScript runtime & bundler)

Quick Start

# Clone the repository
git clone https://github.com/wireframes-online/wireframes.online.git
cd wireframes.online

# Install dependencies
bun install

# Development build (unminified, no obfuscation)
bun run dev

# Production build (minified + obfuscated + sitemaps)
bun run build

What the Build Does

The bun run build command outputs a complete production site to dist/ with:

• HTML Minification — Removes whitespace, comments, collapses attributes
• JavaScript Obfuscation — Protects source code with identifier mangling
• SEO Auto-generation — Creates sitemap.xml, sitemap.txt, and robots.txt
• Structured Data — Injects JSON-LD schema markup into every page
• Open Graph & Twitter Cards — Full social media preview metadata
• Canonical URLs — Proper canonical tags for every page

🎨 Supported AI Tools

Each tool has a dedicated page with prompts optimized for that platform's specific syntax and capabilities:

| AI Tool | Prompt Page | Best For | |---------|-------------|----------| | Figma AI | figma-ai-prompt-generator | Native Figma design generation | | ChatGPT | chat-gpt-ui-design-ai-prompt | Text-to-UI conversations | | Google Gemini | google-gemini-3-pro-ui-design-ai-prompt | Multimodal UI analysis | | Claude | claude-coding-ui-design-ai-prompt | Code-ready UI generation | | Midjourney v6 | midjourney-ui-design-ai-prompt | Photorealistic UI mockups | | DALL-E 3 | dall-e-3-ui-design-ai-prompt | High-fidelity visual design | | Stable Diffusion | stable-diffusion-ui-design-ai-prompt | Local/self-hosted generation | | v0.dev | v0-dev-ui-design-ai-prompt | React + Tailwind code output | | Cursor | cursor-ui-design-ai-prompt | AI-assisted coding | | DeepSeek | deepseek-ui-design-ai-prompt | Open-source AI prompts | | Grok | grok-ui-design-ai-prompt | xAI-powered design | | Google Stitch | google-stitch-ui-design-ai-prompt | Component stitching | | Google Jules | google-jules-ui-design-ai-prompt | AI coding agent prompts | | Firebase Studio | firebase-studio-ui-design-ai-prompt | Full-stack app design | | Material Design | material-design-ui-design-ai-prompt | M3 guideline-compliant UI | | Mobile App | mobile-app-ui-design-ai-prompt | iOS & Android screens | | UI Components | ui-components-ui-design-ai-prompt | Buttons, cards, navbars, modals |

📁 Repository Structure

wireframes.online/
├── index.html                          # Main prompt generator application
├── style.css                           # Global stylesheet (light + dark themes)
├── script.js                           # Client-side application logic
├── data.json                           # Categories, subcategories, templates
├── global_metadata.json                # Per-page SEO metadata
├── build.js                            # Bun production build script
├── about.html                          # About page
├── contact.html                        # Contact page
├── privacy.html                        # Privacy policy
├── disclaimer.html                     # Disclaimer
├── 404.html                            # Custom 404 page
├── *-ui-design-ai-prompt.html          # 17 AI tool-specific prompt pages
├── assets/                             # Images, icons, OG images
├── webfonts/                           # Font Awesome webfonts
└── dist/                               # Production build output

🤝 Contributing

We welcome contributions! Whether it's a bug fix, a new AI tool page, or a new wireframe category — every contribution helps the community.

1. Read the Contributing Guide
2. Fork → Branch → Commit → Pull Request
3. See the Code of Conduct

Quick Contribution Ideas

• Add a new wireframe category to data.json
• Create a prompt page for a new AI tool
• Improve prompt generation algorithms in script.js
• Add translations / i18n support
• Report bugs or suggest features via Issues

📄 License

MIT License — see LICENSE for full text. Use it, modify it, distribute it freely.

🔗 Links

| Resource | URL | |----------|-----| | Website | wireframes.online | | npm Package | npmjs.com/package/wireframes-online | | GitHub | github.com/wireframes-online | | Support Us | ko-fi.com/wireframes | | Issues | Report a Bug | | Email | [email protected] |