Verified:GitHub

framework-adapter

Detect the frontend framework and adapt Figma-generated implementations to its conventions.

Updated Aug 23, 2026

Search Tags:#design-to-code #design-tokens #framework-detection #component-architecture #ui-library #frontend-adaptation

Ready to run

npx skills add https://github.com/LPdsgn/claude-toolkit --skill framework-adapter

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: framework-adapter
Source: https://github.com/LPdsgn/claude-toolkit/tree/main/plugins/figma-code-master/skills/framework-adapter
Command: npx skills add https://github.com/LPdsgn/claude-toolkit --skill framework-adapter

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Adapts Figma-generated design implementations to the conventions, component libraries, and styling patterns of the detected frontend framework, reducing manual rework.

Core Features & Use Cases

Framework detection from package.json dependencies and framework-specific config files
Framework-aware adaptation of component structure, names, and styling
UI library and design-token integration to preserve visual consistency

Quick Start

Apply this skill to a project with a detected framework to generate framework-aligned UI code and components.

Frequently Asked Questions about framework-adapter

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I adapt Figma-generated code to match an existing frontend framework?▼

Framework detection works by analyzing package.json dependencies, framework-specific configuration files, and the project's file structure to identify the target frontend framework and apply matching adaptation rules for UI code generation.

Can I use this to integrate design tokens into an existing UI library?▼

Yes, you can integrate design tokens into an existing UI library because the skill enforces adaptation rules that preserve token integration and visual consistency while respecting the project's existing styling system.

How do I convert Figma designs to framework-specific component architecture?▼

Converting Figma designs to framework-specific component architecture involves detecting the target framework and applying rules that enforce framework-aware component organization, exports, and naming conventions for the generated implementation.

Does the tool preserve my project's existing styling system during frontend adaptation?▼

The tool does preserve your project's existing styling system during frontend adaptation by respecting current UI libraries and enforcing adaptation rules that maintain original naming, structure, and styling patterns.

What is the best way to automate design-to-code adaptation for multiple frontend frameworks?▼

The best way to automate design-to-code adaptation is to use framework detection from dependencies and config files to automatically apply framework-specific component organization and token integration across different projects.