design product experiences

The problem

Translating design intent into production code often leads to lost nuance, accessibility regressions, and broken design systems. Developers struggle to maintain consistency between Figma files and live implementations without manual back-and-forth.

What it does

• Performs UX audits by inspecting live URLs or local previews to identify usability and accessibility gaps.
• Translates Figma designs into code while reconciling differences between design variables and existing code tokens.
• Implements complex interface states including loading, error, empty, and responsive reflows within established architectures.
• Refines information architecture and interaction flows before committing to visual styling or production edits.
• Verifies implementations using screen reader semantics, keyboard navigation checks, and layout stress tests.

Frameworks & tools

Figma, Browser DevTools, React, Tailwind CSS, Jest, Playwright, and design token systems.

Why this beats prompting it yourself

Standard prompts often result in flat, non-functional UI code that ignores edge cases. This skill treats requests as design problems first, ensuring every implementation is accessible, state-aware, and compliant with your existing design system architecture.

Use cases

• Perform a design-to-code migration of a new Figma component into an existing React library.
• Audit a checkout flow for accessibility violations and keyboard traps using a live browser session.
• Propose and implement a responsive redesign for a high-density data dashboard.
• Refactor an existing UI to use standardized design tokens and consistent spacing rules.

Known limitations

Cannot bypass authentication or payment gateways in browser sessions without explicit credentials. Does not modify production databases or perform destructive actions on live data.