I wanted the site to be the hardware, not a picture of it. Sidekick and K.O. II were the two boards. The reference was the machines on the Teenage Engineering site. I started with a photo of both and a question.
The first prompt
The first prompt was curiosity. I was on Grok 4.7. I showed it Sidekick and K.O. II and asked if it could make a style, or a library, from the idea of those machines. It could not. What came back was a costume: rounded keys, a glow, a shadow under everything. It was bad enough that I stopped asking for a style and started correcting one edge at a time. The useful work was the long run of prompts after that.
What a library prompt misses
A token file cannot see a join. The early passes read as generic depth. Keys turned into barrels because the face was a full gradient. A wash sat on top of the whole plate and painted over the seams, and it did not follow the light. White hairlines showed up on every edge. The USB shadow was a triangle drawn with a clip, which is not how a slab casts shade. Each part also tried to size itself from the window, so a knob and a key grew at different rates.
Shadows and highlights
There is one lamp. The highlight and the shadow land on opposite sides of a part. An inset shadow flips, so the bright edge and the dark edge cannot share a corner. I tried to make a highlight by lightening the plastic’s own color. On a dark chassis that just goes black. The highlight has to be the lamp, a white at low alpha, not a lighter shade of the face.
Circles were worse. Knobs, fader caps, and the switch thumb turn into hoops when the blur is wider than the offset, or when a spread is added. The crescent has to stay a crescent.
Texture
Grain is the dust in the plastic, not a filter on the picture. It belongs on the slab and on the body. It has to stop short of the lit edge, or it covers the catch light. It does not go on the keys. Too much of it, or the wrong blend, flattens the small engraved marks until they look printed on.
What had to be redone
Sidekick is a 477-wide board. K.O. II is the wider one, 952. One scale from that board sizes the keys, the knobs, and the gutters together when the case grows or shrinks. I redrew the parts once the photo was the reference, not the first render.
The nameplate is one piece with the top key, not a card under a nav. The USB key is an insert, square into the orange, with a soft catch on the free side. The body keys are rubber sitting in a cut socket, not flat paint. The fader is a groove with a seam, not a grey slot. Faces stay flat. The depth is the join and the chamfer.
The icons
The icons did not work. One at a time they came out the wrong weight, and they would not keep their places when the case changed size. So the screen, for now, is one image of the whole display, taken from the site. That picture is the thing that scales. It is one responsive sheet, not a set of parts. Individual icons will have to wait for another try.
AI, and the work by hand
The model could repeat a structure, and it could apply a fix once I named the failure. It also put the gradient, the overlay, and the hoop back the next time I asked for a neighboring part. The loop that worked was a photo, a wrong render, one sentence about which edge was wrong, then CSS written to that sentence. The prompts got longer because the first one had nothing in it to be wrong about. A library was the wrong ask. The corrections were the work.
Skeuomorphism
It holds when the control is a part. A key in a socket. A groove. A plate that is coplanar with the key beside it. It fails when every rectangle gets a shadow so it will look expensive. Sidekick set the measure. K.O. II is the same grammar on the wider board, and when the case gets narrow it folds back to that measure.