design-to-code

Place slash command files (`.md`) in this directory.

Compare design files with generated code to detect drift and inconsistencies

Export and optimize images, icons, and other assets from design files for target platforms

Extract design tokens from Figma, Sketch, or Penpot design files

Convert a design component to framework-specific code (SwiftUI, React, Flutter, Tailwind)

Synchronize design tokens between design files and codebase, detecting drift and applying updates

Place agent definition files (`.md`) in this directory.

Batch process design assets across multiple platforms with parallel optimization and format conversion

Create comprehensive design systems from design files, orchestrating token extraction, component generation, and documentation

Multi-step design to code workflow agent. Orchestrates design file reading, token extraction, and code generation across multiple frameworks.

Audit design components and generated code for WCAG 2.1 compliance. Check color contrast, touch targets, screen reader compatibility, and keyboard navigation.

Optimize design assets for production deployment across platforms. Apply format-specific compression, resolution scaling, and bundle optimization techniques.

Manage design system tokens including CRUD operations, multi-format export, version tracking, and synchronization with design files

Convert design specifications from Figma, Sketch, or Penpot to Flutter widgets with proper theming

Convert design specifications from Figma, Sketch, or Penpot to React components with CSS modules or styled-components

Convert design specifications from Figma, Sketch, or Penpot to SwiftUI view code with proper modifiers and theme integration

Convert design specifications from Figma, Sketch, or Penpot to HTML with Tailwind CSS utility classes

Extract design tokens (colors, typography, spacing, shadows) from Figma, Sketch, and Penpot design files via MCP servers and normalize to W3C format

1 hook across 1 event