# Component sticker pack

A set of simple component-like shapes used to think through interface building blocks without committing too early to a full UI kit.

## Use this with an AI agent

Use this as context to turn rough product ideas into a small, reusable component vocabulary before designing polished screens.

Paste this file into Claude, ChatGPT, Cursor, Codex, Gemini, or another AI agent before a design critique, implementation pass, content review, or product-planning session.

## What is included

- Primitive inventory
- State and hierarchy prompts
- Design-system implementation notes

## Tools

- Figma
- Design systems
- Component thinking
- Interface sketching

## Skills

- UI primitives
- Reusable components
- Design systems
- Visual abstraction

## What this is

A loose set of interface stickers: circles, cards, panels, markers, buttons, and states. They are deliberately simple so they can stand in for bigger product ideas during early exploration.

## What it demonstrates

The useful part is the abstraction. Product work often starts with messy flows, not polished screens. A sticker language helps map structure, state, and emphasis before the visual system gets heavy.

## Design notes

The shapes use strong contrast and a small palette so they remain readable at thumbnail size. The goal is to make the system feel playful without losing utility.

## How it connects to product work

This is the same thinking behind useful design systems: define primitives, combine them into patterns, and keep enough flexibility for real product constraints.

## What to look for

### Recruiter signal

Shows systems thinking: reducing product UI into primitives, states, and repeatable patterns before over-investing in final visuals.

### Useful output

A starter inventory for cards, markers, buttons, panels, status dots, and emphasis patterns that can become a real component library.

### Next iteration

Package the stickers as a small Figma community file or map them to React/Vue components in the public starter kits.

## Related links

- Design Tokens Starter JSON: /resources/design-tokens-starter-json
- Vue Component Starter Kit: /resources/vue-component-starter-kit

---

Source: JP Casabianca Play study
URL: /play/component-sticker-pack