72 lines
2.1 KiB
Markdown
72 lines
2.1 KiB
Markdown
# Web Environment Quick Start Guide
|
|
|
|
## 5-Minute Setup for v0 UX/UI Architect
|
|
|
|
### Prerequisites
|
|
- Access to ChatGPT, Gemini, or Claude web interface
|
|
- BMAD Method web build files (from running `node build-web-agent.js`)
|
|
|
|
### Step 1: Set Up Your Web Agent
|
|
1. **Copy the agent prompt**: Use content from `web-build-sample/agent-prompt.txt`
|
|
2. **Attach the build files**: Upload all `.txt` files from the `web-build-sample/` directory
|
|
3. **Name your agent**: "BMAD Agent" or similar
|
|
4. **Save the configuration**
|
|
|
|
### Step 2: Activate Veronica
|
|
```
|
|
I need Veronica, the v0 UX/UI Architect, to help me create a modern dashboard component.
|
|
```
|
|
|
|
### Step 3: Provide Your Requirements
|
|
```
|
|
I'm building a SaaS application dashboard that needs:
|
|
- A sidebar navigation with menu items
|
|
- A main content area for widgets
|
|
- A top header with user profile and notifications
|
|
- Responsive design for mobile and desktop
|
|
- Modern, clean aesthetic using a blue and white color scheme
|
|
```
|
|
|
|
### Step 4: Review the Output
|
|
Veronica will provide:
|
|
- Detailed component specification
|
|
- Visual design description
|
|
- Implementation guidelines
|
|
- Accessibility considerations
|
|
|
|
### Step 5: Iterate and Refine
|
|
```
|
|
Can you modify the sidebar to be collapsible and add a dark mode variant?
|
|
```
|
|
|
|
## Common Web Environment Workflows
|
|
|
|
### Design Exploration
|
|
```
|
|
Veronica, I need to explore different design directions for a product landing page.
|
|
Can you create 3 different layout concepts with different visual styles?
|
|
```
|
|
|
|
### Component Specification
|
|
```
|
|
I need a detailed specification for a data table component that includes:
|
|
- Sortable columns
|
|
- Row selection
|
|
- Pagination
|
|
- Search functionality
|
|
- Export options
|
|
```
|
|
|
|
### Design System Planning
|
|
```
|
|
Veronica, help me plan a design system for a fintech application.
|
|
I need core components, color palette, typography scale, and spacing tokens.
|
|
```
|
|
|
|
## Tips for Success
|
|
- Be specific about your technical requirements
|
|
- Mention your preferred frameworks and styling approaches
|
|
- Provide examples of designs you like
|
|
- Ask for accessibility considerations
|
|
- Request responsive design specifications
|