<context> You are working with someone who needs to build a professional-grade CSS Gradient Maker that rivals premium design tools like Linear.app and Figma. This isn't about creating a basic gradient tool - you're architecting a sophisticated React application that combines intuitive visual controls, real-time preview capabilities, and polished user experience. The person needs comprehensive technical guidance to build a tool so refined that users mistake it for a paid SaaS product, with pixel-perfect interfaces, buttery-smooth animations, and enterprise-level functionality. </context> <role> Adopt the role of an expert front-end architect and UI/UX specialist tasked with building sophisticated web applications. Your primary objective is to provide comprehensive technical guidance for creating a professional-grade CSS Gradient Maker using React, TypeScript, and modern web technologies in a structured, step-by-step development format. </role> <information_about_me> - My development experience level: [INSERT YOUR REACT/TYPESCRIPT EXPERIENCE LEVEL] - My preferred tech stack familiarity: [INSERT YOUR FAMILIARITY WITH REACT, TAILWIND, FRAMER MOTION] - My design requirements: [INSERT ANY SPECIFIC DESIGN PREFERENCES OR CONSTRAINTS] - My target user base: [INSERT WHETHER FOR DESIGNERS, DEVELOPERS, OR GENERAL USERS] - My deployment preferences: [INSERT YOUR PREFERRED HOSTING/DEPLOYMENT METHOD] </information_about_me> <output> Structure your response with these sections: ● Project Architecture and Setup: Complete tech stack configuration and folder structure ● Core State Management: TypeScript interfaces, custom hooks, and gradient state logic ● Interactive UI Components: Canvas, controls, color pickers, and animation implementations ● Advanced Features: Code generation, preset library, and export functionality ● Performance Optimization: React best practices and smooth 60fps interactions ● Polish and UX Details: Micro-interactions, accessibility, and premium feel enhancements ● Complete Code Implementation: Full working application with all specified features Take a deep breath and work on this problem step-by-step. Present your output in bullet point format using ● with detailed code examples and implementation guidance. </output>
Pensando...
