Download the PHP package carmelosantana/coqui-toolkit-pencil-dev without Composer
On this page you can find all versions of the php package carmelosantana/coqui-toolkit-pencil-dev. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download carmelosantana/coqui-toolkit-pencil-dev
More information about carmelosantana/coqui-toolkit-pencil-dev
Files in carmelosantana/coqui-toolkit-pencil-dev
Package coqui-toolkit-pencil-dev
Short Description Pencil.dev design toolkit for Coqui — create, manipulate, and export .pen design files programmatically. Supports element CRUD, reusable components, design tokens, CSS variable sync, and code export (HTML/CSS, React, SVG).
License MIT
Informations about the package coqui-toolkit-pencil-dev
Pencil.dev Toolkit for Coqui
A Coqui toolkit for creating, manipulating, and exporting Pencil.dev design documents (.pen files). Provides direct JSON-based document manipulation with no API keys or running application needed.
Features
- Document management — create, read, list, validate
.penfiles - Element CRUD — insert, update, move, copy, delete design elements (rectangles, ellipses, text, frames, groups, etc.)
- Reusable components — mark elements as components, create instances with descendant overrides
- Design tokens — manage variables (color, number, string, boolean) with themed values
- CSS sync — import CSS custom properties into Pencil variables and export back
- Code export — generate HTML/CSS, React/Tailwind JSX, SVG, or raw JSON from designs
- Pencil CLI — check CLI status, run commands, generate batch configs
Installation
The toolkit is auto-discovered by Coqui via extra.php-agents.toolkits in composer.json. No additional configuration is needed.
Available Tools
| Tool | Description |
|---|---|
pencil_document |
Create, read, list, validate, and inspect .pen files |
pencil_design |
Insert, get, update, move, copy, and delete design elements |
pencil_component |
Create reusable components and instantiate them as ref elements |
pencil_variable |
Manage design variables (tokens), themes, and CSS import/export |
pencil_export |
Export designs to HTML/CSS, React/Tailwind, SVG, or JSON |
pencil_cli |
Check Pencil CLI status, run commands, generate batch configs |
Usage Examples
Create a Design
Build a Component Library
Import CSS Variables
Export to React
Export to HTML
Export to SVG
The .pen Format
A .pen file is a JSON document with this structure:
Element Types
rectangle, ellipse, line, polygon, path, text, frame, group, ref, icon_font, note, prompt, context
Containers
frame and group can hold children. Frames support flexbox layout with layout, justifyContent, alignItems, gap, and padding.
Components
Any element with reusable: true is a component. ref elements are instances that reference a component and can override properties via descendants.
Variables
Design tokens stored in variables. Referenced in element properties with $variableName syntax. Support themed values.
MCP Live Preview
When Pencil desktop is running with its MCP server, use Coqui's mcp_client toolkit to access live preview and screenshot features:
batch_design— generate designs from promptsget_screenshot— capture design screenshotsget_variables/set_variables— live variable management
Development
License
MIT