Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The "DS Sync Hub" is a responsive internal enterprise dashboard designed to visualize the synchronization between Figma, which serves as the source of truth, and a React + Tailwind design system repository utilized by developers and AI tools. This application aims to streamline the workflow of engineers and designers by providing clear insights into the state of design tokens, components, and AI rules.

## CORE FEATURES
1. **Dashboard Overview**
   - Displays KPI cards for key metrics such as tokens synced, components implemented, Storybook coverage, active AI rules, and products consuming the design system.
   - Includes a status banner indicating the last sync time and a simple system flow diagram visualization.

2. **Tokens Page**
   - Features a data table with columns for Name, Category, Value, Status, and Version, alongside color-coded status badges for easy identification of token states.

3. **Components Page**
   - Contains a table to track component details including props defined, stories, accessibility checks, and adoption rates, with a visual progress bar for Storybook coverage.

4. **Activity Log**
   - Presents a vertical timeline capturing recent changes made to components and tokens, allowing users to track updates and missing stories efficiently.

5. **AI Rules Panel**
   - Lists active AI rules with toggle switches for easy management, displaying a counter for rule violations to ensure compliance with design standards.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean and simple design with ample white space, a neutral color palette, and a focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds to enhance readability.
- **Layout**: Card-based layout for KPIs and tables, with a responsive design ensuring optimal viewing on various devices. Use Tailwind-like spacing scale for consistent alignment and spacing.
- **Typography**: Utilize a professional font such as Inter or Roboto, with clear hierarchy for headings, subheadings, and body text.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for type safety and enhanced development experience.
- **Styling**: Tailwind CSS for utility-first styling approach, ensuring rapid development and design consistency.
- **UI Components**: Utilize shadcn/ui for pre-built component styles that align with the design vision.
- **State Management**: Utilize React's built-in state management for local data handling, avoiding the need for complex state management libraries.

## IMPLEMENTATION STEPS
1. Set up the React project with TypeScript and Tailwind CSS.
2. Create the main layout structure using card-based components for the Dashboard Overview.
3. Develop the KPI cards to display the key metrics with appropriate responsiveness.
4. Build the Tokens Page with a sortable and filterable data table, implementing color-coded status badges.
5. Construct the Components Page with a table to track component details and integrate a progress bar for Storybook coverage.
6. Implement the Activity Log with a vertical timeline component to display recent changes.
7. Create the AI Rules Panel that lists rules with toggle functionality and displays a violations counter.
8. Mock all data locally to simulate a fully functional prototype without backend dependencies.

## USER EXPERIENCE
Users will interact with the dashboard through a clean interface that prioritizes clarity and ease of navigation. The KPI cards will provide at-a-glance insights, while the tables on Tokens and Components pages will allow users to dive deeper into specific details. The vertical activity log will ensure users can track changes efficiently, and the AI Rules Panel will facilitate quick adjustments to design standards. The overall user experience will emphasize responsiveness and simplicity, enhancing productivity for engineers and designers alike.