skills.rest
yoshisada
yoshisadaCOMMUNITY
Explore all skills by this author →
GitHub

trim-pull

Translate Penpot designs into framework-appropriate code via MCP.

Updated Mar 26, 2026
Search Tags:#automation#mcp#pull#design-to-code#framework-detection#penpot#component-mapping
One-click install
npx skills add https://github.com/yoshisada/ai-repo-template --skill trim-pull
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: trim-pull
Source: https://github.com/yoshisada/ai-repo-template/tree/main/plugin-trim/skills/trim-pull
Command: npx skills add https://github.com/yoshisada/ai-repo-template --skill trim-pull

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Penpot design-to-code handoff is error-prone and tedious; this Skill translates MCP data into framework-appropriate code while preserving layout, spacing, colors, and component hierarchy, minimizing manual rewriting.

Core Features & Use Cases

  • Detects the target UI framework and CSS approach from project configuration.
  • Reuses existing component mappings to avoid duplication and keep consistency.
  • Generates code and updates .trim mappings and flows to reflect new designs.

Quick Start

Prompt the system to pull a Penpot design into framework-specific code and update component mappings.

Frequently Asked Questions about trim-pull

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

FAQPage Schema
How do I convert Penpot designs into framework-ready code automatically?▼

To convert Penpot designs to code, this Skill reads design data via MCP, detects the target UI framework from project configuration, and generates code while updating component mappings to eliminate manual handoff errors.

What is the best way to maintain component mappings during Penpot design-to-code handoff?▼

The best way to maintain component mappings during Penpot handoff is reusing existing .trim mappings. This Skill updates mapping flows automatically to avoid duplication and ensure consistency across generated code.

Does the Penpot code generation process require manual framework detection?▼

No, Penpot code generation does not require manual framework detection. The Skill automatically detects the target UI framework and CSS approach directly from your project configuration before translating the MCP design data.

Can I preserve layout, spacing, and colors when pulling Penpot designs into code?▼

Yes, you can preserve layout, spacing, and colors when pulling Penpot designs. The Skill translates MCP data into framework-appropriate code while retaining the original component hierarchy and styling to minimize rewriting.

Why does my Penpot design-to-code workflow have manual handoff errors?▼

Penpot design-to-code workflows have manual handoff errors due to disconnected translation. This Skill eliminates them by using MCP interactions to directly convert designs into framework-specific code and update component mappings.

Related Skills

Explore More Design & Creative Skills→
yoshisadayoshisada

trim-push

Push code components to Penpot and update component mappings.

Community
Advanced
yoshisadayoshisada

trim-init

Discover Penpot files via MCP and create .trim/config with component mappings.

Community
Intermediate
lync-cyberlync-cyber
133

penpot-bridge

Bridge Penpot design data with frontend code generation and token synchronization.

Community
Advanced
daffy0208daffy0208
34

Figma Developer

Convert Figma designs into React components and design tokens.

Community
Intermediate