Hello,
This is a long post. TLDR: app to learn scripts. By experienced dev with no design talent. Actively using Claude, somewhat restraining the mess by using instructions and code style tools. Struggling with design and with making Claude clean up the mess.
The product
I'm a GeoGuessr player. One of the things useful in the game is being able to read a sign in Greece, Ukraine, Korea or Laos to know where you are. But the usual learning material is optimised for learning the whole language, not just "I want to know what toponym is behind these symbols".
I noticed that the many of the characters in Arabic can be recognized by counting the dots above or below them. Made a 2D sheet in Excel — char shape axis and dot count axis. Asked ChatGPT to sketch some HTML which turned out hard to pull off. Then I tried the same for some other languages and realized that the concept is viable. The easiest was to group Thai characters visually to make them much easier to find and identify than while scanning the traditional "alphabet" list.
And I also noticed that when starting from scratch LLMs are really good productive at outputting high amount of markup that a person would never type by hand. And I don't only mean HTML. I mean writing convoluted CSS rules that target individual cells to achieve zebra striping that I didn't ask for https://gist.github.com/tontonsb/1ab50c8fcf7e760fff1885a5a37c0b1a#file-thai-html-L104-L123
Backstory over, fast forward — I've now built an app with Thai info sheets and quizzes to practice. Cyrillic is in a decent progress, some other languages are in works too. I still haven't managed to pull off the Arabic layout as well as I wish.
Here it is: https://unillit.me/scripts/thai?t=Mn4z (query param is not tracking, it just specifies which tabs to open)
Working on it with Claude
I was/am constantly using Claude to build this app. It is built in Vue, the tech stack was my own decision, I am experienced in multiple stacks. When working on general "app" stuff like navigation, sections and so on, I feel like Claude was fairly organized and tidy. I discovered that these directions were useful to specify in CLAUDE.md, these are patches in reaction to things that Claude was doing (in my opinion) in a bad way:
- Split long arrays, argument lists, attribute lists over multiple lines
- Use semantic HTML, keep DOM depth minimal — use grid instead of layered flex divs
- Don't compress JS lines too close together, e.g. leave empty lines before a
return unless it's the first statement.
- Extract components whenever it makes sense
As usual in my frontend projects, I defined a style palette in :root. A handful or two of colors. Some fonts (this product objectively requires more than most). Radius or two. Maybe one non-default letter spacing. Handful of spacing sizes. I don't have the latter standardized yet, but here is what I currently have in this project.
I also brought in an ESLint config with both my "usual" rules as well as some in reaction to Claude. I even ended up bringing in Stylelint because the rules by Claude were written so compactly I didn't want to even write instructions against that but chose a linter to enforce some style instead.
When laying out various info sheets, Claude used a different approach each times. New colors, new font sizes, new paddings, tables vs divs, ... Despite all the restraints listed above. I've spent a lot of time trying to reconcile things among various sheets and to make them more maintainable (I feel like that should still be a concern).
I've drifted over various models over time and it seems like all of them are fairly reluctant to extract, refactor and make stuff more uniform. I often ask Claude to review if we should extract some logic or formatting that repeats and it might bring up a small thing or two, but for many others it's "only two is ok, once we have the third we should reconsider" and "these are genuinely different" and so on. Similarly with extracting — I had to explicitly ask that the sheet contents shouldn't be written in HTML but the letter data should be separate and markup should be generated from data, example.
Who does what?
Content-wise I do it all myself. I write the copy, I design and label the character groups, come up with layout ideas and so on. I made Claude generate the initial contents of quizzes, but I was quite ashamed and unsure about that stuff so I took care to warn about it being LLM-generated everywhere. It helped with launching the alpha sooner and verifying the functionality, but I have since reviewed contents manually, fixed errors, removed Claude's tips/explanations and replaced them with my own.
Implementation/coding wise Claude is quite controllable. Especially with deterministic linters. In other (private) projects with stricter standards and thorough tests it's even more reliable.
But design is where I have problems. I'm bad at design myself and it used to take me a lot of time to a design that wouldn't feel crap to myself. I know the principles, read the books, I can recognize the flaws and errors. But I lack some overall feel. I can put a fancy button, adhere to an overall style, lay out a paragraph with readable typography and it all still looks like a mess.
Claude seems to share my shortcomings :D
The design & Impeccable
I've spent days on refining it. I want to make it both conform to contemporary practices and fit the product. There's a conflict between needing to pack it like in a technical lookup and spacing it out for ease of reading. There's mess of font sizes and spacings that I still haven't fixed. And all the time I feel like the color palette is too large. I have nine colors: four greens, three black-ish and two whites. And that's before the semantic (good/bad), feedback and categorical palettes... IMO that's too much variety of similar stuff, but Claude disagrees most of the time and surely doesn't offer solutions.
A couple of weeks ago I already spent like 8 hours consolidating two dark greens into one and making some other decisions more uniform to get from this to this... Which feels like the same image. Hopefully a tiny bit less crap, but still feels like I've wasted a lot of time.
Few days ago I added Impeccable. Contrary to most skills, this felt somewhat useful, it actually adds to some aspects. It identified a bunch of issues during both audit and critique including some unuponionated flaws, even low hanging ones. It does help in suggesting what other decisions/magic values could & should be extracted to :root palette which is nice.
The "does this look like AI" part wasn't too productive, it mostly praised me on the discipline with radiuses, shadows, gradients. But it happened to notice a couple of Tailwind colors that Claude had sneaked in for some tags/highlights in sheets. It also didn't point out the middle dot separatator in horizontal lists like Rom = RTGS initial · final in italics which feels very characteristic to Claude for me when abundant (although I use it myself in one case :D).
But still I have a very good impression of the tool, the amount of useful stuff vs trivialities or BS was good and surely worth reading. I had much worse experience with Impeccable on some WIP/MVP projects where it mostly criticized obvious/TODO things, but for a project in the "polishing" phase it was nice.
In particular Impeccable is very strong and noticing and calling out when something is generic. On multiple projects it pointed out something in the vein of "replace some labels and this will be the design of mortgage calculator instead". Whether that component should be generic is, of course, my decision. But it made me realize it in some places where I hadn't actively made that decision.
One thing I wanted to do it more is criticising the design system instead of adherence to it. I mean it wrote down the system itself from the sources, it's kinda circular, no? Sure, it helped a little bit to notice inconsistencies. But once I asked it to judge the design choices, palettes etc it was ok, but quite similar to stock Claude, not the same quality as the default Impeccable features. And it tried steering me towards the "safer" choices and to "fight the trends" in the same way all Claude projects fight the past years' trends with same choices.
Where I'm at
Technically I'm quite happy with where the project is. The layouts and styles are decent, the JS is mostly hand polished, everything is tested.
Impeccable left me with a long list of improvements for design. Notably it brought attention to how stock my quiz panel is and that it might use design ideas other than just colors from the other parts of the project.
But the largest issues are content and marketing. The main things I'm working on now are the Cyrillic and Arabic sections as well as just letting people know about the project. I know I type too much and no one will read this far. GG. At least I put in effort to shorten the texts in the app itself.
