Core (personio-*)v1.4.0

personio-design

Design org utilities — planning workflows and brand visual-language guidance (logo, color, typography, illustration, layout, web layout)

by Design InfrastructureView on GitHub ↗
designworkflowplanningutilitiesux-writingcontent-designcopypawstyle-guideglossarybrandvisual-languagelogocolortypographyillustrationlayoutwebgridresponsive

personio-design

Design org utilities — planning workflows and brand visual-language guidance.

Installation

claude plugin install personio-design@personio-claude-code-marketplace

What does this plugin do?

Provides skills for the Design org spanning two areas:

  1. Workflow — kicking off new work safely (/plan)
  2. Brand visual language — auto-triggering guidance that fires whenever Claude is working on Personio brand surfaces (decks, marketing pages, social, partner materials), keeping logo, color, typography, illustration, and layout on-brand without you having to ask

Brand skills cover non-product surfaces. For product UI work, see the personio-design-system plugin (ds-color, ds-typography, ds-spacing, etc.).

/plan

Kick off a new task safely by fetching the latest main, creating an isolated git worktree on a new feature branch, and optionally generating an implementation plan.

This is the Claude Code equivalent of the /kickoff Cursor command previously used by designers to start working on minor issues.

What you need

  • A git repository
  • Optionally: a Jira ticket key (TEAM-1234) or a short task description
  • Optionally: Atlassian MCP or acli installed for Jira integration

Quick Start

/plan
/plan TEAM-1234
/plan fix the button hover state on the component library

Example

You have a Jira ticket DS-88 for "Fix avatar size regression in compact mode". You run:

/plan DS-88

Claude fetches the ticket, proposes branch DS-88/fix-avatar-size-regression-compact-mode and worktree .claude/worktrees/DS-88-fix-avatar-size-regression-compact-mode, asks for approval, creates both from origin/main, enters the worktree, and offers to generate a structured implementation plan — all without touching your current working directory.

Why would you want this?

  • Zero disruption — your current work stays untouched; worktrees keep everything isolated
  • Consistent branch naming — enforces TICKET-KEY/description or NO-ISSUE/description conventions, compatible with /ship
  • Jira integration — fetches ticket title automatically to name the branch, no copy-pasting
  • Implementation plan — optional structured plan (tasks, affected files, risks) to align before coding

/setup-personio-web

Idempotent first-time (or repeatable) machine setup for working on personio-web from the design org. Verifies GitHub SSH, installs pnpm / gh / phrase via Homebrew, clones personio-web, and confirms that the personio-design, personio-design-system, personio-eng-frontend, and pr-workflow plugins are installed alongside the required personio-design and Atlassian MCP servers (plus the recommended design-quality MCP). For interactive steps (plugin marketplace registration, MCP OAuth), the skill falls back to clear manual instructions for either the terminal or the Claude desktop app.

What you need

  • macOS
  • GitHub SSH already working (run /setup-github from personio-design-prototype first if not — this is the only hard prerequisite; Homebrew, pnpm, gh, and phrase are installed automatically when missing)

Quick Start

/setup-personio-web

Why would you want this?

  • Idempotent — safe to re-run anytime; already-configured items are reported ✅ and skipped
  • One-shot onboarding — covers tools, repository, plugins, and MCP authentication in a single guided flow
  • Diagnostic-first — every step runs a real check before mutating anything, so the actual state of your machine drives the actions

Auto-triggers when placing, sizing, or co-branding the Personio logo, wordmark, or symbol on brand surfaces.

What you need

  • The Kickstarter Kit Figma file for canonical asset reference (linked from the skill)

Quick Start

There's no slash command — the skill fires on relevant prompts. Examples that trigger it:

"Where should I place the wordmark on this conference deck cover?"
"What's the minimum digital size for the Personio wordmark?"
"How do I lock up our logo with HubSpot for a webinar landing page?"

Example

You're designing a sponsor banner and ask Claude where to put the wordmark on a brand-purple background. The skill applies the logo system rules: white wordmark on dark, clearspace equal to the cap-height of "P", AA contrast verification, and a pointer to the master file in the Kickstarter Kit.

Why would you want this?

  • Catches misuse early — drop shadows, distortion, off-color variants, symbol-vs-wordmark mistakes
  • Consistent partner lockups — codifies the divider pattern and optical-weight matching
  • One canonical reference — links straight to the Kickstarter Kit Logo page

brand-color

Auto-triggers when picking brand colors for marketing, presentations, social, illustration, or any non-product surface.

What you need

  • The Kickstarter Kit Figma file for exact hex values, tint steps, and approved combinations

Quick Start

The skill fires on relevant prompts. Examples:

"What colors should I use for this conference keynote cover?"
"Pair brand purple with one additional color for this campaign."
"Is this hex (#6F2DA8) on-palette?"

Example

You're building a campaign hero and ask Claude to pair brand purple with a complementary color. The skill applies palette rules: pull from the additional palette at a tint or paired with neutral, include Black or White for structure, and verify AA contrast.

Why would you want this?

  • Distinct from product UI tokens — keeps marketing surfaces from drifting into solid.bg.accent.* shorthand
  • Catches off-brand hex — flags values outside the palette
  • Approved gradients only — refuses to invent non-canonical gradient pairs

brand-typography

Auto-triggers when typesetting brand surfaces — marketing pages, decks, social, presentations, print.

What you need

  • The Kickstarter Kit Figma file for exact size, weight, and line-height values per role

Quick Start

The skill fires on relevant prompts. Examples:

"What font should I use for the cover headline of a sales deck?"
"Should the CTA read 'Get Started Today' or 'Get started today'?"
"Is FT Regola Neue OK for body copy on a marketing page?"

Example

You ask Claude to typeset a sales deck cover. The skill applies the brand type roles: FT Regola Neue Semibold for the Display headline, FT Regola Neue Regular for body, sentence case for buttons, left-alignment by default.

Why would you want this?

  • One typeface, used consistently — FT Regola Neue across all roles on brand surfaces; Inter Tight only as a technical fallback in Google Suite
  • Sentence case enforced — catches title case in CTAs and headings
  • No improvised sizes — keeps surfaces on the defined hierarchy

brand-illustration

Auto-triggers when choosing, creating, or commissioning illustrations for Personio brand surfaces.

What you need

  • The Kickstarter Kit Figma file for the live library, categories, and application examples
  • Brand Design team for new commissions

Quick Start

The skill fires on relevant prompts. Examples:

"I need a spot illustration for an empty-state screen — where do I look?"
"Can I commission a 3D render for the campaign hero?"
"What makes an illustration feel on-brand?"

Example

You ask Claude to brief an external illustrator. The skill returns the Personio illustration approach (nature/garden, organic and botanical, calm composition, inclusive human-centred) plus the explicit misuse rules (no mixed styles, no off-palette recoloring, no effects).

Why would you want this?

  • Style integrity — refuses 3D renders, photo collage, or stock-illustration substitutes that dilute the brand
  • Library-first — points to the existing Kickstarter Kit collection before commissioning new work
  • Briefing shortcut — gives external illustrators the same checklist Brand Design uses

brand-layout

Auto-triggers when laying out brand surfaces — marketing pages, decks, social, print.

What you need

  • The Kickstarter Kit Figma file for grid templates and the spacing scale

Quick Start

The skill fires on relevant prompts. Examples:

"What grid should I use for a desktop marketing landing page?"
"I want 14px padding between cards — is that fine?"
"What edge margin should I use on a deck slide?"

Example

You ask Claude to space cards on a marketing page using 14px. The skill catches the off-grid value, recommends 12 or 16 (multiples of 4), and reminds you of the brand spacing scale.

Why would you want this?

  • Everything divisible by 4 — the single most-broken brand rule, applied automatically
  • Right grid for the surface — desktop, tablet, mobile, deck, print each get their own template
  • No mixing with product UI tokens — keeps gap-large/section-large from leaking into marketing surfaces

brand-web

Auto-triggers when building or reviewing web pages and marketing sites — personio.com, campaign landing pages, and other web-based brand surfaces.

What you need

  • The Responsive variable collection (source of truth for grid, spacing, and typography tokens, live in production code)

Quick Start

The skill fires on relevant prompts. Examples:

"What's the main grid for a desktop marketing landing page?"
"How much vertical spacing between sections on tablet?"
"What token should I use for the gap between a card's icon and label?"

Example

You're building a landing page section transition and ask Claude for the right spacing token. The skill applies the section-spacing scale: Spacing/Margin/large (96px desktop / 64px tablet / 32px mobile) for high-impact transitions like hero to first section, Spacing/Margin/default as the baseline elsewhere.

Why would you want this?

  • Responsive by default — every spacing and grid value comes with its desktop/tablet/mobile breakpoint values, not just a single number
  • Token-first — points to the actual Spacing/* tokens from the Responsive variable collection instead of hardcoded pixels
  • Scoped to web — keeps product UI (personio-design-system) and presentation layout out of marketing web surfaces