Illustrative example

By Specship · Last updated May 26, 2026 · Synthetic example, not a customer case study

Visual spec dashboard table example.

A product owner drops a dashboard-table mock into a ticket. The agent has to translate visual intent into implementation constraints that fit the existing design system.

Request beta access See the workflow
Direct answer: a reviewable AI coding agent output should contain the request, acceptance criteria, failing tests, scoped implementation notes, and PR evidence a human can verify.

Acceptance criteria

  • Table uses the existing DataTable, Toolbar, Avatar, and StatusChip components.
  • Rows stay readable at desktop, tablet, and mobile widths.
  • Long owner names truncate without pushing action buttons off-screen.
  • Empty, loading, and error states match the product surface.

Tests before code

  • Component test for row rendering with long names.
  • Interaction test for toolbar action availability.
  • Accessibility check for status labels and keyboard focus order.
  • Visual review screenshots attached to the PR.

Implementation notes

  • Map screenshot regions to existing component primitives before code changes.
  • Keep spacing and type scale inside current token values.
  • Avoid creating one-off CSS unless an existing primitive cannot express the layout.

PR review evidence

  • PR includes before/after screenshots.
  • Reviewer can compare responsive states against the visual spec.
  • Ambiguities are listed instead of silently guessed.