Prompt Palette - Your AI-Powered UI Style Generator
🎨 Inspiration
As a designer and developer, I often spent hours searching for color palettes, font combinations, and consistent style guides. My goal was to simplify this process, enabling anyone to generate beautiful, cohesive UI styles using a single, intuitive prompt. This vision sparked the creation of Prompt Palette.
⚡ What It Does
Prompt Palette leverages OpenAI’s API to instantly generate:
- Harmonious color palettes with 4–6 colors
- Google Font pairings for headings and body text
- CSS-ready gradients
- Live style previews
- Downloadable CSS, JSON, and shareable links for seamless integration into any project
All you need is a simple, natural language prompt—no design experience required!
🛠️ How I Built It
I created Prompt Palette entirely using Bolt, driven by a single, detailed prompt. The frontend is built with React and Tailwind CSS for a clean, responsive interface. The backend runs on Node.js and Express, processing prompts, querying the OpenAI API, and delivering design results in real time.
đź§© Challenges I Faced
Building an entire project from a single prompt was a significant challenge. Describing every feature, structure, and design element in one go required precision, and small details were easy to overlook. While still a prototype (MVP), Prompt Palette serves as a solid foundation for future development.
🏆 Accomplishments I’m Proud Of
- Developed a fully functional, AI-powered design generator using just one prompt
- Delivered ready-to-use palettes, fonts, and CSS for developers and designers
- Created a clean, minimalist UI despite the single-prompt constraint
- Added a Surprise Me feature to inspire users who need a starting point
📚 What I Learned
- Crafting precise, structured prompts is critical for building complex apps with AI
- OpenAI excels at generating creative design suggestions
- Simple features like shareable links significantly enhance usability
- Planning every detail before writing the prompt is essential for success
🚀 What's Next for Prompt Palette
- Add more export options, including SCSS and Tailwind configs
- Introduce advanced gradient customization
- Support light and dark mode previews
- Create a public gallery to showcase community-generated palettes
- Explore integrations with design tools like Figma
Built With
- bolt
Log in or sign up for Devpost to join the conversation.