how-to-build-tools-by-AI-vibe-coding-assistant

🎨 Color Picker

A professional color picker tool with multiple formats, harmonies, and shades generation.

Try Live Demo →

---

📋 Overview

A feature-rich color picker that supports 6 color formats, generates harmonies and shades, and includes dark mode support. Built with vanilla JavaScript and no external dependencies.

✨ Key Features

• Interactive Color Picker: Canvas-based saturation/lightness square
• Multiple Formats: HEX, RGB, HSL, RGBA, HSLA, CMYK
• Color Harmonies: 5 types (Complementary, Analogous, Triadic, Split-Complementary, Tetradic)
• Shades Generator: Automatic generation of 10 color variations
• One-Click Copy: Copy any format to clipboard
• Recent Colors: History saved to localStorage
• Dark Mode: Toggle between light and dark themes
• Fully Responsive: Works on mobile, tablet, and desktop
• Accessible: WCAG AA compliant

---

🚀 Quick Start

Try Online

Visit the live demo

Run Locally

# Clone the repository
git clone https://github.com/deepv-lab/how-to-build-tools-by-AI-vibe-coding-assistant.git

# Navigate to the demo
cd tools/design/color-picker/demo

# Open in browser
open index.html

Build It Yourself

1. Copy the comprehensive prompt
2. Paste into Deepv Code, Claude, ChatGPT, or Cursor
3. Build your own version!

---

📁 File Structure

color-picker/
├── demo/                          # Live demo files
│   ├── index.html                 # HTML structure (250 lines)
│   ├── style.css                  # Styling (628 lines)
│   └── script.js                  # Functionality (562 lines)
│
├── prompts/                       # AI prompts
│   ├── COMPREHENSIVE-PROMPT.md    # Single prompt (all-in-one)
│   ├── DESIGN-SPECS.md            # Design system specs
│   ├── 00-OVERVIEW.md             # Project overview
│   └── sequential/                # Step-by-step prompts
│       ├── 01-PROJECT-SETUP.md
│       ├── 02-CSS-STYLING.md
│       └── 03-JAVASCRIPT-FUNCTIONALITY.md
│
├── metadata.json                  # Tool metadata
└── README.md                      # This file

---

🎯 How to Build This Tool

Option 1: Comprehensive Prompt (Fastest)

Use the comprehensive prompt to build everything in one go.

Best for: Powerful AI assistants (Claude Opus, GPT-4, Deepv Code)

1. Open Deepv Code or your AI coding assistant
2. Copy the comprehensive prompt
3. Paste and run
4. Get complete tool in minutes!

Option 2: Sequential Prompts (Recommended for Learning)

Follow the step-by-step prompts in the prompts/sequential/ directory.

Best for: Learning how each part works

1. Start with 01-PROJECT-SETUP.md
2. Then 02-CSS-STYLING.md
3. Then 03-JAVASCRIPT-FUNCTIONALITY.md
4. Build incrementally and understand each step

---

🛠️ Technical Details

Technologies

• HTML5: Semantic markup with Schema.org metadata
• CSS3: Custom properties, Grid, Flexbox
• JavaScript ES6+: Vanilla JS, no frameworks
• Canvas API: For color square rendering
• LocalStorage API: For recent colors and theme
• Clipboard API: For copy functionality

Browser Support

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+
• Opera 76+

Performance

• Total Size: 39KB (uncompressed)
• Load Time: < 1s on 3G
• Lighthouse Score: 90+
• No External Dependencies: Except Google Fonts

Accessibility

• WCAG AA Compliant: 4.5:1 contrast ratio
• Keyboard Navigation: Full keyboard support
• ARIA Labels: Proper semantic markup
• Focus Indicators: Visible focus states
• Reduced Motion: Respects user preferences

---

🎨 Design System

Colors

• Primary: #3B82F6 (Blue)
• Success: #10B981 (Green)
• Error: #EF4444 (Red)
• Gray Scale: 50, 100, 200, 300, 400, 600, 700, 800, 900

Typography

• Font Family: Inter (Google Fonts)
• Monospace: JetBrains Mono (Google Fonts)
• Sizes: 12px - 30px

Spacing

• Based on 4px grid system
• Values: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px

See DESIGN-SPECS.md for complete design system.

---

📖 Usage

Picking Colors

1. Click or drag on the color square to select saturation and lightness
2. Adjust the hue slider to change the base color (0-360°)
3. Adjust the opacity slider to change transparency (0-100%)
4. Click any format’s copy button to copy the color code

Generating Shades

• Color shades are automatically generated based on your current color
• Click any shade to select it as your current color

Creating Harmonies

1. Click a harmony tab (Complementary, Analogous, etc.)
2. View the generated harmony colors
3. Click any harmony color to select it

Recent Colors

• Colors are automatically saved as you pick them
• Click any recent color to restore it
• Click “Clear All” to remove all recent colors

Dark Mode

• Click the theme toggle button (🌙/☀️) in the header
• Your preference is saved to localStorage

---

🔧 Customization

Change Primary Color

Edit in style.css:

--color-primary-500: #3B82F6; /* Change this */

Add More Shades

Edit in script.js:

const lightnesses = [95, 86, 77, 68, 59, 50, 41, 32, 23, 14];
// Add more values

Change Initial Color

Edit in script.js:

let currentColor = {
    h: 217,  // Change hue
    s: 91,   // Change saturation
    l: 60,   // Change lightness
    a: 1     // Change alpha
};

---

🤝 Contributing

Found a bug or want to improve this tool?

1. Fork the repository
2. Make your changes
3. Test thoroughly
4. Submit a pull request

See CONTRIBUTING.md for guidelines.

---

📄 License

MIT License - feel free to use this tool in your own projects!

---

🙏 Credits

• Built with: Deepv Code
• Design System: Based on Tailwind CSS color palette
• Fonts: Inter and JetBrains Mono from Google Fonts
• Icons: Unicode emoji characters

---

🔗 Links

• Live Demo: Try it now
• Source Code: View on GitHub
• Prompts: Get AI prompts
• Deepv Code: Try the AI coding assistant

---

⭐ Star the repo if you find this useful!

🚀 Built with Deepv Code