STET / IN CONTEXT

Make the interface
part of the conversation.

Explain a risky action. Review a bug. Hand off working code. These live UI annotation examples connect intent to the real interface.

Agent · Product · UX · Engineering · QE

Explain a dangerous action

Five viewpoints. Five working examples.

Prompt
Explain this settings screen and make the destructive action understandable.
LIVE APPLICATION · TRY THE CONTROLS
F
FieldnotesWorkspace / Settings
Local demo

A space for the next idea.

Manage the Fieldnotes workspace and its delivery preferences.

DANGER ZONE

Delete workspace

Deletion is irreversible. All projects and API keys in this workspace will be permanently removed.

Your workspace is active.
WHAT THIS MAKES EASIER

One focal circle directs attention to the existing warning. Stet supplies no safety behavior.

Inspect plan, source & verification

Actual schema-valid React plan. Targets refer to source refs; this JSON is never executed by the drawing runtime. After installing @funsaized/stet, copy to annotation-plan.json and run ./node_modules/.bin/stet validate annotation-plan.json --json.

{
  "version": 1,
  "framework": "react",
  "intent": "Explain workspace deletion without replacing the native warning.",
  "annotations": [
    {
      "id": "danger",
      "primitive": "circle",
      "targets": [
        {
          "strategy": "ref",
          "file": "website/src/showcase/Workspace.tsx",
          "locator": "remove",
          "description": "Delete workspace button"
        }
      ],
      "options": {
        "seed": 41,
        "description": "Read the irreversible consequences before deleting.",
        "stroke": "#b33e2b"
      }
    }
  ]
}

Product asks what must happen. UX asks how it should read. Engineering shows what exists. QE verifies behavior. Each viewpoint has its own working example; requirements, designs and test records stay in your existing tools.

Make this example your own

Inspect the plan and source above, then adapt the marks to your existing controls. Stet supplies emphasis; your application owns validation, progression, and behavior.

Attach annotations with React refs · Explore the six annotation primitives · Follow the coding-agent workflow

Coding-Agent Visual Implementation Handoff · Visual UI Review & Form QA Annotations ·