PHPackages                             carmelosantana/coqui-toolkit-pencil-dev - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. carmelosantana/coqui-toolkit-pencil-dev

ActiveLibrary

carmelosantana/coqui-toolkit-pencil-dev
=======================================

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).

v0.1.1(1mo ago)00MITPHPPHP ^8.4

Since Apr 9Pushed 1mo agoCompare

[ Source](https://github.com/carmelosantana/coqui-pencil-dev)[ Packagist](https://packagist.org/packages/carmelosantana/coqui-toolkit-pencil-dev)[ RSS](/packages/carmelosantana-coqui-toolkit-pencil-dev/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (3)Versions (3)Used By (0)

Pencil.dev Toolkit for Coqui
============================

[](#pencildev-toolkit-for-coqui)

A Coqui toolkit for creating, manipulating, and exporting [Pencil.dev](https://pencil.dev) design documents (`.pen` files). Provides direct JSON-based document manipulation with no API keys or running application needed.

Features
--------

[](#features)

- **Document management** — create, read, list, validate `.pen` files
- **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
------------

[](#installation)

```
composer require coquibot/coqui-toolkit-pencil-dev
```

The toolkit is auto-discovered by Coqui via `extra.php-agents.toolkits` in `composer.json`. No additional configuration is needed.

Available Tools
---------------

[](#available-tools)

ToolDescription`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 configsUsage Examples
--------------

[](#usage-examples)

### Create a Design

[](#create-a-design)

```
pencil_document(action: "create", path: "landing-page.pen", width: 1440, height: 900)
pencil_design(action: "insert", path: "landing-page.pen", type: "text", parent_id: "", properties: '{"content": "Hello World", "fontSize": 48, "fontWeight": 700}')

```

### Build a Component Library

[](#build-a-component-library)

```
# Mark an element as a reusable component
pencil_component(action: "create", path: "design.pen", component_id: "", name: "Primary Button")

# Create an instance with overrides
pencil_component(action: "instantiate", path: "design.pen", component_id: "", descendants: '{"label_id": {"content": "Submit"}}')

```

### Import CSS Variables

[](#import-css-variables)

```
pencil_variable(action: "import_css", path: "design.pen", css: ":root { --primary: #3B82F6; --font-size-base: 16px; }")

```

### Export to React

[](#export-to-react)

```
pencil_export(action: "react", path: "design.pen", component_name: "HeroSection", output_path: "HeroSection.jsx")

```

### Export to HTML

[](#export-to-html)

```
pencil_export(action: "html", path: "design.pen", output_path: "preview.html")

```

### Export to SVG

[](#export-to-svg)

```
pencil_export(action: "svg", path: "design.pen", output_path: "icon.svg")

```

The .pen Format
---------------

[](#the-pen-format)

A `.pen` file is a JSON document with this structure:

```
{
    "version": "1",
    "children": [
        {
            "id": "frame-1",
            "type": "frame",
            "width": 1440,
            "height": 900,
            "layout": "vertical",
            "children": [...]
        }
    ],
    "variables": {
        "primary": { "type": "color", "value": "#3B82F6" }
    },
    "themes": {
        "mode": { "Light": true, "Dark": false }
    }
}
```

### Element Types

[](#element-types)

`rectangle`, `ellipse`, `line`, `polygon`, `path`, `text`, `frame`, `group`, `ref`, `icon_font`, `note`, `prompt`, `context`

### Containers

[](#containers)

`frame` and `group` can hold children. Frames support flexbox layout with `layout`, `justifyContent`, `alignItems`, `gap`, and `padding`.

### Components

[](#components)

Any element with `reusable: true` is a component. `ref` elements are instances that reference a component and can override properties via `descendants`.

### Variables

[](#variables)

Design tokens stored in `variables`. Referenced in element properties with `$variableName` syntax. Support themed values.

MCP Live Preview
----------------

[](#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 prompts
- `get_screenshot` — capture design screenshots
- `get_variables` / `set_variables` — live variable management

Development
-----------

[](#development)

```
# Install dependencies
composer install

# Run tests
composer test

# Static analysis
composer analyse
```

License
-------

[](#license)

MIT

###  Health Score

37

—

LowBetter than 83% of packages

Maintenance94

Actively maintained with recent releases

Popularity0

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity42

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~1 days

Total

2

Last Release

32d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/597820?v=4)[Carmelo Santana](/maintainers/carmelosantana)[@carmelosantana](https://github.com/carmelosantana)

---

Top Contributors

[![carmelosantana](https://avatars.githubusercontent.com/u/597820?v=4)](https://github.com/carmelosantana "carmelosantana (2 commits)")

---

Tags

exportcomponentsdesigntoolkitphp-agentscoquidesign-tokenspencilpen-format

###  Code Quality

TestsPest

Static AnalysisPHPStan

Type Coverage Yes

### Embed Badge

![Health badge](/badges/carmelosantana-coqui-toolkit-pencil-dev/health.svg)

```
[![Health](https://phpackages.com/badges/carmelosantana-coqui-toolkit-pencil-dev/health.svg)](https://phpackages.com/packages/carmelosantana-coqui-toolkit-pencil-dev)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)