Design Starter Kit

AI-first design starter kit to build your next project.

🌟 Tech Stack

• Frontend Framework: Nuxt 3
• UI Components: Vue Shadcn
• Styling: TailwindCSS
• Form Handling: VeeValidate + Zod
• State Management: Pinia
• Content Management: Nuxt Content
• Icons: Nuxt Icon
• Fonts: Google Fonts

📦 Prerequisites

1. Trae IDE for Mac, Cursor IDE for Windows

2. Prettier Extension for formatting

3. Vue Js Extension for Vue 3 syntax highlighting

4. Configure git:

   git config --global user.name "Your Name"
   git config --global user.email "your.email@example.com"

5. Install Node.js

6. Install pnpm

   curl -fsSL https://get.pnpm.io/install.sh | sh -

🛠️ Setup

1. Clone the repository

Click Command Palette (Cmd + Shift + P) and type "Git: Clone" Enter the repository URL: https://github.com/razbakov/design-starter-kit.git

2. Open Terminal and Install dependencies

pnpm install

3. Run development server

pnpm dev

4. Open project in browser - http://localhost:3000

📁 AI-First Development

After setting up the project, open it in Cursor IDE for an AI-first development experience:

1. Toggle AI Pane (Cmd + I)
2. Go to Cursor Settings -> Models -> Check "claude-3-5-sonnet-20241022"
3. Open Composer Tab
4. Switch model to "claude-3-5-sonnet-20241022"
5. Switch to agent
6. Write your prompt