DEV Community

Cover image for Creating a micro-phrasebook for real-world communication: a designer's AI project
Nataly Stepanova
Nataly Stepanova

Posted on

Creating a micro-phrasebook for real-world communication: a designer's AI project

The origin story

During a horse riding lesson, I hit a communication roadblock with my English-speaking instructor. I wanted to ask about my posture but struggled to find the right words—even in my native language.

This moment of frustration revealed a simple truth: I didn't need comprehensive language courses. I needed specific vocabulary for specific moments.

This realization sparked my project—a micro-phrasebook designed to provide contextual language support for real-life situations.

It’s like a language meme coin: low effort, high emotional return, and you can actually use it in real life

The tool's functionality

The web application offers a straightforward approach:

  • Users describe their situation in their native language
  • The system provides relevant English keywords with translations
  • Customized phrases appear for the specific context
  • A practical dialogue sample is generated for practice

The AI-powered backend skips generic vocabulary and delivers precisely what users need for immediate communication challenges.

Designed and built through "Vibe Coding"

As a product designer first and foremost, I approach development differently. Rather than building complex systems from scratch, I leverage modern tools to bring experiences to life quickly—what I call vibe coding: prioritizing user experience and flow, then implementing with accessible technology.

The app supports dark and light themes.

My technology stack includes:

  • Frontend: Flutter Web for responsive design
  • State Management: Simple setState
  • AI Integration: OpenAI GPT-4o with custom prompting and validation
  • Backend: Supabase for storing talk cards
  • Hosting: Render

Design philosophy

The user experience reflects my design background:

  • Natural language input replaces rigid navigation structures
  • A calming interface with soft colors and a friendly chipmunk mascot
  • Clearly organized output sections: conversation starters, key vocabulary, and dialogue flow
  • Built-in screenshot and sharing capabilities

Demo

Nutshell Talk interface preview

Try it here: Nutshell Talk

Key insights

This project taught me that:

  • AI can be a powerful complement to experience-focused design
  • Most language learners seek situational fluency rather than comprehensive knowledge
  • Flutter provides an excellent platform for rapid web prototyping

Future development

Looking ahead, I plan to:

  • Enhance fallback mechanisms for generation failures
  • Implement audio output for pronunciation guidance
  • Add functionality for users to request expanded vocabulary and dialogue options

I created this tool to solve my own communication challenges, hoping it might help others facing similar situations. Whether you're speaking with healthcare providers, instructors, or service professionals, having the right words at the right moment makes all the difference.

I welcome your thoughts, feedback, and personal language learning experiences!

Top comments (0)