byjunyoung

Claude Product Skills — Design skill for Claude Code

Design community

Claude Code plugins that keep a shared Figma file in order, and write the product docs around it.

How to install Claude Product Skills

This entry records only its repository, not the path inside it, so there is no exact command to give. Open byjunyoung/claude-product-skills and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Claude Product Skills does

Claude Code plugins that keep a shared Figma file in order, and write the product docs around it.

Alternatives in Design

Theme Swap — Recolour an extracted site's design around a new brand primary 3.6k ★
Claude Code Plugins (jeremylongshore) — Marketplace-style repo bundling instruction-template plugins and MCP plugin packs, with install docs 1.7k ★
Write — Writing Style Skill 609 ★

README

fig · pm

[한국어](README.ko.md) · **English**

Two Claude Code skill bundles — one for design files, one for product docs. They share a repo and install separately.

Plugin	What it does	Skills
fig	Organize, audit, and sync Figma files that already exist	13
pm	Write and verify product specs, then draft, file and reconcile the tasks	5

claude plugin marketplace add byjunyoung/claude-product-skills
claude plugin install fig@byjunyoung
claude plugin install pm@byjunyoung      # if you also write specs

Neither needs the other. Most of what follows is about `fig`; `pm` has [its own section](#pm--product-docs), and the two config values you set when you run both are in [Where the two meet](#where-the-two-meet).

[Where it fits](#where-it-fits) · [Who it's for](#who-its-for) · [What it solves](#what-it-solves) · [How you use it](#how-you-use-it) · [The thirteen skills](#the-thirteen-skills) · [Getting started](#getting-started) · [Configuration](#configuration) · [Troubleshooting](#troubleshooting) · [Design principles](#design-principles) · [pm](#pm--product-docs) · [Where the two meet](#where-the-two-meet)

Where it fits

Figma tooling splits into two halves: the half that draws screens, and the half that keeps drawn files in order.

Figma's official plugins (`figma-use`, `figma-generate-design`, `figma-generate-library`) are the first half. Give them code or a description and they produce screens and components.

This bundle is the second half. It works on files that already exist — checking whether names follow the convention, whether screens sit where they belong, whether flow arrows actually connect, whether changes shipped to engineering made it back into the canonical page. It runs on top of the official plugins, so you use both.

Drawing is the official plugins' job. What