07 Product Design·2025·Experiment

Play over
Precision

A creative button generator. Curated ingredients give a direction, the model adds the surprise, and a button gets a personality. Built to encourage play instead of precision.

The But.tons playground: a glowing pink button in the centre with ingredient tags around it, and a row of mood ingredient cards below.
Role
Product design · build
Product
But.tons · creative button generator
Built with
An LLM · prompt design
Type
Experiment · live website
01The spark

Can a button have character?

Most AI tools optimise for speed and output. Playground AI optimises for exploration and surprise. I wanted to bring that idea to the smallest component there is.

Playground AI: a portrait generated in a chosen style, with a grid of style options to mix below it.
Playground AI · the inspiration · style mixing
02The question

What if a button were a small moment?

Not just a functional element, but a moment of character. An interface that rewards experimenting over getting it right.

Generated buttons · shape · texture · motion
03The concept

Guided inputs, expressive outcomes.

Curated ingredients are the spark: they show what is possible and move people past familiar conventions. The model is the second layer, pushing each result somewhere you would rarely design on purpose.

Diagram: ingredients feed into AI interpretation, which produces a generated button.
Ingredients · AI interpretation · generated button
04Movement

Motion becomes personality.

Movement ingredients define how a button behaves in space. Each one is a direction, not a setting.

Movement ingredients · wobbly · glitchy · breathing
05Mood

Emotion becomes interaction.

Mood ingredients shape the emotional tone of the button, translated into how it looks and responds.

Mood ingredients · confident · anxious · dramatic
06The prompt

Make the prompt quieter.

Early versions also asked the model for creative labels. It sounded fun and pulled focus from what mattered: shape, style, motion, texture. Constraining the output let the model spend itself on visual character.

The system prompt: a creative priority order of texture first, shape second, animation third, mood fourth and label last, followed by key principles and rules.
System prompt · priority order · constrained output
07Editing

Refine through language, not modes.

There is no edit toggle. If a button exists, the model changes only what the prompt asks for; otherwise it starts fresh. Iteration stays fluid and the creative thread holds.

Intent-aware editing · one input · modify or regenerate
08Hybrid control

Not everything should be generated.

Ingredients give direction; the base controls give precision. The mix keeps it playful, and still usable.

Base controls · gradient · size · beside the ingredients
09Micro moments

The interaction is half the output.

Expressive cards, a transparent state, and a steady interface that lets the button evolve.

Expressive cards · transparent state · a steady UI
10The lesson

Variation isn't a bug. It's the material.

LLMs are probabilistic systems, not precision instruments. This was an experiment in turning that behaviour into a product quality, with guardrails that keep people in control and still leave room for surprise.

01
Curated ingredients
A playful direction to start from, instead of a blank prompt.
02
Constrained prompts
Less asked of the model, so it focuses on visual character.
03
Conversational editing
Change what you ask for. Everything else holds.
Three guardrails · probabilistic by design, steady by structure