AI-Assisted UI Development Workflow

A complete operational manual for AI-assisted UI development. All prompts and commands can be copied directly.

1. Replicate UI - Image to JSON

Workflow

1. Prepare UI design (screenshot/design file)
2. Use GPT-4V/Claude to extract UI parameters
3. Generate JSON file
4. Use JSON as Cursor context

Prompt Template

Analyze this UI design and extract the following parameters in JSON format:

1. Layout info: container type, arrangement, spacing, padding, margin
2. Color system: primary, secondary, background, text colors (provide HEX values)
3. Typography: font size, weight, line-height, letter-spacing
4. Component dimensions: width, height, border-radius, border
5. Shadow effects: box-shadow parameters
6. Icons/images: position, size, type

Output in the following JSON structure:

{
  "layout": {},
  "colors": {},
  "typography": {},
  "spacing": {},
  "components": []
}

JSON File Example

Create design-system.json:

{
  "colors": {
    "primary": "#3B82F6",
    "secondary": "#8B5CF6",
    "background": {
      "base": "#FFFFFF",
      "secondary": "#F9FAFB"
    },
    "text": {
      "primary": "#111827",
      "secondary": "#6B7280"
    }
  },
  "typography": {
    "fontFamily": {
      "sans": "'Inter', sans-serif"
    },
    "fontSize": {
      "base": "16px",
      "lg": "18px",
      "xl": "20px"
    }
  },
  "spacing": {
    "sm": "8px",
    "md": "16px",
    "lg": "24px"
  }
}

---

2. Customize UI - Tweakcn

Tool Link

🔗 Tweakcn: https://www.tweakcn.com/

Workflow

1. Visit Tweakcn → Choose component type
2. Adjust style parameters in real-time
3. Copy generated CSS/Tailwind code
4. Save as .css file
5. Use style file as Cursor context

---

3. Component Libraries - React Bits

Prerequisites

Install Framer Motion:

npm install framer-motion

Prompt Template

Requirements: Create an Accordion component

Reference code:
```jsx
[Paste React Bits Accordion code here]
```

Requirements:
1. Use TypeScript
2. Integrate Framer Motion for smooth animations
3. Support single/multiple expand modes
4. Add custom icons
5. Responsive design
6. Include complete type definitions

Style requirements:
- Use Tailwind CSS
- 8px border radius
- Hover state background change

---

4. Animations

Animation Keywords

English	Description
fade in/out	opacity change
slide in/out	transform: translateX/Y
scale	transform: scale
rotate	transform: rotate
bounce	bounce effect
spring	elastic physics
parallax scroll	different scroll speeds
hover lift	mouse hover lift
pulse	periodic scale
stagger	sequential display

Prompt Template

Add animations to the login page

Target: LoginPage.tsx

Animation requirements:
1. Logo - fade in from top, duration 0.6s
2. Form card - slide up + fade in, duration 0.8s, delay 0.2s
3. Input fields - stagger, 0.1s delay each
4. Button - bounce in, delay 0.8s

Use Framer Motion, ease-out curve

---

5. Fonts - Google Fonts

Google Fonts Link

🔗 Google Fonts: https://fonts.google.com/

Prompt Template

Integrate Google Fonts to the project

Selected font: Inter (weights: 400, 500, 600, 700)

Reference method:

**HTML Link:**
```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
```

Application:
1. Set Inter as global font (body, html)
2. Headings use font-weight: 700
3. Buttons use font-weight: 600
4. Body text use font-weight: 400

Update:
- index.html (add link)
- globals.css (set font-family)
- tailwind.config.js (add fontFamily config)

---

Tools Reference

Tool	Link	Purpose
Google Fonts	https://fonts.google.com/	Font resources
Tweakcn	https://www.tweakcn.com/	Component styling
React Bits	https://github.com/vasanthk/react-bits	React patterns
Framer Motion	https://www.framer.com/motion/	React animations
Tailwind CSS	https://tailwindcss.com/	CSS framework