Skip to content
Autonomous Visual Feedback Loop
AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px)
SketchMaterialiOSTamagui
DataInjectionKeyPatternsServiceTransactionProcessResearchProductQualityPerformanceSpecDomainFunctionTechnologyArchitectureConfigMiddlewareDataDatabaseDrizzleMigrationModelop-sqliteSchemaSQLState ManagementDraftKeystoneMergePatchPatchesPersistenceReactiveRedoStoreUndoTestingDeviceFactoryIsolationTypeScriptZodTopicsCommunicationBidsNVCDesignDesign ImplicationsEducationPedagogyFoundationsPsychologyAttachmentFloodingRelatingAuthentic RelatingUIEditorReact Native

Autonomous Visual Feedback Loop

Workflow Autonomous Visual Feedback Loop
agent stardesign
tags
workflowuidslvisual

To iteratively verify visual changes and CSS styling on UI components without human intervention, use the built-in single-capture script. This allows you to rapidly generate a screenshot of your work and use your native multimodal vision to inspect the result.

The Loop

  1. Make changes to the DSL, CSS, or processor code.
  2. Run the compiler or dev server so the changes are built.
  3. Capture the component by setting environment variables before calling pnpm test:screenshot.

Option A: Using specific names

Terminal window
# Capture a standalone component
TARGET_COMPONENT="login-form" pnpm test:screenshot


# Capture a specific tab of a grouped component
TARGET_COMPONENT="showroom:nav-stepper-mid" TARGET_TAB="In Progress" OUT_NAME="showroom:nav-stepper-mid" pnpm test:screenshot

Option B: Using the Showroom URL (Easiest) If you are looking at the Showroom and have the specific URL for a tab (e.g. http://localhost:4321/showroom#tab-panel-160), you can just pass the URL directly:

Terminal window
TARGET_URL="http://localhost:4321/showroom#tab-panel-160" pnpm test:screenshot

(The script will automatically determine the correct filename and save it.)

  1. Read the resulting PNG (saved to tests/.artifacts/screenshots/) using your read_file tool to visually verify your fix.

Do’s and Don’ts

Do:

  • Run the compiler or dev server before capturing so changes are built
  • Use TARGET_URL when you already have the Showroom URL — it is the easiest option
  • Read the resulting PNG with your file-reading tool to visually verify the result

Don’t:

  • Skip the build step before capturing — screenshots will show stale output
  • Rely solely on the screenshot without visually inspecting it via multimodal vision

Definition of Done

  • Screenshot captured and visually verified
  • No visual regressions detected or all regressions fixed