Nune Vardanyan
Home
My Projects
ResumeContact Me

Home

Projects

Resume

Contact

My Projects
·

2025–2026

Identity Threat Detection and
Response Dashboard with Claude Code

Technology

Claude Code

VS Code

Vercel

Figma

GitLab

Cloudsmith

AI-Built Design System

Beyond Identity

Context

ITDR (Identity Threat Detection and Response) is a security product used by enterprise SOC teams and IT security analysts to detect and respond to identity-based attacks — account takeovers, credential compromise, impossible travel, MFA bypass, and suspicious device behavior.

Beyond Identity's ITDR dashboard surfaces real-time threat signals across identity infrastructure, giving analysts the visibility to act before breaches escalate.

Impact

100%

Handoff eliminated

Design went directly to production without a separate engineering translation layer.

Fully Agentic Workflow

Fully agentic workflow

From Figma Make to Claude Code to a fully agentic, branch-level design-engineering loop.

Faster iteration

Same-session cycles replaced multi-day handoff cycles for production UI changes.

Contributors

Senior Product Designer

Nune Vardanyan

End-to-end design ownership — from research and ideation through Figma Make prototyping, production implementation with Claude Code, design system maintenance, and shipping via merge requests. Led client demos and conducted interview sessions to validate direction and gather feedback.

How it started

Using Figma Plugins to generate alternate designs

I first started using AI in late 2024, early 2025 when I came across a Figma plugin. It opened the door to what felt like a fundamentally different way of working.

Early iterations were feature-level, focused on rapid ideation. But what started as a tool to speed up wireframing quickly became something much more structural.

Phase 1 — Figma Make

Experimenting with Figma Make, initially focused on feature-level work and fast ideation.

SpeedFull-scale prototypes in hours, not days — design and interaction in one pass.
FidelityHigh-fidelity outputs that felt production-ready from the first iteration.
ExplorationRapid variant generation let me test multiple directions simultaneously.
AlignmentStakeholders could interact with real prototypes, not static screens.

Building the first version of ITDR in Figma Make.

Immediate wins

Starting pointAfter a knowledge transfer with the PM, I used Figma Make to build a full-scale prototype of the ITDR dashboard — threat timelines, risk scoring, analyst workflows.
SpeedWhat would have taken weeks of wireframing and static mocks came together in days. Design and interaction in one pass.
FidelityThe output felt production-ready — real components, real data structures, real analyst flows.

The problem

Figma Make generated code, but no engineer was looking at it.

Phase 2 — Claude Code · Jan 2026

Meet the engineers exactly where they are.

Engineers at Beyond Identity were building with Cursor, Claude Code, and Replit. So the strategy was simple: stop designing in a separate layer and move into theirs. Claude, VS Code, GitLab. My software development background made the transition less daunting than it might have been.

I started prototyping the ITDR experience directly using Claude Code via VS Code. What surprised me wasn't the speed, it was the quality of the thinking. Claude wasn't just generating code. It was thinking with me.

Claude Code

What Claude enabled

Competitive analysis

Mapped competing ITDR platforms to identify gaps and positioning opportunities.

Interview scripts

Co-wrote user interview scripts tailored to security analyst workflows.

PRD documentation

Translated design decisions into structured product requirement docs.

Mock data testing

Identified differences between mock and real data schemas to shape production behavior.

Planning sessions

Ran working sessions to prioritize features and sequence the build.

Challenging direction

Used Claude to pressure-test design decisions before committing to them.

Phase 3 — Fully Agentic

The beginning of true design-engineering collaboration.

Figma's MCP server connected Claude directly to designs — but iterating in production code was faster. I leaned further in: own branch, live environment, design system via claude.md, shipping through merge requests.

Prototyping in production

Maintaining own branch

Evolving design system via claude.md

Testing through merge requests

Takeaway

I still use Figma. It's simply not the only tool in my toolbox anymore.

Next case study

Credential Extension Flow Research and Redesign

View case study