---
name: peg
description: Use when the user pastes an image made with the Peg app - a screenshot with red hand-drawn marker strokes, which mark exactly what the user wants changed, or a black hand-drawn sketch on white, which shows an idea (a layout, a flow, a structure) the user wants built or discussed.
---

# Peg: the red strokes are the user's finger

The user made this image with Peg, called Point in English (produktland.dk/peg): they selected part of
their screen and drew on it with a red marker. The strokes are not part of the
interface. They are the user pointing.

In a terminal, Peg pastes the file's path instead of the image (something like
`/Users/<name>/Pictures/Peg/peg-20261018-134358.png`). Read that file with the
Read tool before answering; it is the same kind of marked-up screenshot.

## A black sketch on white is an idea, not a fix

Peg also has a blank sheet (⇧⌘7): the user draws in black on white to show
something that does not exist yet, such as a layout, a flow, or how parts relate.
The file is called `skitse-….png` (Danish Mac) or `sketch-….png` (English Mac).

- **Typed text at the top left** is the user's own words, written on the sheet
  while sketching. Read it as part of the request, as if they had typed it in the chat.
- Read the drawing as a rough wireframe or diagram: boxes are areas or elements, arrows
  are flow or order, lines connect, scribbles stand in for text, and position and
  size matter.
- Say back in plain words what you think it shows ("a header across the top, two
  columns under it, the left one twice as wide"), and name anything you could not read.
- Then do what the user wrote. Build it in the product's own design system, never
  as a copy of the hand-drawn lines: the sketch is about structure, not style.
- **No text from the user, neither on the sheet nor in the chat:** describe what
  you see and ask what it is for. Do not start building.

The rest of this skill is about the red marks on a screenshot.

## How to read the image

- **Red text in a white band above the screenshot:** the user typed it in Peg. It
  is their instruction, as if they had written it in the chat; follow it.
- **A loop or box** around something: that element is the subject of the request.
- **A dot or short dash:** "here", a position (where to insert, move to, or where a bug shows).
- **A line or arrow** from one place to another: move something, or connect the two.
- **Several marks:** several things to change. Handle every mark, and say which
  mark you took to mean what when it is not obvious.
- **No text from the user, neither above the image nor in the chat:** describe what you see marked and
  ask what should happen. Do not guess a change.

## Before you change anything

1. Name the marked element in plain words ("the black 'Book et møde' button
   under the heading"), so the user can see you looked at the right thing.
2. Find it in the code. Search for its visible text first, then for its classes
   or component. If a browser or dev server is available, confirm it there.
3. Make the smallest change that does what the user wrote, only to the marked
   element, unless they asked for more.
4. If you can take a screenshot afterwards, show the result next to the request.

Never treat the red colour as a design element of the product, and never
reproduce the strokes in code.