You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Commit c936e63
Browse filesBrowse the repository at this point in the historyBrowse files
Copy file name to clipboardExpand all lines: skills/codingcat-excalidraw-diagrams/SKILL.md
+20-25Lines changed: 20 additions & 25 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -17,12 +17,14 @@ You MUST follow this **3-Step Execution Protocol** before calling your image gen
17
17
18
18
## Mandatory 4-Step Execution Protocol
19
19
20
-
### Step 0: Attach Bundled Reference Images (`assets/*`) to the Image Generator Tool Call
21
-
**CRITICAL**: Never call the image generator with text alone when generating thumbnails, presenter cutouts, or vendor logos!
22
-
Before calling your image generation tool, you **MUST** load and pass the actual image files from this skill's `assets/` directory (and from any `@`-mentioned skill such as `@sanity-brand-guidelines`, `@sanitybrand`, `@alex.patterson`, or `@codingcatthumbnails`) as **input reference images** to the image generation tool call on the **very first attempt**:
23
-
-**Whiteboard Diagram Style & Layout Reference**: Attach `assets/excalidraw-thumbnail-left-pose.png` or `assets/excalidraw-thumbnail-right-pose.png` so the image generator copies the exact Rough.js double-stroked white boxes, 45-degree diagonal hachure fills, sketchy Coral Red `X`, and green checkmark (NEVER generate a macOS window with red/yellow/green dots or circular UI icons).
24
-
-**Sanity Official Logo Files**: Whenever Sanity is mentioned, attach `assets/Sanity-Full_logo--white_on_black.png` (stepped diagonal 3-line geometric symbol + bold serif `Sanity` wordmark) and/or `assets/Sanity-Symbol--white_on_black.png` directly to the image generation tool call. **NEVER** invent a red square `"S"` app icon or sans-serif `"SANITY"` text on the shirt.
25
-
-**Alex Patterson Likeness Cutouts**: Attach `assets/alex_pointing_left.jpg` or `assets/alex_mind_blown.jpg` (or the `@alex.patterson` avatar images) directly to the image generation tool call.
20
+
### Step 0: Use `assets/sanity-thumbnail-template-left.jpg` (or `sanity-thumbnail-template-right.jpg`) as the Base Image for `image_generation`
21
+
**CRITICAL**: Never call the image generator with text alone, and **NEVER write the word `"Excalidraw"` in the prompt sent to the image generator** when a presenter is included (writing `"Excalidraw"` causes the image rewriter to turn the presenter into a cartoon drawing instead of a realistic photograph!).
22
+
Before calling your image generation tool, you **MUST** load and pass the bundled `1376x768` template files from `assets/` as **input reference images** to the image generation tool call on the **very first attempt**:
23
+
-**`assets/sanity-thumbnail-template-left.jpg`** (`1376x768`): Full-resolution finished template with the photorealistic mind-blown cutout of Alex Patterson on the bottom-left (wearing a black t-shirt with `Sanity-Symbol--white_on_black.png` and a round black Pixel Watch), `Sanity-Full_logo--white_on_black.png` at the top center, bold white + OrangeRed (`#FF5500`) title text, and the 2D double-stroked white diagram on the right.
24
+
-**`assets/sanity-thumbnail-template-right.jpg`** (`1376x768`): Full-resolution finished template with the photorealistic smiling/gesturing cutout of Alex Patterson on the right third (with OrangeRed `#FF5500` rim outline) and the 2D double-stroked white diagram with 45-degree diagonal hachure fills on the left two-thirds.
25
+
-**`assets/diagram-base-purple-green.jpg`** (`1376x768`): Full-resolution template with Royal Purple (`#4B2E83`), Soft Lavender (`#B4A7D6`), and Electric Lime (`#C5E86C`) hachure diagram + photorealistic Alex Patterson cutout on the right.
26
+
-**`assets/Sanity-Full_logo--white_on_black.png`** & **`assets/Sanity-Symbol--white_on_black.png`**: Official white-on-black Sanity logo files.
27
+
-**`assets/alex_pointing_left.jpg`** & **`assets/alex_mind_blown.jpg`**: Photorealistic studio cutouts of Alex Patterson.
26
28
27
29
### Step 1: Extract the 3-Stage Architecture Model from the User's Topic
28
30
Automatically map the user's short topic into three concrete columns (using **1 to 3 words max per box** so text is 100% legible):
- Use all color values strictly as visual rendering guidelines; never render hex codes, UI toolbars, or watermarks as text on the canvas.
67
69
```
68
70
69
-
#### Mode B: 16:9 YouTube Thumbnail with `@alex.patterson` (When user mentions thumbnail, `@alex.patterson`, or `@codingcatthumbnails`)
71
+
#### Mode B: 16:9 YouTube Thumbnail with Photorealistic Alex Patterson Cutout (Pass `assets/sanity-thumbnail-template-left.jpg` or `assets/sanity-thumbnail-template-right.jpg` as Input Image 0!)
70
72
```text
71
-
High-contrast 16:9 YouTube thumbnail on a pure black (#000000) background with a faint dark gray (#212121) 20px technical gridline pattern.
72
-
73
-
1. Left Third (Presenter Cutout - @alex.patterson):
74
-
- Position a photorealistic studio cutout of @alex.patterson strictly on the left third (0% to 33%) of the frame, completely clear of any diagram boxes or text.
75
-
- Likeness lock: Caucasian man in his mid-40s, very short styled light-brown hair, warm blue-green eyes, neatly trimmed salt-and-pepper beard, wearing NO glasses. He is in an expressive reaction pose (shocked mind-blown hands by head, or pointing right toward the diagram), wearing a round black Pixel Watch on his left wrist (no rings, bare right wrist) and a black crew-neck t-shirt with the official white brand symbol on the chest.
76
-
77
-
2. Top Center-Right (Brand Lockup & 2-Word Headline):
78
-
- Centered near the top above the diagram is the official white brand logo lockup.
79
-
- Directly below the logo is the large, bold 2-word headline "[HEADLINE_WORD_1] [HEADLINE_WORD_2]" in a heavy geometric grotesque font, with "[HEADLINE_WORD_1]" in crisp white (#FFFFFF) and "[HEADLINE_WORD_2]" in vibrant glowing accent color (#FF5500 or #C5E86C).
80
-
81
-
3. Right Two-Thirds (Flat 2D Hand-Drawn Dark-Mode Whiteboard Diagram):
82
-
- Authentic flat 2D whiteboard sketch aesthetic (Rough.js / Excalidraw style) with zero 3D perspective.
83
-
- Every box is drawn with TWO slightly offset, overlapping, hand-drawn sketchy white (#FFFFFF) marker strokes and 45-degree diagonal hachure hatch fills.
84
-
- Left side of diagram: A double-stroked sketchy boundary box labeled "[LEFT_ALL_CAPS_CAPTION]" in white Virgil hand-drawn marker font, containing three stacked cards ("[BAD_NODE_1]", "[BAD_NODE_2]", "[BAD_NODE_3]") slashed with a large Coral Red (#FCA5A5) hand-drawn "X" mark.
85
-
- Center of diagram: Sketchy white hand-drawn arrows point from the left cards into a single central document card (with folded top-right corner) labeled "[CENTER_CORE_NODE]".
86
-
- Right side of diagram: Two sketchy white arrows branch from "[CENTER_CORE_NODE]" to two double-stroked boxes labeled "[GOOD_NODE_1]" and "[GOOD_NODE_2]".
87
-
- Above the right-side boxes, draw a large, vibrant Electric Lime Green (#C5E86C) and Mint (#86EFAC) hand-drawn checkmark labeled "[RIGHT_ALL_CAPS_CAPTION]" in white Virgil marker font.
88
-
- Maintain a 96px safe margin from all edges, keep the bottom-right 320x120px clear for the YouTube timestamp, ensure zero overlap between @alex.patterson and the diagram boxes, and never render hex codes as text.
73
+
Edit `assets/sanity-thumbnail-template-left.jpg` (16:9 aspect ratio): keep the exact PHOTOREALISTIC STUDIO PHOTOGRAPH CUTOUT of Alex Patterson on the bottom-left (preserving 100% of his real photographic skin texture, facial likeness, short light-brown hair, blue-green eyes, trimmed salt-and-pepper beard, round black smartwatch on his left wrist, bare hands with no rings, and his black #0B0B0B crew-neck t-shirt with the white stepped Sanity symbol from `assets/Sanity-Symbol--white_on_black.png` printed on the chest; NEVER turn the presenter into a drawing, sketch, or cartoon illustration).
74
+
75
+
Keep the official white-on-black Sanity logo lockup (`assets/Sanity-Full_logo--white_on_black.png`, stepped diagonal zig-zag symbol on the left + bold serif 'Sanity' wordmark on the right) centered at the top.
76
+
77
+
Directly below the top Sanity logo, change the 2-word headline text to "[HEADLINE_WORD_1] [HEADLINE_WORD_2]" in the exact same heavy geometric grotesque font, with "[HEADLINE_WORD_1]" in crisp white (#FFFFFF) and "[HEADLINE_WORD_2]" in vibrant Sanity OrangeRed (#FF5500), ensuring Alex Patterson's head and hands do not overlap or cover the title text.
78
+
79
+
On the right side on the pure black (#000000) background, keep the exact same 2D hand-drawn white (#FFFFFF) double-stroked diagram box style and layout, updating only the text labels inside the boxes for this topic:
80
+
- Left diagram cluster: Double-stroked sketchy boundary box labeled "[LEFT_ALL_CAPS_CAPTION]" at top and bottom in white Virgil hand-drawn marker font, containing three stacked cards ("[BAD_NODE_1]", "[BAD_NODE_2]", "[BAD_NODE_3]") crossed out with a large Coral Red (#FCA5A5) hand-drawn "X" mark.
81
+
- Center diagram card: Connected by sketchy white arrows to a single central document card (with folded top-right corner) labeled "[CENTER_CORE_NODE]".
82
+
- Right diagram cluster: Two sketchy white arrows branching from "[CENTER_CORE_NODE]" to two double-stroked boxes on the far right labeled "[GOOD_NODE_1]" and "[GOOD_NODE_2]", topped with a bright green (#C5E86C / #86EFAC) hand-drawn checkmark and "[RIGHT_ALL_CAPS_CAPTION]" label in white Virgil marker font.
83
+
The hex codes are color values only. Do not render them as text in the image.
89
84
```
90
85
91
86
### Step 3: Call the Image Generator Immediately + Output a Markdown Comparison Table
1.**Always Attach Bundled Reference Images (`assets/*`) on the First Tool Call**:
12
+
1.**Always Attach Bundled `1376x768` Template Images (`assets/*`) on the First Tool Call**:
13
13
Before calling your image generation tool, you **MUST** load and pass the actual PNG/JPG files from `assets/` (and from any `@`-mentioned skill like `@sanity-brand-guidelines`, `@sanitybrand`, `@alex.patterson`, or `@codingcatthumbnails`) as **input reference images** to the image generation tool call:
14
-
-`assets/excalidraw-thumbnail-left-pose.png` or `assets/excalidraw-thumbnail-right-pose.png` (authentic Rough.js double-stroked white boxes, 45-degree diagonal hachure fills, Coral `X`, and green checkmark; **NEVER** draw a macOS window with red/yellow/green dots or circular UI icons).
14
+
-`assets/sanity-thumbnail-template-left.jpg` or `assets/sanity-thumbnail-template-right.jpg` or `assets/diagram-base-purple-green.jpg` (full-resolution `1376x768` templates featuring the 100% photorealistic cutout of Alex Patterson, official Sanity logos, double-stroked white boxes, 45-degree diagonal hachure fills, Coral `X`, and green checkmark; **NEVER** draw a macOS window with red/yellow/green dots or circular UI icons, and **NEVER** turn the presenter into a cartoon drawing or sketch).
15
15
-`assets/Sanity-Full_logo--white_on_black.png` and `assets/Sanity-Symbol--white_on_black.png` (official stepped diagonal 3-line geometric symbol + bold serif `Sanity` wordmark; **NEVER** invent a red square `"S"` app icon).
16
16
-`assets/alex_pointing_left.jpg` or `assets/alex_mind_blown.jpg` (photorealistic studio cutout of `@alex.patterson`).
17
+
-**CRITICAL ANTI-CARTOON RULE**: Never write the word `"Excalidraw"` in the prompt sent to `image_generation` when a presenter is included (writing `"Excalidraw"` causes the image rewriter to turn the presenter into a cartoon sketch). Instead, pass `assets/sanity-thumbnail-template-left.jpg` as Input Image 0 and instruct the tool to keep the **photorealistic studio photograph cutout** of Alex Patterson 100% unchanged while updating the title text and 2D double-stroked diagram node labels.
17
18
2.**Compile Any 1-Sentence Request into the Full 6-Part Prompt**:
18
19
Whenever the user asks for a diagram, thumbnail, or video with a short 1-sentence request (for example, *"Create a diagram for Sanity Content Releases"* or *"Make a thumbnail for WebMCP"*), **YOU (Gemini) must automatically compile their short request into the full 6-Part Zero-Shot Excalidraw Prompt in `references/excalidraw-diagrams.md` (or the 3-Zone Thumbnail Prompt in `references/youtube-thumbnails.md`) and pass that full expanded prompt into the image generation tool**. Never pass a short unexpanded summary to the image generator, and never ask the user to copy-paste the template themselves.
0 commit comments