| name | design-integration |
| description | [Tier 2 · moderate autonomy · full review gate] Adopt a fresh design across an existing product to full parity - VISUAL and FEATURE-WISE. Import the design (Claude Design export/URL or the claude_design MCP connector), reskin every existing screen to it, and where the design implies a feature the product lacks, design-and-build it; nothing the old product did is lost. Use for a whole-app redesign adoption, not a single page (the parked single-page variant lives under docs/exploratory/missions/archive/landing-page-convergence/). Reuses the existing backend; rewires the UI to the new design and fills gaps to full depth. Runs via the autonomous-fleet-core engine. Trigger on: "adopt this design across the product", "integrate the new design end to end", "make the app match this design fully", "redesign the whole app to this". |
| license | MIT |
| compatibility | Requires git and gh CLI in the target repository |
| metadata | {"author":"ravidsrk","version":"1.0.0","tier":"2","fleet-component":"mission"} |
| status | exploratory |
Status: exploratory. This mission is documented but has not yet been run end-to-end on an external repo with an archived run-archive. It is preserved for future promotion (see docs/exploratory/missions/README.md § Promotion criteria). Do not invoke this skill in a production fleet until it has been promoted.
Mission: design-integration
Required skills
Before executing, activate these skills and read their full instructions:
autonomous-fleet-core — read references/engine.md and references/composition.md when coordinating- One runtime adapter:
autonomous-fleet-adapter-orca, autonomous-fleet-adapter-claude-code, autonomous-fleet-adapter-grok, or autonomous-fleet-adapter-codex
Follow the core and your adapter in full, then apply the mission parameters below.
Do not load a second mission skill in the same run. For chained missions, use fleet-program.
Optional skills
| Skill | Activate when | If unavailable |
|---|
claude_design MCP | DESIGN SOURCE uses MCP connector | User must /design-login - HARD EXTERNAL DEPENDENCY |
design-review | After a parity wave; coordinator wants visual QA sampling | Rely on @claude review gate only |
qa-only | Staging/preview URL exists; report-only fidelity check | Screenshot + @claude review only |
Community catalog: autonomous-fleet-core → references/community-skills.md. At most 2 optional
skills active (including MCP row).
Worker skills
| Role | Skills | If unavailable |
|---|
| @grok (build items) | frontend-design, frontend-ui-engineering; iOS → swiftui-liquid-glass | Design extract + parity spec |
| @grok (QA fix loop) | qa when staging URL and user wants fix-verify loop | Mission fidelity gate only |
| @claude (extract, map, fresh review, ship) | domain-modeling when new product terms surface | claude_design MCP / export per DESIGN SOURCE |
Deferred missions
Record in <LEDGER_DIR>/parity-readiness.md under Recommended next missions and in DECISIONS.md.
| Finding type | Route to |
|---|
| Scope is one landing page only | docs/exploratory/missions/archive/landing-page-convergence/ (parked) |
| Backend rewrite needed (not UI rewire) | docs/exploratory/missions/archive/legacy-rebuild/ (parked) |
| Bugs found during parity work | bug-batch |
Empirical note: No matching task category in arXiv 2601.15195 - full review gate required,
reviewing both visual fidelity AND feature parity. The control artifact is the PARITY MAP: anything
not mapped there is a feature that silently disappears.
DESIGN SOURCE (the user supplies one)
A Claude Design export/URL, OR the claude_design MCP connector
(https://api.anthropic.com/v1/design/mcp). If using the MCP connector and it isn't authorized:
this is a HARD EXTERNAL DEPENDENCY - tell the user to run /design-login (grants
user:design:read/write), then wait; that is the one allowed pause (an agent can't self-grant the
scope). Otherwise a worker fetches/imports the design and READS ITS README first.
GOAL
Make the product match the design BOTH ways: (1) every existing screen/flow reskinned/rebuilt to
the new design - the old product's functionality is the FLOOR, nothing dropped; (2) every relevant
aspect of the design implemented; (3) where the design implies a feature the product lacks,
design-and-build it in the design's language to full depth. End state: the product looks and
behaves as the design, zero feature regressions, every flow working. No partial reskins, no
half-migrated screens reachable.
ROLE PIPELINE
Builder choice (Stage-9 carryover). This mission keeps @grok as builder
because Stage 6 (prompts.md L1488, L2038) showed @grok+frontend-design
produces materially better visual fidelity on landing-page and design-parity
runs than @codex. Stage-9's general retirement of @grok (prompts.md L3013)
does not apply to design/landing missions.
- @claude IMPORTS the design + PROBES the existing product + compiles the PARITY MAP + thin per-area
specs.
- @grok CODES each area to full depth (visual match + feature).
- A fresh build-blind @claude REVIEWS each PR: design-faithful AND no lost functionality, all
states, real tests, no placeholders/half-migrated screens.
- @claude SHIPS: opens PR, conflict-aware merge, worktree cleanup.
LEDGER
<LEDGER_DIR>/parity-progress.md. Per-task flags: PLANNED=<t/f> BUILT=<t/f> REVIEWED=<t/f> SHIPPED=<t/f>. Plus a PARITY MATRIX: every item classified REDESIGN | GAP-FILL | NEW, each OPEN | DONE via PR#n.
VISUAL BASELINE (before/after gate)
T-A2 records the exact baseline capture commands/queries that produced the before-state
screenshots in docs/product-probe.md and <LEDGER_DIR>/parity-progress.md: command line or browser
query, route/flow, viewport/device, auth role, seed/data state, screenshot path, and covered
PARITY MATRIX item. T-FINAL replays those commands/queries like-for-like after all parity PRs
ship, captures after-state screenshots to parallel paths, and writes an explicit before/after
comparison in <LEDGER_DIR>/parity-readiness.md. Passing requires strict visual improvement toward the
design and zero regression in each recorded flow. Screenshot existence alone is not evidence. If a
baseline cannot be replayed, the covered matrix item stays OPEN until a replayable baseline
exists and passes.
TASK STRUCTURE
- T-A1 DESIGN EXTRACTION [@claude] - import the design (per DESIGN SOURCE; README first);
extract the full system (tokens, components, layouts, states, responsive) + every screen.
Output docs/design-extract.md.
- T-A2 PRODUCT PROBE [@claude, parallel] - inventory the existing product end to end (every
screen, route, flow, feature, state) + relevant backend/API contracts. The no-loss FLOOR. Record
VISUAL BASELINE capture commands/queries. Output docs/product-probe.md.
- T-MAP PARITY MAP [@claude, Opus-class, gated on A1+A2] - control point. Cross-map design vs
product. Classify every item: REDESIGN (product has it; rebuild to design), GAP-FILL (product
has it, design doesn't cover it; design-and-build to full depth), NEW (design introduces it;
build it). NOTHING in the product left unmapped. Define build order, shared FOUNDATION
(design-system) work, per-item acceptance (visual + feature + tests), placement hints. Output
docs/parity-spec.md. FROZEN. Write each item to the PARITY MATRIX.
- T-FOUNDATION [relay] - implement the design SYSTEM (tokens/theme/typography/spacing/shared
components) wired in, with tests. Gates the screens.
- T-ITEMS… [per matrix item, loop] - @claude thin-plans → @grok builds to full parity (visual
- feature, all states, responsive, tests) → fresh build-blind @claude reviews (fidelity + no lost functionality +
tests) → @claude ships. Parallelize non-overlapping screens; serialize overlapping.
- T-FINAL [@claude] - build green, lint clean, full suite green. Every matrix item DONE; the
product matches the design everywhere; every product-probe capability still works (zero
regressions); no half-migrated screens/placeholders/console errors. Replay VISUAL BASELINE
commands/queries and include the strict before/after comparison. Output
<LEDGER_DIR>/parity-readiness.md
with fleet-outcome YAML (parity_items_open, regressions), matrix summary,
Recommended next missions, all PRs. Ship as the final PR.
Runtime goal
After ledger init, SET_GOAL per autonomous-fleet-core/references/runtime-goals.md. Record
## Runtime goal in <LEDGER_DIR>/parity-progress.md. GOAL_COMPLETE only after ## DONE below.
Mission design-integration DONE: <LEDGER_DIR>/parity-progress.md all task flags true,
<LEDGER_DIR>/parity-readiness.md with fleet-outcome.status done and mission metrics satisfied,
./scripts/validate-fleet-outcome.sh passes, all PRs merged into BASE.
DONE
Every PARITY-MATRIX item DONE, every task PLANNED=t BUILT=t REVIEWED=t SHIPPED=t, product
matches design visually + feature-wise with zero regressions, replayed VISUAL BASELINE confirms
strict improvement, <LEDGER_DIR>/parity-readiness.md exists. Then send the FINAL report.
DECISION DEFAULTS (mission-specific)
- The design is the visual/UX TARGET; the product's functionality is the FLOOR. Reach both - full
fidelity AND zero feature loss.
- Where the design doesn't cover an existing feature: design-and-build it in the design's language
to full depth (GAP-FILL). Never drop a feature because the design is silent on it.
- Reuse the existing backend/logic/data/API contracts; rewire the UI to the design - not an engine
rewrite.
- The design export's README and exact token/spacing values are authoritative; match precisely.
- Real content/assets; no placeholders on shipping screens. Mobile-first/responsive + a11y basics.
- Tests real; reject coverage-padding. Any ambiguity → the most faithful, complete,
regression-free parity while converging.
