Summary
Category
Data Annotation
Org
Side Project
Product
Tanmigo.com
Role
Sole Designer, front-end developer (AI-assisted)
Core Challenge
- 01 Underutilized backend metadata for UX
- 02 "Blank-sheet anxiety" during user annotation
- 03 Fragmented video retrieval and organization workflows
Impact
- 01 Shipped production-ready code and launched the beta
- 02 Onboarded 5+ active beta users
As a designer, builder, and tango dancer, I designed the end-to-end experience and shipped the front-end myself.
Tool
VS Code
Front-end Development
Figma
Design System, Prototyping
Gemini CLI
Code Review
GitHub
Version Control
Claude Code
Agentic Coding
Lovable
Prototyping
Core User Journey
- Ingestion
- Annotation
- Curation
- Workspace architecture
- Visual Foundation
Background
Tango is a dance where you can practice for ten years, and still feel like a beginner.
Problem Space
Eight of the ten dancers I interviewed have playlists and curations to study tango movements outside of the dance floor.
- 01 Videos are scattered across YouTube, phone albums, Instagram, and Facebook; various sources leading to chaotic collections
- 02 One video contains nuances that make how you save and annotate it important
If we look at a single second of captured tango, what nuances can we see?
(yes, that's me!)
As a designer who ships code...
When I kicked off Tanmigo as a team of two, like other designers, I started off with Figma. But things shifted quickly, like the current industry: you can be surprised every day, or alter your workflow next week after something has launched. Tanmigo is no exception; adapting to new changes and testing the workflow has happened a couple of times.
Phase 1
Figma + Lovable
Phase 2
Figma MCP + Claude Code
Phase 3
VS Code + Claude Code
Sticky notes were used to hand off details, and later I used a markdown file for design principles.
This design system was later imported into CSS.
3 reasons I adopted a new workflow with agents
Risks come after the power it brings to me, for example: code conflicts, the wrong base for a PR, and reinvented wheels when I ignored shadcn components by accident. These are lessons I learned by doing this project.
01 It speeds up the production flow, without sacrificing quality
Setting aside auto layout, design components, and variations, I even have more time to audit them from the perspective of art direction.
02 It fosters collaboration
As a designer, I consider technical constraints: I ran pre-commit, tested my new features, staged deployments, and set up multiple small branches so that engineers can review my work faster and we can discuss technical details.
03 It provides a set of objective principles to reference
Instead of countless sticky notes next to wireframes, a markdown file is powerful as it provides ground truth for everyone when shipping new features.
Workflow of designing Tanmigo (last updated: Aug 25)
| Stage | Scenario | Tool |
|---|---|---|
| Ideation | Sketch wireframes | Figma, sometimes paper |
| Showcase variations | Figma | |
| Design | New components | Claude Code via VS Code |
| New features | ||
| Maintenance | Design system maintenance | |
| Documentation | ||
| Test | Manual test new feature | |
| Test with automation and edge cases | ||
| Test with real users | FigJam | |
| Collaboration | Sync with engineer | GitHub |
| Stage deployment |
Metadata structure for annotations
Because features can be shipped so fast, communication is even more important when it comes to what kind of journey our users are going through and what the edge cases are. Tables and decision trees are commonly used for syncing.
Scroll sideways to see the whole diagram.
The result: every card renders by the same rules, and the timeline mirrors their tag colors.
The "Failed" Moment
The abandoned iteration, tested on Lovable.
There is one iteration I eventually gave up on, but it taught me a lot. While working on the annotation journey, I identified a gap in how users find specific annotations and tested a solution on Lovable. However, it ended up confusing users. Having a sequential panel and horizontal annotation strips at the same time left them unsure of where to look.
Lesson learned: Stick to one primary element; having two primary elements only confuses users. Clear intention keeps the UX grounded.
Live Product
YouTube → Tanmigo: A One-Stop Annotation Journey.
While these features are currently in active development, you can explore the functional MVP at www.tanmigo.com.
Becoming a better designer
Shipping my designs changed how I design.
Once every state I sketched was mine to build and test, my components got simpler, and edge cases got named before the build instead of during it. Nothing teaches design restraint like implementing your own work.
Building from idea to pull request, I design with more intention.
Read more
Claude Code
Developer experience in Claude Code
Restoring a sense of agency in AI coding tools, tested with a working prototype.
Meta
The capture dashboard behind Codec Avatars
Redesigning the internal tool that orchestrates 300+ camera and sensor streams, as the team's only designer and a daily operator of the system. (Details abstracted under NDA)