By rylaa
Figma-to-code conversion with 5-agent pipeline. Validates designs, creates specs, manages assets, generates code, and verifies compliance using Pixelbyte Figma MCP Server.
npx claudepluginhub rylaa/claude-agent-workflows --plugin pb-figmaAgents for the Figma-to-Code pipeline.
Downloads and organizes assets from Figma based on Implementation Spec. Validates downloaded assets, organizes them in project structure, and updates the spec with final asset paths.
Base reference documentation for all framework-specific code generators. Defines shared logic for spec reading, validation, asset handling, error recovery, and output formatting. Not invoked directly - referenced by framework-specific agents.
🚧 COMING IN v1.2.0 Kotlin Compose code generator for Figma designs. When implemented, this agent will: - Generate Jetpack Compose components - Use Material Design 3 - Follow Kotlin best practices - Support dark mode and accessibility For now, this is a placeholder. Use code-generator-react instead.
Generates production-ready React/Next.js + Tailwind components from Implementation Spec. Detects React/Next.js projects, uses Figma MCP for base generation, enhances with TypeScript types, semantic HTML, accessibility, and Tailwind best practices.
Generates production-ready SwiftUI code from Implementation Spec. Detects Xcode/SPM projects, uses Figma MCP for base generation, enhances with SwiftUI best practices, accessibility, and iOS design patterns. Requires iOS 15.0+ for gradient text support (.foregroundStyle()).
🚧 COMING IN v1.2.0 Vue 3 code generator for Figma designs. When implemented, this agent will: - Generate Vue 3 Composition API components - Use Tailwind CSS for styling - Follow Vue best practices - Support dark mode and accessibility For now, this is a placeholder. Use code-generator-react instead.
Validates generated code against Implementation Spec. Performs comprehensive checklist verification with fail-fast gate orchestration, parallel static checks, and granular component scoring. Produces Final Report with pass/fail status and actionable discrepancies.
Lightweight pre-check agent that runs static compliance checks and Gate 1 (Accessibility) before the full compliance checker. All checks are threshold-based, presence-based, or formula-based - no visual interpretation needed. Saves time and cost by failing fast on mechanical checks.
Analyzes Validation Report to create Implementation Spec. Produces component hierarchy, implementation notes, and coding guidelines. Acts as a Business Analyst translating design into development requirements.
Validates Figma design completeness by checking all required design tokens, assets, typography, colors, spacing, and effects. Uses Pixelbyte Figma MCP to fetch missing details. Outputs a Validation Report for the next agent in the pipeline.
Detects fonts from Figma designs, downloads from multiple sources (Google Fonts, Adobe Fonts, Font Squirrel), and configures them for the target platform. For iOS/SwiftUI, downloads fonts and provides setup instructions requiring manual Xcode project updates. Runs as a background process after Design Validator, does not block the pipeline.
Comprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns
Requires secrets
Needs API keys or credentials to function
Uses power tools
Uses Bash, Write, or Edit tools
Persistent memory system for Claude Code - seamlessly preserve context across sessions
Standalone image generation plugin using Nano Banana MCP server. Generates and edits images, icons, diagrams, patterns, and visual assets via Gemini image models. No Gemini CLI dependency required.
Streamline people operations — recruiting, onboarding, performance reviews, compensation analysis, and policy guidance. Maintain compliance and keep your team running smoothly.
Memory compression system for Claude Code - persist context across sessions