Pawsome — From Figma to vibe-coded production

---

This project started as an extension of an already existing brand project. Rather than starting from scratch, I used it as a base and continued working on it as a separate project, this time shifting the focus entirely to the technical side. How to vibe-code a design systems to production.

https://pawsome.carolines.design/

Background

The exploration included working with Figma variables mapped from JSON tokens to aliases and semantic purpose layers, connecting the design to a live codebase via Figma MCP. The development workflow was built around a GitHub → Vercel pipeline for automatic deployments, with the entire process driven by vibe coding — using AI to bridge the gap between design decisions and production code.

My Process 

1. Design Tokens

AI prompted brand colors and scales into a JSON file, mapped to aliases and then to semantic usage purposes using Token Studio. Imported into Figma variables.

2. Figma Components 

Built components in Figma with scoped variables applied to each element.

3. Figma MCP

Connected Figma to AI to read design context, components and tokens directly.

4. AI Setup

Configured Claude Code and Cursor as the development environment. Imported the JSON token files from Figma and set up a web based design system.

4. React Components

Used Claude Code in the terminal to vibe code React components directly from the Figma design.

4. GitHub + Vercel

Pushed the project to a GitHub repository, making the code versioned and ready for deployment. Connected GitHub to Vercel for automatic deployments. Every push to GitHub triggers a new deploy, keeping the live site always up to date. Pointed pawsome.carolines.design to Vercel via my private website hosting.