1Create Project
Open your terminal, navigate to the desired folder, and run the following commands.
# Create project
npm create vite@latest my-admin -- --template react-ts
# Navigate to folder
cd my-admin
# Install dependencies
npm installOptions Explained
- my-admin: Project name (you can change this to whatever you like)
- react-ts: React + TypeScript template
Term Tip: CLI / Dependencies
- CLI: Running tools with commands in a terminal.
- npm: A package manager for installing and managing JavaScript libraries.
- Dependency: An external package your project needs to run.
- Deep dive: Tools and terminal basics
2Install Tailwind CSS
Installing Tailwind CSS lets you create beautiful UIs using just classes.
# Install Tailwind
npm install -D tailwindcss postcss autoprefixer
# Generate config files
npx tailwindcss init -p
Open the tailwind.config.js file and modify it as follows:
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Open src/index.css and add the following at the top:
@tailwind base;
@tailwind components;
@tailwind utilities;3Run Dev Server
npm run dev
Open http://localhost:5173 in your browser to see the default Vite page.
If you see the Vite logo, the basic frontend setup is complete.
4Build UI with AI
Now let's ask AI to create a project management UI. Copy the prompt below and paste it into Antigravity or ChatGPT.
AI Prompt
복사해서 사용하세요
"Build a project management app with React + TypeScript + Tailwind. Requirements: 1. Main layout in src/App.tsx (header + content) 2. Card UI showing a list of projects 3. New project creation form (name, description inputs) 4. Project delete button 5. Use local state for data management for now (we'll connect an API later) Styling: - Dark mode background (bg-gray-900) - Cards with bg-gray-800 and hover effects - Blue accent colors (blue-500) File structure: - src/App.tsx - src/components/ProjectCard.tsx - src/components/ProjectForm.tsx - src/types/index.ts"
Send this prompt to your AI. If you're using Antigravity, press Cmd+L to open the agent panel.
Tips for Using AI Responses
- Paste the AI-generated code directly into your files
- If you get an error, show the error message to the AI
- Ask "How do I fix this error?"
5Expected Result
After applying the AI-generated code, you should see a screen like this:
Project Management
New Project
My First Project
Web service built with AI
Second Project
The complete example code is available in the GitHub repository .