🛠️ Build Tools with AI Prompts

Learn how to create 100+ production-ready web tools using AI coding agents like Deepv Code, Claude, ChatGPT, and Cursor.

🌐 Live Site: https://deepv-lab.github.io/how-to-build-tools-by-AI-vibe-coding-assistant/

---

🎯 What is This?

A comprehensive collection of production-ready web tools with the exact AI prompts used to build them. Each tool includes:

• ✅ Live Demo - Try it online
• ✅ Source Code - View and download
• ✅ AI Prompts - Copy and build it yourself
• ✅ Tutorial - Step-by-step guide

Perfect for developers, designers, product managers, and anyone who wants to learn how to build tools with AI coding assistants.

---

🚀 Quick Start

Try a Tool

1. Visit the live site
2. Browse or search for a tool
3. Try the demo online

Build a Tool

1. Click on any tool
2. Go to the "Prompts" tab
3. Copy the comprehensive prompt
4. Paste into Deepv Code, Claude, ChatGPT, or Cursor
5. Build your own version!

---

📚 Featured Tools

🎨 Design Tools

• Color Picker - Pick colors in HEX, RGB, HSL, CMYK formats
• Gradient Generator - Create CSS gradients
• Palette Builder - Build color palettes
• SVG Editor - Edit SVG files online

💻 Developer Tools

• JSON Formatter - Format and validate JSON
• Base64 Encoder - Encode/decode Base64
• Regex Tester - Test regular expressions
• Diff Checker - Compare text differences

📝 Text Tools

• Markdown Editor - Write and preview Markdown
• Word Counter - Count words and characters
• Case Converter - Convert text case
• Lorem Ipsum Generator - Generate placeholder text

🔄 Converters

• Unit Converter - Convert units
• Timestamp Converter - Unix timestamp conversion
• Number Base Converter - Convert between bases
• Image Compressor - Compress images

🔧 Utilities

• QR Code Generator - Generate QR codes
• Password Generator - Generate secure passwords
• UUID Generator - Generate UUIDs
• Hash Generator - Generate MD5, SHA256 hashes

View All Tools →

---

🏗️ Repository Structure

├── docs/                          # GitHub Pages site
│   ├── index.html                 # Homepage
│   ├── tools/                     # Tool pages
│   │   └── color-picker.html
│   ├── demos/                     # Live demos
│   │   └── color-picker/
│   └── assets/                    # Shared assets
│
├── tools/                         # Source code organized by category
│   ├── design/
│   │   └── color-picker/
│   │       ├── demo/              # Demo files
│   │       ├── prompts/           # AI prompts
│   │       ├── README.md          # Documentation
│   │       └── metadata.json      # Tool metadata
│   ├── developer/
│   ├── text/
│   ├── converter/
│   └── utility/
│
├── templates/                     # Templates for new tools
│   ├── tool-template/
│   └── prompt-templates/
│
└── scripts/                       # Build scripts
    ├── generate-tool-page.js
    └── build-registry.js

---

🎓 How It Works

1. Browse Tools

Visit the live site and explore 100+ tools organized by category.

2. Try the Demo

Each tool has a live demo you can try directly in your browser.

3. View the Source

See the complete source code with detailed comments.

4. Copy the Prompts

Get the exact prompts used to build the tool with AI.

5. Build It Yourself

Use Deepv Code or any AI coding assistant to recreate the tool.

6. Learn & Customize

Understand how it works and customize it for your needs.

---

🤝 Contributing

We welcome contributions! Here's how you can help:

Add a New Tool

1. Fork this repository
2. Use the tool template
3. Create your tool in the appropriate category
4. Include demo, prompts, and documentation
5. Submit a pull request

Improve Existing Tools

• Fix bugs
• Improve prompts
• Add features
• Enhance documentation

Report Issues

Found a bug or have a suggestion? Open an issue

Read Contributing Guidelines →

---

💡 Why This Project?

For Learners

• Learn by example with real, production-ready tools
• Understand how to write effective AI prompts
• See best practices in action

For Developers

• Save time with ready-to-use tools
• Learn new techniques and patterns
• Contribute to open source

For AI Enthusiasts

• Discover what's possible with AI coding assistants
• Learn prompt engineering for code generation
• See the future of software development

---

🛠️ Built With

• Deepv Code - AI coding assistant (primary)
• HTML5 - Structure
• CSS3 - Styling
• JavaScript - Functionality
• GitHub Pages - Hosting

No frameworks. No dependencies. Just pure web technologies.

---

📊 Project Stats

• 100+ Tools
• 15 Categories
• 1000+ Lines of prompts
• 10,000+ Lines of code
• 0 External dependencies (except fonts)

---

🌟 Featured By

• Deepv Code - Official showcase
• Coming soon: More features!

---

📄 License

MIT License - feel free to use these tools and prompts in your own projects!

See LICENSE for details.

---

🔗 Links

• Website: https://deepv-lab.github.io/how-to-build-tools-by-AI-vibe-coding-assistant/
• Deepv Code: https://deepvcode.com
• GitHub: https://github.com/deepv-lab/how-to-build-tools-by-AI-vibe-coding-assistant
• Issues: Report a bug or request a tool

---

🙏 Acknowledgments

• Built with ❤️ by the Deepv Code team
• Inspired by the amazing open-source community
• Powered by AI coding assistants

---

⭐ Star this repo if you find it useful!

🚀 Try Deepv Code to build your own tools!