swatisr-design-system

v1.0.8

Published

13 days ago

AI-driven design system with Figma tokens, shadcn components, and Cursor AI integration

0High
0Medium
0Low

swati-npm

design-system figma-tokens shadcn cursor-ai tailwind react components

@yourcompany/design-system

AI-driven design system with Figma design tokens, shadcn/ui components, and Cursor AI integration.

Build consistent, token-based UIs using AI prompting. Non-designers can generate beautiful interfaces that automatically follow your design system.

🚀 Quick Start

Installation

npm install @yourcompany/design-system

Setup (3 steps)

1. Import styles in your app layout

// app/layout.tsx (Next.js) or main entry file
import '@yourcompany/design-system/tokens';
import '@yourcompany/design-system/styles';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

2. Copy Cursor AI rules (optional but recommended)

cp node_modules/@yourcompany/design-system/.cursorrules .cursorrules

3. Start using components

import { Button, Card, Input } from '@yourcompany/design-system';

export default function MyPage() {
  return (
    <Card>
      <h1>Welcome!</h1>
      <Input placeholder="Enter your email" />
      <Button>Submit</Button>
    </Card>
  );
}

That's it! You're ready to go. ✅

📦 What's Included

Components (shadcn/ui)

Button - Primary, secondary, outline, ghost, link variants
Card - Container with header, title, content sections
Input - Text input with design tokens
Badge - Status indicators and labels
Select - Dropdown select menus
Dialog - Modal dialogs
Tabs - Tabbed navigation
Table - Data tables with headers
Avatar - User avatars with fallbacks
Dropdown Menu - Context menus
Navigation Menu - Site navigation
Tooltip - Hover tooltips

Custom Components

StatsCard - Metric cards with change indicators
ThemeSwitcher - Light/dark mode toggle

Design Tokens

Colors: Accent, neutral, semantic (text, background, borders, status)
Spacing: Consistent scale (4px to 128px)
Typography: Font sizes, line heights, weights, Poppins font family
Radii: Border radius values (sm, md, lg, full)

See docs/TOKEN_MAPPING.md for complete token reference.

💡 Usage Examples

Basic Component Usage

import { Button, Card, CardHeader, CardTitle, CardContent } from '@yourcompany/design-system';

function Dashboard() {
  return (
    <div className="p-8">
      <Card>
        <CardHeader>
          <CardTitle>Dashboard</CardTitle>
        </CardHeader>
        <CardContent>
          <Button>Create New</Button>
        </CardContent>
      </Card>
    </div>
  );
}

Using Design Tokens

function CustomSection() {
  return (
    <div 
      style={{ 
        padding: 'var(--token-space-6)',
        backgroundColor: 'var(--token-bg-subtle)',
        borderRadius: 'var(--token-radius-md)'
      }}
    >
      <h2 style={{ color: 'var(--token-text-heading)' }}>
        Custom Section
      </h2>
      <p style={{ color: 'var(--token-text-body)' }}>
        Using design tokens for consistency
      </p>
    </div>
  );
}

With Tailwind (recommended)

The package includes a globals.css that maps tokens to Tailwind utilities:

function Hero() {
  return (
    <div className="p-8 bg-token-bg-default">
      <h1 className="text-3xl font-bold text-text-heading mb-4">
        Welcome
      </h1>
      <Button className="w-full">Get Started</Button>
    </div>
  );
}

🤖 Using with Cursor AI

This design system is optimized for AI prompting. The included .cursorrules file teaches Cursor AI to:

✅ Use existing components instead of creating custom ones
✅ Apply design tokens for all styling
✅ Follow spacing and color conventions
✅ Generate accessible, type-safe code
❌ Prevent hardcoded colors or spacing
❌ Block creation of components outside the design system

Example Prompts

✅ Good prompts:

"Create a user profile page with stats cards and edit button"
"Build a settings form with name, email inputs and save button"
"Generate a dashboard with 4 metric cards and a data table"

Cursor will automatically use components from this package and apply design tokens.

❌ Bad prompts:

"Create a blue button with 20px padding"  
→ Cursor will suggest using Button component instead

"Make a custom dropdown component"
→ Cursor will suggest using existing Select or Dropdown Menu

🎨 Design Token System

All design tokens are CSS variables with the --token- prefix:

Colors

--token-text-heading      /* Primary heading color */
--token-text-body         /* Body text color */
--token-text-body-muted   /* Muted text */
--token-bg-default        /* Page background */
--token-bg-subtle         /* Subtle background */
--token-bg-surface        /* Card/surface background */
--token-color-accent-500  /* Brand accent color */
--token-border-default    /* Default border color */
--token-status-success-bg /* Success state background */
--token-status-error-bg   /* Error state background */

Spacing

--token-space-1   /* 4px */
--token-space-2   /* 8px */
--token-space-3   /* 12px */
--token-space-4   /* 16px */
--token-space-6   /* 24px */
--token-space-8   /* 32px */
--token-space-12  /* 48px */
--token-space-16  /* 64px */

Typography

--token-font-12           /* 12px */
--token-font-14           /* 14px */
--token-font-16           /* 16px (body) */
--token-font-18           /* 18px */
--token-font-24           /* 24px */
--token-font-36           /* 36px (large heading) */
--token-font-family-sans  /* Poppins */
--token-line-1-5          /* Line height 1.5 */

See full token reference: docs/TOKEN_MAPPING.md

🔄 Updating the Design System

When the design system is updated:

npm update @yourcompany/design-system

This automatically:

✅ Updates all components
✅ Updates design tokens
✅ Updates documentation
✅ Your app reflects new styles without code changes

📚 Documentation

Components Guide - Full component reference
Token Mapping - Complete token documentation
Figma Workflow - How tokens are created
Templates - Page templates and patterns
Design System Overview - Architecture and philosophy

🛠️ Development

Regenerate Tokens

If you modify src/tokens/figma-tokens.json:

npm run tokens

This regenerates src/tokens/tokens.css from the JSON source.

TypeScript

The package includes TypeScript definitions for all components. Your IDE will provide full autocomplete and type checking.

🎯 For Non-Designers

This package is designed for engineers and PMs who need to build UIs without deep design knowledge.

What you CAN do:

✅ Use all components
✅ Compose components into pages
✅ Use design tokens for custom styling
✅ Let Cursor AI generate pages for you
✅ Add business logic and interactions

What you CANNOT do:

❌ Create new token values
❌ Hardcode colors or spacing
❌ Override component styles
❌ Create components outside the design system

The .cursorrules file enforces these constraints automatically when using Cursor AI.

🏢 For Companies

Benefits

Speed: Build UIs in minutes with AI prompting
Consistency: All products use the same design system
Scalability: Non-designers can build production UIs
Maintainability: Update design system once, affects all projects
Quality: AI + design system = fewer design bugs
Onboarding: New team members productive on day 1

Workflow

Designer updates Figma
  ↓
Export tokens → Update package
  ↓
npm publish (v1.1.0)
  ↓
Teams run: npm update
  ↓
All apps updated automatically ✨

📄 License

MIT

🤝 Support

Documentation: See /docs folder
Issues: GitHub Issues
Updates: GitHub Releases

🎉 Get Started Now

npm install @yourcompany/design-system

Then import and start building! 🚀