← ClaudeAtlas

pen-designlisted

Create high-quality visual designs — websites, app screens, dashboards, slides, marketing materials, social media graphics — using the pen.dev CLI tool. Use this skill whenever the user wants to create, generate, or visualize any kind of UI design, mockup, wireframe, layout, webpage, app screen, presentation slide, poster, banner, or marketing asset. Also use it when the user says things like "design me a...", "make a visual for...", "create a mockup of...", "what would X look like?", or wants to turn an idea into a visual. Even if the user doesn't mention "pen.dev" or "design tool" explicitly — if they want something visual created, this is the skill to use. Also covers working with existing .pen files via the Pen MCP server (mcp__pen__*) — see the Local Addendum for MCP, save, and schema gotchas.
tomcounsell/ai · ★ 19 · Web & Frontend · score 71
Install: claude install-skill tomcounsell/ai
# pen.dev Design Create professional visual designs from natural language descriptions using the pen.dev CLI. pen.dev is a headless design tool that generates `.pen` files (a structured JSON design format) and can export them as images. ## Setup Before designing, make sure the pen.dev CLI is available. ### Check installation ```bash which pen || npx pen version ``` If `pen` is not found, install it: ```bash npm install -g @pen.dev/cli ``` If global install fails due to permissions, install locally instead: ```bash npm install @pen.dev/cli ``` Then run it via `npx pen` (or `./node_modules/.bin/pen`) instead of `pen`. You can learn about the available commands via the `pen --help` command. ### Authentication #### pen.dev user To use the CLI, an authenticated user logged in to pen.dev is required. First, check the current user configuration on the machine with the `pen status` command. If not logged in, there are the following options: - use `pen signup --email you@example.com --username johndoe --name "John Doe"` command, to create a new user. - use `pen login --email you@example.com [--code abc123]` to authenticate an existing or newly created user. - optionally, the `PEN_CLI_KEY` env var can also be used for authentication if its set in your session. #### Claude Code agent The CLI needs auth to run its AI agent for which Claude Code is required. For that there needs to be an authenticated Claude Code user set in the system configuration either via env var or