diff --git a/6-ready/claude-virtual-filesystem-guide.md b/6-ready/claude-virtual-filesystem-guide.md index 59e3ebe..111b0b7 100644 --- a/6-ready/claude-virtual-filesystem-guide.md +++ b/6-ready/claude-virtual-filesystem-guide.md @@ -14,6 +14,7 @@ secondary_keywords: ["claude sandbox", "claude sandbox environment", "claude mcp meta_description: "Learn where Claude saves files in its sandbox filesystem. Discover the /mnt/user-data/ structure, fix missing file issues, and master file workflows with this hands-on guide." assets_folder: assets/claude-virtual-filesystem-guide/ +images: pending --- # Brief @@ -1083,3 +1084,105 @@ Article already follows GEO best practices: --- **SEO optimization complete.** Article ready for 6-ready/. + +--- + +# Image Specs + +**Created:** 2026-01-07 +**Total images:** 2 (+ 9 existing screenshots) + +## Image Strategy + +**Style direction:** Technical, clean, developer-focused +**Color palette:** Blues and purples (Claude brand adjacent), with accent highlights for key elements + +--- + +## 1. Hero Image + +**Purpose:** Social sharing (OG), article header +**Type:** Conceptual illustration +**Dimensions:** 1200x630 (OG standard) +**Filename:** `hero.png` + +**Concept:** +Isometric view inside a container/sandbox. The container is semi-transparent, showing internal structure. Inside: folder icons representing the key directories (`/mnt/user-data/`, `/home/claude/`). A file icon is mid-flight, moving from working area to outputs folder. Subtle grid pattern on the "floor" suggests technical environment. + +**Key elements:** +- Semi-transparent container box (the sandbox) +- Folder structure visible inside +- File in motion (the "lifecycle" concept) +- Clean, minimal background + +**Mood:** Technical but approachable, "peek under the hood" feeling + +**Prompt draft:** +``` +Isometric 3D illustration of a transparent container box representing a sandbox environment. Inside the container: minimalist folder icons arranged in a tree structure, one glowing file icon moving between folders. Color scheme: deep blue background, container with subtle purple glow, white and cyan folder icons, orange accent on the moving file. Clean flat design, no gradients, tech aesthetic. Empty space on left side for potential text overlay. +``` + +**Alt text:** Isometric illustration of Claude's sandbox container showing file movement between internal directories + +--- + +## 2. Filesystem Structure Diagram + +**Purpose:** Visualize directory structure and file flow +**Type:** Technical diagram +**Dimensions:** 1200x800 (fits article width, detailed content) +**Location:** After "The Filesystem Structure" section, complements the table +**Filename:** `filesystem-diagram.png` + +**Concept:** +Architectural diagram showing the four key directories as boxes/containers. Arrows show possible file movements: upload → uploads folder, working file in /home/claude/, copy/move to outputs, outputs → sidebar (user access). Color-coded by persistence level. + +**Must include:** +- `/mnt/user-data/uploads/` — labeled "Your uploads", green (persistent) +- `/mnt/user-data/outputs/` — labeled "Downloadable", green (persistent) +- `/home/claude/` — labeled "Working directory", yellow/orange (warning, temporary) +- `/mnt/skills/` — labeled "Read-only", gray +- Arrows showing file flow +- Sidebar icon representing user access point +- Persistence indicators (checkmark for persistent, warning for temporary) + +**Style:** Flowchart/architecture diagram, flat design, labeled boxes + +**Prompt draft:** +``` +Technical architecture diagram showing file system structure. Four rectangular containers arranged in a layout: two green boxes labeled "/mnt/user-data/uploads/" and "/mnt/user-data/outputs/" on the right side, one orange/yellow box labeled "/home/claude/" in the center, one gray box labeled "/mnt/skills/" (smaller, read-only). Arrows showing file flow: dotted arrow from user icon to uploads, solid arrows between home/claude and outputs (bidirectional), arrow from outputs to a sidebar/download icon. Green checkmarks on persistent directories, warning triangle on /home/claude/. Clean flat design, white background, blue and purple accent colors for arrows. Labels in monospace font. +``` + +**Alt text:** Diagram showing Claude's filesystem structure with four directories and file flow paths between them + +--- + +## Image Checklist + +| # | Type | Priority | Filename | Status | +|---|------|----------|----------|--------| +| 1 | Hero Image | Must-have | `hero.png` | pending | +| 2 | Filesystem Diagram | Must-have | `filesystem-diagram.png` | pending | + +--- + +## Generation Notes + +**Hero image:** +- Leave space on left for potential title overlay (social templates) +- Container should feel "technical" but not cold +- The moving file is the focal point — represents the "lifecycle" theme + +**Filesystem diagram:** +- Prioritize clarity over style +- Labels must be readable at article width +- Consider generating as SVG for crispness, or high-res PNG +- Warning indicator on `/home/claude/` is critical — main takeaway of the article + +**Color reference:** +- Persistent = green (#22c55e or similar) +- Warning/temporary = orange (#f59e0b) +- Read-only = gray (#6b7280) +- Accents/arrows = blue (#3b82f6) or purple (#8b5cf6) + +**Save to:** `assets/claude-virtual-filesystem-guide/`