Starlight IntelligenceStarlightAcademy

Lesson 02 / 06 · Work

Direct a visual workbench.

Make an inspectable interactive artifact with real states and a portable original.

Your artifact: An HTML prototype and a review note

Specify behavior as precisely as appearance.

An effective visual brief names what the reader should understand, which controls change the answer, and what must remain visible. Request the smallest interaction that teaches the relationship. A comparison needs shared columns; an explorer needs meaningful inputs and visible consequences; an architecture view needs ownership and failure paths.

In Work, request a finished artifact: a self-contained HTML explainer, an authored SVG, a spreadsheet, or a document with embedded figures. Use @Visualize when the host supports that preview. A screenshot preserves appearance; the HTML and source data preserve the artifact. Ask for both when you need portability.

Liquid glass is a material treatment. Use it on navigation and shallow surfaces while keeping reading planes opaque enough for contrast. Require a small-screen layout, visible focus, text alternatives and a reduced-motion path. An attractive first frame does not establish that the controls work.

Worked example · illustrative

See the decision.

A workflow explorer lets the reader select read-only preparation or an external action. The approval boundary changes visibly. The interface explains the rule with text, and the same information survives as a static table in the exported brief.

Run the prompt.

Use the supported host shown above and supply your own non-confidential context. Preview availability and tool access depend on your account.

Build a self-contained HTML learning workbench for my supplied workflow. Show inputs, preparation, review and output. Add one meaningful control that changes the approval boundary, with a text explanation of the change. Use Starlight's obsidian, restrained ice-blue, editorial typography and shallow smoked glass. Keep body text on a high-contrast plane. Support 320px, keyboard, 200% zoom and reduced motion. Include loading, empty and failure states only where a real operation needs them. Label synthetic examples. Return original HTML, supplied data, a screenshot when supported, and a concise inspection note. Do not make external calls or invent an integration.
Open the prompt library and studio

Make a first attempt.

Build a two-state prototype with your own workflow. Use every control with a keyboard, then explain the same decision in a static paragraph.

Inspect your artifact

  • Every visible control changes a meaningful state.
  • All data and examples are attributed or labeled synthetic.
  • The original artifact is downloadable and opens independently.
  • Meaning survives narrow width, keyboard use and reduced motion.

Transfer / A fresh case

Carry the idea further.

Replace the workflow with one from another person. Keep the interface only when it still explains their decision.

Keep a note of your prediction, what happened and one revision. These are self-study checks, not a graded assessment.

Read the primary sources.

Checked 2026-10-20. Recheck availability, access and API versions before a real implementation.