import-design

Import external design files into the Pulp framework with automated layout parity validation.

13|1|Updated Apr 6, 2026
One-click install
npx skills add https://github.com/Generous-Corp/pulp --skill import-design-generous-corp
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: import-design
Source: https://github.com/Generous-Corp/pulp/tree/main/.agents/skills/import-design
Command: npx skills add https://github.com/Generous-Corp/pulp --skill import-design-generous-corp

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires node, python3, and includes scripts (resource) components.

What problem does it solve?

This skill solves the friction of manually translating external design files from tools like Figma, v0, or Claude Design into the Pulp framework, ensuring visual and structural fidelity through automated validation.

Core Features & Use Cases

  • Multi-Source Import: Seamlessly ingest designs from Figma, Stitch, v0, Pencil, React Native, and Claude Design.
  • Automated Fidelity Validation: Perform pixel-free layout parity checks, material audits, and geometry verification to ensure the implementation matches the design intent.
  • Use Case: A developer needs to import a complex Figma component into a Pulp project; this skill handles the conversion, validates the layout against the design's geometry, and flags any dropped properties or alignment issues before the code is finalized.

Quick Start

Use the import-design skill to import the Figma frame named Main from design.fig and validate the layout parity.

Frequently Asked Questions about import-design

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

FAQPage Schema
How do I import a Figma design into the Pulp framework with layout validation?

To import a Figma design into Pulp with layout validation, use the import-design skill to ingest external files and run automated structural checks. It performs layout parity analysis and material auditing to flag discrepancies between the design and generated code.

Can I import and validate React Native designs for pixel-perfect implementation?

Yes, you can import and validate React Native designs for pixel-perfect implementation. The skill ingests React Native source files into Pulp and performs geometry verification to ensure the structural output matches the original design intent.

What design sources are supported for importing designs into Pulp?

Supported design sources for importing into Pulp include Figma, v0, Stitch, Pencil, React Native, and Claude Design. The skill ingests these external files and performs visual fidelity validation to ensure accurate conversion.

How does automated design validation detect discrepancies between design intent and generated code?

Automated design validation detects discrepancies by performing pixel-free layout parity checks, material audits, and geometry verification. It analyzes the imported design against generated code to identify and report dropped properties or alignment issues.

Do I need Node and Python to run design import and fidelity validation?

Yes, you need both Node and Python3 installed to run design import and fidelity validation. These dependencies are required to execute the scripts that ingest external design files and perform the automated structural analysis.

What is the best way to convert v0 designs into Pulp components without losing layout fidelity?

The best way to convert v0 designs into Pulp without losing layout fidelity is using the import skill to ingest the files and run automated checks. It performs layout parity analysis to flag dropped properties before finalizing the code.