A Creative Designer
belgeade-Based
( Works )
Creator Workflow - Figma → Claude → Storybook
2025
Vibe Coding, Design System
Designed and standardized the core creator workflow connecting Figma, Claude, and Storybook, enabling faster iteration, clearer ownership, and higher-quality outputs. I focused on reducing friction between design, AI-assisted logic, and engineering delivery.

Context & Constraints

Dynamic Mockups sits at the intersection of design tools, AI, and production code.

Creators needed speed and flexibility, while engineers needed consistency and predictability. The workflow had to support both without slowing either side down.

Problem Definition


The existing workflow was fragmented:

  • designers worked in Figma,
  • logic and prompts lived elsewhere,
  • and implementation details were often lost in translation.


This caused duplicated effort, slower iteration, and inconsistent results between design intent and shipped output.

Strategy & Approach


I approached the workflow as a system, not a set of tools.

The goal was to define clear responsibilities at each step while keeping transitions lightweight and understandable.

We aligned early through workshops and rapid validation, then formalized the workflow across tools instead of adding more process.

Key Design Decisions

  • Positioned Figma as the source of truth for structure, states, and components.
  • Used Claude to assist with logic, variation, and AI-driven decisions while keeping outputs human-reviewable.
  • Mapped designs directly to Storybook-ready components, reducing ambiguity in implementation.
  • Designed reusable Figma components that mirrored production constraints, minimizing translation loss.

Collaboration & Execution

I worked closely with engineers to ensure the workflow matched real implementation needs.

Design decisions were validated against technical feasibility early, keeping the loop tight between Figma, AI-assisted logic, and production components.

Outcome & Impact

The new workflow improved speed and clarity across teams.

Designs moved faster into production, handoff friction was reduced, and outputs became more consistent and predictable across features.

Learnings & What I’d Do Differently


Clear ownership between tools is critical when AI is involved.

Next, I would invest earlier in guardrails for AI-assisted steps to further reduce edge cases and manual correction.

What This Demonstrates


This case demonstrates my ability to design end-to-end workflows, bridge design and engineering, and integrate AI responsibly into real production systems.

More works