Lightkeepers
← Back to the working file

How we work together.

You asked what the loop actually looks like. This page is the answer, working, rather than a description of it. The whole thing turns on one idea: every element has an address, so a sentence typed into Discord points at exactly one thing and neither of us has to guess.

The problem this solves

You say "this section here is too tight". I have no idea which section. You describe it, I guess wrong, you correct me, and we've burned four messages before anything changes.

So every element gets a short code. You say F3 and I know precisely which element, in which file, on which line. No ambiguity, no screenshots required, works from your phone.

The parent dashboard, in review mode

Same screen as the real thing, with addresses switched on.

Lightkeepers

Morning, Karl.

Two things want you today.

Needs you

Ruby’s Term 3 plan is ready to approve

Twelve weeks, six subjects, built around horses and the ocean.

R
Ruby

Year 4 · Week 4 of 12

On track
Maths2 left
Sciencedone
English1 behind
S
Sam

Year 4 · Week 4 of 12

A week behind
Asked for help twice
Maths2 left
Sciencedone
English1 behind
H1  Top bar, mark and icons
G1  Greeting and status line
F1  The dark focal card
F2  Its eyebrow label
F3  Its headline
F4  Its body copy
F5  Its primary button
K1  Ruby's card
K1a  Ruby's pace pill
K1c  Ruby's week dots
K2  Sam's card
K2b  Sam's attention flag
K2d  Sam's action buttons

What the conversation looks like

Karl

F3 is too long, it wraps to three lines on my phone. And F4 should mention how long it takes to read.

Sage

Done. F3 is now "Ruby's term is ready", two lines on a 390px screen. F4 mentions ten minutes. Screenshot coming.

Karl

Better. K2b feels alarming, it's the first thing I see on Sam's card.

Sage

Moved it below the subject rows and dropped the weight. It now reads as information rather than a warning. One thing worth flagging: if it's too quiet you'll miss the child who needs you, which is the whole point of the card. Have a look and tell me if I've gone too far.

Karl

That's right. Ship it.

Better still: tap the address itself and it copies. On the demo above, clicking any little amber code copies a ready-to-paste reference including the element's text, so you never have to read or retype a code. Paste into Discord, add your sentence, send. It works on a phone because the clipboard is doing the work, not a server.
That is the entire mechanism. No new tool, no seat, no app to install, and it works from your phone in Discord. The addresses do the work that pointing at a screen would do if we were in the same room.

How it runs, step by step

  1. I build the screen in the repo and deploy it. Everything is real code, versioned in git.
  2. You open it with ?review on the end of the URL and the addresses appear. Without it, the page is clean and looks like the product.
  3. You type into Discord using the codes. One line is enough.
  4. I change it, redeploy, and send you a screenshot straight into Discord so you don't have to go anywhere to see the result.
  5. You either accept it or push back. If I think a change is wrong I'll say so before making it, not after.
  6. When a screen is settled, it goes into Nathan's repo on a karl/ branch as a pull request.
The two things that make this work, and they are both about me rather than the tooling. I can see the screen, because I render it and look at it, which is how I caught the tick icon and the contradictory greeting earlier tonight. And I can send you the picture in Discord, so the loop closes without you opening a browser.

Where the other tools fit

WhenToolWhy
Tweaking a real screenThis loopFastest. The artefact is the actual product, not a picture of it.
Going wide on a new ideaPencil, headlessI generate several directions in minutes and send you images. No app needed.
You want to move things by handBrilliantA real canvas on your Mac. Free. Files are YAML in git so I can read and edit them.
Animation or live code on canvasFigmaOnly if Code Layers or Motion earn the seat. Not yet.