skills.rest
tameto
tametoCOMMUNITY
Explore all skills by this author →
GitHub

pencil-design

Manage Pencil design files as version-controlled JSON .pen assets.

Updated Feb 14, 2026
Search Tags:#design#ui#code generation#design tokens#ide integration#ux#pencil
One-click install
npx skills add https://github.com/tameto/AltMe --skill pencil-design-tameto
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pencil-design
Source: https://github.com/tameto/AltMe/tree/main/.claude/skills/pencil-design
Command: npx skills add https://github.com/tameto/AltMe --skill pencil-design-tameto

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the design-to-code workflow by integrating a powerful vector design tool directly into the IDE, enabling seamless creation, management, and synchronization of visual designs with actual code.

Core Features & Use Cases

  • IDE-Integrated Design: Use the Pencil design tool within your IDE for a unified workflow.
  • Design as Code: Manage design files (.pen) as text-based assets in version control, enabling diffs and collaboration.
  • AI-Powered Design Operations: Interact with designs programmatically via MCP tools, allowing AI agents to create, modify, and analyze designs.
  • Component System: Build and reuse design components, mirroring code component practices.
  • Design Tokens: Define and manage design variables (colors, spacing, typography) for consistent theming and branding.
  • Use Case: An AI agent can be instructed to create a new user profile screen by generating .pen files, defining components, and then generating corresponding React Native code, all within the IDE.

Quick Start

Use the pencil-design skill to create a new Frame node named 'UserProfile' with a width of 390 and height of 844.

Frequently Asked Questions about pencil-design

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

FAQPage Schema
How do I manage design files in version control like code?▼

You can manage design files in version control by using JSON-based `.pen` files. This approach treats designs as text-based assets, enabling diffs and collaboration directly within your IDE.

What is the Design as Code approach for UI development?▼

Design as Code integrates a vector design tool directly into your IDE, using JSON-based files managed in version control. This synchronizes visual designs with actual code through AI-driven operations.

Can I use AI to create and update design elements programmatically?▼

Yes, AI agents can create, update, and retrieve design elements programmatically via MCP tools. This allows automated design operations like generating frames and defining components within the IDE.

How do I maintain consistent theming and branding across UI components?▼

You can define and manage design tokens as variables for colors, spacing, and typography. This ensures consistent theming across a component-based design system within your IDE.

Does IDE integration support generating code from vector designs?▼

Yes, IDE integration supports generating code from vector designs. An AI agent can generate `.pen` files, define components, and produce corresponding code like React Native, all within the IDE.

What is the best way to synchronize design systems with code components?▼

The best way to synchronize design systems with code is using a component system that mirrors code component practices. This enables unified creation and management of visual designs alongside actual code.

Related Skills

Explore More Design & Creative Skills→
zts212653zts212653
2.6k

pencil-design

Convert .pen design files into React/Tailwind components.

Community
Intermediate
phrazzldphrazzld
13

pencil-to-code

Convert .pen design files into React and Tailwind CSS code.

Community
Intermediate
Canhada-LabsCanhada-Labs
2

Design System & Component Architecture

Governs design tokens and component architecture standards for frontend development and review workflows.

Official
Advanced
gbasingbasin
7

figma-to-react

Convert Figma designs to React components with Tailwind CSS.

Community
Advanced