AI screens

Preview

A new chat, a thread with sources, a reply that is still generating, an image result, an attachment, an error, and the history drawer with its menu. Each screen is drawn in Light and in Dark.

AI screens, 11 screens393 x 852 each, Light and Dark

Each screen is drawn in Light and in Dark, with Color Tokens set on the frame itself, and the dark screens are the same instances resolved against the other mode. AI is also drawn for the outer and inner display of iPhone Duo, see iPhone Duo screens.

How does a chat interface handle generating, error and attachment states?

The composer stays put and changes its button. The error is a banner in the thread. The file sits in the composer.

While a reply generates, the composer stays where it is and its send button becomes a blue stop button. When a reply fails, the error appears in the thread as a banner with a Try again Button, and an attachment sits inside the composer above the text as a file row with a remove button.

The minimum touch target on iOS is 44 pt. The frames pin Platform to ios-md, where platform/min-touch-target reads 44. The android mode of the same variable reads 48 dp.

What are the AI screens built from?

270 instances across the 11 screens. Two components, Message and Prompt Composer, carry the assistant itself.

129 instances sit directly on the frames: 84 are components, instances of 9 component sets and one helper row, and 45 are Lucide icons with 12 different names. Another 141 sit inside those, 90 of them icons, so the screens use 39 different icon names in all. Placed counts an instance that is not inside another instance. Nested counts one that is. A component is counted by its set name, an icon is an instance named in lowercase and a helper part begins with an underscore. The dark row holds the same instances as the light row.

Four of the 11 screens are another screen with something laid over it: Tools, History, Manage chat and Instructions. Each brings its own status bar, which is why those screens count two.

This set draws more by hand than the others. No List or Dropdown is placed, so the model switcher under the header, the icon tile on New chat and Projects, the Files and Instructions rows, the source cards and the table inside a reply are local layout. In all, 135 layout frames and 61 text layers sit outside any instance, and the only drawn shape is one 393 x 852 rectangle, the Scrim on Manage chat. A change to List or Dropdown does not reach these parts.

Manage chat is the deepest screen in the set: a thread, a drawer over it and a menu over that. It places 17 instances and nests 37 more, so it is the one to look at when you want to know whether the layering holds.

Counted on October 2, 2026 with a Plugin API script over the 11 light frames of the AI page in the Appetite UI Figma file.

Which tokens do the AI screens use?

Every solid fill and stroke on the screens resolves through a variable. Frames sit in a variable mode and read down through the same collections as every component.

The 11 light frames hold 511 solid fills and strokes that are bound, spread over 22 different variables, and none is unbound. Two things are not solid paints bound to a variable: the Fade mask gradient in the drawer on History and Manage chat has three stops that are not bound, and one fill in the Error banner uses the Foundations primitive colors/alpha/red/alpha-10 directly.

Paints are every visible solid fill and stroke on the 11 light frames, inside instances included, counted by bound variable name on October 2, 2026.