claude

trim

Bidirectional design-code sync via Penpot MCP. Pull designs into code, push code to Penpot, detect drift, manage component libraries, generate designs, edit via natural language, verify visually, redesign, and track user flows.

0 on GitHubby yoshisadav0.1.0MITupdated 4 months agodesign
/

Plugin trim from marketplace yoshisada-kiln in yoshisada/ai-repo-template. Commands read from the repo's manifest — 1 month ago.

What it installs

Skills (10)

  • trim-design

    Generate an initial Penpot design from product context. Reads PRD, existing components, and project conventions to create a structured Penpot design via MCP.

  • trim-diff

    Compare Penpot designs against code and report drift. Categorizes mismatches as code-only, design-only, style-divergence, or layout-difference with actionable suggestions.

  • trim-edit

    Edit Penpot designs via natural language. Changes are logged and stay in Penpot until pulled.

  • trim-flows

    Manage user flows for verification and QA. Subcommands: add, list, sync, export-tests.

  • trim-init

    Initialize trim for a project. Discovers Penpot files via MCP, creates .trim/config, and scans existing components for initial mappings.

  • trim-library

    Manage the bidirectional component library. Lists all tracked components with sync status, or syncs drifted components when called with 'sync'.

  • trim-pull

    Pull a Penpot design into framework-appropriate code. Reads design via MCP, detects project framework, generates code, and updates component mappings.

  • trim-push

    Push code components to Penpot. Analyzes code structure and styles, creates or updates Penpot components via MCP, and updates component mappings.

  • trim-redesign

    Full UI redesign in Penpot. Reimagines visual design while preserving information architecture and user flows.

  • trim-verify

    Visually verify rendered code matches Penpot designs. Walks user flows, screenshots each step, compares via Claude vision.

View source on GitHub

More from yoshisada/ai-repo-template

All 5 plugins →

kiln

claude

Spec-first development harness with 4-gate enforcement, PRD-driven workflow, and agent teams. Includes 15 skills, 4 agents, hooks, and templates.

43 skills · 13 agents · hooks

0

wheel

claude

Hook-based workflow engine for Claude Code. Deterministic multi-agent pipeline orchestration using a state machine and per-step context injection.

9 skills · hooks

0

shelf

claude

Obsidian project dashboard for Claude Code. Syncs project status, progress, issues, and feedback between code repos and an Obsidian vault via MCP.

8 skills

0

clay

claude

Idea-to-project pipeline for Claude Code. Market research, naming, PRD creation, and repo scaffolding with Obsidian integration.

6 skills

0

Similar plugins

claude-mem

claudecodex

Persistent memory for Claude Code: the next session starts where the last one left off.

29 skills · 1 MCP server · hooks

thedotmack/claude-mem 116,618

Taste Skill

claudecodex

tasteskill 2.5.1: professional company websites at the figma.com and x.ai level, with one section per screen, real photographs, real product UI, effects kept for tech and gaming pages, and a real-browser checker and finish gate.

1 skill

Leonxlnx/taste-skill 114,391

diagram-design

claudecodex

Editorial diagrams in your brand, as self-contained HTML and SVG. Architecture, flowcharts, sequence, state machines, ER and database schemas, timelines, swimlanes, org charts, Gantt, Wardley maps, user journeys, service blueprints, UML class, lifecycle phase maps, and charts from bar, line and scatter to Sankey, treemap and heatmap, plus many more. Redraws draw.io, Mermaid, Excalidraw and PlantUML files. Exports SVG and PNG.

1 skill · 7 commands

cathrynlavery/diagram-design 66,757

context7

claudecodex

Up-to-date documentation lookup. Pull version-specific documentation and code examples directly from source repositories into your coding agent's context.

1 MCP server

upstash/context7 64,709

mempalace

claudecodex

AI memory system — mine projects and conversations into a searchable palace. 47 MCP tools, auto-save hooks, guided setup.

3 skills · 6 commands · 1 MCP server · hooks

MemPalace/mempalace 60,536

chrome-devtools-mcp

claude

Reliable automation, in-depth debugging, and performance analysis in Chrome using Chrome DevTools and Puppeteer

8 skills · 1 MCP server

ChromeDevTools/chrome-devtools-mcp 55,181

Maintain trim?

This page updates itself from your repo. Add the badge to your README, or get it Featured to pin it above the organic results with a followed link to your site.

claude & codex plugins5 plugins