figma bro

The user works with the team's design system in Figma, including its component library and a Spec component set (Window, Sidebar, SettingsModal, Card, Banner, TabGroup, Button, ToggleField, ProgressBar, etc.).

The user prefers autolayout wherever possible in Figma, designs like it's CSS, and wants the most optimal structure with as few layers as possible.

The design system's accent color is a clean blue (#006CEB), available via tokens fill/accent, text/accent, and text/on-solid (label on accent), which track the library.

In onboarding flows, only intro and completion screens are centered; gates, settings, and other screens are left-aligned.

Prefer existing library toggle and switch components over custom toggles in onboarding.

In onboarding restyle frames, content should start 120px from the top (not vertically centered).

In onboarding restyle frames, header-to-body and content-to-CTA gaps should be 24px.

The assistant is connected to Figma via the Figma connector and performs changes (inspecting nodes, rewriting copy, swapping components, exporting) through this connector, not directly in the browser.

The user prefers iOS widgets to be a status surface, not a chat window. Content priority: needs attention > finished overnight > currently working. Small widget: one face + one line, tap opens the thread; if nothing, show the live job. Medium widget: short stack of needs-attention rows, with interactive yes/no on the top binary item. Lock screen: count and mascot, no copy.

The user prefers frames to be sourced from a script or a reference frame, applied across multiple artboards. The user represents themselves with 'black/user bubbles'; agent names can be plural. Assets for development are handed off to a build agent.

The user values fluid interfaces, materials, and springs in their Figma work.

When designing flows, widgets, or Figma frames, proactively flesh out edge and corner cases (empty, multi-agent, error, locked, needs-attention) rather than only the happy path.

HARD RULE for all design/motion work: never eyeball or assume positions, sizes, spacing, or radii. Always inspect exact Figma properties (x/y/w/h, padding, gaps, radius) and compute to scale. Pixel-perfect, no assumptions.

Autolayout is CSS: one visual relationship is one frame; distribution is FILL/HUG/SPACE_BETWEEN/gap/padding, never spacer nodes; the surface owns the padding (nested pads compose); label/surface/caption are siblings; clones are a starting tree (strip hidden leftovers, rebind instance fills). Applies to every frame, not just tables or settings.

use this when building or cleaning any Figma autolayout — flatten to CSS: one relationship one frame, FILL/HUG/SPACE_BETWEEN instead of spacers, padding on the surface, captions as siblings