Lessions from AI coding

Design

Architecure

• Unified data schema across the whole application, including:

  • Database (file-based) models and configuration files
  • API payloads
  • Client-side type definitions

• Event-based propagation for notifications across the whole app:

  • A central event bus is used to send and receive events.
  • Components can subscribe to specific events and react without being directly coupled to the event source.

• Hot reload for seamless updates:

  • Modules and configuration can be updated on-the-fly without restarting the entire application.
  • This significantly improves the development workflow and allows for dynamic adjustments in production.

• Clear directory hierarchy for different packages (ui/functions/versioned api):

  • No mix or overlap
  • Grouped by function

UI/UX

Google Stitch is a good tool for design. As I don’t have practical experience with Figma, I can talk with Stitch to convey the requirements, and it can create up to 3 drafts. Stich Now has a redesign feature: you can paste a screenshot of the current design, and it can improve your design for you. If you are satisfied with the result, you can select the design and ask Stitch to prototype; then it can create an interactive UI for you. And of course, you can export it to Google AI Studio or copy it to the clipboard.

UI/UX design is not isolated from the rest of the architecture; it must be considered as part of the whole system.

• If a UI component can be used in more than one place, create it as a shared component.
• Prefer shadcn/ui and Tailwind CSS—not just for aesthetics, but because they are easier for AI-assisted development to reason about. Tailwind uses human-readable utility names rather than opaque technical terms, which suits AI coding well.

Code Rules

I’ve collected many rules; they’re integrated into super-dev-plugin and my CLAUDE.md, and I will continue improving them.