Fieldwork — Visual Design IDE

Fieldwork is the canonical name for Kevin's stateful visual design environment: live product state, design evidence, direct annotation, agent execution, and reversible implementation history in one inspectable surface.

Current State

Active in a separate Codex task. This wiki page remains the product and architecture contract. Implementation work is intentionally owned by the other Fieldwork task, so this rebuild must not create a competing shell, rewrite its worktree, or claim verification before that task hands back artifacts and proof. The public repository is Kevin-Liu-01/Fieldwork.

Product Boundary

Fieldwork owns the visual feedback and design-decision surface. Agent Machines owns reliable execution sessions, terminals, state, and artifacts. Sigil UI owns design constraints and reusable tokens. Loop may host the operator surface, but it is not automatically the product owner. The original whiteboard called this system “Design IDE”; Fieldwork supersedes that working name without erasing its history. Source: Private July 2026 whiteboard; private Discord message 1527032191513792674, 2026-07-15

Core Workspace

The workspace keeps these objects connected instead of scattering them across chat, browser screenshots, and code diffs:

• a live app preview with localhost/portless connection;
• full conversation, proposal, and implementation history;
• DOM-node and arbitrary-region selection;
• screenshots, inspiration, and source fixtures;
• drawing, measurements, comments, and agent-readable annotations;
• design tokens for color, spacing, typography, radius, shadow, and motion;
• the product's persistent design.md, surface backlog, human decisions, briefs, and review artifacts;
• versioned UI states with compare, approve, revise, and revert;
• a configurable coding-agent backend and durable proof artifacts.

Layer Model

Every layer must support visibility, lock, reorder, rename, opacity, author, and version provenance. An annotation may attach to a DOM node and UI version so it survives refreshes and can be detected as stale when the underlying element changes.

Semantic DOM Capture And Isolated Artboards

A screenshot-shaped layer tree is insufficient for structural design work. A Fieldwork capture must preserve enough code and runtime identity for an agent to understand that a selected region is a product component, not merely a group of anonymous rectangles. Each captured element records:

• stable capture identity, route, selector or DOM anchor, viewport, DPR, runtime fixture, capture revision, and parent/child order;
• framework component name, component kind, and component hierarchy when those facts are provable;
• source file, line, and column when the runtime exposes reliable source metadata;
• computed styles, resolved design tokens, accessibility semantics, text/data bindings that are safe to retain, and relevant interaction state; and
• the resolution method, confidence, and explicit unknowns for every framework- or source-derived field.

Source resolution is progressive rather than React-only: exact build metadata or source maps first, framework development hooks next, repository search from stable semantic anchors next, and DOM-only identity last. React fiber/debug source can recover component and file information in supported development builds, but it may be absent before hydration, after production minification, inside server-rendered output, or in non-React applications. Fieldwork must preserve the capture with lower confidence instead of inventing component names or blocking ordinary HTML review.

An isolated artboard is a versioned URL or state bundle created from one captured page or component. It freezes the capture record, route and viewport, fixture data, token revision, dependencies, and all deliberate mock overrides. Agents may rearrange layers, mock data, test motion, or explore material inside that boundary without mutating production source. Promotion back to the product requires an exact source proposal, restored original fixture, before/after render, accessibility and responsive proof, and approval through the normal Fieldwork version flow. Absolute-positioned capture markup is an exploration artifact, never the final implementation.

The source ecosystem has deliberately narrow roles:

• Agentation is a guarded internal adapter and comparison source for selectors, element/text/area annotations, React component/source hints, queued feedback, and critic/fixer separation. Its PolyForm Shield 1.0.0 license prohibits using the software to provide a competing product or service. Fieldwork must not copy, bundle, redistribute, or derive competing implementation from it without separate permission; required product behavior is implemented independently. Its desktop React 18+ and hydration/source-debug assumptions also prevent it from defining the general capture contract.
• Tweakpane is an MIT, dependency-free candidate for an isolated artboard's compact numeric, text, boolean, color, point, monitor, folder, tab, button, theme, plugin, and JSON control pane. It does not own annotation history, source identity, versions, approvals, or the product's design state.
• DialKit remains the animation inventory, timeline, scrub, seek, rate, loop, and controllability surface. Fieldwork owns the composed capture, artboard, annotation, version, authority, and proof model.

Agentation's two-session critic/fixer shape is useful but incomplete as an acceptance model. The critic may enqueue findings and a separate fixer may propose code changes, but the fixer cannot mark its own patch proven. Resolution requires a fresh fixture replay plus deterministic checks and independent or human review bound to the exact source and render digests. Source: X/@lukaivanovic, “How to create your own design tool,” 2026-07-20; commit-pinned repository evidence review of benjitaylor/agentation@8158a97 and cocopon/tweakpane@50a18c3, 2026-08-12

Design Contract And Source Board

Fieldwork is the interactive surface over persistent design state; it is not the only owner of that state. Each attached project can expose:

• design.md and optional theme variants as the canonical point of view and token contract;
• a ranked surface backlog and append-only human verdicts;
• per-surface briefs and four-view screenshot sets;
• source-board clusters for product surfaces such as navigation, hero, pricing, bento, settings, and charts; implementation details such as icons, material, and motion; and communication artifacts such as social posts, OG images, decks, logos, brand boards, formal guidelines, editorial systems, and illustration;
• references and anti-references with extracted patterns rather than prompt-only mood boards;
• token-lint, accessibility, browser, responsive, and visual-review results.

Each source-board card records the artifact class, gallery URL, original creator/source URL, captured revision, known rights state, extracted principles, anti-reference notes, dependent briefs/surfaces, and—when the source is interactive—its entities, shared attributes, primary user verb, narrowing controls, overview/detail transition, provenance surface, and failure/empty behavior. A stateful or generative card also records exact input or data revision, seed/state, implementation version, viewport, selected mode, output settings, preview/export/share boundary, required permissions, and measured load footprint. A living gallery, personal graph, or self-organizing card additionally records the literal object/relationship schema; its non-spatial list/search/detail route; evidence for each classify, group, merge, surface, nudge, or action decision; subject consent and visibility; authority split across read, summarize, edit, send, delete, and publish; approval and undo/recovery; and connected scopes, processors, retention, and revocation. A prototype index separates artifact from process, while a scale or macro/micro transformation preserves literal units, labels, source identity, and keyboard/touch detail. The broad gallery is provenance for discovery; the originating work is the evidence agents inspect and cite. Interactive references require separate behavior, accessibility, responsive, and performance proof. Design Inspiration Galleries owns the artifact-to-gallery route; Fieldwork owns the project-specific selection and dependency graph.

When a selected DOM node or source fixture is not precisely named, Fieldwork also attaches a vocabulary receipt rather than sending an agent a vague visual instruction. The receipt records observed platform, placement, invocation, lifetime, job, focus/modality, visible anatomy, and implementation clues; up to three candidate names; the decisive distinction from the nearest confusable pattern; verified user-facing and semantic/API names; primary citations; prompt-ready behavior; and unresolved facts. NameThatUI may supply discovery for an abstract public clue, but project text and screenshots stay local and the winning term remains provisional until primary platform documentation and live behavior agree. Source: X/@argofowl 2076284369883615555; NameThatUI methodology and live focus-ring replay, 2026-08-11; UI Component Vocabulary

The canvas can place a source fixture beside the current rendered surface, but accepting a source means adapting its principle to the product contract—not copying its pixels. Acceptance compares the source and target information contracts so a collection grid, comparison atlas, physical metaphor, room, or graph cannot be approved for visual similarity alone. An edited source event updates the fixture revision and marks dependent briefs/reviews stale when the extracted pattern changed. Source: private Discord messages 1527740632079143014, 1527752611955081399, and 1527754889600438312, 2026-07-17; X/@jonaasw1 2079246871063568437 and five reviewed live sites, 2026-08-11

For a stateful source, side-by-side comparison must restore the exact fixture recipe rather than approximating the screenshot. Generated scenes and progressive reveals need seek or deterministic state selection, pause/resume, quiet or reduced-motion behavior, and a static information-equivalent before they can become accepted project references. Preview, export, and public share remain separate actions in both the source receipt and the proposed target. Source: X/@jonaasw1 2077488853401620893; Comnyang, Retrowave Road, Paint Pomodoro, clipart.studio, and complete seven-site replay, 2026-08-11

When a source-board image depicts one suitable object or character and the target surface needs editable runtime 3D, Fieldwork may invoke the installed img2threejs adapter. The card binds the image hash and rights, intended use, visible/hidden-view uncertainty, local .img2threejs state, quality contract, sculpt spec, generated factory digest, every pass render/comparison, correction history, remaining mismatch, and runtime budget to the proposed UI version. Fieldwork cannot accept the factory because an upstream gallery labels a demo final: it separately verifies subject-specific controls, camera and framing, scene semantics, keyboard/touch operation, reduced motion, responsive state, and Three.js/R3F integration. Source: X/@MengTo 2079267787298746709; img2threejs/img2threejs@d667338; live gallery and local 673-test replay, 2026-08-11

HTML artifacts and live local pages should use the same review primitive: open in a real renderer, select the exact DOM node or region, attach feedback, queue a bounded change, and preserve before/after proof. Lavish is a comparison source for this behavior, not a separate product owner. Source: private Discord message 1527784351566135418, 2026-07-17

AI-Native Component-State Inspection

Fieldwork should let a reviewer load an AI-native component reference beside a target state graph, but the reference fixture and production behavior remain separate. Each fixture records component/pattern name, captured source revision, rights state, dependencies, viewport, theme, reduced-motion mode, accessibility tree, source code digest, and the demo trigger. Each target binds the same visible state to a named runtime event, run/proposal digest, persisted state, cancel/retry behavior, and completion receipt.

The state inspector needs representative fixtures for loading, status, streaming, tool activity, task rows, approvals, recommendations, context/diffs, tables, prompt/search entry, and result actions. It compares normal and reduced motion, desktop and 360 px layouts, keyboard order, focus, accessible names, loading/empty/error/recovery, and exact state restoration. A timer may reproduce a source demo; it cannot pass the target runtime contract. “Reasoning” fixtures show only product-level steps and receipts, never private chain-of-thought.

Beautiful UI's current 19-pattern gallery is a strong fixture vocabulary and visual bar. Its copied source remains held from Fieldwork's distributable fixture library until a software license or independent reimplementation is recorded. Source: X/@MengTo 2082479500944904432; captured live patterns, source dialogs, mobile states, and reduced-motion replay, 2026-08-11

Animation Inspection And Timeline Control

Fieldwork must treat animation as inspectable product state, not as pixels that can only be watched. When connected to a live surface it should inventory CSS, WAAPI, and registered library-driven motion, then classify each animation as controllable, observable, or opaque. Controllable motion exposes play, pause, seek, scrub, rate, loop-region, group, stagger, and compound-timeline controls; observable motion preserves timing and trigger evidence without pretending it can be edited; opaque motion records the missing adapter as a workflow gap.

The design review binds a timeline state to the selected DOM node, UI version, source implementation, and reduced-motion behavior. A reviewer must be able to compare the same interaction at normal speed, slowed down, at key timestamps, and with reduced motion enabled. Accepted changes preserve before/after capture and the motion-token or implementation diff that produced them.

This requirement comes from correlated evidence: DialKit demonstrated timeline editing for loops, groups, staggers, compound animations, spring motion, and scrubbing, while Kevin's Discord message explicitly assigned animation display and testing to the design IDE. The external artifact supplies the interaction model; the Discord message supplies project intent. [Sources: X/@joshpuckett 2079014450712203291, 2026-07-20; private Discord capture, 2026-07-20 05:00 UTC]

Perception-Grounded Visual Review

Fieldwork must separate what is visibly present from whether the design is good. A visual critic cannot make a taste verdict until the run has a perception receipt for the exact screenshot, viewport, UI state, selected DOM node or region, and version under review.

For a high-stakes surface, the receipt asks only the applicable atomic questions:

Not every review needs all ten axes. The receipt declares which axes apply and why the rest do not. Model observations are repeated when they control an accept/reject decision and are checked against deterministic evidence wherever the state is machine-readable. Disagreement, fallback to a different model, or inconsistent repeated answers keeps the fact unresolved; it cannot be silently converted into a design defect.

The receipt records screenshot hash, viewport and DPR, selected region, model and revision, effort, prompt/rubric digest, fallback use, per-axis answers and abstentions, repeat agreement, deterministic corroboration, and the later design judgment. PerceptionBench is a useful optional verifier diagnostic, not a Fieldwork dependency or a product-quality score: its public set isolates perception rather than taste, motion, interaction, accessibility, or implementation correctness; it has no documented held-out split; and its 1.63 GB payload carries non-commercial and source-specific license obligations. [Sources: PerceptionBench paper v1, sections 2–3 and limitations; repository at ba032c0; dataset at 6ba8c31; local X image review]

Pen And Tool Types

• freehand pen for sketches and circling;
• pressure-aware pencil when hardware supports it;
• highlighter for non-destructive emphasis;
• arrow and connector pen for flows;
• shape pen for rectangles, ellipses, masks, and regions;
• text/sticky-note tool for rationale and agent instructions;
• ruler/measurement tool for spacing and alignment;
• eraser with stroke and partial-stroke modes.

All drawing tools share size, color, opacity, snapping, undo/redo, keyboard shortcuts, and selection/editing. Pens are semantic inputs to the agent, not merely pixels burned into a screenshot.

Agent Loop

The loop must preserve the relationship among observation, instruction, implementation, and proof. A generated image that cannot be mapped back to editable product state is inspiration, not completion.

Durable feedback handoff

Fieldwork should treat direct copy edits, deletions, moves, drawings, and anchored comments as target-bound events rather than ephemeral overlay state. Each feedback batch records the product state/version, route, viewport, selected DOM node or region, exact user-authored replacement, anchors, and send time. A sent batch survives restarts until the implementation agent applies every item, verifies the new render, and acknowledges that exact batch; later feedback must not be cleared with it.

For localhost products, annotations and direct edits map back to component, template, asset, token, or content source. Fieldwork must never write serialized rendered HTML over the application. A changed source baseline invalidates an unsafe direct write and requires reconciliation. This feedback receipt remains separate from merge, publish, deploy, or canonical-design approval. The pinned Human Review implementation is evidence for the batch/poll/ack and stale-write shape, not a replacement for Fieldwork's drawing layers, perception receipts, animation timeline, version graph, or visual comparison. Source: petergyang/human-review@64deff1, 90/90 tests passed locally, reviewed 2026-08-12

Quality And Safety

• default to the current product identity rather than generic AI gradients, glass cards, or rounded-box sameness;
• keep text selectable and data grounded when the artifact communicates exact information;
• require accessible contrast, keyboard access, reduced-motion behavior, and target-size verification;
• show which agent, source fixture, model, code diff, and design tokens produced each version;
• keep external writes, merge actions, and destructive changes behind explicit approval and reversible history.

Near-Term Slice

1. Reliable Agent Machines session plus low-latency preview.
2. DOM selection and screenshot capture.
3. Layer panel with source, freehand, connector, text, and measurement layers.
4. Pen/highlighter/arrow/text/ruler tools.
5. Versioned proposals and before/after proof.
6. Sigil token writeback and create-graphics routing.
7. Project design.md, backlog, decisions, briefs, review artifacts, and source-board cluster integration.
8. Animation inventory, timeline scrubbing, controllability adapters, and reduced-motion comparison.
9. Perception receipts that isolate visual facts, repeat unstable observations, and bind deterministic corroboration before design judgment.
10. Semantic DOM capture with confidence-bearing component/source resolution and isolated, URL-addressable artboards that cannot mutate product source before approval.

---

Timeline

• 2026-08-12 | Deep-replayed the complete “create your own design tool” article into Fieldwork's product contract. Captures now require semantic DOM, component, source, token, state, resolution-method, confidence, and unknown fields; isolated artboards freeze a versioned non-mutating design state. Agentation is retained only as a PolyForm-Shield-guarded internal/reference adapter, Tweakpane as a narrow MIT parameter pane, DialKit as the animation controller, and fixer self-certification is rejected. This changes the product contract only; implementation remains in the dedicated Fieldwork task. Source: X 2079178687409279303; benjitaylor/agentation@8158a97; cocopon/tweakpane@50a18c3

• 2026-08-12 | Reconciled the three Discord origin/animation messages with the existing Fieldwork contract. They confirm one product boundary—live design-system absorption, exact-element review, agent execution, versioned states, animation inventory/timeline/control, and reduced-motion proof—not a competing wiki implementation. Product implementation remains owned by the dedicated Fieldwork task. Source: Discord 753798704082714715:message_0bdbc5a1fef51ea6476a6862, discord_evidence_2fa3314365bd4fa7fbaf6914, discord_evidence_3090816cba4932a4a5f36967

• 2026-08-11 | Added replayable stateful source fixtures. Cards now preserve input/data revision, seed/state, version, viewport, mode, output settings, permissions, load footprint, and preview/export/share boundaries; compare restores the exact fixture and requires deterministic/seekable, pausable, reduced/static proof for generated scenes and progressive reveals. This changes the Fieldwork product contract only; implementation remains in the dedicated task. Source: X 2077488853401620893; seven-site rendered/source replay

• 2026-08-11 | Added living-gallery, personal-graph, and self-organizing source-card evidence: literal object/relationship schema, semantic fallback, per-decision provenance, consent/visibility, action-specific authority, approval/recovery, integration retention/revocation, and prototype/process or overview/detail transformation proof. This changes the Fieldwork product contract only; implementation remains in the dedicated task. Source: X 2069135333422166044; complete seven-site rendered/policy replay

• 2026-08-11 | Added the installed img2threejs adapter as a guarded source-image-to-procedural-3D path. Fieldwork binds rights, input/state/spec/factory/pass/correction proof and independently reviews controls, semantics, interaction, responsive behavior, motion, runtime, and integration instead of trusting a gallery label. This changes the product contract only; implementation remains in the dedicated task. Source: X 2079267787298746709; img2threejs/img2threejs@d667338; rendered gallery and 673-test replay

• 2026-08-11 | Added vocabulary receipts to selected DOM nodes and source fixtures so Fieldwork resolves fuzzy visual descriptions into platform-verified names, confusable distinctions, API/semantic symbols, prompt-ready behavior, and explicit unknowns without leaking project language to a public search service. This changes the product contract only; implementation remains in the dedicated task. Source: X/@argofowl 2076284369883615555; NameThatUI live replay and methodology

• 2026-08-11 | Added information contracts to interactive source-board cards and acceptance: entities, attributes, primary verb, controls, overview/detail transition, provenance, and edge behavior now precede any decision to adapt a grid, atlas, physical metaphor, collection room, or graph. This changes the Fieldwork product contract only; implementation remains in the dedicated task. Source: X/@jonaasw1 2079246871063568437; five live sites and four local images reviewed 2026-08-11

• 2026-08-11 | Added perception-grounded visual review: atomic visible-fact questions precede aesthetic judgment, model observations are repeated and corroborated against DOM/scene evidence, and disagreement remains unresolved. PerceptionBench stays an optional verifier diagnostic rather than a Fieldwork dependency or product-quality score. Source: X/@Kimi_Moonshot 2081813202514681878; arXiv:2607.24957v1; repository/dataset and local image

• 2026-08-11 | Published the reviewed product contract so the public project:fieldwork object no longer routes to a password wall. Private raw Discord capture and unrelated personal material remain outside this page and outside public discovery. Source: User public-system visibility instruction; rendered /system verification

• 2026-08-11 | Expanded source boards from product-surface clusters to typed communication and identity artifacts, and added per-card creator/source, revision, rights, principle, anti-reference, and dependency fields. This is a product-contract update only; implementation remains in the dedicated Fieldwork task. Source: X/@tranmautritam 2080583043929223469; nine primary gallery sites; local video review

• 2026-08-10 | Marked Fieldwork active under the dedicated Codex task and made ownership explicit so the wiki rebuild does not duplicate or overwrite its implementation. Source: User correction, 2026-08-10

• 2026-08-10 | Correlated DialKit's animation-timeline artifact with Kevin's Discord instruction and promoted the pair into Fieldwork's operating contract: animation inventory, controllability classes, timeline editing, reduced-motion comparison, and version-bound proof. [Sources: X/@joshpuckett 2079014450712203291; private Discord capture, 2026-07-20]

• 2026-07-19 | Added persistent project design contracts, surface backlog/decision/brief/review state, job-based source-board clusters, source-revision staleness, and exact-element HTML artifact review to the Fieldwork boundary. Source: Straight Fats Reconciliation — July 19, 2026

• 2026-07-16 | Renamed the working “Design IDE” concept to Fieldwork and made drawing layers and distinct pen types first-class requirements. Source: Private Discord message 1527032191513792674, 2026-07-15

• 2026-07-14 | The private whiteboard established the original live-preview, DOM-selection, screenshot/drawing, design-control, agent-execution, and reversible-history boundary. Source: Kevin Agent OS Whiteboard — July 2026