UX Support Chatbot

A dual-mode chatbot interface for UX designers and engineers to collaborate on UI/UX projects.

Features

Designer Mode

• Create, edit, and delete projects
• Upload PRD documents with Markdown formatting
• Add Figma links
• Attach design images and screenshots
• Rich text editing with formatting toolbar
• Choose private or team-shared visibility

Engineer Mode

• Browse all available projects
• View project images in expandable gallery
• AI-powered Q&A about UI/UX requirements
• Attach images to questions for visual context
• Full Markdown rendering in chat
• Access to PRDs, Figma links, and design notes

How to Use

For UX Designers

1. Switch to Designer Mode
2. Click + New Project
3. Fill in project details:
   • Project name (required)
   • Description
   • PRD document (supports Markdown)
   • Figma link
   • Design images
   • Additional comments
4. Choose Share with team for team-wide access
5. Click Save Project

For Engineers

1. Switch to Engineer Mode
2. Select a project from the list
3. View project images by clicking Show Images
4. Ask questions about UI/UX in the chat
5. Attach images using the 📎 button for visual questions
6. Get AI-powered responses based on PRD and design files

Markdown Support

Both chat messages and PRD documents support rich formatting:

• Bold: **bold** or __bold__
• Italic: *italic* or _italic_
• Code: `code`
• Headings: # H1, ## H2, ### H3
• Lists: - bullet or 1. numbered
• Links: [text](url)
• Code blocks: ```language\ncode\n```

Technology Stack

• Pure HTML/CSS/JavaScript
• Tailwind CSS for styling
• Claude API for AI-powered chat
• Persistent storage API for data persistence
• Base64 image encoding for attachments

Privacy & Data

• Private projects: Only visible to you
• Shared projects: Visible to anyone with access to this artifact
• Data is stored in your session storage
• Not accessible to other Claude.ai users
• PRD content is sent to Claude API temporarily for Q&A

Requirements

• Modern web browser
• Claude.ai account (for AI chat features)
• Access to this artifact

License

MIT License - feel free to use and modify as needed.