AI prototyping
design system
wireframing
Agentic Platform
The product is an agentic platform that helps users investigate and respond to security incidents. Instead of organizing the experience around tools or features, it starts from the role of the person handling the incident, and agents help that person work through it. My part is the design system behind it. I build and maintain the design system that keeps the platform consistent while several PMs and designers work in parallel, and I review AI-generated prototypes against it before they reach development.
Product
Agentic Platform
Role
UI/UX designer
Timeline
2026
PMs use AI to generate prototypes quickly, which can shorten early exploration. However, AI-generated concepts may not align with the actual user story, established platform patterns, or engineering constraints. The team needs a way to determine what can be reused, what needs refinement, and how validated solutions can become shared assets for future projects.
Solution
1. Making technical work more accessible
Used Figma MCP and a skill to turn Figma components into React code using the right design tokens, without writing the code myself.
Used Claude to generate HTML components from our tokens and components, then published them as a GitHub library, without an engineering background.
Created reference implementations that FEDs could review and use, without needing to master every technical detail upfront.
2. Catching issues earlier
Compared prototypes against the design system to spot hard-coded colors and spacing that should use tokens.
Identified duplicated components and similar components with inconsistent names.
Flagged missing states, including hover, disabled, error, and empty.
Checked for accessibility issues, such as insufficient color contrast.
Found inconsistencies between Figma and the code.
3. Reducing repetitive work
Converted prototypes that passed review back into Figma.
Applied design tokens and organized layers and naming.
Generated usage notes and content for the component reference site.
Ran consistency checks across multiple files.
Human judgment remains central
AI helps me move faster, but I decide whether its output is appropriate for the product and the design system. I also work with UX to confirm that the user stories are accurate before the work moves forward.
What AI Does in This Workflow
1. Making technical work more accessible
Used Figma MCP and a skill to turn Figma components into React code using the right design tokens, without writing the code myself.
Used Claude to generate HTML components from our tokens and components, then published them as a GitHub library, without an engineering background.
Created reference implementations that FEDs could review and use, without needing to master every technical detail upfront.
2. Catching issues earlier
Compared prototypes against the design system to spot hard-coded colors and spacing that should use tokens.
Identified duplicated components and similar components with inconsistent names.
Flagged missing states, including hover, disabled, error, and empty.
Checked for accessibility issues, such as insufficient color contrast.
Found inconsistencies between Figma and the code.
3. Reducing repetitive work
Converted prototypes that passed review back into Figma.
Applied design tokens and organized layers and naming.
Generated usage notes and content for the component reference site.
Ran consistency checks across multiple files.
Human judgment remains central
AI helps me move faster, but I decide whether its output is appropriate for the product and the design system. I also work with UX to confirm that the user stories are accurate before the work moves forward.
