Negroni Atlas: Ett cocktailverktyg som ursäkt att labba

Resultat

Ett sidoprojekt där ett Negroni-verktyg blev ursäkten att gå djupt i detaljer och system. Negroni Atlas på negroniatlas.com: fyra flöden för att jämföra gin, vermouth och bitter efter smakprofil. Jag designade och byggde det själv i React (Lovable, Cursor) och justerade komponenter och omfattning längs vägen.

Interactive demo

• Project site: https://negroniatlas.com
• Primary interactive demo: https://www.negroniatlas.com/compare?embed=1&view=overlay&ids=813f7056-ff21-400d-8cd4-dd9eb818d39c,799da131-7099-4165-8c9d-4576c853efaf
• Overlay radar charts for flavor-profile similarity matching: https://www.negroniatlas.com/substitute?embed=1&ingredient=gin

Bakgrund

Jag ville ha ett projekt där jag kunde göra om detaljerna om och om igen: sliders, färgsystem, radar charts, typografi. Ett verktyg för cocktailjämförelse passade. Det är litet, jag skulle använda det själv, och besluten behövde hålla som riktig UI, inte som koncept.

Problemet var praktiskt. En flaska gin är dyr och tar lång tid att tömma. Väljer man fel för Negroni är det en dålig investering. Receptsajter tar proportioner. Recensioner tar en flaska i taget. Inget jag hittade jämförde smakprofiler för gin, vermouth och bitter på samma ställe.

Jag började bygga 2025 med AI-stöd och fick hela tiden välja riktning när resultatet drev iväg. Mycket av processen var rörig: sidor byggda, rivna, byggda om.

Utmaning

Smakprofiler är kvalitativa. Ingredienser kan vara mer eller mindre bittra, mer eller mindre botaniska, men skillnaderna är ungefärliga. Gränssnittet behövde visa nyans utan att låtsas om precision.

Inget jag hittade lade alla tre byggstenarna bredvid varandra. Recept och recensioner lever i egna världar.

Att bygga med AI gjorde röran värre innan den blev bättre. Sessionerna gick fort, men utan styrning drev de iväg. Första versionen blev en Campari-brandad community-sajt i burgundy, ingenting som verktyget jag hade tänkt. Jag lade ner det i flera månader innan jag började om.

Så här

Omstart efter V1. När jag kom tillbaka snävade jag in till ett mörkt, kartinspirerat beslutsverktyg. Inte lifestyle, inte social sajt.

Graticule och kompass, inte en vanlig slider. Den första AI-genererade slidern var en standard range input: röd fill, rund thumb, gradient mot orange. Funktionell, generisk och fel här. Tracken blev en graticule, det linjerade mönstret från kartinstrument. Thumben blev en kompassnål, ritad i Figma och itererad många gånger innan den byggdes. En senare version hade ett nummer ovanför nålen. Det åkte bort. Ett siffervärde antyder att AI:n har exakt koll på bitterhet eller sötma. Det har den inte. Att ta bort det var ett etiskt beslut, inte ett estetiskt.

Radar charts för jämförelse. Varje jämförelse får unik färg per ingrediens. Nuvarande färger följer inte designsystemet fullt ut och ska justeras. Standarden för vad som hör hemma i systemet är strikt nog att tillfälliga avvikelser syns direkt.

AI genererade snabbt. Jag valde vad som fick stanna.

Effekt

Negroni Atlas är live på negroniatlas.com. Jag designade, byggde och släppte det själv: fyra flöden, ett ingredientbibliotek, ett visuellt system som behövde flera varv innan det satte sig.

Reflektioner

AI vill gärna bygga för stort. Utan styrning blir det en hel produktkategori, inte det lilla verktyg du bad om. Nästa gång skriver jag ner vad jag utforskar innan jag öppnar en session, och lägger komponenter i en egen fil innan jag bygger sidor.

Slidern ensam gick igenom fler iterationer än de flesta kundprojekt tillåter för en kontroll. Det är poängen med ett projekt utan kund. Cocktailverktyget är ursäkten. Jag fortsätter. Nästa: färgerna i radar charts i linje med designsystemet, och fler ingredienser.