Combined Research: UX Strategy for SecurityV0

Date: 2026-04-03 Sources: 4 parallel research agents (2× Wiz positioning analysis, 2× AI UX development process) Requested by: Ivan Fofanov

---

Part 1: What Should Our Pages Do? (Wiz Research)

The One Insight

Wiz feels modern because of reading order, not technology. Their pages follow: what's wrong → why it matters → what to do → evidence. Our pages present data as equal-weight stacked sections. The fix is structural, not additive.

The Two-Layer Model (Sergey-Endorsed)

1. Truth layer (keep): exact finding, exact path, exact evidence — deterministic, traceable
2. Action layer (add): grouped remediation, team routing, change-event summaries

Every Page Should Answer 4 Questions in Order

1. What is proven vs inferred?
2. Why does it matter in business terms?
3. What's the safest first action?
4. Who should own it?

Page-by-Page Redesign Summary

Overview:

• 3s: Deterministic posture sentence ("3 critical paths unreviewed · 2 departed owners · 1 new scope expansion")
• 15s: What changed — drift as before/after, not counts
• 60s: Top risks with owner + action status + trend sparklines

Findings List:

• 3s: Action groups ("12 findings → 3 fix groups")
• 15s: Summary strip + presets (already working)
• 60s: Table with full descriptions (no truncation), ownership column, action status column

Finding Detail:

• Zone A (decision): Header + risk summary sentence + primary action + owner
• Zone B (context): Path visualization + blast radius
• Zone C (evidence): Collapsed — evidence pack, metadata, raw details

Authority Path Detail:

• Already the strongest page. Collapse bottom 5-6 reference cards into accordion.

Scope Drift (everywhere):

• Lead with: BEFORE → AFTER → DELTA → CAUSE → IMPACT → OWNER → ACTION
• Not a label with "Active" badge

What NOT to Do

1. No composite security score (use deterministic sentences)
2. No graph as organizing principle (access path is our unit)
3. No AI verdicts on top of deterministic findings
4. No workflow automation engine
5. No probabilistic severity re-scoring
6. No copying Wiz vocabulary — keep our nouns (authority path, standing authority, scope drift)

---

Part 2: Why Our AI Agents Produce Mediocre UI (Root Causes)

Both researchers converged on the same diagnosis:

The Core Problem

LLMs optimize for correctness, not communication. They build what's technically right, not what's natural to scan.

7 Root Causes

1. No visual feedback loop — agents never see the rendered output
2. Completeness bias — 8 data fields = render all 8 equally
3. Flat spatial reasoning — tokens are 1D, UI is 2D
4. Missing user model — builds for abstract "user" who reads linearly
5. Training data is code-heavy, design-light — saw millions of <div> but zero design rationale
6. Statistical averaging — output trends toward mediocre mean, not opinionated design
7. Microcopy is undertrained — labels are technically accurate but not human-natural

Why "Good Tailwind" ≠ Good Design

Agents know space-y-6 and text-sm text-muted-foreground. They don't know:

• Where visual emphasis should accumulate
• What should be visible in the first 5 seconds
• Which actions deserve primacy
• How sections should ladder from summary to evidence

---

Part 3: How to Fix It (Actionable Changes)

A. Constrain the Design Space

1. Semantic design tokens (not raw Tailwind)

export const typography = {
  pageTitle: "text-2xl font-semibold tracking-tight text-gray-900",
  sectionTitle: "text-lg font-medium text-gray-900",
  body: "text-sm text-gray-600",
  caption: "text-xs text-gray-500",
  metric: "text-3xl font-bold tabular-nums text-gray-900",
  metricLabel: "text-xs font-medium uppercase tracking-wide text-gray-500",
};

Agent uses typography.sectionTitle instead of choosing Tailwind classes. The system has taste built in.

2. Page layout templates (5 archetypes)

• Dashboard: metrics → activity → quick actions
• List/Table: filters → data table → bulk actions
• Detail: header → tabs (Summary | Action | Evidence)
• Settings: grouped forms
• Empty/Onboarding: illustration → explanation → CTA

Agent fills slots, doesn't design layouts.

3. Content density rules

• Dashboard cards: max 1 metric + 1 label + 1 trend
• Tables: max 6 visible columns
• Detail pages: max 3 sections above fold
• Forms: max 5 visible fields

B. Close the Visual Feedback Loop

4. Screenshot-based self-review (highest ROI change)

1. Agent generates UI code
2. Agent renders page in browser, takes screenshot
3. Vision model evaluates against UX checklist
4. Agent fixes issues
5. Submit

This gives the agent "eyes." It's the closest thing to how a human developer works.

5. Dedicated UX critic agent Separate agent that reviews every UI PR:

• Screenshots changed pages
• Evaluates hierarchy, spacing, copy, action clarity
• Posts review with specific fixes
• Does NOT rewrite code — only critiques

C. Encode Design Knowledge

6. UX system prompt (inject into agent context for all UI work) Key rules:

• Every page has ONE primary message
• 3-second rule: user should understand where they are + main content + action
• Progressive disclosure: show less by default
• Labels in sentence case, natural language
• Empty/loading/error states required

7. Pre-code wireframe requirement Before writing JSX, agent must produce:

• Primary user goal
• First thing they should see
• What can be hidden
• Section list with purpose
• Primary action

This takes 30 seconds and prevents building the wrong structure.

8. Security-domain copy guide 20 examples of bad → good:

• "Review status: pending analyst disposition" → "Needs review"
• "Most recent observation timestamp" → "Last seen"
• "Risk explanation" → "Why this matters"

D. Automate Quality Gates

9. Lighthouse + axe as baseline (accessibility floor) 10. Playwright screenshot tests for key pages (visual regression) 11. Vision model critique on every UI PR (heuristic review)

---

Part 4: Proposed OpenClaw Skills

Skill 1: ux-guide (context skill)

Loaded automatically when task involves UI work. Contains:

• UX principles as actionable rules
• Semantic token reference
• Page template catalog
• Component variant guide
• Microcopy style guide
• Design reference screenshot paths
• Anti-patterns list

Skill 2: ux-review (automated review skill)

Triggered on PRs with .tsx changes:

1. Identify changed pages
2. Start dev server, screenshot each page
3. Send screenshots to vision model with structured rubric
4. Run static checks (semantic tokens used? layout template? density rules?)
5. Post review comment with screenshots + assessment + fix suggestions

---

Part 5: Quick Wins This Week

#	What	Effort	Impact
1	Add UX system prompt to AGENTS.md	30 min	Medium — every UI task gets guidance
2	Create semantic typography tokens	2 hrs	High — prevents "everything is text-sm"
3	Write 3 page templates (Dashboard, Detail, List)	3 hrs	High — agents fill slots not design layouts
4	Screenshot self-review step	1 hr	Very high — closes the visual feedback loop
5	Curate 5 reference screenshots	1 hr	Medium — visual examples > 1000 words
6	Content density rules in prompt	30 min	Medium — prevents data dumps
7	Microcopy style guide (20 examples)	1 hr	Medium — human-natural labels
8	Before/after example library (5 pages)	2 hrs	High — teaches by showing
9	Anti-patterns in system prompt	30 min	Medium — bans equal-weight card walls
10	Track UX defects separately	30 min	Meta — drives skill improvement

---

Part 6: The Bottom Line

What to build: Pages that tell a story (problem → impact → action → evidence), with grouped action views above atomic truth, and scope drift as a change event.

How to build it better: Constrain the design space (tokens + templates), close the visual feedback loop (screenshots + vision), encode tacit design knowledge (UX skill + prompts).

Expected outcome: CEO iteration cycles drop from 8 rounds to 2-3. The remaining iterations are about product decisions (what to show), not design polish (how it looks) — which is where human judgment should be spent.

---

Source Documents

• [[wiz-story-coherence-analysis]] — Opus: story coherence analysis
• [[wiz-decision-architecture-analysis]] — GPT-5.4: decision architecture analysis
• [[ai-ux-development-process-opus]] — Opus: AI UX development process
• [[ai-ux-development-process-gpt]] — GPT-5.4: AI UX development process

Next Action

Status: research-complete Decision needed from: CTO (Ivan) Options:

1. Adopt — incorporate Wiz positioning insights into UX guide and prioritize decision-flow restructuring (PR #279 is first step)
2. Defer — revisit after AWS connector work completes
3. Partial adopt — take the AI development process recommendations (design tokens, screenshot feedback loop) without the Wiz-specific restructuring

GitHub Issue: not yet created

---

— Delta (sv0-delta)