Cheesy Shadow Picker v2
Context
This is a project I had wanted to build properly for a long time. I use CSS text shadows constantly in ai2html maps and in label/annotation workflows over complex images, so I needed something faster and more reliable than trial-and-error editing.
My role
- Product design
- Frontend development
- Workflow tooling
I redesigned and rebuilt the tool as a complete production workspace, from parsing and UI architecture to interaction details and export-oriented controls.
Data and methodology
Version 2 was developed around real daily usage: import an ai2html export, inspect labels directly over the artboard, test shadows/colors in context, and ship clean CSS quickly.
I prioritized speed in repetitive newsroom tasks while keeping the interface understandable for first-time users.
Key decisions
- New functionality: direct ai2html import and parsing, including artboard switching based on available space.
- New functionality: drag-and-drop support for both HTML and image files, with a clear central drop zone and visual feedback.
- New functionality: interactive label editing (drag labels, apply shadows/colors to selected or all labels, copy CSS outputs).
- New functionality: before/after preview toggle (Show Original / Show Edited) without losing edits.
- New functionality: improved resilience for real production cases (missing image warnings, better default artboard selection, mobile-first controls).
Result
Cheesy Shadow Picker is now a practical editing environment, not just a catalog, and it fits much better into ai2html and image-annotation production workflows.
Impact and learnings
- The new version reduces iteration time, lowers layout mistakes, and makes shadow decisions easier to validate in the exact visual context where labels will be published.