Logo Generator

**GitHub link: [https://github.com/manicinc/logomaker](https://github.com/manicinc/logomaker)** **LLMS tested (GPT-4o, GPT-4.5, GPT–o1, Claude Sonnet 3.7, Gemini 2.5 Pro), default settings, 20$ / monthly plans.** (No extended thinking, deep research, web search experimental plugins or memories used. Written in VS Code (not Cursor) with Copilot solving single line bugs). *(an experiment in title)* ## Intro For the TL;DR go down [here](/blog/thinkpieces/logomaker-an-experiment-in-human-computer-interaction-vibe-coding#tldr) to see a list of useful lessons. Time of writing I'm in software for the upper half yet still far decade. Comes a sly shock the necessity to say as there're non-junior engineers (mid-level, working for multiple *years*) who might've got away with never handwriting a class, function or even LOC with no gen AI. A couple weeks back working on PortaPack ([https://github.com/manicinc/portapack](https://github.com/manicinc/portapack)) I wanted to try logo designs and typefaces before a branding decision with the rest of the small team. We all have other projects and roles, so, the need for rapid prototyping. ![The final version of the PortaPack logo, graphical|size=small|caption=The final version of the PortaPack logo](/assets/blog/thinkpieces/logomaker-an-experiment/portapack-logo.png) I wanted cute and whimsical and got *brutal* hoping to get started online quickly; recs for free sites in top threads linked to paywalls, subscriptions behind dark patterns, like credit card info in the last step, or indenturing export quality to a unusable amount. Posts from a year back link to sites now living totally different experiences. Yeah updates are expected but this just didn't work for me, not freely. In all capitalistic industries but especially software what often were useful products become more privatized. :::banner Increased enhancements yield stricter access controls. ::: We can't blame them. Server hosting even a year or two gets costly. How does a free tool that has use and traffic stay free? BUT it is too common to lock in users and not be transparent on imposed limits. We see the ~manipulation~ ~misdirection~ means in login screens and app usability taking second precedence over signup windows, in hard-to-reach payment cancellation screens. ![Maddened by paygates|size=small|caption=Maddened by paygates](/assets/blog/thinkpieces/logomaker-an-experiment/input-noise-locked-behind-paywalls.png) Things that drive users to annoyance and away from them. So annoyance, wanting a quick (if dirty) UX, and a stir to see what'd happen drove me to pitch: Vibe code everything, full-stack and fully usable—every function written by an LLM, every design by an LLM. Nice 'n' easy quick 'n' dirty, this is just what everybody in the world is going to start doing if your apps have a dreadful enough experience. > *This is just what everybody in the world is going to start doing if your apps have a dreadful enough experience.* I knew I could get a playground for different fonts showing me text options in probably an hour, even minutes depending on the model, prompt, and complexity. Maybe 1️⃣ prompt? Logomaker🌈 has good scope. Not fintech, not healthcare, worst you waste time in a broken site with no ads and no data tracking. Who's Q/Aing this stuff? Logomaker, the app built 90% by ChatGPT? **It's Q/Aed by no one, use with peril.** ![An example logo created with Logomaker|caption=An example logo created with Logomaker](/assets/blog/thinkpieces/logomaker-an-experiment/logomaker-manic-example.png) ## LLM sees, LLM does I've a background in going to an art and design college. Art (even just visual art) is so encompassing logo designs I never specifically studied. I have Photoshop and Illustrator experience, but how they worked didn't interest me much. The features you see in the first Logomaker version weren't asked by me originally but designed by the LLM. Later on I refined and "architected" greater functionalities. *The iterative PM-esque process in product-driven prompts with technical-guided ones is needed to be worthy of use by a human in 2025.* On their own the LLMs from Anthropic (Sonnet 3.7), OpenAI (GPT-4o, GPT-o1, GPT-4.5), and Google (Gemini 2.5 Pro), all of which were extensively tested and ✨vibe coded ✨ with, could go just so far in self-improvement. You can't really keep asking a LLM to improve something for robustness or better UX and see better results after further than a few prompts, irrespective of token limits. :::banner Without human guidance, mapping out sensible, robust user flows the way humans want to use software is more difficult for LLMs than complex algorithms. ::: Is this a limitation of something like a creativity mechanism? Rigidly speaking there *is* no such thing in them. They predict next probable tokens in a sequence with a lot of parametrization so it's not *always* the same ouput. I mean thinking and creativity in a more abstract sense, which is easy to imagine (heh) as these mental structures are wildly [malleable in humans](https://www.simplypsychology.org/sapir-whorf-hypothesis.html) anyway. Or if you're more interested in a [philosphical](https://www.newyorker.com/magazine/2023/11/13/determined-a-science-of-life-without-free-will-robert-sapolsky-book-review) discourse. How can we be so sure *anything* we think is an [original](https://en.wikipedia.org/wiki/Simpsons_Already_Did_It) idea? ![ The Simpsons Did It|size=large|](/assets/blog/thinkpieces/logomaker-an-experiment/simpsons-did-it.jpg) How can we be sure of our *identities* when the pseudoscientific *You are the average of five people around you* is commonly repeated it's [dozens of pages](https://www.google.com/search?q=you+are+the+average+of+the+five+people) of Google results? *Or* is it natural consequence of LLMs' training? What happens if we get 10,000 product designers to write 10,000 user stories each? (100 billion user stories! 💣 This'd entail in a model that almost as large or in the ballpark of GPT-3). Good software now? ![Can we build it, LLMs?|size=medium|caption=Lost in Wonder-LLM-land](/assets/blog/thinkpieces/logomaker-an-experiment/alice-in-wonderland-using-tool-building.png) LLMs of course know what basic features go in a logo creator. We will see export options was done (and fully working from the LLM writing the exact dependency link needed from the CDN link for `html2canvas.js`, latest SHA hash intact and all) with multiple settings, though it was basic and didn't include SVG (which are complex, so it makes sense it's originally ignored unless prompted, as we asked for something *working* not *advanced*). I didn't ask for specific types. We were writing this in `JavaScript`, adding types and interfaces would slow development down 2x (at start). It's then simple to expand, and ask in the next prompt for additional exporting options of GIF and SVG. But if I didn't tell them to design adding new features in a way that, say, actively *considered* the UX with examples even, it would probably just give me a modal to render a GIF, SVG, and PNG, but all 3 as just buttons with working functionality and no additional `flourish🪄💥`. Tooltips, mobile responsive styles, sure, it won't go far beyond though, and there's *lots* of different paths needed for these formats to again actually be usable (by a semi-serious user). | **Format** | **Best For** | **Web Quality** | **Animation Support** | **Scalability** | **Styling Flexibility** | |------------|----------------------------------------|----------------------|-----------------------------|-------------------------|-------------------------------| | **PNG** | Static images, transparency | ✅ Very High | ❌ None | ❌ Not scalable | ✅ Easy via container styles | | **GIF** | Simple animations, loops, previews | ⚠️ Limited (256 colors) | ✅ Basic frame animation | ❌ Not scalable | ❌ Very limited | | **SVG** | Logos, icons, responsive UI elements | ✅✅✅ Excellent | ✅ With CSS/JS or SMIL | ✅ Infinitely scalable | ⚠️ Advanced, but powerful. Very difficult. | LLMs **"like"** to be conservative in generations. In coding, that's not good when you're getting incomplete scripts, or, in many cases, placeholder logic sneaking in even when instructed *aggressively* not to (keep this in mind down the line; is this a *side effect* of their architectures, or a *condition* by their providers?). How can you guide a LLM to think about things like this, not just *understanding nuances*, but how to act accordingly? Only, it has to be.. *without specifically listing that **in** example(s) form*? **The thing about examples and LLMs.** When you have few or limited ones, you run into constraints parallel to the same feature empowering [one-shot or few-shot learning](https://www.ibm.com/think/topics/few-shot-learning), the ability for an LLM to learn relatively easily from examples just in the context of the prompt itself without retraining. > **The thing about examples and LLMs.** When you have few or limited ones, you run into constraints parallel to the same feature empowering [one-shot or few-shot learning](https://www.ibm.com/think/topics/few-shot-learning), the ability for an LLM to learn relatively easily from examples just in the context of the prompt itself without retraining. --------------------------------- Say you need consistent JSON `({"Name", "Date", "Topic", "Location"})` parsed from some informal voice notes, and you use OpenAI. In **zero-shot**, feeding "Last meet I had a sync with Jordan Thursday regarding new designs in the break room" from a recording might give inconsistent JSON like `{"attendee": "Jordan", "subject": "new designs", ...}`. The model guesses the format on prior patterns of scraped text data and metadata (which OpenAI scraped online sources, like Reddit, Twitter..), of course it's likely to get things twisted! It's a *natural* limitation in LLMs. They get smarter with more training data, and that leaves more chances at capturing spam and noise (as well asmixing things up in their internal "reasoning"), causing hallucinations. In the case above, we will almost certainly get lowercased keys (instead of the capitalized ones as requested, or commonly used synonyms for those keys, *sometimes*, during interactions). So tech integrated around LLMs have to become more rigid to make up for their inflexibility. You can give one example (**one-shot learning**) showing the input note -> desired JSON structure (here it'd be the input text and: `{"Name": "Jordan", "Date": "Thursday", "Topic": "New designs", "Location": "Break room"}`). A clear template to follow. Add a few diverse examples (**few-shot learning**), more variations and how you want to handle them (like missing locations -> `Location": null`, **or** even metadata that can be auto-generated based on dynamic inputs, making *fuller* usage of the power of GPTs over typical transformer models), and this further helps the model give you what you want. This powers [function calling](https://platform.openai.com/docs/guides/function-calling) and typing libraries for LLMs, which combine these learning examples with continual validation and retry hooks. *If this feels hackey*, that's cause **it is**, and it is worrying as we see more APIs and tools assembled solely around prompt calls. **The rub?** >Showing an LLM how you want something done with guided examples just makes it better at doing that or related tasks. It doesn't generalize from that a higher-level framework of thinking that would allow it to broadly be better. ![Logomaker an experiment GPT-4o emulating writing style|size=large](/assets/blog/thinkpieces/logomaker-an-experiment/gpt-4o-skilled-writer-emulating-style.png) ![Logomaker an experiment GPT-4o emulating writing style 2|size=large|caption=I want you to write as GOOD as Jane Austen, not like her!](/assets/blog/thinkpieces/logomaker-an-experiment/gpt-4o-skilled-writer-emulating-style-2.png) It's not the best example but it's illustrative of the overarching problem of prompt engineering. **You can't both have a model be really good some particular things, and also even just kinda good at generalizing / extrapolating.** I could keep going with this writing style prompt, give more authors and passages and really switch it up. Vonnegut, King, Palaniuk. But all the LLMs do is attempt to adapt to *every* one of these styles at once, not necessarily generalize to become an actual *peer* to them. Even if you ask. ![Logomaker an experiment GPT-4o emulating writing style 3|size=large](/assets/blog/thinkpieces/logomaker-an-experiment/gpt-4o-skilled-writer-emulating-style-3.png) There're prompt engineering techniques (and a lot of proclaimed prompt engineers) positing to improve this kind of stateless mind of a LLM, but prompt hacks often just result in more coherent-sounding [hallucinations](https://arxiv.org/abs/2311.05232). ## Show me some code! ![First iteration of Logomaker|size=large|caption=This is the first iteration of the "ultimate logo generator" which was all asked to be built and written in one file. The end result was just under 1000 lines. I specifically mentioned ultimate logo generator to ensure a decent set of features initially, without having to specify anything. I also specified that it "should definitely be fully working".](/assets/blog/thinkpieces/logomaker-an-experiment/logomaker-old-version-first-one.png) This code shows LLM "generating" the correct links for fonts (as well as other dependencies like `https://cdnjs.cloudflare.com/ajax/libs/gif.js/0.2.0/gif.worker.js`) in line 869, and starting the in-line CSS for styles for the logo creator to apply via UI selection, and an excerpt of the exporting logic. ```html Logo Generator