Pencil Ui Design
Helps with UI components, design as part of building frontend UIs and user experiences workflows.
Install on your platform
We auto-selected Claude Code based on this skill’s supported platforms.
Run in terminal (recommended)
claude mcp add pencil-ui-design npx -- -y @trustedskills/pencil-ui-design
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"pencil-ui-design": {
"command": "npx",
"args": [
"-y",
"@trustedskills/pencil-ui-design"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
The pencil-ui-design skill enables AI agents to generate and refine user interface layouts using a specialized design tool. It supports creating responsive web components, adjusting color schemes, and iterating on visual designs based on specific feedback.
When to use it
- Rapidly prototyping new dashboard or landing page layouts before handing them off to developers.
- Iterating on UI elements like buttons or cards to match a brand's specific aesthetic guidelines.
- Generating accessible color palettes and ensuring contrast ratios meet WCAG standards automatically.
- Creating mobile-first responsive designs that adapt seamlessly to different screen sizes.
Key capabilities
- Generates complete HTML/CSS structures for various UI components.
- Adjusts layout responsiveness across desktop, tablet, and mobile views.
- Applies custom color themes and typography styles directly within the design environment.
- Provides visual feedback loops to refine designs based on user requirements.
Example prompts
- "Create a responsive navigation bar with a hamburger menu for mobile devices using modern CSS."
- "Design a product card layout that highlights an image, title, price, and 'Add to Cart' button."
- "Refine the color scheme of this dashboard to use a dark mode theme with high-contrast text."
Tips & gotchas
Ensure you provide clear context about the target device or screen size when requesting specific layouts. While the tool generates code, always review the output for semantic correctness before deployment.
Tags
TrustedSkills Verification
Unlike other registries that point to live repositories, TrustedSkills pins every skill to a verified commit hash. This protects you from malicious updates — what you install today is exactly what was reviewed and verified.
Security Audits
| Gen Agent Trust Hub | Pass |
| Socket | Pass |
| Snyk | Pass |
🌐 Community
Passed automated security scans.