概要
公開日: 2026-06-23
翻訳生成に失敗したため、原文をそのまま保存しています。
原文
Building a simple app is easy now. But the gap between apps spawned by vibe coding tools and apps made by professionals is visibly obvious. It doesn’t need to be. In this blog we’ll share a structure that will help you ship apps that are visually compelling. Of course we could give you the DIY method: go take some screenshots of apps you think are beautifully designed, ask AI to deconstruct the design into actionable items, and start baking the same designs into your app. There are countless tutorials, plugins, and resources out there to help you incorporate a reasonably nice design for your apps. But that is not the best way to build something unique and visually impressive. To stand out in the crowded landscape of vibe coded apps you need polish. Polish is when persistence and taste meet the science of design. The limitations of agentic design Agents are getting good at very specific design tasks like assembling most design patterns and layouts, especially when templates and existing codebases are available. But they remain hard to steer. Because design is not code. And yet, if you inspect your chat you’ll probably see AI crunching code trying to translate what you meant by “align button to the main container edges”. Agents don’t have eyes. They can only prepare the ingredients and toss them all in the pot. Sometimes the output is a disaster. And sometimes the output looks totally fine. We all know that there is more to a great soup. The science of design Visual design is a science of applied abstraction. There are so many books on the matter. Design is not an art. John Maeda (famous designer/technologist) said ”Design is a solution to a problem. Art is a question to a problem". Since its beginning, design has followed a set of core principles that have been applied to many domains ever since….architecture, print, landscaping, drawing, industrial engineering, and many more including, software. The myth of “good design” is elusive, cryptic, and yet so tangible. You know it when you see it. A functional framework for designing apps with AI What you’re going to read here is a list of the qualities people see when they “know it when they see it”. Everything that we perceive to be visually harmonious checks each of these boxes: - Contrast makes elements distinguishable. Differences in size, color, weight, or shape create hierarchy and draw the eye to what matters most. Without contrast, everything competes equally and nothing stands out. - Hierarchy guides the viewer through content in order of importance. Headlines come before body text, primary actions look different from secondary ones. Size, position, color, and weight all signal "look here first." - Alignment creates order and connection. Elements that share an edge or axis feel related and intentional. Strong alignment is invisible but its absence looks sloppy immediately. - Proximity groups related items and separates unrelated ones. White space between groups tells the eye what belongs together without needing borders or boxes. - Repetition (or consistency) builds cohesion. Reusing colors, fonts, shapes, and spacing patterns makes a design feel unified and helps users learn the system quickly. - Balance distributes visual weight across the composition. Symmetrical balance feels stable and formal; asymmetrical balance feels dynamic but still resolved. Either works; an unbalanced layout feels off. - White space (negative space) gives content room to breathe. It's not empty, it's active, and it determines how premium, calm, or cluttered a design feels. - Unity is the overall sense that every element belongs. It emerges when the other principles are working together; nothing feels arbitrary or out of place. Think of these as a framework to critique and iterate with AI. Unfortunately, creating a simple skill like “visual-design.md” won’t cut it. Remember, AI has no eyes (yet) but you can provide it with a screenshot and ask it to critique and revise its output based on this ch