penpot-uiux-design

Name: penpot-uiux-design
Author: github

12kinstalls4.6kforks

How to install penpot-uiux-design?

github/awesome-copilot/penpot-uiux-design

$npx -y skills add github/awesome-copilot --skill penpot-uiux-design

Installs into the current project.

Summary

Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web, mobile, or desktop applications, (2) Building design systems with components and tokens, (3) Designing dashboards, forms, navigation

Files · 1

View on GitHub

SKILL.md

1	# Penpot UI/UX Design Guide
2
3	Create professional, user-centered designs in Penpot using the `penpot/penpot-mcp` MCP server and proven UI/UX principles.
4
5	## Available MCP Tools
6
7	\| Tool \| Purpose \|
8	\| ---- \| ------- \|
9	\| `mcp__penpot__execute_code` \| Run JavaScript in Penpot plugin context to create/modify designs \|
10	\| `mcp__penpot__export_shape` \| Export shapes as PNG/SVG for visual inspection \|
11	\| `mcp__penpot__import_image` \| Import images (icons, photos, logos) into designs \|
12	\| `mcp__penpot__penpot_api_info` \| Retrieve Penpot API documentation \|
13
14	## MCP Server Setup
15
16	The Penpot MCP tools require the `penpot/penpot-mcp` server running locally. For detailed installation and troubleshooting, see [setup-troubleshooting.md](references/setup-troubleshooting.md).
17
18	### Before Setup: Check If Already Running
19
20	Always check if the MCP server is already available before attempting setup:
21
22	1. Try calling a tool first: Attempt `mcp__penpot__penpot_api_info` - if it succeeds, the server is running and connected. No setup needed.
23
24	2. If the tool fails, ask the user:
25	> "The Penpot MCP server doesn't appear to be connected. Is the server already installed and running? If so, I can help troubleshoot. If not, I can guide you through the setup."
26
27	3. Only proceed with setup instructions if the user confirms the server is not installed.
28
29	### Quick Start (Only If Not Installed)
30
31	```bash
32	# Clone and install
33	git clone https://github.com/penpot/penpot-mcp.git
34	cd penpot-mcp
35	npm install
36
37	# Build and start servers
38	npm run bootstrap
39	```
40
41	Then in Penpot:
42	1. Open a design file
43	2. Go to Plugins → Load plugin from URL
44	3. Enter: `http://localhost:4400/manifest.json`
45	4. Click "Connect to MCP server" in the plugin UI
46
47	### VS Code Configuration
48
49	Add to `settings.json`:
50	```json
51	{
52	"mcp": {
53	"servers": {
54	"penpot": {
55	"url": "http://localhost:4401/sse"
56	}
57	}
58	}
59	}
60	```
61
62	### Troubleshooting (If Server Is Installed But Not Working)
63
64	\| Issue \| Solution \|
65	\| ----- \| -------- \|
66	\| Plugin won't connect \| Check servers are running (`npm run start:all` in penpot-mcp dir) \|
67	\| Browser blocks localhost \| Allow local network access prompt, or disable Brave Shield, or try Firefox \|
68	\| Tools not appearing in client \| Restart VS Code/Claude completely after config changes \|
69	\| Tool execution fails/times out \| Ensure Penpot plugin UI is open and shows "Connected" \|
70	\| "WebSocket connection failed" \| Check firewall allows ports 4400, 4401, 4402 \|
71
72	## Quick Reference
73
74	\| Task \| Reference File \|
75	\| ---- \| -------------- \|
76	\| MCP server installation & troubleshooting \| [setup-troubleshooting.md](references/setup-troubleshooting.md) \|
77	\| Component specs (buttons, forms, nav) \| [component-patterns.md](references/component-patterns.md) \|
78	\| Accessibility (contrast, touch targets) \| [accessibility.md](references/accessibility.md) \|
79	\| Screen sizes & platform specs \| [platform-guidelines.md](references/platform-guidelines.md) \|
80
81	## Core Design Principles
82
83	### The Golden Rules
84
85	1. Clarity over cleverness: Every element must have a purpose
86	2. Consistency builds trust: Reuse patterns, colors, and components
87	3. User goals first: Design for tasks, not features
88	4. Accessibility is not optional: Design for everyone
89	5. Test with real users: Validate assumptions early
90
91	### Visual Hierarchy (Priority Order)
92
93	1. Size: Larger = more important
94	2. Color/Contrast: High contrast draws attention
95	3. Position: Top-left (LTR) gets seen first
96	4. Whitespace: Isolation emphasizes importance
97	5. Typography weight: Bold stands out
98
99	## Design Workflow
100
101	1. Check for design system first: Ask user if they have existing tokens/specs, or discover from current Penpot file
102	2. Understand the page: Call `mcp__penpot__execute_code` with `penpotUtils.shapeStructure()` to see hierarchy
103	3. Find elements: Use `penpotUtils.findShapes()` to locate elements by type or name
104	4. Create/modify: Use `penpot.createBoard()`, `penpot.createRectangle()`, `penpot.createText()` etc.
105	5. Apply layout: Use `addFlexLayout()` for responsive containers
106	6. Validate: Call `mcp__penpot__export_shape` to visually check your work
107
108	## Design System Handling
109
110	**Before creating designs, determine if the user has an existing design s

People who liked this also viewed

6 picks

Type

penpot-uiux-design

12kinstalls4.6kforks

View on GitHub

How to install penpot-uiux-design?

github/awesome-copilot/penpot-uiux-design

$npx -y skills add github/awesome-copilot --skill penpot-uiux-design

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Penpot UI/UX Design Guide
2
3	Create professional, user-centered designs in Penpot using the `penpot/penpot-mcp` MCP server and proven UI/UX principles.
4
5	## Available MCP Tools
6
7	\| Tool \| Purpose \|
8	\| ---- \| ------- \|
9	\| `mcp__penpot__execute_code` \| Run JavaScript in Penpot plugin context to create/modify designs \|
10	\| `mcp__penpot__export_shape` \| Export shapes as PNG/SVG for visual inspection \|
11	\| `mcp__penpot__import_image` \| Import images (icons, photos, logos) into designs \|
12	\| `mcp__penpot__penpot_api_info` \| Retrieve Penpot API documentation \|
13
14	## MCP Server Setup
15
16	The Penpot MCP tools require the `penpot/penpot-mcp` server running locally. For detailed installation and troubleshooting, see [setup-troubleshooting.md](references/setup-troubleshooting.md).
17
18	### Before Setup: Check If Already Running
19
20	Always check if the MCP server is already available before attempting setup:
21
22	1. Try calling a tool first: Attempt `mcp__penpot__penpot_api_info` - if it succeeds, the server is running and connected. No setup needed.
23
24	2. If the tool fails, ask the user:
25	> "The Penpot MCP server doesn't appear to be connected. Is the server already installed and running? If so, I can help troubleshoot. If not, I can guide you through the setup."
26
27	3. Only proceed with setup instructions if the user confirms the server is not installed.
28
29	### Quick Start (Only If Not Installed)
30
31	```bash
32	# Clone and install
33	git clone https://github.com/penpot/penpot-mcp.git
34	cd penpot-mcp
35	npm install
36
37	# Build and start servers
38	npm run bootstrap
39	```
40
41	Then in Penpot:
42	1. Open a design file
43	2. Go to Plugins → Load plugin from URL
44	3. Enter: `http://localhost:4400/manifest.json`
45	4. Click "Connect to MCP server" in the plugin UI
46
47	### VS Code Configuration
48
49	Add to `settings.json`:
50	```json
51	{
52	"mcp": {
53	"servers": {
54	"penpot": {
55	"url": "http://localhost:4401/sse"
56	}
57	}
58	}
59	}
60	```
61
62	### Troubleshooting (If Server Is Installed But Not Working)
63
64	\| Issue \| Solution \|
65	\| ----- \| -------- \|
66	\| Plugin won't connect \| Check servers are running (`npm run start:all` in penpot-mcp dir) \|
67	\| Browser blocks localhost \| Allow local network access prompt, or disable Brave Shield, or try Firefox \|
68	\| Tools not appearing in client \| Restart VS Code/Claude completely after config changes \|
69	\| Tool execution fails/times out \| Ensure Penpot plugin UI is open and shows "Connected" \|
70	\| "WebSocket connection failed" \| Check firewall allows ports 4400, 4401, 4402 \|
71
72	## Quick Reference
73
74	\| Task \| Reference File \|
75	\| ---- \| -------------- \|
76	\| MCP server installation & troubleshooting \| [setup-troubleshooting.md](references/setup-troubleshooting.md) \|
77	\| Component specs (buttons, forms, nav) \| [component-patterns.md](references/component-patterns.md) \|
78	\| Accessibility (contrast, touch targets) \| [accessibility.md](references/accessibility.md) \|
79	\| Screen sizes & platform specs \| [platform-guidelines.md](references/platform-guidelines.md) \|
80
81	## Core Design Principles
82
83	### The Golden Rules
84
85	1. Clarity over cleverness: Every element must have a purpose
86	2. Consistency builds trust: Reuse patterns, colors, and components
87	3. User goals first: Design for tasks, not features
88	4. Accessibility is not optional: Design for everyone
89	5. Test with real users: Validate assumptions early
90
91	### Visual Hierarchy (Priority Order)
92
93	1. Size: Larger = more important
94	2. Color/Contrast: High contrast draws attention
95	3. Position: Top-left (LTR) gets seen first
96	4. Whitespace: Isolation emphasizes importance
97	5. Typography weight: Bold stands out
98
99	## Design Workflow
100
101	1. Check for design system first: Ask user if they have existing tokens/specs, or discover from current Penpot file
102	2. Understand the page: Call `mcp__penpot__execute_code` with `penpotUtils.shapeStructure()` to see hierarchy
103	3. Find elements: Use `penpotUtils.findShapes()` to locate elements by type or name
104	4. Create/modify: Use `penpot.createBoard()`, `penpot.createRectangle()`, `penpot.createText()` etc.
105	5. Apply layout: Use `addFlexLayout()` for responsive containers
106	6. Validate: Call `mcp__penpot__export_shape` to visually check your work
107
108	## Design System Handling
109
110	**Before creating designs, determine if the user has an existing design s

People who liked this also viewed

6 picks

Type