# Extension Visual Assets
This directory contains all visual assets for the MCP Diagnostics Extension, designed for the VS Code Marketplace and documentation.
## 📁 Asset Inventory
### Source Assets
- **`icon.svg`** - Main source vector for the extension icon.
- **`icon-static.svg`** - A non-animated version used for generating the PNG icon.
- **`icon-2.svg`** - The user-provided source icon.
### Generated Assets
- **`icon.png`** - 128x128 PNG extension icon, generated from `icon-static.svg`. ✅
- **`gallery-banner.png`** - 1376x80 PNG gallery banner, programmatically generated by `scripts/convert-assets.js`. ✅
### Documentation & Scripts
- **`convert-assets.md`** - A guide with alternative manual conversion methods.
- **`README.md`** - This file.
## 🎨 Design Elements
### Icon Design
- **Background**: Dark theme (#1e1e1e) with VS Code blue accent (#007acc)
- **MCP Network**: Interconnected nodes representing protocol connectivity
- **Diagnostic Symbol**: Warning triangle with error indicator
- **Data Flow**: Green particles indicating real-time data flow
- **VS Code Integration**: Subtle VS Code logo elements
### Gallery Banner Design
- **Background**: Dark gradient (#1e1e1e to #252526)
- **Icon**: Scaled version of actual extension icon with all design elements
- **Branding**: Extension name and description
- **Features**: Six key feature highlights with color coding
- **Network Pattern**: Subtle connectivity visualization
## 🔧 Technical Specifications
### Extension Icon (icon.png)
- **Dimensions**: 128x128 pixels
- **Format**: PNG with transparency
- **File Size**: 3KB (optimized)
- **Usage**: VS Code Marketplace, extension manager
### Gallery Banner (gallery-banner.png)
- **Dimensions**: 1376x80 pixels
- **Format**: PNG
- **File Size**: 11KB (optimized)
- **Usage**: VS Code Marketplace header
## ⚙️ Asset Generation
The final PNG assets (`icon.png` and `gallery-banner.png`) are generated automatically by running:
```bash
npm run convert-assets
```
This script uses the `sharp` library to perform the conversions. The banner is created by compositing the `icon.png` with a background and generated text, ensuring brand consistency.
For more details on the generation process, see `scripts/convert-assets.js`.
## ✅ Quality Verification
### Checklist
- [x] Icon is exactly 128x128 pixels
- [x] Banner is exactly 1376x80 pixels
- [x] Colors match VS Code dark theme
- [x] All text is readable in banner
- [x] Network connections are visible
- [x] Warning triangle is prominent
- [x] File sizes are optimized (icon <50KB, banner <100KB)
- [x] PNG transparency works correctly
### Visual Elements Verified
- [x] MCP network nodes and connections
- [x] Diagnostic warning triangle with exclamation
- [x] Data flow particles (static in PNG)
- [x] VS Code integration symbols
- [x] Professional typography in banner
- [x] Feature highlights with color coding
## 📋 Package.json Integration
The assets are properly referenced in package.json:
```json
{
"icon": "images/icon.png",
"galleryBanner": {
"color": "#1e1e1e",
"theme": "dark"
}
}
```
## 🎯 Marketplace Optimization
### SEO & Visibility
- **Icon**: Clearly represents MCP + diagnostics functionality
- **Banner**: Highlights key features and benefits
- **Colors**: Consistent with VS Code dark theme
- **Typography**: Professional and readable
### User Experience
- **Recognition**: Icon is distinctive and memorable
- **Information**: Banner communicates value proposition
- **Consistency**: Matches VS Code design language
- **Accessibility**: High contrast and clear visuals
## 🔄 Future Updates
When updating assets:
1. Modify the SVG source files
2. Run `npm run convert-assets`
3. Verify dimensions and quality
4. Test in VS Code marketplace preview
5. Update version in package.json if needed
## 📊 Asset Performance
- **Icon**: 3KB (excellent for marketplace loading)
- **Banner**: 11KB (optimal for web display)
- **Total**: 14KB (minimal impact on extension size)
All assets are optimized for fast loading and professional appearance in the VS Code Marketplace.
