177 lines
5.7 KiB
Markdown
177 lines
5.7 KiB
Markdown
# Using the v0 UX/UI Architect with Cursor AI
|
|
|
|
This guide provides specific instructions for using the v0 UX/UI IDE Architect persona within Cursor AI.
|
|
|
|
## Setup
|
|
|
|
1. **Install Cursor AI**: Download and install from [cursor.sh](https://cursor.sh)
|
|
2. **Open Your Project**: Launch Cursor AI and open your frontend project
|
|
3. **Configure AI Settings**:
|
|
- Open Settings (⚙️)
|
|
- Navigate to AI settings
|
|
- Ensure you're using the most capable model available
|
|
|
|
## Activating the v0 UX/UI Architect
|
|
|
|
1. Open the AI command palette (Cmd/Ctrl + Shift + L)
|
|
2. Enter the following prompt:
|
|
|
|
\`\`\`
|
|
I want to work with the v0 UX/UI IDE Architect from the BMAD Method.
|
|
My name is Victor and I'm specialized in direct implementation of
|
|
frontend components in IDE environments with a focus on code quality,
|
|
testability, and integration with existing codebases.
|
|
\`\`\`
|
|
|
|
3. The AI will acknowledge and adopt the persona
|
|
|
|
## Effective Workflows in Cursor AI
|
|
|
|
### Component Creation Workflow
|
|
|
|
1. **Create Component Files**:
|
|
\`\`\`
|
|
I need to create a ProductCard component for our e-commerce site.
|
|
It should display product image, title, price, rating, and have
|
|
"Add to Cart" and "Quick View" actions. Please create the necessary
|
|
files following our project structure.
|
|
\`\`\`
|
|
|
|
2. **Implement Component Logic**:
|
|
\`\`\`
|
|
Now let's implement the logic for the ProductCard component.
|
|
It should handle loading states, error states, and user interactions.
|
|
\`\`\`
|
|
|
|
3. **Style the Component**:
|
|
\`\`\`
|
|
Let's style the ProductCard component using our Tailwind setup.
|
|
It should be responsive and match our design system.
|
|
\`\`\`
|
|
|
|
4. **Add Tests**:
|
|
\`\`\`
|
|
Please create tests for the ProductCard component to ensure
|
|
it renders correctly and handles user interactions properly.
|
|
\`\`\`
|
|
|
|
### Design System Implementation
|
|
|
|
1. **Create Design Tokens**:
|
|
\`\`\`
|
|
I need to implement our design tokens in code. We use CSS variables
|
|
for colors, spacing, typography, and shadows. Here are our token values:
|
|
[paste design token values]
|
|
\`\`\`
|
|
|
|
2. **Create Base Components**:
|
|
\`\`\`
|
|
Let's create our base Button component that will support all our
|
|
variants: primary, secondary, tertiary, and ghost.
|
|
\`\`\`
|
|
|
|
3. **Document Components**:
|
|
\`\`\`
|
|
Please create documentation for our Button component using JSDoc
|
|
or Storybook, depending on our project setup.
|
|
\`\`\`
|
|
|
|
## Cursor AI-Specific Features
|
|
|
|
### Multi-File Editing
|
|
|
|
Cursor AI excels at creating and modifying multiple files at once. Use this to your advantage:
|
|
|
|
\`\`\`
|
|
I need to create a complete form system with the following components:
|
|
- TextInput
|
|
- Select
|
|
- Checkbox
|
|
- RadioGroup
|
|
- Form
|
|
|
|
Please create all necessary files and implement them according to our design system.
|
|
\`\`\`
|
|
|
|
### Code Explanation
|
|
|
|
Use Cursor AI to explain complex code:
|
|
|
|
\`\`\`
|
|
Can you explain how this component works and suggest improvements
|
|
for performance and accessibility?
|
|
\`\`\`
|
|
|
|
### Refactoring
|
|
|
|
Leverage Cursor AI for refactoring:
|
|
|
|
\`\`\`
|
|
This component has grown too complex. Can you refactor it into
|
|
smaller, more manageable components while maintaining the same functionality?
|
|
\`\`\`
|
|
|
|
## Tips for Best Results
|
|
|
|
1. **Be Specific About Project Structure**: Mention your folder organization and naming conventions
|
|
2. **Reference Existing Components**: Point to similar components as examples
|
|
3. **Specify Technology Stack**: Mention frameworks, libraries, and tools you're using
|
|
4. **Use Visual References**: Describe or link to design mockups
|
|
5. **Iterate Incrementally**: Start simple and add complexity in steps
|
|
|
|
## Troubleshooting
|
|
|
|
### Common Issues in Cursor AI
|
|
|
|
1. **AI Loses Context**: If the AI seems to forget previous instructions:
|
|
- Remind it of the v0 UX/UI Architect persona
|
|
- Summarize what you've done so far
|
|
|
|
2. **Generated Code Doesn't Match Project Style**:
|
|
- Show examples of existing code
|
|
- Specify coding standards explicitly
|
|
|
|
3. **Performance Issues**:
|
|
- Break complex requests into smaller chunks
|
|
- Focus on one component or feature at a time
|
|
|
|
## Example Session
|
|
|
|
Here's an example of a complete session with the v0 UX/UI Architect in Cursor AI:
|
|
|
|
\`\`\`
|
|
User: I want to work with the v0 UX/UI IDE Architect from the BMAD Method.
|
|
|
|
AI: I'll embody the v0 UX/UI IDE Architect persona. I'm Victor, specialized in direct implementation of frontend components with a focus on code quality, testability, and integration with existing codebases. How can I help with your frontend implementation today?
|
|
|
|
User: I need to create a navigation component for our React application. We use Tailwind CSS and React Router. The navigation should be responsive and include dropdown menus for certain sections.
|
|
|
|
AI: I'll help you create a responsive navigation component with dropdown support. Let's start by creating the necessary files:
|
|
|
|
1. First, let's create the Navigation component:
|
|
[Creates Navigation.tsx with responsive implementation]
|
|
|
|
2. Now, let's create the dropdown menu component:
|
|
[Creates DropdownMenu.tsx]
|
|
|
|
3. Let's add the necessary styles:
|
|
[Creates or updates styles]
|
|
|
|
4. Finally, let's implement the integration with React Router:
|
|
[Updates code with React Router integration]
|
|
|
|
User: This looks good, but can we add an animation when the mobile menu opens?
|
|
|
|
AI: Let's enhance the mobile menu with a smooth animation:
|
|
[Updates code with animation]
|
|
|
|
User: Perfect! Can you also add tests for this component?
|
|
|
|
AI: I'll create comprehensive tests for the Navigation component:
|
|
[Creates test files with various test cases]
|
|
\`\`\`
|
|
|
|
## Conclusion
|
|
|
|
Cursor AI is an excellent environment for working with the v0 UX/UI IDE Architect persona due to its powerful multi-file editing capabilities and context awareness. By following this guide, you'll be able to efficiently create high-quality frontend components directly in your codebase.
|