2.1 KiB
2.1 KiB
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
- Copy the agent prompt: Use content from
web-build-sample/agent-prompt.txt - Attach the build files: Upload all
.txtfiles from theweb-build-sample/directory - Name your agent: "BMAD Agent" or similar
- 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