Learning Design Kit

A small React + Tailwind component package (Button, Input, Card, Badge, Avatar) built to mirror the Design System — Learning Kit Figma file: https://www.figma.com/design/G7JETlWfWF8qrnn9TuBuo0

Built for learning the Figma Make kit workflow end to end: Figma variables and components on one side, this npm package on the other, connected by matching token names and a Guidelines.md file that tells Figma Make how to use everything.

Local development

npm install
npm run dev

Opens a demo page (src/App.jsx) showing every component and variant, with a light/dark toggle.

Publishing (so Figma Make can use it as a Make kit)

This has to be run from your own Terminal — Claude's sandboxes can't reach the npm registry.

1. Log in to npm if you haven't already:

   npm login

2. Check the package name in package.json. It's currently @genaroro/learning-design-kit — the @genaroro scope must match your actual npm username/org, or npm publish will fail with a 403. Run npm whoami to check, and edit package.json's "name" field if it doesn't match.
3. Publish:

   npm publish --access public

   (Scoped packages default to private, which needs a paid npm plan — --access public makes it a free public package instead.)
4. Confirm it's live: npm view <your-package-name>

Using it as a Figma Make kit

Once published:

1. In Figma Make, open the kit assembly flow and add this npm package by name.
2. Add Guidelines.md (already in this repo) as the kit's guidelines file — this is what makes Figma Make follow the component usage rules (when to use primary vs outline, etc.) instead of guessing.
3. Optionally also add the Figma file above as the kit's design reference, so Make can pull matching variables/styles for anything this package doesn't cover.

Folder structure

src/
  tokens.css       — design tokens as CSS variables (Light + Dark)
  index.css        — Tailwind entrypoint, imports tokens.css
  components/      — Button, Input, Card, Badge, Avatar
  App.jsx          — demo page (not part of the published package)
tailwind.config.js — maps Tailwind classes to the CSS variable tokens
Guidelines.md       — usage rules for Figma Make