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
Share this project:

Updates