Agent skill

blender-proposal-visuals

View SKILL.md on GitHub Repository
Stars 2
Forks 0

Install this agent skill to your Project

npx add-skill https://github.com/ChinchillaEnterprises/ChillSkills/tree/main/blender-proposal-visuals

SKILL.md

Blender Proposal Visuals Skill

Generate meaningful 3D hero visuals for Upwork proposals using Blender MCP. This skill creates visuals that communicate understanding of the client's project, not just decoration.

This skill evolves. After each proposal visual created, update this file with lessons learned.

Core Philosophy

The visual must represent the project's core concept. Before searching for any 3D asset, ask:

  • What is this project fundamentally about?
  • Who is the end user and what transformation do they want?
  • What visual metaphor captures the essence?
  • How will the sidebars CONTRIBUTE to the central visualization, not just display ancillary data?

What We Avoid

  • Random "cool tech" imagery that says nothing
  • AI purple/cyan gradients (screams "LLM generated")
  • Generic Tableau-style dashboards with disconnected boxes
  • Decoration without meaning
  • Sidebars that feel separate from the main content

What We Create

  • Visuals that make clients say "they understand what I'm building"
  • Metaphors that capture the project's essence
  • Professional, warm color palettes with intentional accent pops
  • 3D elements integrated into cohesive UI mockups
  • Interfaces where every element contributes to the central story

Reference Data Sources

ChatGPT History

Location: /Users/tori/Documents/Repos/CHI/chatgpt-upwork-history.txt

Search for relevant proposals, pricing patterns, and successful pitch language:

bash
# Find similar project proposals
grep -i "[project type]" /Users/tori/Documents/Repos/CHI/chatgpt-upwork-history.txt | head -50

# Find pricing patterns
grep -i "\$[0-9].*fixed\|hourly" /Users/tori/Documents/Repos/CHI/chatgpt-upwork-history.txt | head -30

Upwork Jobs Channel

Slack channel #upwork-jobs (C09BNP18741) in Chinchilla Enterprise workspace contains recent job postings. Analyze for:

  • What clients actually want (between the lines)
  • Industry-specific language and pain points
  • Budget expectations and scope patterns

Visual Metaphor Guide

Match project types to meaningful 3D concepts:

Project Type Visual Metaphor Sketchfab Search Terms Why It Works
Domain/Web acquisition Globe, network hologram globe, earth hologram Domains ARE global - scanning the world
Data analytics Data flows, nodes data visualization 3d, node network Shows transformation of chaos to clarity
AI/ML platform Neural networks, brain neural network, brain hologram Represents intelligent processing
Financial/Trading Charts, currency flows stock chart 3d, financial hologram Control and confidence over money
Real estate Buildings, city maps city hologram, building model, 3d map Professional overview of properties
Healthcare DNA, cells, anatomy dna helix, medical hologram Trust and precision
E-commerce Product showcase product showcase, retail display What customers actually see
Security/Auth Shield, fortress security shield, digital lock Protection and trust
IoT/Smart home Connected devices smart home, iot device Control over environment

Color Palette Guidelines

Chinchilla AI Brand (Primary - ALWAYS USE)

css
:root {
    /* Core brand */
    --terracotta: #C4785A;      /* Primary accent - CTAs, highlights, energy */
    --sage: #7A9484;            /* Secondary accent - success, completion, trust */
    --cream: #FDF8F3;           /* Light text on dark */
    --navy: #1B2D4F;            /* Headers, depth */

    /* Third accent for POP (learned from v4) */
    --gold: #D4A853;            /* Highlight important data, strategy, key numbers */
    --gold-soft: rgba(212, 168, 83, 0.15);
    --gold-glow: rgba(212, 168, 83, 0.4);

    /* Backgrounds */
    --bg-deep: #0a0b0d;
    --bg-surface: #111214;

    /* Text hierarchy */
    --cream-90: rgba(253, 248, 243, 0.9);   /* Primary text */
    --cream-70: rgba(253, 248, 243, 0.7);   /* Body text */
    --cream-50: rgba(253, 248, 243, 0.5);   /* Labels */
    --cream-30: rgba(253, 248, 243, 0.3);   /* Muted */
    --cream-08: rgba(253, 248, 243, 0.08);  /* Borders */
    --cream-04: rgba(253, 248, 243, 0.04);  /* Subtle fills */
}

Color Hierarchy (learned from iterations)

  1. Terracotta - Primary actions, main accent, energy
  2. Gold - Highlight/pop for key numbers, strategy, important data
  3. Sage - Success states, completion, trust indicators
  4. Cool teal (#4dd4e6) - ONLY for central visualization contrast (sparingly)

Forbidden Colors (AI Clichés)

  • Purple gradients (#8B5CF6, #A855F7) - Screams "AI generated"
  • Neon cyan (#00FFFF, #00D4FF) as primary UI color
  • Electric blue (#0066FF)
  • Magenta (#FF00FF)

UI Design Principles (Evolved)

1. Integrated Layout - NOT Boxes

css
/* BAD: Hard bordered boxes */
.panel {
    border: 1px solid #333;
    background: #1a1a1a;
}

/* GOOD: Flowing, integrated panels */
.panel {
    background: linear-gradient(145deg, var(--cream-04), transparent);
    border: 1px solid var(--cream-04);
    border-radius: 18px;
}

2. Sidebars That CONTRIBUTE (Key Learning)

Sidebars should feel like they're feeding/receiving from the central visualization:

css
/* Visual connector from sidebar to center */
.sidebar-left::after {
    content: '';
    position: absolute;
    right: -40px;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 200px;
    background: linear-gradient(90deg, var(--terracotta-soft), transparent);
    border-radius: 0 100px 100px 0;
    opacity: 0.6;
}

/* Cards with accent borders showing data flow */
.insight-card {
    border-left: 3px solid var(--terracotta);
}

/* Featured state with glow */
.intel-card.featured {
    border-color: var(--gold-soft);
    background: linear-gradient(145deg, var(--gold-soft), transparent);
}

/* Reveal gradient on hover */
.intel-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--terracotta), var(--gold), var(--sage));
    opacity: 0;
    transition: opacity 0.2s ease;
}
.intel-card:hover::before {
    opacity: 1;
}

3. Floating Metrics Connected to Visualization

css
/* Connector lines from metrics to globe */
.metric.top-left .metric-card::after {
    content: '';
    position: absolute;
    bottom: -20px;
    right: 20px;
    width: 40px;
    height: 20px;
    border-right: 1px solid var(--cream-15);
    border-bottom: 1px solid var(--cream-15);
    border-radius: 0 0 12px 0;
}

4. Animation That Adds Life

css
/* Rotating ring around central element */
.globe-ring {
    border: 1px solid var(--cream-08);
    border-radius: 50%;
    animation: rotate 30s linear infinite;
}
.globe-ring::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 8px;
    height: 8px;
    background: var(--gold);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--gold);
}

/* Shimmer on progress bars */
.confidence-fill::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--gold));
    animation: shimmer 1.5s infinite;
}

/* Glow pulse on highlighted cards */
.insight-card.highlight::before {
    background: linear-gradient(135deg, var(--gold-soft), transparent);
    animation: glowPulse 2s infinite;
}

/* Breathing glow on central visualization */
@keyframes breathe {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
}

5. Typography Hierarchy

css
/* Section labels */
.section-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--terracotta);
}

/* Card titles */
.card-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--cream-50);
}

/* Metric values - BIG and impactful */
.metric-value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
}

/* Body text */
.body-text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--cream-70);
}

Available MCP Tools

Scene Control (Always Available)

Tool Purpose
mcp__blender__execute_blender_code Run any Python (bpy) in Blender — the workhorse tool
mcp__blender__get_scene_info Full scene dump — objects, cameras, lights, render settings
mcp__blender__get_object_info Inspect a specific object (transforms, materials, modifiers)
mcp__blender__get_viewport_screenshot Capture viewport as image — use to iterate visually
mcp__blender__set_texture Apply texture to an object

Asset Sources (3 Providers)

Sketchfab — Largest 3D model library. Best for specific objects, characters, scenes.

Tool Purpose
mcp__blender__search_sketchfab_models Search models (filter: downloadable, license, animated)
mcp__blender__get_sketchfab_model_preview Preview before committing to download
mcp__blender__download_sketchfab_model Download and auto-import into scene

PolyHaven — Free CC0 HDRIs, textures, and models. Best for environments and materials.

Tool Purpose
mcp__blender__search_polyhaven_assets Search HDRIs, textures, or 3D models
mcp__blender__get_polyhaven_categories Browse available categories
mcp__blender__download_polyhaven_asset Download and import (specify: hdris, textures, or models)

Use PolyHaven for: Environment lighting (HDRI), realistic material textures, simple prop models. Use Sketchfab for: Specific objects, characters, complex scenes, animated models.

AI 3D Generation (When Nothing Exists)

When no existing model fits the concept, generate one from scratch.

Hyper3D (Rodin) — Best quality, supports text and image input.

Tool Purpose
mcp__blender__generate_hyper3d_model_via_text Generate from text description
mcp__blender__generate_hyper3d_model_via_images Generate from reference images
mcp__blender__get_hyper3d_status Check job status
mcp__blender__poll_rodin_job_status Poll until complete
mcp__blender__import_generated_asset Import the result into Blender

Hunyuan3D (Tencent) — Alternative generator, text-to-3D.

Tool Purpose
mcp__blender__generate_hunyuan3d_model Generate from text description
mcp__blender__get_hunyuan3d_status Check job status
mcp__blender__poll_hunyuan_job_status Poll until complete
mcp__blender__import_generated_asset_hunyuan Import the result

When to use AI generation:

  • No Sketchfab/PolyHaven model captures the metaphor
  • Need a custom/branded object (e.g., a chinchilla mascot, a specific product shape)
  • Need a stylized version of a common object (holographic, wireframe, low-poly)
  • Time: ~1-3 min generation, quality varies — always preview before using

Asset Decision Tree

Need a 3D asset?
├── Specific real object (globe, building, animal) → Sketchfab
├── Environment/lighting/material → PolyHaven HDRI/texture
├── Simple prop (table, chair, tree) → PolyHaven model
├── Custom/branded/stylized → AI generation (Hyper3D first, Hunyuan3D fallback)
└── Procedural geometry (wireframes, particles, data viz) → execute_blender_code

Blender MCP Workflow

Step 1: Understand the Project

Before touching Blender, analyze:

  1. Read the Upwork job description carefully
  2. Search ChatGPT history for similar projects
  3. Identify the core visual metaphor
  4. Determine what transformation the client wants for their users

Step 2: Search for Meaningful Asset

Option A: Sketchfab (default for specific models)

python
mcp__blender__search_sketchfab_models(
    query="hologram globe",  # Based on visual metaphor guide
    count=15,
    downloadable=True
)

Option B: PolyHaven (for environments, textures, simple models)

python
mcp__blender__search_polyhaven_assets(
    query="studio",
    asset_type="hdris"  # or "textures" or "models"
)

Option C: AI Generation (when nothing exists)

python
mcp__blender__generate_hyper3d_model_via_text(
    prompt="holographic wireframe globe with data nodes, translucent blue glass material",
    user_prompt="Generate a custom 3D globe for a domain acquisition dashboard"
)
# Then poll and import:
mcp__blender__poll_rodin_job_status(task_id="[RETURNED_ID]")
mcp__blender__import_generated_asset(asset_id="[ASSET_ID]")

Selection criteria:

  • Does it represent the project concept? (MOST IMPORTANT)
  • Is it visually clean?
  • Will it render well as a hero element?
  • CC Attribution license preferred (Sketchfab) / CC0 (PolyHaven)

Step 3: Scene Setup

python
import bpy
import math

# Clear scene
bpy.ops.object.select_all(action='SELECT')
bpy.ops.object.delete()

# Set EEVEE for speed
bpy.context.scene.render.engine = 'BLENDER_EEVEE_NEXT'

# Warm dark background
world = bpy.data.worlds.get('World') or bpy.data.worlds.new('World')
bpy.context.scene.world = world
world.use_nodes = True
bg_node = world.node_tree.nodes.get('Background')
bg_node.inputs['Color'].default_value = (0.012, 0.012, 0.015, 1)

# Camera
bpy.ops.object.camera_add(location=(0, -4, 0.5))
camera = bpy.context.active_object
camera.rotation_euler = (math.radians(85), 0, 0)
bpy.context.scene.camera = camera

Pro tip: Use get_viewport_screenshot after scene setup to verify camera angle before proceeding.

Step 3b: Environment Lighting via PolyHaven (Optional)

python
# Instead of manual lights, use an HDRI for realistic ambient lighting
mcp__blender__download_polyhaven_asset(
    asset_id="studio_small_09",
    asset_type="hdris",
    resolution="2k"
)

This sets up the world environment automatically. Add area lights on top for accent.

Step 4: Download and Position

python
mcp__blender__download_sketchfab_model(
    uid="[MODEL_UID]",
    target_size=2.0
)

model = bpy.data.objects.get('Sketchfab_model')
model.location = (0, 0, 0)

Step 5: Warm Lighting

python
# Key light - warm amber
bpy.ops.object.light_add(type='AREA', location=(2, -2, 3))
key = bpy.context.active_object
key.data.energy = 150
key.data.color = (1.0, 0.7, 0.4)
key.data.size = 3

# Fill light - soft warm
bpy.ops.object.light_add(type='AREA', location=(-2, -1, 1))
fill = bpy.context.active_object
fill.data.energy = 50
fill.data.color = (1.0, 0.85, 0.7)

# Rim light - golden
bpy.ops.object.light_add(type='AREA', location=(0, 2, 2))
rim = bpy.context.active_object
rim.data.energy = 80
rim.data.color = (1.0, 0.8, 0.5)

Step 6: Compositing (Glow)

python
bpy.context.scene.use_nodes = True
tree = bpy.context.scene.node_tree

for node in tree.nodes:
    tree.nodes.remove(node)

render = tree.nodes.new('CompositorNodeRLayers')
glare = tree.nodes.new('CompositorNodeGlare')
glare.glare_type = 'FOG_GLOW'
glare.threshold = 0.5
glare.size = 7
output = tree.nodes.new('CompositorNodeComposite')

tree.links.new(render.outputs['Image'], glare.inputs['Image'])
tree.links.new(glare.outputs['Image'], output.inputs['Image'])

Step 7: Verify and Render

python
# Always check the viewport before final render
mcp__blender__get_viewport_screenshot(max_size=800)

# Then render
bpy.context.scene.render.resolution_x = 1000
bpy.context.scene.render.resolution_y = 1000
bpy.context.scene.render.filepath = '/Users/tori/Documents/Repos/CHI/automations/output/[PROJECT]_render.png'
bpy.ops.render.render(write_still=True)

ClaudeCanvas Integration

After generating the 3D render:

  1. Create HTML mockup using the design principles above
  2. Reference the render as src="[PROJECT]_render.png"
  3. Generate screenshot:
bash
cd /Users/tori/Documents/Repos/CHI/automations
node -e "
const puppeteer = require('puppeteer');
(async () => {
    const browser = await puppeteer.launch({
        executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
        headless: 'new'
    });
    const page = await browser.newPage();
    await page.setViewport({ width: 1920, height: 1080, deviceScaleFactor: 2 });
    await page.goto('file:///Users/tori/Documents/Repos/CHI/automations/output/[MOCKUP].html');
    await page.waitForTimeout(1000);
    await page.screenshot({ path: 'output/[MOCKUP].png' });
    await browser.close();
})();
"

Output Location

All outputs: /Users/tori/Documents/Repos/CHI/automations/output/

Naming:

  • [ProjectName]_render.png - Blender 3D render
  • ClaudeCanvas-[ProjectName].html - UI mockup source
  • ClaudeCanvas-[ProjectName].png - Final screenshot

Iteration Log

v4 Learnings (NEXUS Domain Acquisition)

  • Third color (gold) essential for visual hierarchy and "pop"
  • Sidebars must contribute - use visual bridges, accent borders, connector elements
  • Floating metrics need connectors - subtle lines linking them to central visualization
  • Animation adds life - rotating rings, shimmer effects, breathing glows
  • Featured states - highlight active/important cards with glow backgrounds
  • Cool teal for visualization is fine as contrast against warm UI

Design Evolution Process

  1. First draft → Identify "box problem"
  2. Add gradient backgrounds → Still feels disconnected
  3. Add visual bridges between sections → Better flow
  4. Add third accent color (gold) → Visual hierarchy
  5. Add animation/life → Interface feels alive
  6. Refine hover states → Interactive feedback

Self-Improvement Protocol

Manual (After Each Proposal)

  1. Note what worked well
  2. Note what needed iteration
  3. Update this skill file with new patterns
  4. Add to the Iteration Log section

Autonomous (Weekly - Sundays 6 AM)

A cron job runs /Users/tori/Documents/Repos/CHI/automations/skill-evolution/evolve-proposal-skill.sh that:

  • Searches for latest UI/UX design trends
  • Finds new CSS patterns, glassmorphism updates, micro-interactions
  • Incorporates 1-3 new techniques directly into this skill
  • Logs updates to the Iteration Log section
  • Runs silently without notification

This skill gets sharper with every use AND every week.

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

ChinchillaEnterprises/ChillSkills

Red Team

Use this skill when the user says "red team", "stress test", "attack this", "critique this", "run the models against this", "test this plan", "refine this with AI", or wants to use external AI models to critique, validate, or improve a document, pitch, plan, or idea. Also use when the user wants to save Claude Code usage by offloading analysis to other models.

2 0
Explore
ChinchillaEnterprises/ChillSkills

Upwork Scanner

This skill should be used when the user asks to "scan upwork", "find upwork jobs", "check upwork", "run the scanner", "look for jobs", or mentions finding freelance projects for Chinchilla AI.

2 0
Explore
ChinchillaEnterprises/ChillSkills

Polymarket Arb Scanner

This skill should be used when the user asks to "scan polymarket", "find arb opportunities", "check polymarket arbs", "run arb scanner", "polymarket arbitrage", or mentions detecting price inefficiencies on Polymarket.

2 0
Explore
ChinchillaEnterprises/ChillSkills

captain-update

2 0
Explore
ChinchillaEnterprises/ChillSkills

Polymarket Copy Trader

This skill should be used when the user asks to "copy trade", "telegram bot polymarket", "follow traders", "copy polymarket", or mentions building a copy trading bot for Polymarket.

2 0
Explore
ChinchillaEnterprises/ChillSkills

Architecture Diagram

This skill should be used when the user asks to "generate a diagram", "create an architecture diagram", "make a diagram", "draw a system diagram", or needs a branded Chinchilla AI technical diagram for proposals or documentation.

2 0
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results