tella-ui-redraw

Installation
SKILL.md

Redraw product UI in Tella Motion

Rebuild the real interface with Tella Motion's own shapes and text, simplified to what the shot needs, and let it perform one action. Follow tella-motion-design; load it first.

This skill needs the Tella MCP. If tools such as get_timeline are missing, follow the connection steps in the tella skill first. If the Tella Motion tools are missing, offer zooms and callouts on the recording instead.

Source

Every piece that claims to be the product comes from it: a frame of the user's recording (get_clip_frame), their screenshots, or the product's page (import_from_url). Read labels, values, icons, spacing, radii and colours from a full-size crop. Never invent a control, chart or customer; build a labelled placeholder and ask.

Rebuild

  • The hero piece in full, with its real text: the panel, card, field or chart the action happens in, at 1.5 to 2× its size in the product, so text is at least about 26 px tall at 1080p.
  • The context as quiet shapes in the product's colours (window, sidebar, header) with only the labels that place the viewer, or the real screenshot behind, dimmed.
  • Nothing else.

Draw with addShape (rounded rectangles), addTitle (every label, in the product's typeface or the nearest neutral sans), addPath or the real icon files (addMedia). Name nodes for what they are (card.invoice), group each piece, keep text live.

Act

Installs
21
Repository
tellahq/skills
First Seen
7 days ago