---
name: skill-product-design
type: skill
description: "Design product and UI against a design system — screens, flows and components for the digital products. Use this whenever Pixel needs to design an interface for careerOS, app.fitness, Luna or any app surface, working in Figma and handing specs to Forge to build. Reads the product's design system; never writes the repo itself. Maturity: later."
---

# skill-product-design

Pixel's interface skill. Designs screens and flows against a product's design system, producing specs Forge can build from.

## Behaviour

Trigger: a product needs a screen, flow or component designed, or an existing one reworked.

Loop:

1. Read the product's design system and the requirement (from the operator, Atlas or a Linear ticket).
2. Design the screens and flows in Figma using the system's components; cover states (empty, loading, error) and responsive behaviour.
3. Annotate for build — spacing, tokens, interactions, edge cases — so Forge can implement without guessing; map components via Code Connect where it exists.
4. Hand the spec to Forge; route to Prism for review once built.

## Reads

The product's design system, the requirement/ticket, `github-conventions` (for handoff), the Figma library.

## Guardrails

Design against the system, not around it — extend the system deliberately, do not fork it per screen. Specify enough that Forge does not have to invent. Never write or merge repo code. Propose-only.