Skip to content

DraftLint Redesign — Modern Drawing Analysis Workspace

Status: Proposal (April 2026) — Phase A scoped for implementation on branch draftlint-redesign-claude Reviewer role assumed: Product designer + frontend architect with document-review tool experience (Bluebeam Revu, Nutrient/Apryse, Figma canvas, Linear inspector) Purpose: Turn the DraftLint workspace from a prototype-feel screen into a calm, document-first drawing analysis tool with a clear Upload → Scan → Review progression. Related: - Home Redesign (Search-first) — shares the design tokens and recent-items pattern - Code Review — PDF Report Template — severity palette, rule-ID contract, export pipeline - Code Review — Product Trust Gaps / F4 — rule_id/severity/evidence on findings

What The Current DraftLint Gets Wrong

Ranked by how much each one hurts adoption, based on the April 2026 screenshot:

  1. Peach gradient canvas reads as "unfinished prototype", not "tool". Modern drawing tools use a neutral recessed surface so the drawing pops.
  2. Pre-scan overlay checkboxes — Regions, OCR text, Symbols, Issues are output layers. They cannot be toggled until a scan produces them. Showing them active before anything is scanned is confusing.
  3. Two competing titles — workspace heading "DraftLint Workspace" and side-panel "DraftLint". Pick one home.
  4. Persistent top-bar status says "Workspace starts blank until a selectable STEP scene is ready". Wrong mode (this is PDF/PNG/JPG) and wrong placement (empty-state copy, not toolbar).
  5. Unlabeled icon rails on both sides — 6 icons left, 4 icons right. No tooltips, no state hints, no reason two rails exist.
  6. Upload is a browser file input ("Choose File / No file chosen"). Engineers expect a drag-and-drop zone with hints and a preview.
  7. No sheet navigator. Engineering drawings are multi-page; thumbnails and per-page finding counts are table stakes.
  8. Scan CTA is saturated full-width orange, drowning the rest of the UI and clashing with the calm palette used elsewhere.
  9. No clear workflow stages. The user can't predict what happens after Scan.
  10. No findings surface anywhere in the layout.
  11. Zoom controls are raw text buttons (- 100% + Fit) in the top-right corner — should be a unified bottom-center zoom pill.
  12. Top-right Modes dropdown duplicates the Mode Launcher pattern that the Home redesign already replaces.

Principles For A Modern Drawing Analysis Tool

  • Document-first. The drawing is the hero; chrome calms down.
  • Neutral canvas. Light (#F4F6FA) or dark slate, never a brand-color wash.
  • Three states: Upload → Scanning → Results. Layout shifts meaningfully at each.
  • Sheet thumbnails always visible on the left for multi-page docs, with per-page finding badges once scanned.
  • Overlays are post-hoc. Regions / OCR / Symbols / Issues become toggles on the drawing after scan.
  • Findings inspector on the right. Severity chip, rule ID + clause, snippet, jump-to-location, disposition (Accept/Rework/Waive).
  • Floating zoom pill bottom-center with keyboard shortcuts.
  • Standards profile as a header chip, click to edit.
  • Keyboard-first. F = fit, +/− = zoom, G = toggle grid, 1-9 = jump to sheet, J/K = next/prev finding.
  • Severity palette from the PDF-report tokens. System coherence across DFM and DraftLint.

Three Canonical States

State 1 — Empty

┌────────────────────────────────────────────────────────────────────────┐
│ [≡] Drawing Analysis              Profile: ISO 1101 + ISO 5457 ▾       │
├────┬──────────────────────────────────────────────────────────────────┤
│    │   Upload · Scan · Review                                         │
│ S  │                                                                  │
│ H  │         ┌──────────────────────────────────────────┐              │
│ E  │         │        Drop a drawing here               │              │
│ E  │         │        or click to choose                │              │
│ T  │         │   PDF · PNG · JPG · up to 50 MB          │              │
│ S  │         └──────────────────────────────────────────┘              │
│    │         Recent drawings (thumbnails strip)                       │
└────┴──────────────────────────────────────────────────────────────────┘

State 2 — Scanning

┌────────────────────────────────────────────────────────────────────────┐
│ [≡] Drawing Analysis · xyz.pdf     Profile: ISO 1101 + ISO 5457 ▾       │
├────┬──────────────────────────────────────────────────────────────────┤
│[1] │   Upload · Scan · Review                                         │
│[2] │   ▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░  Scanning sheet 2 of 3 · OCR + rule eval    │
│[3] │                                                                  │
│    │   [ drawing page 1 rendered in canvas ]                          │
└────┴──────────────────────────────────────────────────────────────────┘

State 3 — Results

┌────────────────────────────────────────────────────────────────────────┐
│ [≡] xyz.pdf Rev A · scanned 2m ago · Profile: ISO 1101 + ISO 5457 ▾     │
├────┬──────────────────────────────────────────┬────────────────────────┤
│[1]⬤│  Overlays: [◉Regions 14] [OCR 287]      │ 12 FINDINGS   [Export] │
│[2]●│             [Symbols 6] [Issues 12]      │ ─────────────────────  │
│[3] │                                          │ ■ MAJOR · 01           │
│    │  [  drawing with overlaid highlights  ]  │ DL.DIM.MISSING_TOL v1  │
│    │                                          │ Dim Ø12 on sheet 1     │
│    │                                          │ "no tolerance cited"   │
│    │                                          │ [Jump] [Accept] [Waive]│
│    │       [− 100% +  · Fit]                  │ …                      │
└────┴──────────────────────────────────────────┴────────────────────────┘

Specific UI Changes (rank-ordered by lift/cost)

# Change Cost Why it matters
1 Replace peach canvas with neutral surface Trivial Kills the "prototype" feel in one stroke
2 Dropzone card for upload (keep file input as fallback) Small First impression is "tool", not "form"
3 Hide overlay checkboxes pre-scan; show them with counts post-scan Small Removes a major source of confusion
4 Remove duplicate DraftLint title; show "Drawing Analysis" once + filename strip Trivial Visual hierarchy
5 Remove persistent "STEP scene ready" status; move to empty-state Trivial Stops the mode from lying
6 Unified zoom pill bottom-center Small Frees top-right for overlay controls
7 Sheet thumbnails rail on the left (populated after page render) Medium Multi-page drawings become navigable
8 Progress strip during scan; no modal Small Drawing stays interactable during scan
9 Findings inspector on the right with severity chips + rule ID + disposition Medium The real work surface post-scan
10 Severity color palette from PDF-report tokens Trivial System coherence
11 Standards profile as header chip with edit modal Small Visible context, editable in place
12 Keyboard shortcuts (F/+/−/J/K/1-9) + ? palette Small Adoption signal
13 Stage tracker (Upload · Scan · Review) above canvas Trivial Progressive-disclosure anchor
14 Per-sheet finding-count badges Small Prioritization
15 Rail labels (hover on narrow, persistent on wide) Small Reduces icon-guessing
16 Export pipes into DFM PDF builder Medium One product, one export style
17 Rule drawer: click rule ID → side drawer with rule text Medium USP traceability made tangible
18 Recent drawings strip on empty state Small Returning-user bait
19 Severity legend with counts Trivial Scannable summary
20 Remove Modes dropdown inside workspace; ⌘K switches Small Deduplicate launchers

Reference Patterns

Source Borrow
Bluebeam Revu Sheet thumbnails left, findings/markups right, toolbar top
Adobe Acrobat review Per-finding disposition + commenting
Figma canvas Floating zoom pill, quiet chrome, keyboard culture
Linear / Superhuman J/K next-prev findings, ? shortcut palette
Nutrient / Apryse Neutral recessed canvas, overlay layer model
Hubs / Xometry DFM Upload → analyzing → annotated result progression

Phased Plan

Phase A — visual cleanup (IMPLEMENTING NOW, frontend-only, ~1–2 days)

Scope: - Replace peach gradient canvas with neutral surface. - Dropzone card for upload (keeps underlying <input type="file"> so existing logic is unchanged). - Remove duplicate DraftLint titles; keep one workspace title. - Remove the persistent "STEP scene ready" string from the top bar. - Hide overlay checkboxes pre-scan; keep them ready to show after scan. - Calm the saturated Scan CTA. - Unified zoom pill (bottom-center, keyboard cues). - Stage tracker (Upload · Scan · Review) text above the canvas.

Out of scope for Phase A: sheet thumbnails, findings inspector, scan progress strip, rule drawer, keyboard palette, export-to-PDF alignment, rail labels, standards-profile chip, recent drawings strip.

Phase B — layout & state structure (~1 week, frontend-only)

  • Sheet thumbnails rail (PDF.js pages).
  • Findings inspector right-side panel wired to the existing DraftLint report shape.
  • Overlay chips with counts from report data.
  • Severity palette aligned with PDF-report tokens.
  • Standards-profile header chip + modal.
  • Recent drawings strip on empty state (localStorage, same helper as Home).

Phase C — depth & integration (~2 weeks, backend-touch)

  • Rule drawer (requires rule-library text API).
  • Per-finding disposition persisted server-side (ties to F1 activity log in code review).
  • Export to PDF via shared DFM PDF builder.
  • Keyboard-shortcut palette.

Open Questions (do not block Phase A)

  1. Canvas tone: light neutral (#F4F6FA) or dark slate (#1F2937) as default?
  2. Does the existing DraftLint report produce rule_id + severity + evidence_pointer per finding? Phase B depth depends on this; if not, couples to F4.
  3. Multi-page scan — one report per page, or one report spanning all pages?
  4. Are user-drawn markups (shape/text/callout) on the roadmap?
  5. Export target: shared with DFM PDF builder, or separate scan report format? (Preference: shared, different cover.)

Implementation Notes (for the current branch)

  • Branch: draftlint-redesign-claude (local only, never pushed).
  • Repo: D:\02_Code\54_ClaudeReview_Rapiddraft\rapiddraft_utumpitch.
  • Keep the diff small. Phase A is visual + copy only; no new data flows.
  • Reuse existing design tokens from styles.css.
  • Do not introduce Zustand, React Query, or any new npm package in this branch.
  • Build verification: npm run build must pass.

Acceptance Criteria For Phase A

  • Canvas background is a neutral surface; no peach gradient.
  • Dropzone card renders with drag-and-drop target + format hint; file-picker fallback still works.
  • Only one "Drawing Analysis" / "DraftLint" title visible at a time.
  • Persistent "STEP scene ready" status string is removed from the top bar on this mode.
  • Overlay checkboxes are hidden pre-scan (or disabled with clear visual cue).
  • "Scan drawing" CTA uses the calm accent color (--accent-1) matching other primary buttons.
  • Zoom controls consolidated into one pill-shaped widget.
  • "Upload · Scan · Review" stage tracker visible above the canvas.
  • npm run build passes.
  • Existing Playwright specs continue to pass.