Token Auditor

AI-powered design token analysis and auditing tool. Upload your design tokens JSON file and get instant analysis with quality scores, statistics, and actionable recommendations.

Features

• Token Upload: Drag & drop JSON files or paste token data
• AI Analysis: Powered by Qwen AI for intelligent token analysis
• Quality Scoring: Get a score from 0-100 based on token quality
• Statistics: View detailed statistics including duplicates, naming issues, and code readiness
• Issue Categorization: Issues ranked by severity (critical, warning, info, good)
• Waitlist Integration: Early access signup form

Tech Stack

• Framework: Next.js 16 with React 19 and TypeScript
• Styling: Tailwind CSS
• API: Qwen AI for token analysis
• Deployment Ready: Built with production best practices

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• Qwen API key (get from DashScope)

Installation

1. Clone the repository:

git clone <repository-url>
cd Design\ Token\ Auditor

2. Install dependencies:

npm install

3. Set up environment variables:

cp .env.example .env.local
# Edit .env.local and add your Qwen API key

4. Run the development server:

npm run dev

Open http://localhost:3000 in your browser.

Usage

1. Upload Tokens:

   • Drag and drop a JSON file, or
   • Paste your token JSON directly

2. Analyze: Click "Analyze Tokens" to get AI-powered analysis

3. Review Results:

   • Check your quality score
   • Review statistics
   • Address issues by severity

4. Join Waitlist: Enter your email for early access notifications

Sample Token JSON

{
  "color": {
    "primary": {
      "value": "#7C6AFF"
    },
    "secondary": {
      "value": "#01B4E4"
    }
  },
  "spacing": {
    "sm": {
      "value": "4px"
    },
    "md": {
      "value": "8px"
    },
    "lg": {
      "value": "16px"
    }
  }
}

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm start - Start production server
• npm run lint - Run ESLint

API Endpoints

POST /api/analyze

Analyzes design tokens using Qwen AI.

Request:

{
  "tokens": "{...json tokens...}"
}

Response:

{
  "score": 85,
  "statistics": {
    "totalTokens": 12,
    "duplicates": 1,
    "namingIssues": 0,
    "codeReadiness": 90
  },
  "issues": [...]
}

POST /api/waitlist

Adds email to early access waitlist.

Request:

{
  "email": "user@example.com"
}

Configuration

Qwen API Setup

1. Sign up at DashScope
2. Create an API key
3. Add to .env.local:

QWEN_API_KEY=your_key_here

Deployment

Vercel (Recommended)

vercel deploy

Add environment variables in Vercel dashboard.

Docker

docker build -t token-auditor .
docker run -p 3000:3000 token-auditor

Other Platforms

The project is built with Next.js and works on any Node.js hosting platform (Heroku, AWS, Azure, etc.).

File Structure

src/
├── app/
│   ├── api/
│   │   ├── analyze/     # Token analysis endpoint
│   │   └── waitlist/    # Waitlist signup endpoint
│   ├── layout.tsx       # Root layout
│   ├── page.tsx         # Home page
│   └── globals.css      # Global styles
└── components/
    ├── TokenUpload.tsx        # Main upload component
    ├── TokenAnalyzer.tsx      # Upload interface
    ├── AnalysisResults.tsx    # Results display
    └── EarlyAccessCTA.tsx     # CTA form

Development Notes

• The app includes mock analysis as a fallback when Qwen API is not configured
• Waitlist data is stored in-memory (use database for production)
• Frontend validation ensures only valid JSON is sent to the API

Contributing

1. Create a feature branch
2. Make your changes
3. Test thoroughly
4. Submit a pull request

License

MIT

Support

For issues or questions, please create a GitHub issue.