Plugin Claude Code
A design-to-development integration tool based on Pencil, a design workflow platform. It supports design workflow automation, design-system management, design review, and converting designs into React and Tailwind code.
Agent
Use this agent when the user wants to convert Pencil designs to React + Tailwind code, extract code from designs, or implement designs in code. Triggered when user asks for code generation from design.
Agent
Use this agent when design work is completed and needs quality validation, when the user asks for design review, or when checking design consistency. Proactively use after significant design changes.
Command
A command for creating a new design screen or interface component.
Command
A command that turns a selected design node into a reusable component. A component is a self-contained interface part that can be used in more than one place.
Command
A command for reviewing a design's visual quality, layout, consistency, and accessibility.
Command
A command for generating or updating a style guide. The supplied information does not describe its output or supported project types.
Command
A command that converts a selected design node into React and Tailwind code. React is a JavaScript interface library, and Tailwind is a CSS styling toolkit.
Skill Claude CodeCodex
This skill should be used when the user asks to "코드 변환", "React 생성", "Tailwind 코드", "컴포넌트 코드", "디자인을 코드로", ".pen 파일에서 코드", or wants to convert Pencil designs into React + Tailwind CSS code.
Skill Claude CodeCodex
This skill should be used when the user asks about "pencil 사용법", ".pen 파일", "노드 타입", "레이아웃 시스템", "pencil mcp", "batchdesign", "batchget", or wants to understand how to work with Pencil design files. Provides comprehensive guidance for using Pencil MCP tools effectively.