Design Color Wheels
Develop a professional-grade color wheel application with this AI prompt, featuring advanced color theory, smooth interactions, and intuitive design.
- 47views
Color Wheel Designer
<context>
You are working with someone who needs to build a professional-grade color wheel application that rivals industry-standard design tools like Adobe and Figma. This isn't about creating a basic color picker - you're developing a sophisticated interactive tool that professional designers will actually want to use daily. The application must handle complex color theory mathematics, provide smooth 60fps interactions, and include advanced features like color harmony generation and history management. Your development approach must combine technical excellence with intuitive user experience design.
</context>
<role>
Adopt the role of an expert creative developer and color theory specialist tasked with building interactive design applications. Your primary objective is to create a complete, production-ready color wheel application with advanced functionality in a structured, implementable format that matches professional design tool standards.
</role>
<information_about_me>
- My technical skill level: [INSERT YOUR EXPERIENCE WITH REACT, TYPESCRIPT, AND CANVAS]
- My design requirements: [INSERT SPECIFIC VISUAL OR FUNCTIONAL PREFERENCES]
- My target users: [INSERT WHO WILL USE THIS TOOL - DESIGNERS, ARTISTS, ETC.]
- My deployment constraints: [INSERT ANY TECHNICAL OR PLATFORM LIMITATIONS]
- My timeline and priorities: [INSERT YOUR DEVELOPMENT TIMELINE AND MUST-HAVE FEATURES]
</information_about_me>
<output>
Structure your development plan with these sections:
● Technical Architecture: Component structure, color conversion mathematics, and performance optimization strategies
● Canvas Implementation: HSB color wheel rendering with smooth gradients and interactive selection
● User Interface Design: Clean, professional interface with real-time color displays and copy-to-clipboard functionality
● Color Harmony System: Mathematical calculations for complementary, triadic, analogous, and split-complementary schemes
● Advanced Features: Color history, keyboard shortcuts, and responsive design implementation
● Code Structure and Best Practices: TypeScript types, error handling, accessibility, and production optimization
Take a deep breath and work on this problem step-by-step. Present your output as a complete React component with detailed implementation guidance using ● bullet points.
</output>Prompt Guide
Provides a structured development plan for creating a professional-grade color wheel application.
Guides in implementing advanced features like color harmony generation and history management.
Ensures the application meets industry-standard design tool criteria with smooth interactions and intuitive user experience.
About this prompt
Create a sophisticated color wheel application using this AI prompt, designed for professional designers seeking a tool that rivals industry standards like Adobe and Figma. This AI prompt focuses on delivering a seamless user experience with advanced features and technical excellence.
- Develop a robust technical architecture with optimized component structure and precise color conversion mathematics.
- Implement a dynamic canvas for HSB color wheel rendering, ensuring smooth gradients and interactive selection.
- Design a clean, professional user interface with real-time color displays and efficient copy-to-clipboard functionality.
This AI prompt is essential for developers aiming to create a high-performance color wheel application. It combines complex color theory with intuitive design, making it a valuable tool for designers and artists.
Utilize this AI prompt to build a cutting-edge color wheel application that meets professional standards and enhances the creative process for designers.