figma-to-code
Figma to Code
Convert Figma design files into production-ready UI code that integrates with the project's existing codebase.
When to Use
- User provides Figma exports (JSON, images, screenshots, or dev-mode code)
- User asks to "build UI from Figma", "implement this design", or "convert Figma to code"
- User mentions a "figma pack" or design handoff
Supported Input Formats
- Figma JSON export — richest data (via Figma REST API or export plugin). Run
parse_figma_json.jsto extract structure. - Screenshots/images — read visually with the Read tool. Extract layout, colors, typography, spacing.
- Dev-mode snippets — CSS/code copied from Figma dev mode. Use directly as reference.
- SVG/asset exports — icons and illustrations. Place in project assets directory.
Workflow
More from ajaywadhara/agent-skills
design-doc
Generate complete engineering design documents with Mermaid diagrams from a single prompt. Creates architecture overviews (C4), data models (ERD), sequence diagrams, state machines, and decision logs. One-shot workflow with minimal back-and-forth. Use when designing systems, creating design docs, architecting features, or documenting architecture.
5spring-boot-4-migration
Migrate Spring Boot applications from 3.x to 4.x with step-by-step guidance. Covers all 10 migration phases including build files, Jackson 3, Security 7, testing, and observability. Use when upgrading Spring Boot, migrating to Boot 4, or modernizing Spring applications. Supports gradual (6 tracks) or all-at-once migration strategies.
4openapi-architect
Design and generate OpenAPI 3.1 specifications following REST best practices. Creates API specs from requirements, reviews existing specs for compliance, implements RFC 7807 error handling, designs security schemes, and structures pagination/filtering. Use when designing APIs, creating OpenAPI specs, reviewing API design, or architecting REST endpoints.
4commit-push-pr
Commit, push, and optionally create a PR for changes. Use when user says: commit my changes, commit and push, push my code, create a PR, commit push pr, or any variation requesting to commit/push changes to git.
2multi-module-scaffolder
Scaffold complete multi-module Gradle projects with Spring Boot 4, Java 21, and a production-grade exception handling architecture. Generates server, api-gateway, and common:exception modules with version catalog, GlobalExceptionHandler, ErrorCode enum, ErrorResponse record, and per-module exception hierarchy. Use when asked to scaffold a project, create a multi-module Gradle project, generate a new Spring Boot project, or set up a microservice skeleton.
2senior-eng-review
Mission-critical codebase audit for Senior Engineering Managers. Evaluates Reliability, Data Integrity (Payments), Architecture, and Quality against strict "Big Tech" standards (99.999% availability, Idempotency, Safety First).
1