skills.rest
ForgePlan
ForgePlanOFFICIAL
Explore all skills by this author →
WebsiteGitHub

canvas-design

Design and extend Pencil design systems with atomic design principles.

3|Updated Apr 3, 2026
Search Tags:#design system#atomic design#ux design#ui design#pencil
One-click install
npx skills add https://github.com/ForgePlan/marketplace --skill canvas-design-forgeplan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canvas-design
Source: https://github.com/ForgePlan/marketplace/tree/main/plugins/agents-canvas/skills/canvas-design
Command: npx skills add https://github.com/ForgePlan/marketplace --skill canvas-design-forgeplan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires pencil, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

The canvas-design Skill simplifies the process of designing and extending a .pen Design System, reducing the complexity of Pencil design workflows and providing guidance for best practices.

Core Features & Use Cases

  • Pencil Design System Management: Manage and extend your .pen Design System with ease.
  • Component Customization: Customize components without detaching them, maintaining the Design System's integrity.
  • Layout and Design Rules: Follow UX laws and best practices for optimal design outcomes.
  • Use Case: When you need to design a new component for your design system, use canvas-design to follow best practices and ensure your design is user-friendly and accessible.

Quick Start

Use the canvas-design skill to design a new button component in your design system.

To create a new button, run the following command:

canvas-design create-button --name "Button/Default" --content "Click Me"

Frequently Asked Questions about canvas-design

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

FAQPage Schema
How do I extend a Pencil design system with new components?▼

You can extend a Pencil design system by applying atomic design principles to build and customize new UI components. This ensures components remain attached to the system, preventing structural fragmentation while maintaining layout integrity.

Can I customize Pencil UI components without detaching them from the design system?▼

Yes, you can customize Pencil UI components without detaching them from the design system. This preserves the design system's integrity, ensuring global updates and theming still apply correctly across all component instances.

What are the best practices for applying UX laws to UI design in Pencil?▼

Applying UX laws to UI design in Pencil involves adhering to established layout rules and best practices. This approach automates layout management and ensures your interface design is accessible, user-friendly, and structurally sound.

Do I need an existing .pen design system library to use atomic design principles?▼

Yes, atomic design principles in this context require an existing .pen design system library and the Pencil application. These dependencies provide the foundational components and environment needed to manage and extend your UI.

When should I use atomic design for my UI component workflow?▼

Atomic design should be used when you need to scale a UI component workflow systematically. It breaks interfaces down into reusable elements, making it ideal for managing complex design systems and ensuring consistent UX outcomes.

Why does my Pencil component layout break when I modify its theme?▼

Pencil component layouts may break during theming if components are detached or design rules are ignored. Following automated layout management and UX laws ensures proper structure and prevents visual fragmentation during customization.

Related Skills

Explore More Design & Creative Skills→
iilleagliilleagl

pen-design-generator

Generate Pencil .pen design drafts from UI requirements using DevUI components.

Community
Advanced
zts212653zts212653
2.6k

pencil-design

Convert .pen design files into React/Tailwind components.

Community
Intermediate
Higashi-KotaHigashi-Kota

accessibility-review

Audit design system tokens and components for WCAG compliance.

Community
Intermediate
jinwoonghongjinwoonghong

moai-domain-uiux

Guide UI/UX design systems with W3C DTCG 2025.10 tokens and Atomic Design.

Community
Advanced