promptdrain

• 

• 

  landing-page-ui

• 

  part-of-the-analysis

• 

  part-of-the-analysis

Inspiration

As AI tools become deeply embedded in everyday workflows, I noticed that most users remain unaware of the significant energy consumption and carbon emissions generated by AI prompt. This lack of transparency inspired me to build promptdrain, a tool designed to raise awareness by making the environmental impact of AI usage visible, measurable, and easy to understand. My goal was to translate complex, abstract data into insights that encourage more conscious and sustainable digital habits.

What it does

promptdrain lets users enter any AI prompt and instantly reveals its estimated energy consumption and carbon emissions. Using a research-backed calculator, the tool translates these metrics into relatable comparisons, like phone charges, car rides, or cups of coffee - helping users grasp the real-world cost of each prompt.

The design targets Gen Z and millennials, the groups with the highest AI tool usage. It combines a neo-brutalist UI with glossy volumetric 3D illustrations to make technical calculations more engaging and playful, bridging the gap between data and user experience.

How we built it

I used React with TypeScript and Vite as the build tool. It uses Tailwind CSS for styling with a playful neobrutalist design system featuring bold borders, shadows, and a bright lime green (#c9ec50) color scheme, as well as visual assets in style of glossy volumetric 3D illustrations that fit well with the overall neobrutalist aesthetic and the theme of engagement and playfulness.

The app calculates AI prompt environmental impact by analyzing text input to estimate tokens, then applying energy consumption models based on different AI providers and models. It displays results through interactive visualizations and real-world metaphors (like phone charging time or car driving distance) to make the environmental impact relatable and understandable. Everything was done in bolt.new except the glossy volumetric 3D illustrations.

Challenges we ran into

Relevant data was quite difficult to find - I had to go through, analyze, and combine many different sources (from academic articles to industry papers to obtain relevant calculator data that would be able to estimate consumption for many different prompt requests (from text to video generation). Furthermore, balancing detail and clarity to keep the interface informative without overwhelming users was a delicate design challenge.

Accomplishments that we're proud of

I’m proud that this app has the potential to make a meaningful contribution to sustainability efforts by raising awareness of AI’s environmental impact. I'm also proud to have built a fully functional web app that showcases a distinctive design direction, combining thoughtful data visualization with a seamless, intuitive calculator interactions for effortless user interaction.

What we learned

First, how awesome it is to use tools such as bolt.new for designers who don't have the strongest technical skills. I used quite a few genAI tools for code and bolt.new has a very strong capacity in executing UI work based on request. It's such a great experience knowing that an entry point for building and releasing web apps for non-technical people has been essentially none.

Furthermore, running quick user tests showed me how de-abstracting the data and making it more relatable allows for a new perspective that actually impacts awareness. Effective sustainability tools require not just technical accuracy but thoughtful communication and design to resonate with users. Furthermore, running this research, I learnt that transparency around digital sustainability is a growing demand and a critical opportunity in AI development.

What's next for promptdrain

• Integrate real-time APIs from AI providers like OpenAI and Hugging Face for up-to-date energy metrics.
• Expand the calculator to incorporate regional energy grid data and AI model variations for more precise emissions estimates.
• Develop a browser extension and public API to embed promptdrain’s insights across platforms and educational environments.
• Partner with climate researchers, digital ethics advocates, and sustainability organizations to amplify impact.
• Explore user nudges and personalized suggestions to encourage lower-impact prompt usage and sustainable AI interactions.

Built With

• bolt.new
• css
• javascript
• netlify
• react
• typescript