Agent use case pack · Creative and video

Build your own render tool for a brand look with Claude Code

by PaperChaseWebb

A designer used Claude Code to build a browser tool for liquid 3D shapes, with a WebGL2 path tracer and denoising, that exports 4K loops. The point: designers can now make the tool, not only the image.

Preview card for Build your own render tool for a brand look with Claude Code
Works withClaude CodePlain .md
Price
Free
Difficulty
Intermediate
Setup
30 min
Format
.md file
Free sample

build-your-own-render-tool-for-a-brand-look-with-claude-code.md · 2 KB · direct download, no signup

Download free

What you end up with

A small internal tool keeps a visual style consistent across many assets, which is hard to get from prompting an image model each time.

What you get

  • A plain-language summary of the workflow
  • A fill-in prompt template
  • What to watch out for
  • A link to the original source

Who it is for

Builders who already use AI agents and want a proven workflow they can copy into their own project.

Works with

Claude CodePlain .md

Solid chips: the agent is named in this listing's own tools list. Dashed chip: Plain Markdown, so it also pastes into other agents such as Grok Bot, Hermes, OpenClaw or Muse. We list those as compatible by format only, not as tested.

Tools needed

Claude Codewrote the tool
Reactinterface
WebGL2 path tracerrenders the shapes
Open Image Denoise on WebGPUcleans up renders
You needAn AI coding agent or chat model
You needA small real task to try it on

Cost to run: Free with the agent plan you already use.
Time to result: One working session

How it works

  1. Collect three reference images of the look and name what makes it

    Collect three reference images of the look and name what makes it

    Expected: Done before you move to the next step.

  2. Ask for a single-page tool with sliders for only those qualities

    Ask for a single-page tool with sliders for only those qualities

    Expected: Done before you move to the next step.

  3. Add a still export first, then video loops

    Add a still export first, then video loops

    Expected: Done before you move to the next step.

  4. Lock a few presets as your brand set

    Lock a few presets as your brand set

    Expected: Done before you move to the next step.

  5. Keep the tool in a repo so it can be fixed later

    Keep the tool in a repo so it can be fixed later

    Expected: Done before you move to the next step.

Sample prompt from the pack

Workflow template · Claude Code, React
Apply this workflow to [your project]:
1. Collect three reference images of the look and name what makes it
2. Ask for a single-page tool with sliders for only those qualities
3. Add a still export first, then video loops
4. Lock a few presets as your brand set
5. Keep the tool in a repo so it can be fixed later
Stop and ask me before anything irreversible: deploys, payments, sends or deletes.

Adapted by PaperChaseWebb. Not the original author's prompt.

Free preview of the file

build-your-own-render-tool-for-a-brand-look-with-claude-code.md (excerpt)2 KB total
# Build your own render tool for a brand look with Claude Code

PaperChase agent use case (free feed entry), version 1.0. Source: [Szymon (@aecyydesign on X)](https://x.com/aecyydesign/status/2114825374961897939), 2026-10-26.

## What they did

The designer described the look they wanted and had Claude Code build a dedicated browser app for it: controls for shape and material, a WebGL2 path tracer for realistic light, denoising on WebGPU and export of 4K looping clips. The tool now produces a family of visuals in one style on demand instead of each image being made by hand.

## Worth knowing

A small internal tool keeps a visual style consistent across many assets, which is hard to get from prompting an image model each time. Path tracing in the browser is heavy, so expect long renders on weak GPUs.

Worth knowing

  • A small internal tool keeps a visual style consistent across many assets, which is hard to get from prompting an image model each time. Path tracing in the browser is heavy, so expect long renders on weak GPUs.
  • Figures are as reported by the original author and were not re-measured by us.

Questions

Where does this come from?

A public post credited to Szymon (@aecyydesign on X). Source: https://x.com/aecyydesign/status/2114825374961897939

Is it free?

Yes. Feed entries are free to read and download.

Details

Version 1.0 · Updated Oct 27, 2026 · Markdown version of this page
License: Personal and commercial use. Credit the original source when you share the workflow. Download terms

claude-codewebgldesign-toolsrenderingcreative