[{"data":1,"prerenderedAt":472},["ShallowReactive",2],{"case-studies":3},[4],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9,"description":10,"id":11,"slug":12,"date":13,"body":14,"_type":466,"_id":467,"_source":468,"_file":469,"_stem":470,"_extension":471},"\u002Fcase-studies\u002Fclaude-helped-me-design-my-app-i-think-setlists-case-study","case-studies",false,"","Claude helped me design my app, I think","How I used and didn't use AI to design the UI for setlists.makenakong.com","setlists__case-study__1","claude-helped-me-design-my-app-i-think--setlists-case-study","2026-04-01",{"type":15,"children":16,"toc":459},"root",[17,25,51,63,67,74,79,84,89,103,109,114,119,125,136,143,156,169,174,179,194,207,212,217,222,227,240,246,251,256,264,272,285,298,303,315,321,326,339,344,356,362,367,372,377,388,396,421,424,432,444],{"type":18,"tag":19,"props":20,"children":21},"element","p",{},[22],{"type":23,"value":24},"text","Published 2026-04-01",{"type":18,"tag":19,"props":26,"children":27},{},[28,37,39,49],{"type":18,"tag":29,"props":30,"children":34},"a",{"href":31,"rel":32},"https:\u002F\u002Fwww.setlists.makenakong.com\u002F?utm_campaign=setlists-case-study",[33],"nofollow",[35],{"type":23,"value":36},"Setlists",{"type":23,"value":38}," lets you pick artists and instantly create a spotify playlist of their top tracks. ",{"type":18,"tag":40,"props":41,"children":42},"strong",{},[43],{"type":18,"tag":44,"props":45,"children":46},"em",{},[47],{"type":23,"value":48},"This article outlines my journey using AI\u002FClaude to design the UI for Setlists:",{"type":23,"value":50}," what it got right, what it got wrong, what I took and what I ignored.",{"type":18,"tag":52,"props":53,"children":54},"blockquote",{},[55],{"type":18,"tag":19,"props":56,"children":57},{},[58],{"type":18,"tag":44,"props":59,"children":60},{},[61],{"type":23,"value":62},"tldr; Claude is a great starter for getting a working design, but it's up to the human to make it...human.",{"type":18,"tag":64,"props":65,"children":66},"hr",{},[],{"type":18,"tag":68,"props":69,"children":71},"h2",{"id":70},"introduction",[72],{"type":23,"value":73},"Introduction",{"type":18,"tag":19,"props":75,"children":76},{},[77],{"type":23,"value":78},"Too many times, I've gone to a DJ set where I didn't know the openers or other djs, and I wished I had familiarized myself with their game. But, there's no time to check each artist’s spotify, listen to all their tracks, add my favorites to a playlist, and listen repeatedly before the concert that weekend.",{"type":18,"tag":19,"props":80,"children":81},{},[82],{"type":23,"value":83},"So, I built an app that creates a playlist from a few artists top tracks. Then, I can use Spotify’s recommendation service or magic shuffle to fluff the playlist.",{"type":18,"tag":19,"props":85,"children":86},{},[87],{"type":23,"value":88},"First, I built it (working prototype first yada yada). Then, I upgraded the UI.",{"type":18,"tag":19,"props":90,"children":91},{},[92,97],{"type":18,"tag":44,"props":93,"children":94},{},[95],{"type":23,"value":96},"My mvp:",{"type":18,"tag":98,"props":99,"children":102},"img",{"alt":100,"src":101},"MVP","\u002Fimages\u002Fcase-studies\u002Fsetlists__case-study__1__mvp-screenshot.webp",[],{"type":18,"tag":68,"props":104,"children":106},{"id":105},"creative-direction",[107],{"type":23,"value":108},"Creative direction",{"type":18,"tag":19,"props":110,"children":111},{},[112],{"type":23,"value":113},"The app is geared toward playlists for sets, mini-raves, small festivals.",{"type":18,"tag":19,"props":115,"children":116},{},[117],{"type":23,"value":118},"It should be a little crude. It should be techno, but not technical. It should be anti-AI (what a catch 22).",{"type":18,"tag":68,"props":120,"children":122},{"id":121},"design-journey-with-claude",[123],{"type":23,"value":124},"Design journey with Claude",{"type":18,"tag":52,"props":126,"children":127},{},[128],{"type":18,"tag":19,"props":129,"children":130},{},[131],{"type":18,"tag":44,"props":132,"children":133},{},[134],{"type":23,"value":135},"tldr; it went something like this: prompt, refine, refine, take what I like, send screenshots, re-prompt, refine, take what I like, repeat",{"type":18,"tag":137,"props":138,"children":140},"h4",{"id":139},"design-journey-pt-1-initial-designmockup",[141],{"type":23,"value":142},"Design journey Pt 1: initial design\u002Fmockup",{"type":18,"tag":19,"props":144,"children":145},{},[146,148],{"type":23,"value":147},"I sent Claude a screenshot of my crude, working mvp and prompted it ",{"type":18,"tag":40,"props":149,"children":150},{},[151],{"type":18,"tag":44,"props":152,"children":153},{},[154],{"type":23,"value":155},"“revise my design language - going for genz brutalist but trying to make it better”.",{"type":18,"tag":19,"props":157,"children":158},{},[159,164],{"type":18,"tag":44,"props":160,"children":161},{},[162],{"type":23,"value":163},"Claude's iterations:",{"type":18,"tag":98,"props":165,"children":168},{"alt":166,"src":167},"Claude mockups","\u002Fimages\u002Fcase-studies\u002Fsetlists__case-study__1__claude-mockups.webp",[],{"type":18,"tag":19,"props":170,"children":171},{},[172],{"type":23,"value":173},"Claude nailed hierarchy with strong typographic contrast, clear visual weight. It got the “brutalism” right, solid font families, but the colors were harsh. This isn't a cybersecurity crypto app - no neon orange or lime green.",{"type":18,"tag":19,"props":175,"children":176},{},[177],{"type":23,"value":178},"I asked for modifications (color suggestions, mobile-first design, accurate spotify playlist embeds).",{"type":18,"tag":19,"props":180,"children":181},{},[182,184,192],{"type":23,"value":183},"Then, I took a step back and asked Claude to ",{"type":18,"tag":40,"props":185,"children":186},{},[187],{"type":18,"tag":44,"props":188,"children":189},{},[190],{"type":23,"value":191},"\"GIVE ME SOME DESIGN STYLES FROM TOP TECHNO DJS AROUND THE WORLD\"",{"type":23,"value":193},".",{"type":18,"tag":19,"props":195,"children":196},{},[197,202],{"type":18,"tag":44,"props":198,"children":199},{},[200],{"type":23,"value":201},"Claude's techno DJ research:",{"type":18,"tag":98,"props":203,"children":206},{"alt":204,"src":205},"Claude market research on DJS","\u002Fimages\u002Fcase-studies\u002Fsetlists__case-study__1__claude-market-research.webp",[],{"type":18,"tag":19,"props":208,"children":209},{},[210],{"type":23,"value":211},"Looking back, this should've been step 1. This gave Claude so much context for building a better design. This was also 100x faster than researching DJs' instagrams and websites and building a moodboard.",{"type":18,"tag":19,"props":213,"children":214},{},[215],{"type":23,"value":216},"I asked it to build off of Jeff Mill's design guidelines and worked from there (see from frame 3 of Claude's iterations image.) I picked Jeff Mills because it was industrial and structured where the others were more poster style or basic.",{"type":18,"tag":19,"props":218,"children":219},{},[220],{"type":23,"value":221},"Then, I took to Figma to rebuild the mockups.",{"type":18,"tag":19,"props":223,"children":224},{},[225],{"type":23,"value":226},"Rebuilding the frames by hand on Figma is tedious, which made me prioritize which elements I need, wanted and didn't care for. I kept the hierarchy, typography styles, colored blocks. The rest of the elements were noise (extra lines, graphics, etc).",{"type":18,"tag":19,"props":228,"children":229},{},[230,235],{"type":18,"tag":44,"props":231,"children":232},{},[233],{"type":23,"value":234},"My Figma mockups:",{"type":18,"tag":98,"props":236,"children":239},{"alt":237,"src":238},"Figma mobile mockups","\u002Fimages\u002Fcase-studies\u002Fsetlists__case-study__1__figma-mobile-mockups.webp",[],{"type":18,"tag":137,"props":241,"children":243},{"id":242},"design-journey-pt-2-graphicslogosicons",[244],{"type":23,"value":245},"Design journey Pt 2: graphics\u002Flogos\u002Ficons",{"type":18,"tag":19,"props":247,"children":248},{},[249],{"type":23,"value":250},"I had already a vision of the baby between a stack of CDs on a shelf and a soundtrack sound wave\u002Fequalizer bars. I mocked it up and hardcoded it before I realized that it needed to be iteractive.",{"type":18,"tag":19,"props":252,"children":253},{},[254],{"type":23,"value":255},"I didn't know it yet, but this became my visual anchor.",{"type":18,"tag":19,"props":257,"children":258},{},[259],{"type":18,"tag":44,"props":260,"children":261},{},[262],{"type":23,"value":263},"My visualizer (it moves with the cursor):",{"type":18,"tag":19,"props":265,"children":266},{},[267],{"type":18,"tag":98,"props":268,"children":271},{"alt":269,"src":270},"Interactive visualizer","\u002Fimages\u002Fcase-studies\u002Fsetlists__case-study__1__visualizer-iteractive-animation.gif",[],{"type":18,"tag":19,"props":273,"children":274},{},[275,277],{"type":23,"value":276},"I wanted more visual elements (and a logo) so I asked Claude ",{"type":18,"tag":40,"props":278,"children":279},{},[280],{"type":18,"tag":44,"props":281,"children":282},{},[283],{"type":23,"value":284},"\"what icon would best represent this app (music icon, mix board, play icons, idk)\"",{"type":18,"tag":19,"props":286,"children":287},{},[288,293],{"type":18,"tag":44,"props":289,"children":290},{},[291],{"type":23,"value":292},"Claude's icon designs:",{"type":18,"tag":98,"props":294,"children":297},{"alt":295,"src":296},"Claude's icon designs","\u002Fimages\u002Fcase-studies\u002Fsetlists__case-study__1__claude-logo-designs.webp",[],{"type":18,"tag":19,"props":299,"children":300},{},[301],{"type":23,"value":302},"Claude has some good ideas, but unrealistic execution. It was also stuck on Jeff Mill's brand so I re-prompted asking for a logo based on my own mockup but nothing landed. I realized I had all that I needed (my visualizer bars), the identity was right there.",{"type":18,"tag":19,"props":304,"children":305},{},[306,311],{"type":18,"tag":44,"props":307,"children":308},{},[309],{"type":23,"value":310},"Claude's logo vs My logo designs",{"type":18,"tag":98,"props":312,"children":314},{"alt":310,"src":313},"\u002Fimages\u002Fcase-studies\u002Fsetlists__case-study__1__logo-design-comparison.webp",[],{"type":18,"tag":137,"props":316,"children":318},{"id":317},"design-journey-pt-3-building-it",[319],{"type":23,"value":320},"Design journey Pt 3: building it",{"type":18,"tag":19,"props":322,"children":323},{},[324],{"type":23,"value":325},"Then I built it (yes, I did not even vibe-code it, I typed actual code with Claude's assistance via VS code extension).",{"type":18,"tag":19,"props":327,"children":328},{},[329,334],{"type":18,"tag":44,"props":330,"children":331},{},[332],{"type":23,"value":333},"My demo screenshot:",{"type":18,"tag":98,"props":335,"children":338},{"alt":336,"src":337},"Demo screenshot","\u002Fimages\u002Fcase-studies\u002Fsetlists__case-study__1__production-screenshot.webp",[],{"type":18,"tag":19,"props":340,"children":341},{},[342],{"type":23,"value":343},"I didn't follow the mockup perfectly, changed some fonts, changed padding\u002Fheights\u002Fmargins etc. I attempted the bordered text, it made a weird kink in the L in 'SETLISTS', but it looked kinda cool so I kept it.",{"type":18,"tag":19,"props":345,"children":346},{},[347,349,355],{"type":23,"value":348},"Check it out yourself ",{"type":18,"tag":29,"props":350,"children":352},{"href":31,"rel":351},[33],[353],{"type":23,"value":354},"here",{"type":23,"value":193},{"type":18,"tag":68,"props":357,"children":359},{"id":358},"conclusion",[360],{"type":23,"value":361},"Conclusion",{"type":18,"tag":19,"props":363,"children":364},{},[365],{"type":23,"value":366},"In terms of design, AI is good for structure and momentum - getting the mvp. It's also good for brainstorming and researching - you can skip moodboarding.",{"type":18,"tag":19,"props":368,"children":369},{},[370],{"type":23,"value":371},"Give it a specific aesthetic and it will generate a usable mockup with good structure, typography, colors and more.",{"type":18,"tag":19,"props":373,"children":374},{},[375],{"type":23,"value":376},"In terms of creativity and uniqueness, I think that's up to us. I'm not sure AI will ever be able to capture that specific feeling.",{"type":18,"tag":52,"props":378,"children":379},{},[380],{"type":18,"tag":19,"props":381,"children":382},{},[383],{"type":18,"tag":44,"props":384,"children":385},{},[386],{"type":23,"value":387},"However, if I didn't know that Claude's original designs were generated by Claude, would I still think that it wasn't very good? I am not sure.",{"type":18,"tag":19,"props":389,"children":390},{},[391],{"type":18,"tag":40,"props":392,"children":393},{},[394],{"type":23,"value":395},"Future plan of action to improve design collaboration with Claude",{"type":18,"tag":397,"props":398,"children":399},"ol",{},[400,406,411,416],{"type":18,"tag":401,"props":402,"children":403},"li",{},[404],{"type":23,"value":405},"Define a strong aesthetic\u002Fdirection (or ask Claude to help)",{"type":18,"tag":401,"props":407,"children":408},{},[409],{"type":23,"value":410},"Find examples and elements to draw from (via Claude to gather context)",{"type":18,"tag":401,"props":412,"children":413},{},[414],{"type":23,"value":415},"Ask Claude to mockup (based on previous research)",{"type":18,"tag":401,"props":417,"children":418},{},[419],{"type":23,"value":420},"Iterate",{"type":18,"tag":64,"props":422,"children":423},{},[],{"type":18,"tag":19,"props":425,"children":426},{},[427],{"type":18,"tag":40,"props":428,"children":429},{},[430],{"type":23,"value":431},"Thanks for reading! \u003C3",{"type":18,"tag":19,"props":433,"children":434},{},[435,437,443],{"type":23,"value":436},"If you have any thoughts\u002Fcomments\u002Ffeelings, feel free to ",{"type":18,"tag":29,"props":438,"children":440},{"href":439},"\u002Fcontact",[441],{"type":23,"value":442},"share them with me",{"type":23,"value":193},{"type":18,"tag":19,"props":445,"children":446},{},[447],{"type":18,"tag":44,"props":448,"children":449},{},[450,452],{"type":23,"value":451},"This article was cross-posted on ",{"type":18,"tag":29,"props":453,"children":456},{"href":454,"rel":455},"https:\u002F\u002Fmedium.com\u002F@makenakong\u002Fclaude-helped-me-design-my-app-i-think-5d93e4aafd8d\u002F?utm_campaign=setlists-case-study",[33],[457],{"type":23,"value":458},"medium",{"title":8,"searchDepth":460,"depth":460,"links":461},2,[462,463,464,465],{"id":70,"depth":460,"text":73},{"id":105,"depth":460,"text":108},{"id":121,"depth":460,"text":124},{"id":358,"depth":460,"text":361},"markdown","content:case-studies:claude-helped-me-design-my-app-i-think-setlists-case-study.md","content","case-studies\u002Fclaude-helped-me-design-my-app-i-think-setlists-case-study.md","case-studies\u002Fclaude-helped-me-design-my-app-i-think-setlists-case-study","md",1775523712508]