Fix Claude Code's Mid Design (4 Free Repos + Prompts)

Claude Code is incredible at building apps, but the design it ships by default is mid. These 4 free, open source GitHub repos are the fix: animated gradients, liquid chrome logos, Apple style glass, and full 3D scenes. You do not write any of the code. You paste the GitHub link into Claude Code, tell it where you want the effect, and it wires the whole thing in.

What You'll Learn

• What each repo does and where to customize it
• The exact copy paste Claude Code prompt for all 4
• No coding required, you paste the link and Claude wires it in

The one move that makes this work: you do not need to understand the React or shader code. Open the repo's hosted demo, get it looking how you want, then paste the GitHub link into Claude Code with the prompt below and say where on your site you want it. Claude reads the repo and installs and wires it for you.

1. ShaderGradient: Moving Gradients

1.7k+ stars. Smooth, animated 3D gradients for your backgrounds, fully customizable by shape, color, and motion. Design it visually first, then hand the config to Claude.

Repo: https://github.com/ruucm/shadergradient

Setup and main uses:

• Customize it live at shadergradient.co/customize, then hit Export to grab the config
• Best as a hero or full page background behind your content
• Works in React and Next.js (and there are Figma + Framer versions too)

The prompt:

Install @shadergradient/react @react-three/fiber three three-stdlib
camera-controls. Add a full-screen ShaderGradient as my hero background, fixed
behind the content so the text stays readable. Use this config I exported from
shadergradient.co: [paste your exported config here]

2. Liquid Logo: Liquid Chrome Metal

750+ stars, by Paper. Turns any logo into animated liquid metal chrome using Paper Shaders. Drop your logo into the hosted tool to see it instantly, then have Claude add it to your site.

Repo: https://github.com/paper-design/liquid-logo

Setup and main uses:

• Try it instantly at liquid.paper.design, just upload your logo
• Great for a navbar logo, a hero centerpiece, or a loading screen
• Give Claude your logo file (public/logo.png) and the repo link

The prompt:

Clone github.com/paper-design/liquid-logo and wire it into my site. Render my logo
(public/logo.png) as an animated liquid-metal chrome effect in the hero, following
the Paper Shaders setup in the repo's README.

3. Liquid Glass JS: Apple Glass Effect

450+ stars, MIT, vanilla JS. The Apple inspired liquid glass effect for any element. It is plain JavaScript, so it is the easiest one to drop into any site, no framework needed.

Repo: https://github.com/dashersw/liquid-glass-js

Setup and main uses:

• See it live at dashersw.github.io/liquid-glass-js
• Best on pricing cards, primary buttons, and navbars
• Works on any site since it is vanilla JS (just include the scripts)

The prompt:

Add the liquid-glass-js library from github.com/dashersw/liquid-glass-js. Apply the
Apple liquid-glass effect to my pricing cards and primary buttons, following the
Quick Start in the README (html2canvas + container.js + button.js).

4. React Three Fiber: Full 3D Scenes

31k+ stars, MIT. The boss level. It renders full three.js 3D scenes inside your React site. You do not hand build the 3D, you describe the scene and let Claude assemble it with this library.

Repo: https://github.com/pmndrs/react-three-fiber

Setup and main uses:

• Browse live examples at r3f.docs.pmnd.rs/getting-started/examples for ideas
• Add @react-three/drei for ready made helpers (cameras, lights, controls)
• Keep scenes light so they do not hurt page performance

The prompt:

Install @react-three/fiber @react-three/drei three. Build a slowly rotating glass
torus (or my product model) in my hero section using react-three-fiber. Make it
responsive and lightweight so it does not hurt performance.

Stack Them (But Not All Of Them)

You do not need all 4 on one page. Pick one hero moment (a ShaderGradient background or a 3D scene), add one accent (a liquid chrome logo or glass buttons), and stop there. Two well placed effects are what make a site stop looking AI built. More than that and it gets noisy.

Go Deeper

Prefer a printable version? Grab the PDF: https://drive.google.com/file/d/1FDzzAoEx5A1P1X5U4R5B4xgM2tYFHbT1/view?usp=drivesdk

Want the whole system installed live, with Cooper on the call? Build Your Own AI, the two week sprint runs the first two weeks of August.

Or get a new working tool every Monday inside The AI Operator community on Whop.