diff --git a/.claude/agents/ui-design-agent.md b/.claude/agents/ui-design-agent.md
index faf6fce0..37e09fcc 100644
--- a/.claude/agents/ui-design-agent.md
+++ b/.claude/agents/ui-design-agent.md
@@ -207,6 +207,49 @@ You execute 6 distinct task types organized into 3 patterns. Each task includes
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
```
+### Remote Assets Reference
+
+**Image Assets** (CDN or External URLs):
+- Use absolute URLs for external images (e.g., `https://picsum.photos/...`, `https://images.unsplash.com/...`)
+- Use CDN URLs for reliability and performance
+- Always include `alt` attributes for accessibility
+- Specify dimensions when known for layout stability
+
+**Supported Image Services**:
+- **Unsplash**: `https://images.unsplash.com/photo-{id}?w={width}&q={quality}`
+- **Picsum**: `https://picsum.photos/{width}/{height}` (placeholder images)
+- **Placeholder.com**: `https://via.placeholder.com/{width}x{height}/{bg-color}/{text-color}`
+
+**Icon Libraries** (CDN):
+- **Lucide Icons**: `https://unpkg.com/lucide@latest/dist/umd/lucide.js`
+- **Font Awesome**: `https://cdnjs.cloudflare.com/ajax/libs/font-awesome/{version}/css/all.min.css`
+- **Material Icons**: `https://fonts.googleapis.com/icon?family=Material+Icons`
+
+**Usage Pattern**:
+```html
+
+
+
+
+
+
+
+
+
+```
+
+**Best Practices**:
+- ✅ Use HTTPS URLs for all external assets
+- ✅ Include width/height attributes to prevent layout shift
+- ✅ Add loading="lazy" for images below the fold
+- ✅ Provide fallback content for failed loads
+- ❌ Never use local file paths (e.g., `file:///` or relative paths without context)
+- ❌ Avoid embedding base64 images (use external URLs instead)
+
### Visual Effects System
**Shadow Tokens** (7-tier system):