Systemizing Creativity

2026-03-10T00:00:00+00:00

The Intersection of Engineering and Design

When we think about building robust systems, we often envision strict constraints, uncompromising schemas, and rigid architectures. Conversely, when we discuss high-fidelity user experience design, we imagine fluid animations, intuitive micro-interactions, and boundless creativity.

At first glance, these two worlds seem inherently opposed. However, when we apply systems engineering principles to design, something remarkable happens: we unlock scaleable creativity.

Standardizing Design Tokens

The foundation of any design system starts with tokens. By defining our colors, typography, and spacing as fundamental constants, we ensure consistency without sacrificing aesthetic quality.

{
  "colors": {
    "accent": "#2DD4BF",
    "background": "#020609",
    "cardBg": "#0d1117"
  },
  "typography": {
    "heading": "Outfit, sans-serif",
    "body": "Inter, sans-serif"
  }
}

Prototyping in High-Fidelity

Once our base tokens are established, we can begin building more complex components. A rate-card or an author-card isn’t just a rectangular box with text; it’s a meticulously crafted element designed to convey information efficiently and beautifully.

“A great user experience doesn’t happen by accident. It’s the result of rigorous engineering working invisibly behind a beautiful facade.”

By structuring our CSS and our component hierarchy to reflect the mental models of both the designer and the engineer, we dramatically reduce the friction of Design-to-Code bridging. We end up with codebases that are maintainable, performant, and, above all, delightful for our users.

Conclusion

Bridging the gap between engineering and design requires a shared language. Whether it’s through Tailwind utility classes, custom CSS variables, or reusable component structures, building systems thoughtfully is what allows our creativity to truly scale.

How Much Is Too Much To Delegate Thinking To LLM As Software Engineer

2016-03-30T00:00:00+00:00

I was recently developing a hybrid app with Expo framework. It supposed to run on IOS, Android, and Web. I extensively vibe coding it. For some reasons I decided to use plain sql instead of ORM or query builder. I organize my sql commands in files. As a vibe coder I ask AI to import the sql file and execute it. At first, instead of importing the file, it copy the command from the file and pasted it in the logic code. Not so DRY. And after several attempts of arguing with the AI it finally did as I intended.

But it was not really as I wanted. The AI used FileSystem plugin to load the file. While it will work on IOS and Android, it wont work on Web. Up until this point, we can clearly see that AI wouldn’t take technical consideration when implementing some features. Well maybe it just me that not good enough at prompting. But remember that AI is a language model. It means that you have to put your though into words in order for AI to understand what you really mean. Whilst considering the specs is done mentally when we use our brain instead of delegating it to AI.

The most dangerous thing is, would you know the technical dept the AI produce if you yourself do not know the technical specs? And how would you know it if you delegate the huge amount of your thinking to AI?

At the end of the day, software engineer is not just about coding. It is about comprehending the specs and designing a system that can satisfy the specs as much as possible.