ui-design

Name: ui-design
Availability: InStock
Author: lepahc

Apply Pencil MCP design conventions to kynetic-spec web UI canvases.

1|2|Updated Jan 16, 2026

Search Tags:#workflow #canvas #ui-design #design-guidelines #pencil-mcp #kynetic-spec

Ready to run

npx skills add https://github.com/lepahc/kynetic-spec --skill ui-design-lepahc

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/lepahc/kynetic-spec/tree/main/.claude/skills/ui-design
Command: npx skills add https://github.com/lepahc/kynetic-spec --skill ui-design-lepahc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Pencil MCP conventions and canvas workflows provide a standardized reference for designing kynetic-spec web UI, reducing ambiguity and ensuring consistent results across teams.

Core Features & Use Cases

Pencil MCP conventions and canvas workflows establish consistent UI design standards for the kynetic-spec web UI.
Workflow steps guide designers from editor state to final UI canvas, including opening documents, loading guidelines, snapshotting layouts, and iterating designs.
Use Case: designers apply these conventions when outlining dashboards, task lists, and component canvases to maintain a cohesive design language.

Quick Start

Open design.pen and begin applying Pencil MCP conventions to create the first UI canvas.

Frequently Asked Questions about ui-design

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

FAQPage Schema

How do I apply Pencil MCP design conventions to create a web UI canvas?▼

To apply Pencil MCP design conventions for web UI canvas creation, open the design document, load the guidelines, snapshot the initial layout, and iterate the design while maintaining consistent standards across pages like Dashboard, Tasks, and Specs.

What are UI design guidelines for standardizing kynetic-spec web pages?▼

UI design guidelines for kynetic-spec provide standardized Pencil MCP conventions and canvas workflows, reducing ambiguity and ensuring consistent design results across teams when outlining dashboards, task lists, and component canvases.

How do I validate design guidelines against an existing kynetic-spec canvas?▼

To validate design guidelines against an existing kynetic-spec canvas, load the Pencil MCP conventions into the editor, snapshot the current layout, and check the design alignment for pages like Dashboard and Specs to ensure cohesive results.

Do I need a specific editor state to start designing kynetic-spec web UI pages?▼

You need an active editor state to start designing kynetic-spec web UI pages. The workflow begins by opening the design document and loading the Pencil MCP guidelines to ensure the canvas is initialized with the correct conventions.

Can I use these canvas workflows for both Dashboard and Tasks page designs?▼

Yes, you can use these canvas workflows for both Dashboard and Tasks page designs. The Pencil MCP conventions are applicable across all kynetic-spec design tasks to maintain a unified design language throughout the web UI.