Tw93 (@HiTw93) “I’m sharing a few posts on how some of the more interesting skills in Waza are b” — TopicDigg

I’m sharing a few posts on how some of the more interesting skills in Waza are built. This one is about the thinking behind /design. The starting point was simple: I really dislike the kind of AI-generated websites that all look the same, usually with emojis, blue-purple gradients, and a generic polished look that is technically usable but visually forgettable. So I took the UI work I’ve made recently and had Claude Code study the way I prompt, refine, and correct design output. That became a base layer of design best practices and anti-patterns. On top of that, I pulled in the useful parts of Claude’s frontend design skill, which gave the whole thing a stronger foundation. For more specific rules, I learned a lot from pbakaus/impeccable. It contributed many of the concrete constraints: banned font lists, color system guidance, theme direction, CSS anti-patterns, animation rules, and other details that help the model build a more reliable sense of visual taste. I also borrowed part of the structure from getdesign, especially its simplified adaptation of Google Stitch’s nine-part scaffold. That gave /design a clearer knowledge framework instead of just a loose collection of tips. The last piece is context. Before using this skill, I ask a few questions first: who the page is for, what aesthetic direction you want, what you want users to remember, what you definitely do not want, and what kind of micro-interactions should define the experience. Once Claude Code has that context along with /design, the results are usually much better, with far less iteration. If you have strong design ideas, better rules, or useful references, feel free to contribute to Waza. PRs are welcome. Let’s build the most useful skill library for engineers together.