# Desktop App Showcase
> Create desktop application showcase graphics in SVG featuring macOS-style window chrome, sidebars, multi-panel layouts, chat interfaces, and code diffs. Use for developer tools, AI assistants, IDE plugins, productivity apps, and desktop software marketing. Output polished app mockups with gradient backgrounds.
- Skill: `wpgaurav/desktop-app-showcase` (Agent Skill)
- Install (CLI): `npx skillmds@latest add wpgaurav/desktop-app-showcase`
- Raw SKILL.md: https://api.skillmd.com/api/skills/wpgaurav/desktop-app-showcase/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- Author: wpgaurav (https://skillmd.com/u/wpgaurav)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/wpgaurav/desktop-app-showcase
---
# Desktop App Showcase Graphics
Create SVG graphics that showcase desktop applications with macOS-style window frames, multi-panel layouts, and professional gradient backgrounds. Think Linear, Raycast, Warp, Cursor, or Claude desktop app marketing.
**Key principle**: Show the app in action with realistic content, not empty states.
## When to Use
- Developer tool landing pages
- AI assistant/copilot marketing
- IDE and code editor showcases
- Desktop app Product Hunt launches
- macOS/Windows app marketing
- CLI tool with GUI wrapper showcases
- Changelog and feature announcements
- Documentation hero images
- App store screenshots
Best for showing **desktop software with multiple panels, sidebars, and real content**.
## Quick Reference
| Pattern | Use Case | Key Elements |
|---------|----------|--------------|
| Three-Column | IDE/dev tools | Sidebar + main + detail panel |
| Two-Column | Chat apps, settings | Sidebar + main content |
| Single Panel | Focused app view | Full window with content |
| Split View | Before/after, diff | Two equal panels side by side |
| Floating Windows | Multi-window apps | Overlapping app windows |
---
## Core Visual Rules
### Canvas & Background
- **Gradient backgrounds** - Purple/blue, blue/teal, or brand colors
- Subtle noise texture optional
- Soft color transitions (not harsh)
- Common sizes: 2560x1600 (retina), 1920x1200, 1440x900
```svg
```
### Window Chrome (macOS Style)
| Element | Specification |
|---------|---------------|
| Traffic lights | Red #ef4444, Yellow #eab308, Green #22c55e |
| Traffic light size | 12px diameter, 8px gap between |
| Traffic light position | 20px from left, centered vertically in title bar |
| Title bar height | 40-52px |
| Title bar color | #f9fafb (light) or #1f2937 (dark) |
| Window border radius | 10-12px |
| Window shadow | Large, soft, 20-40px blur |
### Color Palette
| Element | Light Mode | Dark Mode |
|---------|------------|-----------|
| Window bg | #ffffff | #1f2937, #111827 |
| Sidebar bg | #f9fafb, #f3f4f6 | #111827, #0f172a |
| Border | #e5e7eb | #374151 |
| Text primary | #111827 | #f9fafb |
| Text secondary | #6b7280 | #9ca3af |
| Text muted | #9ca3af | #6b7280 |
| Accent | #3b82f6 | #60a5fa |
| Success/add | #22c55e, #dcfce7 | #4ade80, #166534 |
| Error/remove | #ef4444, #fee2e2 | #f87171, #991b1b |
### Typography
- **Font**: InterVariable/Inter — matches your site theme
- `'InterVariable', 'Inter', sans-serif`
- **Monospace**: `'SF Mono', 'Fira Code', 'JetBrains Mono', monospace`
- **Sizes**:
- Window title: 13px
- Section headers: 11-12px, uppercase, letter-spacing
- Body text: 13-14px
- Code: 12-13px
- Small labels: 10-11px
---
## SVG Structure Template
```svg
```
---
## Component Library
### macOS Title Bar
```svg
Window Title
Open
Commit
Window Title
```
### Sidebar Navigation
```svg
```
### Chat Interface
```svg
Create a compelling launch hero for the new Codex app
I'll update the hero copy to clearly communicate what
Codex app does, add outcome-focused bullets, and
ensure the CTAs align with launch goals.
Thought 7s
Explored 2 files
Edited
hero.tsx
Read
build.py
Ask Codex anything
+ GPT-5.2-Codex
```
### Code Diff Panel
```svg
2 files changed
+9
-6
×
src/hero.tsx
+8
-5
export const hero = {
−
eyebrow: "New",
−
title: "Codex",
−
subtitle: "AI for developers",
+
eyebrow: "Introducing",
+
title: "Codex app",
+
subtitle: "Your AI pair programmer",
+
primaryCta: "Get started",
+
secondaryCta: "Download the CLI",
};
```
### Buttons (macOS Style)
```svg
Commit
Open
+ Add
```
### Status Badges
```svg
4h
+9
-6
```
### Folder/File Tree Icons
```svg
.tsx
```
---
## Layout Patterns
### Three-Column (IDE Style)
```
+--[Title Bar]------------------------+
| ••• | Title | [Btn] [Btn] |
+-------+-------------+---------------+
| | | |
| Side | Main | Detail |
| bar | Content | Panel |
| | | |
| | | (code diff, |
| | | preview, |
| | | settings) |
| | | |
+-------+-------------+---------------+
```
### Two-Column (Chat App)
```
+--[Title Bar]------------------------+
| ••• | Title | |
+-------+----------------------------+
| | |
| Side | Chat Area |
| bar | |
| | [Messages] |
| | |
| | [Input Box] |
+-------+----------------------------+
```
### Split View (Comparison)
```
+--[Title Bar]------------------------+
| ••• | Title | |
+----------------+-------------------+
| | |
| Left Panel | Right Panel |
| (Before) | (After) |
| | |
+----------------+-------------------+
```
---
## Complete Example: AI Coding Assistant
```svg
```
---
## Quality Checklist
Before finalizing:
- [ ] Window has proper macOS chrome (traffic lights, title bar)
- [ ] Shadow is soft and appropriately sized
- [ ] Background gradient is smooth and appealing
- [ ] Typography is consistent (system-ui for UI, monospace for code)
- [ ] Panels have clear visual hierarchy
- [ ] Borders and dividers are subtle (#e5e7eb)
- [ ] Code syntax highlighting is readable
- [ ] Diff colors are standard (green for add, red for remove)
- [ ] Content looks realistic (not placeholder text)
- [ ] Overall composition is balanced
**Automatic rejection if:**
- No window shadow (looks flat/pasted on)
- Wrong traffic light colors or sizing
- Inconsistent typography mixing
- Harsh background colors
- Code is unreadable or poorly formatted
- Diff highlighting colors are non-standard
---
## Mobile-Friendly SVG Rules
All SVGs must render well on mobile (375px width and up):
1. **Always use `viewBox`** — never fixed `width`/`height`. Let SVGs scale responsively.
2. **Minimum text size**: 12px equivalent at viewBox scale. Code text can go to 11px minimum.
3. **Test at 375px wide**: Verify window chrome, sidebar labels, and code text remain legible.
4. **Responsive embed**: Use `width="100%" height="auto"` or CSS `max-width: 100%` in HTML.
5. **Simplify panels at small sizes**: Consider reducing to 2-column or single-panel layouts if the full 3-column gets unreadable at mobile widths.
## Execution Steps
1. **Define the app type** - What kind of desktop app? (IDE, chat, settings, etc.)
2. **Choose layout** - Three-column, two-column, split view?
3. **Set canvas and background** - Size, gradient colors
4. **Create window frame** - macOS chrome, shadow
5. **Build sidebar** - Navigation items, sections
6. **Create main content** - Chat messages, file browser, etc.
7. **Add detail panel** - Code diff, preview, settings
8. **Apply typography** - System fonts, proper sizing
9. **Add status elements** - Badges, checkmarks, timestamps
10. **Polish** - Shadows, borders, spacing
11. **Review** - Does it look like a real app?