This project explored how code search tools can reduce divergences between design and development during the design handoff process. Conducted as part of a research collaboration at Falmouth University, the study investigated how UX designers and developers rely on code search to resolve ambiguities when translating design into implementation. Using a mixed-methods approach combining interviews and surveys with industry professionals, the research identified opportunities for AI-assisted search tools to better support collaboration and reduce friction between design systems and production code.
UX ResearchAI Developer ToolsDesign HandoffCode Search SystemsMixed-Methods Research
WalletCard.css — DevBot
WalletCard.css
tokens.css
WalletCard.tsx
DevBot
Design context
Components
WalletCard
TransactionRow
StatusBadge
1
Token mismatches
padding → spacing-md
!
border-radius ✓
background ✓
DevBot chat
Dev
What's the correct padding for WalletCard?
DevBot
Use var(--spacing-md) — Figma token is 24px. Your current padding: 20px is hardcoded and 4px short.
- padding: 20px;
+ padding: var(--spacing-md);
Apply fix
Replace in WalletCard.css line 8 ↗
DevBot
⚠ 1 mismatch
Figma synced · 2h ago
1
2
3
4
5
6
7
8
9
10
11
12
/* tokens.css */
:root {
--spacing-md
:
24px
;
--radius-lg
: 12px;
}
/* WalletCard.css */
.wallet-card { padding:
20px
;
border-radius:
var(--radius-lg)
;
background:
var(--color-surface)
;
}
! token mismatch
padding
Figma token
--spacing-md = 24px
Your code
20px hardcoded — 4px off
Use var(--spacing-md)
Figma
Design workflow
Design
workflow
Figma MCP
Component spec, design tokens
Claude Code
AI-assisted suggestions
Code review
Manual, design-side QA
Agent
Operates within design context only
handoff attempt
✕
Implementation workflow
Implementation
workflow
API repository
Endpoints, schemas, versioning
Code
Implementation from spec only
Functional app
Built without design context
No shared artefact · No API context bridge · Divergence at handoff
02
≠
DevBot
Multi-agent handoff bridge
DevBot
Design
Design intent
Figma MCP + component annotations
Agent 01 — Figma reader
Reads component tree → structured schema
↔ API contract spec
OpenAPI / JSON Schema · shared artefact
Agent 03 — Mapping agent
Resolves bindings, detects mismatches
Design token sync
Tokens mapped → API fields
Prototype validation
Agent tests UI against API mock
↔ Agent co-review
Claude diff + conflict resolution
Design sign-off
Agent confirms spec coverage
Shipped — spec aligned ✓
Design + dev context unified
Other Projects
Let’s explore what we could build together.
CONTACT
(+44) 7933 026 207
SOCIAL
Sofia O.
This project explored how code search tools can reduce divergences between design and development during the design handoff process. Conducted as part of a research collaboration at Falmouth University, the study investigated how UX designers and developers rely on code search to resolve ambiguities when translating design into implementation. Using a mixed-methods approach combining interviews and surveys with industry professionals, the research identified opportunities for AI-assisted search tools to better support collaboration and reduce friction between design systems and production code.
UX ResearchAI Developer ToolsDesign HandoffCode Search SystemsMixed-Methods Research
WalletCard.css — DevBot
WalletCard.css
tokens.css
WalletCard.tsx
DevBot
Design context
Components
WalletCard
TransactionRow
StatusBadge
1
Token mismatches
padding → spacing-md
!
border-radius ✓
background ✓
DevBot chat
Dev
What's the correct padding for WalletCard?
DevBot
Use var(--spacing-md) — Figma token is 24px. Your current padding: 20px is hardcoded and 4px short.
- padding: 20px;
+ padding: var(--spacing-md);
Apply fix
Replace in WalletCard.css line 8 ↗
DevBot
⚠ 1 mismatch
Figma synced · 2h ago
1
2
3
4
5
6
7
8
9
10
11
12
/* tokens.css */
:root {
--spacing-md
:
24px
;
--radius-lg
: 12px;
}
/* WalletCard.css */
.wallet-card { padding:
20px
;
border-radius:
var(--radius-lg)
;
background:
var(--color-surface)
;
}
! token mismatch
padding
Figma token
--spacing-md = 24px
Your code
20px hardcoded — 4px off
Use var(--spacing-md)
Figma
Design workflow
Design
workflow
Figma MCP
Component spec, design tokens
Claude Code
AI-assisted suggestions
Code review
Manual, design-side QA
Agent
Operates within design context only
handoff attempt
✕
Implementation workflow
Implementation
workflow
API repository
Endpoints, schemas, versioning
Code
Implementation from spec only
Functional app
Built without design context
No shared artefact · No API context bridge · Divergence at handoff
02
≠
DevBot
Multi-agent handoff bridge
DevBot
Design
Design intent
Figma MCP + component annotations
Agent 01 — Figma reader
Reads component tree → structured schema
↔ API contract spec
OpenAPI / JSON Schema · shared artefact
Agent 03 — Mapping agent
Resolves bindings, detects mismatches
Design token sync
Tokens mapped → API fields
Prototype validation
Agent tests UI against API mock
↔ Agent co-review
Claude diff + conflict resolution
Design sign-off
Agent confirms spec coverage
Shipped — spec aligned ✓
Design + dev context unified
Other Projects
Let’s explore what we could build together.
CONTACT
(+44) 7933 026 207
SOCIAL
Sofia O.
This project explored how code search tools can reduce divergences between design and development during the design handoff process. Conducted as part of a research collaboration at Falmouth University, the study investigated how UX designers and developers rely on code search to resolve ambiguities when translating design into implementation. Using a mixed-methods approach combining interviews and surveys with industry professionals, the research identified opportunities for AI-assisted search tools to better support collaboration and reduce friction between design systems and production code.
UX ResearchAI Developer ToolsDesign HandoffCode Search SystemsMixed-Methods Research
WalletCard.css — DevBot
WalletCard.css
tokens.css
WalletCard.tsx
DevBot
Design context
Components
WalletCard
TransactionRow
StatusBadge
1
Token mismatches
padding → spacing-md
!
border-radius ✓
background ✓
DevBot chat
Dev
What's the correct padding for WalletCard?
DevBot
Use var(--spacing-md) — Figma token is 24px. Your current padding: 20px is hardcoded and 4px short.
- padding: 20px;
+ padding: var(--spacing-md);
Apply fix
Replace in WalletCard.css line 8 ↗
DevBot
⚠ 1 mismatch
Figma synced · 2h ago
1
2
3
4
5
6
7
8
9
10
11
12
/* tokens.css */
:root {
--spacing-md
:
24px
;
--radius-lg
: 12px;
}
/* WalletCard.css */
.wallet-card { padding:
20px
;
border-radius:
var(--radius-lg)
;
background:
var(--color-surface)
;
}
! token mismatch
padding
Figma token
--spacing-md = 24px
Your code
20px hardcoded — 4px off
Use var(--spacing-md)
Figma
Design workflow
Design
workflow
Figma MCP
Component spec, design tokens
Claude Code
AI-assisted suggestions
Code review
Manual, design-side QA
Agent
Operates within design context only
handoff attempt
✕
Implementation workflow
Implementation
workflow
API repository
Endpoints, schemas, versioning
Code
Implementation from spec only
Functional app
Built without design context
No shared artefact · No API context bridge · Divergence at handoff
02
≠
DevBot
Multi-agent handoff bridge
DevBot
Design
Design intent
Figma MCP + component annotations
Agent 01 — Figma reader
Reads component tree → structured schema
↔ API contract spec
OpenAPI / JSON Schema · shared artefact
Agent 03 — Mapping agent
Resolves bindings, detects mismatches
Design token sync
Tokens mapped → API fields
Prototype validation
Agent tests UI against API mock
↔ Agent co-review
Claude diff + conflict resolution
Design sign-off
Agent confirms spec coverage
Shipped — spec aligned ✓
Design + dev context unified
Other Projects
Let’s explore what we could build together.
CONTACT
(+44) 7933 026 207
SOCIAL
Sofia O.