Step one
Document
Document component purpose, variants, behaviour and accessibility in Figma, giving designers and implementation partners a clear reference for intended use.
Case study
AI-enabled Design Workflow
Connecting design guidance to reviewed implementation.
I developed and tested an AI-assisted workflow linking Figma guidance, Jira specifications and component builds, with defined checks for human review. The Button is now implemented in Fumadocs and matches its Figma design, providing a working example of the approach.
01 The problem
Design intent needs more than a visual reference
A component is more than how it looks in Figma. Its usage, variants, behaviour and accessibility are all part of the design. Without clear, shared guidance, those decisions can be difficult to translate consistently into code.
02 The approach
Making design and development work together
I defined a workflow that carries component guidance from Figma into Jira specifications and AI-assisted builds, with human review before acceptance. The Button example explains the responsibilities at each stage.
Step two
Specify
Translate linked Figma guidance into Jira implementation requirements and acceptance criteria, making component rules explicit before an AI-assisted build begins.
Step three
Build
Use the Jira specification and design-system guidance to direct AI-assisted component builds, then review the output against the intended design.
Step four
Unify
Bring guidance, variants and reviewed code into shared Fumadocs documentation, helping designers, developers and AI reference the same component decisions.
03 The controls
Keeping AI grounded in the system
I defined checks for intended behaviour, visual parity and specification alignment so generated output can be reviewed before acceptance. The documented rules guide the build; people remain responsible for the result.
Clear tool roles
One workflow, clear responsibilities
Each tool has a defined role, helping design guidance move into implementation without creating competing sources of truth.
Figma holds design guidance, Jira holds the implementation specification, Cursor builds the component, and Fumadocs holds guidance and code.
Human review built in
Generated, then reviewed
Generated components are reviewed against the intended behaviour and visual specification before they are accepted into the system.
Agent output goes through review, where intended behaviour, visual parity and specification alignment are checked, before an accepted component.
04 The outcome
From design decisions to reviewed implementation
The Button is implemented in Fumadocs and matches its Figma design. All 53 core components are now complete, and the team is working on layout and structural components. Work continues across the wider component library to bring coded components, review and shared documentation into parity.
In early testing, the five designers building templates with the new system found it easier to navigate and reported working more quickly. The AI skills are still being set up.
Clearer implementation requirements
Component guidance becomes explicit requirements and acceptance criteria, giving the build a defined reference for behaviour, appearance and accessibility expectations.
Human review before acceptance
Generated components are checked against design intent and specifications, keeping responsibility for corrections and acceptance with the people reviewing them.
Shared component knowledge
Bringing guidance, variants and code together in documentation creates a shared reference for designers, developers and AI as implementation progresses.