#mockup-generation

#mockup-generation

Google recently released a new AI model, Gemini 3.1, that demonstrates great results in UI and web design tasks. I've already tested this model for web design tasks and in this article, I want to experiment with Gemini 3.1 and generate UI for a mobile application.

Design tokens are all your design decisions, that define a design system's aesthetic properties, everything from colors and font sizes to spacing units and border radii. They are the modern evolution of hard-coded values. They are stored in a central, platform-agnostic repository, establishing a single source of truth for your entire digital product suite. This central management allows teams to consume the exact same design values across all platforms (web, native apps, documentation).

Instructions I created. Instructions I am continuing to hone - instructions that required me to study my own old essays, identifying what I do when I write. The sentence rhythms. The way I move between timescales. The zooming in and out from concept to detail. The instructions tell Claude how I would like ideas composed. I pull together concepts and experiences from my lived expertise to formulate a point of view - in this case, on this new AI technology.

Model Context Protocol (MCP) is a technology that enables AI models to connect with external tools and data sources (such as GitHub, Slack, databases, and documentation systems). In this article, I want to explore my top 7 favorite MCPs you can use in your design process. I will cover not only benefits but also limitations of the each MCP so you will have a clear idea about what you can & cannot do with it.

One skill separates good designers: the ability to clearly articulate their intention. No matter what tool you use, whether it's a traditional UI design tool like Figma or Sketch or AI tools like Figma Make, your ability to explain what you want to see accounts for 50% of your design success. The other 50% comes from your hard and soft skills. When it comes to AI-powered design, your ability to write decent prompts will have a direct impact on the quality of your design. In this guide, I want to share some specific tips and tricks that you can use for Figma Make to maximize the output.

Something's been slowly shifting in the design zeitgeist. I've been watching my feed on X and the vibe has changed. More and more, I see designers sharing finished experiments or prototypes they coded themselves, rather than static Figma files. Moving from working on a canvas to talking to an LLM. The conversation isn't "here's a design I made" anymore... it's "here's something I shipped this afternoon."

To be honest, for many years, I was mostly reacting. Life was happening to me, rather than me shaping the life that I was living. I was making progress reactively and I was looking out for all kinds of opportunities. It was easy and quite straightforward - I was floating and jumping between projects and calls and making things work as I was going along. Years ago, my wonderful wife introduced one little annual ritual which changed that dynamic entirely.

Most design problems aren't 'design' problems. They're 'Thinking' problems.They're 'Clarity' problems.They're 'Too-many-tabs-open' problems. More prototyping. More pixel-shifting. More polish in Figma alone isn't going to help you with those. For me, without clear thinking, Figma just results in more confusion, more mess, and more mockups than I can mentally manage. The Problem: Figma wasn't the bottleneck - my thinking was