Hamilton Ulmer

MotherDuck, the data warehouse startup I work at, is shipping a new feature soon that involves some paper airplane imagery. I’ve been using Claude artifacts to create parametric systems for icon development and figured this was a perfect case.

To date, I’ve hand-crafted almost all of the meaningful product icons in the MotherDuck UI. Early on, I decided to fit everything into a 16×16 footprint. The small size makes a big difference for information-dense interfaces. The tradeoff, of course, is that 16 pixels isn’t a lot of space to convey an idea in a way that immediately tracks to the concept.

When working with such constraints, it can be helpful to build simple throwaway mini-tools. Agents make this part trivial. By removing my hands from the task, I can focus on the constraints. For this work, it was important to convey the concept through essential geometry, and focusing on the keel made the biggest difference with the smallest line budget. I could have shown every edge of the airplane, but then we’d fall into what typographers call the “ink trap” problem, where the contours of the icon become a blob of dark lines near the tip of the plane.

Anyone who has built these sorts of mini-tools to aid their design work understands the models can’t possibly know which details matter. Often, you don’t know either. You have to heavily guide the design through iteration. The model will work through any tedious math necessary to achieve your vision. Without precise language about what to care about, the model will cycle through dozens of impossible-to-read, incomprehensible icons.

This dynamic is no different than it was before this moment in AI; craftspeople always discover the ergonomics of their tools through deep use. In this case, if you can cast an illustration task as a math problem, frontier models will nail it. That’s relatively new. The models are good at problem solving within a narrow set of constraints you give them. Vision remains the bottleneck.

<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
  <path d="M 8 1.5 L 1 13 L 6 13 L 8 15 L 10 13 L 15 13 Z" fill="#F4EFEA"/>
  <path d="M 8 1.5 L 1 13 L 6 13 L 8 15 L 10 13 L 15 13 Z" fill="none" stroke="#383838" stroke-width="0.5" stroke-linejoin="round" stroke-linecap="round"/>
  <line x1="8" y1="1.5" x2="8" y2="15" stroke="#383838" stroke-width="0.5" stroke-linecap="round"/>
</svg>