personio-design-prototype

Your prototype manager that handles all the git complexity behind the scenes, so designers can focus on the outcomes, not the tooling.

Installation

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

What does this plugin do?

personio-design-prototype replaces the Lighthouse macOS desktop app. It brings all the same prototype management features into Claude Code — the tool you're already using. No separate app, no tray icon, no context switching.

If you've never used the terminal or git before, that's fine. Claude guides you through everything in plain language.

/my-prototypes

See all available prototypes. Your own branches appear at the top. The one you currently have open is highlighted.

What you need:

• prototype-playground cloned to ~/src/prototype-playground (run /setup-github if you haven't done this)

Quick Start:

/my-prototypes

Example:

/my-prototypes

📋 Prototypes in prototype-playground

✅ Currently open: your-name/checkout-flow

YOUR PROTOTYPES
  • checkout-flow   ← currently open
  • navigation-v2

EVERYONE'S PROTOTYPES
  • sarah/hero-redesign
  • tom/onboarding-flow
  ...

Why would you want this? You want to see what prototypes exist and find one to switch to or build on.

/new-prototype

Create a new prototype branch. Your username is added automatically. The branch is pushed to GitHub and opened in VS Code.

What you need:

• ~/src/prototype-playground set up (run /setup-github first if needed)

Quick Start:

/new-prototype checkout-flow-v2
/new-prototype "navigation redesign"

Example:

/new-prototype navigation redesign

→ I'll create a prototype called navigation-redesign
  Full branch name: your-name/navigation-redesign

✅ Your new prototype navigation-redesign is ready and open in VS Code!
When you're ready to share it, run /share-prototype.

Why would you want this? You want to start a new design exploration and have it ready to work on in VS Code immediately.

/switch-prototype

Switch to a different prototype. Any unsaved work is stashed automatically and restored after the switch.

What you need:

• ~/src/prototype-playground set up

Quick Start:

/switch-prototype sarah/hero-redesign
/switch-prototype hero-redesign

Example:

/switch-prototype sarah/hero-redesign

→ You have some unsaved changes — I'll save them temporarily and restore them after switching.
✅ Switched to hero-redesign and opened it in VS Code.

Why would you want this? You want to look at or build on someone else's prototype, or switch between your own branches.

/share-prototype

Commit your current work, push to GitHub, and open Harbor ready to write your post.

What you need:

• To be on a prototype branch (not main)
• ~/src/prototype-playground set up

Quick Start:

/share-prototype

Example:

/share-prototype

→ Here's what's in your prototype: 3 files changed, 1 new file (Button.tsx)
→ What did you build? (I'll use this as the save message)
  You: "added new button variants"

✅ Your prototype has been saved and pushed to GitHub.
Harbor is opening in your browser — write up what you built and hit publish.

Why would you want this? You've finished a design exploration and want to share it with the team on Harbor.

/preview-prototype

Push your current work and get a live preview URL back. CI builds the preview automatically — no Harbor post needed.

What you need:

• To be on a prototype branch (not main)
• ~/src/prototype-playground set up

Quick Start:

/preview-prototype

Example:

/preview-prototype

→ Here's what's in your prototype: 2 files changed
→ What did you change? (I'll use this as the save message)
  You: "tweaked spacing on card"

⏳ CI is building your preview — this usually takes a minute or two. I'll let you know when it's ready.

✅ Your preview is ready!

This build: https://prototype-playground-abc123.vercel.app
Persistent link (always latest): https://prototype-playground-your-name-checkout-flow.vercel.app

Share the persistent link — it stays the same every time you push.

Why would you want this?

• You want to send a live link in Slack or a Jira comment without writing a Harbor post
• You want to check your prototype in a real browser before committing to sharing it
• You're iterating quickly and need a shareable URL after each push

/remix-prototype

Fork someone else's prototype into your own branch so you can build on top of it. This is the equivalent of clicking "Remix" on a Harbor post.

What you need:

• ~/src/prototype-playground set up

Quick Start:

/remix-prototype sarah/hero-redesign
/remix-prototype prototype-playground/sarah/hero-redesign

Example:

/remix-prototype sarah/hero-redesign

→ I'll create your remix as your-name/hero-redesign (based on sarah/hero-redesign)
✅ Your remix hero-redesign is ready and open in VS Code!
Make it your own, then use /share-prototype when you're ready to post it.

Why would you want this? You've seen a prototype on Harbor and want to iterate on it or take it in a different direction.

/links

Show all internal Personio design team links — Harbor, Design Guidelines, AI Assistants, and support channels.

Quick Start:

/links
/links harbor
/links brand assistant

Example:

/links

Harbor: https://harbor.personio.design
Design Guidelines: https://personio.design

AI Assistants:
  • Brand Strategy (Langdock)
  • Writing Content (Langdock)
  • Sales Calls (Gong ICP)
  • General Design Queries (Dori)

Channels & Support:
  • AI Prototyping Project (Harbor)
  • #cir_design_system (Slack)
  • Langdock Support (Slack)
  • Request Tooling Access (Jira)

Why would you want this? You want to quickly find and open an internal tool or resource without hunting through Notion or bookmarks.

/setup-github

First-time setup for prototype work. Walks you step-by-step through creating an SSH key in 1Password, configuring git, and connecting to GitHub.

What you need:

• 1Password installed
• A Personio GitHub account

Quick Start:

/setup-github

Why would you want this? You're a new starter and need to get your machine ready to create and share prototypes. Claude will check your existing setup and only guide you through the steps that are still needed.

/add-beta

Install a beta/<framework> branch (ControlBar, AppFrame, …) into your current prototype for the first time. Records the install in .prototype-sources.json at the prototype root so /sync-beta can keep it up to date later. With no argument, Claude shows a picker.

What you need:

• A clean working tree on your prototype branch (commit or stash first)
• prototype-playground cloned to ~/src/prototype-playground

Quick Start:

/add-beta control-framework
/add-beta beta/app-frame
/add-beta            # picker mode

Example:

/add-beta control-framework

✅ Added beta/control-framework to your-name/checkout-flow.
 18 files changed, 612 insertions(+)

Run npm run dev to see the framework in your prototype.

Why would you want this? Shared UI frameworks live on their own beta/* branches. /add-beta pulls a framework into your prototype as a plain git merge, then records the install in a tracker file at the prototype root. From that point on, /sync-beta knows the framework is part of your prototype and can keep it current.

/sync-beta

Pull the latest updates from every beta/<framework> branch that's already integrated into your current prototype. The skill reads .prototype-sources.json at the prototype root to know what's integrated and at which commit, then merges each entry that has new commits on origin and updates the recorded sha.

What you need:

• A clean working tree on your prototype branch (commit or stash first)
• prototype-playground cloned to ~/src/prototype-playground
• At least one beta installed via /add-beta

Quick Start:

/sync-beta

Example:

/sync-beta

Syncing in your-name/checkout-flow:

  • control-framework → 3 files changed, 47 insertions(+), 12 deletions(-)
  • app-frame → already up to date

✅ Sync complete on your-name/checkout-flow.

  • control-framework — 3 files changed, 47 insertions(+), 12 deletions(-)
  • app-frame — already up to date

Why would you want this? Shared UI frameworks evolve on their own beta/* branches. When you want your prototype to inherit the latest fixes or new features, this pulls them in via a safe plain merge and updates the recorded commit so the next sync is incremental. It specifically refuses the one-liner subtree pull that has historically deleted hundreds of unrelated files.

On conflicts: You can edit framework files in your prototype freely. When upstream and your edits touch the same lines, sync first auto-resolves a few well-known patterns (the prototype-flags file, package.json dependency lists, package-lock.json regeneration). For anything else, sync enters per-file triage: it reads both sides, summarizes the intent of each change, and asks you per file whether to keep yours, take theirs, combine both (Claude proposes a merge for your review), or finish in VS Code. If you pick VS Code for any file, the merge is paused — resolve, commit, re-run; already-current entries are skipped on re-run.

/add-replica

Install a replica/<name> branch (mirrors of Personio surfaces — sidebar, dashboard, EO flow, performance cycle, …) into your current prototype for the first time. Records the install in .prototype-sources.json. With no argument, Claude shows a picker. Auto-resolves the typical prototypeFlags conflict.

What you need:

• A clean working tree on your prototype branch
• prototype-playground cloned to ~/src/prototype-playground

Quick Start:

/add-replica eo
/add-replica replica/performance
/add-replica            # picker mode

Example:

/add-replica eo

✅ Added replica/eo to your-name/checkout-flow.
 42 files changed, 1,830 insertions(+)

Run npm run dev to see your prototype with the replica's foundation.

Why would you want this? Starting a prototype from scratch is a blank page. Replicas give you a believable foundation — the actual sidebar, the actual EO flow — to iterate on top of. /add-replica brings one in as a plain merge so you can edit anything afterwards, and records the install for /sync-replica.

/sync-replica

Pull the latest updates from every replica/<name> branch already integrated into your current prototype. Same JSON-tracker model as /sync-beta. Auto-resolves the typical prototypeFlags conflict.

What you need:

• A clean working tree on your prototype branch
• prototype-playground cloned to ~/src/prototype-playground
• At least one replica installed via /add-replica

Quick Start:

/sync-replica

Example:

/sync-replica

Syncing in your-name/checkout-flow:

  • eo → 4 files changed, 22 insertions(+), 5 deletions(-)
  • performance → already up to date

✅ Sync complete on your-name/checkout-flow.

  • eo — 4 files changed, 22 insertions(+), 5 deletions(-)
  • performance — already up to date

Why would you want this? Replicas evolve over time as the underlying Personio surfaces change. When you want your prototype to inherit the latest replica updates, this pulls them in incrementally — only the replicas already in your prototype, only the commits since your last sync.

On conflicts: Same model as /sync-beta: auto-resolvers run first (flags, package.json, package-lock.json); anything left enters per-file triage where Claude summarizes both sides' intent and asks you to keep yours, take theirs, combine, or finish in VS Code. The "combine" option always shows the proposed merge before committing, so Claude never silently picks for you on the tricky stuff.

Migrating from Lighthouse

Related plugins

personio-design-prototype covers prototype workflows — creating, switching, sharing, and remixing branches in prototype-playground.

If you're building production components in personio-web, install the design-system plugin separately:

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

It provides design system knowledge (colour, typography, accessibility, patterns), component-building agents, and the Personio Design MCP. The two plugins are independent — install one or both depending on your role.