Claude Code's Secret 3D Weapon: The /render Skill Exposed

What if you could describe a complex mechanical part in plain English and watch it materialize in your browser within seconds? No Blender interface to wrestle with. No Fusion 360 subscription. No hours of clicking through extrude and revolve operations. Just words becoming geometry.

Sound impossible? It's not. A growing circle of developers and hardware hackers have discovered a hidden capability inside Claude Code that transforms the AI coding assistant into a parametric 3D modeling engine. The secret is /render — a skill so elegantly simple it feels like cheating.

Here's the painful reality most makers face: traditional CAD workflows are absurdly slow for iterative design. You sketch, constrain, extrude, fillet, export, realize something's wrong, and start over. The loop kills creativity. Meanwhile, code-based CAD tools like OpenSCAD promised salvation but delivered cryptic syntax and debugging nightmares.

Enter the /render skill for Claude Code. Built on top of the powerful build123d library, this skill lets you type /render a gear with 12 teeth and watch Claude write the Python, execute it, and spin up a browser-based viewer with orbit controls, cross-section slicing, and even region-based editing. The future of parametric design isn't point-and-click. It's conversational.

In this deep dive, I'll expose exactly how this skill works, why it's trending among technical founders, and how you can install it in under two minutes. Whether you're prototyping enclosures, designing mechanical parts, or just exploring generative geometry, this changes everything.

What Is the /render Skill?

The /render skill is a Claude Code extension created by mfranzon that bridges natural language and parametric 3D modeling. It lives at github.com/mfranzon/render and represents a fascinating convergence of three technologies: conversational AI (Claude), programmatic CAD (build123d), and real-time web visualization (Three.js).

Unlike traditional CAD software that traps you in graphical interfaces, /render treats geometry as code-first and version-controllable. Claude Code writes Python scripts using build123d's fluent API, executes them in an isolated environment, and pipes the resulting .glb files to a local Three.js viewer. The entire pipeline — from natural language prompt to rendered 3D model — completes in seconds.

Why it's exploding in popularity right now:

• Hardware startups need speed: Iterating physical prototypes demands rapid geometry exploration. Text-to-CAD collapses days into minutes.
• AI coding workflows are maturing: Claude Code's skill system enables composable AI capabilities. /render proves the pattern works for domains beyond traditional software.
• build123d solved OpenSCAD's ergonomics: Where OpenSCAD feels like programming in 1995, build123d offers Pythonic, type-hinted, composable geometry operations.
• The browser viewer eliminates friction: No installing heavy CAD packages. A local server on port 3123 gives you professional visualization instantly.

The skill definition lives in SKILL.md, which serves dual duty: it instructs Claude how to generate build123d code, and it acts as a comprehensive API reference. This meta-programming approach — where the AI's instructions are themselves a structured document — is quietly revolutionary for reproducible AI behavior.

Key Features That Make /render Insane

Let's dissect what makes this skill genuinely powerful, not just gimmicky.

Natural Language to Parametric Geometry The core magic: you describe, Claude codes. But it's not naive text-to-mesh like some AI tools that output uneditable blobs. Claude generates fully parametric Python using build123d's solid modeling kernel. Every dimension, fillet, and boolean operation is exposed as tweakable code. This means your "gear with 12 teeth" becomes a script where teeth=12 is a variable you can adjust.

Integrated Browser Viewer with Three.js The viewer isn't an afterthought — it's a sophisticated inspection tool running on http://localhost:3123:

• Orbit controls: Rotate, pan, zoom with intuitive mouse gestures
• Render modes: Toggle between solid, wireframe, and x-ray visualization
• Cross-section slicing: The ✂ slice tool lets you cut along X/Y/Z axes with a position slider and flip control — essential for inspecting internal geometry
• Model gallery: Browse all previous renders with the ▦ models button

Live Code Editing with Hot Reload Click </> code and the underlying Python script appears in a panel. Tweak parameters, hit Ctrl+Enter, and the model regenerates instantly. This tight feedback loop — edit code, see geometry — matches the best commercial parametric CAD workflows.

Region-Based AI Editing (✎) This is where it gets wild. Click ✎ edit, drag a rectangle on your model, type "make this hole bigger" or "add a Ø3 mm hole here", and Claude interprets the screenshot with selection overlay, modifies the relevant Python file, and re-renders. The pending edits queue in viewer/edits/pending/ and can be processed on-demand (/render apply pending edits) or hands-free via an auto-armed file-watcher loop.

Production-Ready Export

• .glb for web viewers and game engines
• .step via the ⬳ STEP button for sending to professional CAM/slicer pipelines
• printable=True flag for quick shell/infill preview before 3D printing

Zero Dependency Headaches setup.sh bootstraps everything: creates a Python 3.10+ venv, installs build123d and its native dependencies. You literally clone and type /render.

Real-World Use Cases Where /render Dominates

1. Rapid Mechanical Prototyping

Need a custom gear, bracket, or enclosure? Instead of firing up Fusion 360, type /render a motor mount for NEMA 17 with 4 M3 mounting holes. Claude generates parametric code. You slice it, export STEP to your slicer, and print. The iteration cycle shrinks from hours to minutes.

2. Generative Design Exploration

Want to explore a design space? Ask Claude to vary parameters systematically: /render a vase with sinusoidal wall thickness, 20 periods, amplitude 2mm. The code panel exposes all variables — tweak periods=20 to periods=40, hit Ctrl+Enter, compare. This is algorithmic design without the algorithmic expertise.

3. Hardware Startup MVP Enclosures

Every hardware founder knows the enclosure nightmare. With /render, describe your PCB dimensions, connector placements, and mounting features conversationally. The resulting Python becomes living documentation — when your PCB revs, update the variables, re-render. No redrawing from scratch.

4. Educational Geometry and Math Visualization

Teachers and researchers can generate complex mathematical surfaces instantly: /render a torus knot with p=2, q=3. Students see the code that produces the shape, learning both parametric modeling and Python. The x-ray and slice tools make internal structure visible.

5. Repair Part Replication

Broken plastic tab on your dishwasher? /render a replacement bracket, 45mm long, 2mm thick, with a 5mm hole 10mm from each end. Print, test, iterate. The parametric source means you can precisely adjust after physical testing.

Step-by-Step Installation & Setup Guide

Getting /render running takes under two minutes. Here's the exact process.

Prerequisites

• Python 3.10+ installed system-wide
• Claude Code installed and authenticated

Installation Commands

# Clone the skill into Claude Code's skills directory
git clone https://github.com/mfranzon/render.git ~/.claude/skills/render

That's the only manual step. The directory structure matters — Claude Code auto-discovers skills from ~/.claude/skills/.

First Run Bootstrap

# Launch Claude Code in any project directory
claude

# Inside Claude Code, type your first render command
/render a box with a hole

On first execution, setup.sh automatically:

1. Creates an isolated Python virtual environment at ~/.claude/skills/render/.venv
2. Installs build123d and its dependencies (~30 seconds)
3. Starts the Three.js viewer server on port 3123
4. Generates your first model and opens it in-browser

Manual Viewer Startup (if needed)

If the viewer doesn't auto-start, or you want to use it standalone:

# Start the viewer server directly
~/.claude/skills/render/.venv/bin/python3 \
  ~/.claude/skills/render/viewer/serve.py

The server runs on http://localhost:3123 and serves both the Three.js frontend and an /api/edit endpoint for processing region-based edits.

Manual Script Execution (Standalone Mode)

You don't even need Claude Code for basic usage:

# Write a build123d script
cat > ~/.claude/skills/render/viewer/models/script.py << 'EOF'
from build123d import *
from viewer.render import render

# Create a box and subtract a cylinder (boolean difference)
box = Box(10, 10, 10) - Cylinder(4, 12)
box.color = Color("steelblue")  # Apply material color
render("model", box)  # Export to .glb and auto-load in viewer
EOF

# Execute with proper PYTHONPATH
PYTHONPATH=~/.claude/skills/render \
  ~/.claude/skills/render/.venv/bin/python3 \
  ~/.claude/skills/render/viewer/models/script.py

This standalone pattern is powerful for CI/CD pipelines or automated generation workflows.

REAL Code Examples from the Repository

Let's examine actual code patterns from the /render skill, with detailed explanations.

Example 1: The Core Render Pipeline

This is the fundamental pattern Claude generates for every model:

from build123d import *
from viewer.render import render

# Create geometry using build123d's fluent API
box = Box(10, 10, 10) - Cylinder(4, 12)
#        ^^^^^^^^^^^^^   ^^^^^^^^^^^^^^^
#        Base shape       Subtracted feature (boolean difference)
#        (10x10x10 mm)    (radius 4, height 12)

box.color = Color("steelblue")
# ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Apply PBR-style material color for viewer

render("model", box)
# ^^^^^^^^^^^^^^^^^^^ Export as .glb to viewer/models/model.glb
#                     Also generates viewer/models/model.py (source)
#                     Auto-triggers viewer reload via file watcher

Key insight: The - operator is build123d's overloaded boolean difference. This reads like math but executes as solid geometry operations. The render() helper abstracts export complexity — it writes .glb for the viewer, preserves the Python source, and signals the viewer to refresh.

Example 2: Printable Preview Mode

For 3D printing workflows, you need to verify shell thickness and infill patterns:

from build123d import *
from viewer.render import render, render_printable

shape = Box(20, 20, 5) - Box(16, 16, 5)
#        ^^^^^^^^^^^^^   ^^^^^^^^^^^^^
#        Outer shell      Inner cavity (boolean difference)
#        Creates a 2mm    Hollows out the center
#        wall thickness

# Standard export: solid geometry exactly as authored
render("model", shape)

# Printable preview: quick shell/infill visualization
render("model", shape, printable=True)
#                            ^^^^^^^^^^^^^^^^
#                            Enables slice-like preview mode
#                            Shows wall thickness, infill pattern

# Or use the convenience wrapper:
render_printable("model", shape)
# ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Identical to above

When to use which: Use standard render() for design review and engineering analysis. Use printable=True or render_printable() specifically when preparing for FDM/SLA printing — it reveals whether your walls are thick enough and if overhangs need support.

Example 3: Hands-Free Edit Processing Loop

The skill auto-arms a background loop for region-based editing. Here's how to manually trigger the same mechanism:

# Inside Claude Code session
/loop /render apply pending edits

This creates a file-watcher on viewer/edits/pending/ that:

1. Detects new .png screenshots with selection rectangles (~1 second latency)
2. Invokes Claude to interpret the visual edit request
3. Modifies the relevant viewer/models/<name>.py source file
4. Re-executes the script to generate updated .glb
5. Moves processed edits to viewer/edits/processed/ for history
6. Echoes back: 📝 Edit prompt: "make this hole bigger"

The technical architecture: The viewer's serve.py exposes an /api/edit endpoint. When you drag a selection and submit, it captures a WebGL screenshot, overlays the red rectangle, saves to pending/, and the file watcher (via /loop) triggers Claude's analysis. This is multimodal AI — vision + language + code generation — orchestrated through filesystem events.

Example 4: Full Directory Structure for Custom Skills

Understanding the file layout enables customization:

~/.claude/skills/render/
├── SKILL.md              # Claude's instructions + build123d API reference
│                           # This is the prompt engineering layer
├── setup.sh              # Idempotent bootstrap: venv + dependencies
├── viewer/
│   ├── index.html        # Three.js app: viewport, hamburger menu, panels
│   ├── serve.py          # HTTP server (port 3123) + /api/edit endpoint
│   │                       # Also handles WebSocket-like polling for reloads
│   ├── render.py         # render() helper: .glb/.step export, color handling
│   ├── models/           # Generated artifacts
│   │   ├── model.glb     # Three.js-ready binary glTF
│   │   ├── model.step    # ISO 10303-21 for professional CAD import
│   │   └── model.py      # Reproducible source code (the ultimate parametric)
│   └── edits/
│       ├── pending/      # Queued visual edit requests (PNG + metadata)
│       └── processed/    # Archive of applied edits with timestamps
└── README.md             # Human documentation (what you're reading now)

Power user tip: The model.py files are the real deliverable. They constitute executable specifications — geometry as version-controlled, diffable, reviewable code. Commit these to git, not the .glb binaries.

Advanced Usage & Best Practices

Version Control Your Geometry Treat viewer/models/*.py as source code. Gitignore *.glb and *.step — they're build artifacts. This gives you git diff for design iterations, pull requests for design reviews, and git bisect when something breaks.

Compose Complex Assemblies build123d supports full assembly hierarchies. Build parts separately, then use Compound or location-based placement:

from build123d import *
from viewer.render import render

base = Box(50, 50, 5)
standoff = Cylinder(3, 10)
standoff.location = Location((20, 20, 5))  # Position on top of base

assembly = base + standoff  # Boolean union
render("assembly", assembly)

Optimize for Print Orientation Use the ✂ slice tool aggressively. Check layer adhesion in Z, overhang angles, and support requirements before exporting STEP to your slicer.

Batch Generate Design Variants Write a script that loops over parameter ranges, calling render() with unique names. This replaces design-of-experiments workflows that take days in GUI CAD.

Extend the Skill The SKILL.md file controls Claude's behavior. Add your company's standard materials, preferred tolerances, or common part libraries there. It's prompt engineering as configuration.

Comparison with Alternatives

Why /render wins: It's the only workflow that combines conversational input, full parametric control, instant visualization, and AI-assisted editing in a free, open-source stack. Fusion 360 is more powerful for surfacing and simulation, but it's expensive and locked to Autodesk's ecosystem. OpenSCAD is free and parametric but ergonomically hostile. /render sits in a sweet spot: accessible to beginners, powerful for experts, and uniquely AI-native.

FAQ

Q: Do I need a paid Claude Code subscription to use /render? A: Yes, Claude Code requires an active subscription. The /render skill itself and build123d are free and open-source.

Q: Can I use this without Claude Code at all? A: Absolutely. The viewer and render() helper work standalone. You write Python scripts manually and execute them with the venv Python. You lose natural language input and AI editing, but keep all parametric capabilities.

Q: What 3D printers does the printable=True mode support? A: It's a generic preview, not slicer-specific. It visualizes shell/infill conceptually. Export .step and import into Cura, PrusaSlicer, Bambu Studio, or any professional slicer for final G-code generation.

Q: How precise is the geometry? A: build123d uses OpenCASCADE, the same industrial kernel behind FreeCAD and many commercial CAD tools. Precision is suitable for mechanical engineering, typically micron-level depending on tessellation settings.

Q: Can I import existing STEP files for modification? A: build123d supports STEP import, though the workflow isn't directly exposed in /render yet. Use import_step() in your Python scripts, then apply boolean operations or parametric modifications.

Q: Is the viewer accessible from other devices on my network? A: By default serve.py binds to localhost. Modify the bind address in serve.py for LAN access, but be aware this exposes the edit API without authentication.

Q: How do I debug when Claude generates incorrect geometry? A: Open the </> code panel, inspect the Python, and iterate. The beauty of code-based CAD: every step is inspectable and modifiable. You can also run scripts manually with full Python traceback visibility.

Conclusion

The /render skill for Claude Code isn't just a novelty — it's a fundamental shift in how we create physical objects. By collapsing the gap between intention and geometry, it removes the interface friction that has slowed hardware innovation for decades. Natural language becomes a legitimate CAD input. Parametric Python becomes the universal design document. And a browser tab becomes your real-time workshop.

I've tested dozens of CAD workflows over fifteen years in hardware and software. Nothing has felt this immediately transformative. The combination of Claude's code generation, build123d's solid modeling kernel, and the polished Three.js viewer creates a flywheel of iteration that outpaces anything in the traditional toolchain.

The skill is young, actively developed, and hungry for community contributions. Whether you're a maker printing weekend projects or an engineer shipping production hardware, you owe it to yourself to experience this workflow.

Your next step is simple: clone the skill, type /render a gear with 12 teeth, and watch the future of design appear in your browser. The repository awaits at github.com/mfranzon/render. Don't just read about it — render something.