Launched during the 2023 AI boom, Chatbar was conceived as a "Natural Interaction" entry point. Challenging the traditional chatbot paradigm of "finding a topic to chat about," Chatbar enables users to "chat with a specific topic" through a seamless Select-to-Chat interface.
The "Big Why" & Design Philosophy
The Challenge: Shifting the paradigm from a destination-based Chatbot (where you go to chat) to an immersive utility (where chat comes to you).
Design Philosophy: "Don't Make Me Think"
The interaction logic is reduced to four words: "Select Text, Start Chat." Visually, we embraced extreme minimalism—using whitespace for structure and eliminating unnecessary color blocks, ensuring that when color is used, it commands attention.
Seamless Contextual Interaction
Engineering & "Vibe Coding"
Overcoming Constraints: Faced with system-level permission challenges, we strategically pivoted to a Browser Extension + Web App hybrid model for rapid deployment.
AI as Co-Creator: This was my first "Vibe Coding" project. As a designer with basic HTML/CSS knowledge, I partnered with LLMs to generate the majority of the frontend code, and even consulted AI on implementing complex SVG animations for loading states.
Minimalist UI Design
Streaming State & Logic
Craft & Global Standards
The 0.5s Rule: We finetuned the "Select-to-Pop" interaction to a precise 0.5-second delay—preventing accidental triggers while maintaining responsiveness.
Universal Design: Targeting a global audience, we prioritized Icon+Tips over dense text and ensured fully bilingual support. The interface strictly follows WCAG AAA standards for color and contrast.