DesignCode

I recorded a 13-min video on how to build a 3D website with Claude Code and Opus 5.5 The whole workflow: → find 3D references on Mobbin, right inside Claude → one prompt with the references, the plan and the camera → pick the right medium: what's real 3D, what's painted light, what's a cut-out → the dream loop: Opus screenshots its own build, scores it against a target image, and fixes what's off → furnish the room, then fix the mistakes and make it fast on phones Round 1 scored 4.6. The dream loop took it past 8.

Figma Weave designed this whole page. One canvas made the same frame in four seasons, the depth maps and the motion studies. Then I handed that folder to Claude Code to build it. Prompt below ↓ See the workflow: app.weavy.ai/flow/6yKBise7YH…

this is going to instantly avoid ai slops. url: benji.org/stageshow nitter.cf/benjitaylor/status/211…

The amount of detail in this is staggering. Unreal MCP for Claude Code is my next step into game dev. repo: github.com/EpicGames/unreal-… nitter.cf/xikhar/status/21145672…

This kinda went viral. Some thought it wasn't a real game so here's another gameplay trailer made with Opus 5.5. All three.js.

I got the chance to work on the landing page for a new video model from a lab that grows real brain cells. insanely cheap at half a cent a second. had a lot of fun creating three.js concepts with opus 5.5. here's my workflow. check out mischief-1: app.tbc.co

I've always wanted to play D&D with my kids with AI as the game master. So I made one with Opus 5.5.

I asked @Dola_Trend to create these launch visuals. It blew my mind. It only took one prompt and one screenshot and it produced 3 campaign routes and a Seedream 5.0 Pro hero for each. Here's the workflow, step by step 👇

I made seven small 3D worlds, each from a single image. One picture per world, one per character. @Viggle_PINOC by @ViggleAI, running on their new JST-2 world model, turned them into Gaussian splat worlds and rigged characters that run in the browser. Then Claude Code, connected to the PINOC MCP, walked Fern through every world and directed the camera. All of this is 3D. Imagine it as a landing page, a game or a demo people can explore. viggle.ai/pinoc/app

I made a skill called HTML Reel that turns a post, a video or a landing page into a reel. It writes the script, builds every scene in HTML and cuts each move on a word. Once you record your take, it retimes everything to your voice. fil.design/skills/html-reel

I made these landing pages with MiniMax M3.1 Flash, at a fraction of the cost of frontier models. Three keyboard sites, a SaaS page, a rainy 3D Singapore at night and a little 3D lighthouse game. My favourite is the exploded keyboard one. I made one render of the keyboard in MiniMax first, and every painting, photo and film came from that render, so it's the same board in every room. $0.15 per 1M input tokens, $0.60 per 1M output. Here's the whole process, prompts included.

I made a skill that turns your app into a demo in HTML. So they stay sharp at any size, loop, scrub, jump to any step and stand still for reduced motion. I open-sourced it as a skill: fil.design/skills/html-demo

Me explaining my entire workflow in a 38-min tutorial

You can pretty much reverse engineer any device in your home and build a mac app around it. Applied to lights, doors, ac and even the future robot helper. Here's the skill: github.com/morluto/rea It's crazy what you can build nowadays with a skill and a few prompts.

Such a good skill for visual explainers. All SVG and animated. Prompt I used: github.com/wheresryan22/anat… install skill /anatomy Explain how Seedream 5.0 is able to split an image into layers and what cool things you can produce with it. Do that in a single HTML file. Change the camera/zoom in for scene 1 to 5 to explain more clearly.

This is a must-have collection of shaders for making landing pages. Use this prompt in codex/claude: github.com/shader-effects-in… Give me the list of the shaders and their screenshots so I can use for my website.

Nano Banana 2.1 is absolutely incredible for web design and creatives. Google really cooked with this one. It's my default image gen. No more of those visual artifacts.

I recorded a 45-min tutorial on how to create paid apps with Claude Code and Codex Prompts below 👇 TLDR: I hit $100K MRR. Aura is now only 20% of that. Completely different strategy now. Here's my playbook for building paid web apps with AI: - Find ideas in the tools you use every day. What's missing in Codex, Cursor, Figma? - Revisit your old products and ask how you'd build them today - Use Opus 5.5 for front-end, Codex for harness - One-shot for a baseline, then break it into parts. Anyone can copy a one-shot - Name your stack and future needs up front: React + Vite, Supabase, Stripe - Give one quality reference per feature: Figma, Spline, Linear - Add an AI layer with APIs so the tool generates, not just displays - Have the AI score its work out of 10 and screenshot its own mistakes - Record a demo, post everywhere, paste feedback into your agent, ship If you care, the AI cares. If you need inspirations, get 20% off Mobbin: mobbin.com/designcode Prompt #1 Can you create an app based on my meeting notes? I want a tool that creates editable 2D and 3D mockups. I want to switch the screen and turn the results into marketing materials: YouTube covers, Twitter posts, motion design, mockups, and website creatives. I want to animate all of that. Use React and Vite. Use Supabase for the database and real-time collaboration, including teams and invitations for team members. Use Stripe Managed Payments for payments. References: {ref} for mockups; Figma for design and 2D tooling; Spline for 3D creation and options; Figma Community for the library; and Linear for the landing page. Self-verify until it's perfect. Prompt #2 Create an AI tool that lets me generate icons from a prompt. Use Claude, Higgsfield, or OpenAI. I'll log into the provider's website. Create the API key, store it securely server-side in Firebase or Supabase, and use it securely to generate new icons. Tell me if you need me to complete any steps. Prompt #3 Use Stripe Managed Payments. Set up the payment workflow and all required webhooks. Do as much of the setup as you can yourself. When you need me to do something, tell me exactly what to do and walk me through it as a beginner who has never set up payments before.

I'm shocked. I gave Opus 5.5 an old project I'd always wanted to improve, and it almost did it in one shot. This used to take a team of designers and engineers, and we still couldn't reach this level of fidelity. Every device is built entirely in three.js and fully customizable. It even has a design tool inspired by Figma, complete with layers. If you haven't revisited your old projects with ideas you once thought were impossible, give it a try. It's mind boggling.

I asked Opus 5.5 to make this entire motion design piece. It took a lot of steering and code references though. But it really understands animations, transition effects and camera movement. It even created the 3D models for each device and logo. What's cool is that you can ask it to adapt the design to your content and it'll do the research for you whether you give it a URL or a local project. It helps to have a library of 3D devices, buttons, effects, and motion design templates like this. Otherwise, it'll be pretty generic. I used my own open-source library threeui.com where you can use "Copy Prompt" for templates like this.