Design (thinking) around AI

Tl;DR

Intro

RemotionJs and its first application around mechanism videos, electronic videos, oss tech video review even MVP promo videos has been great

Now that everything possible to be codable as web can be a video…

Ways to Motion Graphic

You got it, there are few ways around

Ive tried a few:

Blender

Experimenting with blender has been great.

Ive also been using blender together with mechanisms here

if you are curious, running this in a mac M2 was way faster

Web Technologies

Because the web technologies can do it

RemotionJS

#npx skills add remotion-dev/skills

ThreeJS and BabbylonJS

if you wondered how lando website was possible

Or how Ive been tinkering with a custom mbsd animator for the augmented reality part (AR)

ThreeJS is the answer:

HyperFrame

We have a new library in town: https://github.com/heygen-com/hyperframes

Apache v2 | Write HTML. Render video. Built for agents.

You bet there are skills too: https://skills.sh/heygen-com/hyperframes/hyperframes

npx skills add heygen-com/hyperframes

what do i need to provide for you to use the website to hyperframe skill?

After consuming 85% of the 5h slot tokens and having these learnings, the video appeared by just having my website as context:

You can see the video compositions like this one at: http://localhost:3002/#project/z-hyperframes

Conclusions

About Design Thinking

Design thinking isn’t a single step in the requirements process; it is the “discovery engine” that fuels the quality of your documentation.

While these documents are often seen as a linear progression, design thinking ensures that what you are documenting actually solves a human problem.

Here is how design thinking integrates into the lifecycle of a Business Requirements Document (BRD), Product Requirements Document (PRD), and Functional Requirements Document (FRD).

1. The BRD (The “Why”)

Role of Design Thinking: Empathize & Define

The BRD focuses on high-level business goals. Design thinking plays a critical role here by ensuring the business goal aligns with a genuine user need.

• Stakeholder Empathy: Using empathy maps to understand the pain points of the business owners and the end users.
• Problem Reframing: Instead of a BRD saying “We need a loyalty app,” design thinking helps the BRD say “We need to reduce customer churn by increasing emotional engagement.”
• Outcome: A BRD grounded in a validated “Problem Statement” rather than just a list of features the board wants.

2. The PRD (The “What”)

Role of Design Thinking: Ideate & Prototype

The PRD bridges the gap between business needs and the technical solution.

This is where design thinking is most visible.

• Ideation: Facilitating workshops (like “Crazy 8s”) to explore various ways to solve the problems defined in the BRD.
• User Stories & Personas: Crafting requirements based on specific user archetypes developed during the research phase.
• Low-Fidelity Prototyping: Before a single line of requirement is finalized, paper prototypes or wireframes are tested to see if the “What” actually works for the user.
• Outcome: Requirements that are prioritized based on Desirability (User), Viability (Business), and Feasibility (Tech).

3. The FRD (The “How”)

Role of Design Thinking: Test & Iterate

The FRD is highly technical, detailing how the system must behave to satisfy the PRD. While it feels “colder” and more functional, design thinking acts as the guardrail.

• Usability Testing: If a functional requirement describes a complex multi-step checkout, design thinking asks: “Is this cognitively too heavy for the user?”
• Edge Case Discovery: By “Testing” the logic through the lens of a user journey, you identify functional gaps—like what happens when a user loses internet mid-transaction.
• Outcome: A technical specification that doesn’t just work perfectly under the hood, but maintains a seamless “Human-Computer Interaction” (HCI).

The Big Picture: Without design thinking, a BRD/PRD/FRD chain produces a product that is technically functional but useless.

Design thinking ensures that the “Golden Thread” of user value remains intact from the first business meeting to the final technical spec.

Both Lean Startup and Systems Thinking act as different “operating systems” for your documentation. While Design Thinking focuses on human needs, Lean Startup focuses on market viability, and Systems Thinking focuses on structural logic.

Here is where they plug into the BRD, PRD, and FRD framework:

1. Lean Startup (The “Build-Measure-Learn” Loop)

Lean Startup thrives in environments with high uncertainty. It shifts the documentation from “predicting the future” to “testing a hypothesis.”

• In the BRD (Pivot or Persevere): The BRD becomes a collection of hypotheses rather than fixed requirements. Instead of “The business needs X,” it’s “We believe that by doing X, we will achieve Y (Metric), and we will know we are right when we see Z (Data).”
• In the PRD (The MVP): Lean Startup aggressively prunes the PRD. It forces the team to identify the Minimum Viable Product. Any feature that doesn’t directly test the core hypothesis is moved to a “Backlog” or discarded to save speed.
• In the FRD (Instrumentation): The FRD must include “Analytics Requirements.” You aren’t just documenting how a button works; you are documenting how that button’s usage is tracked and measured to feed the “Learn” part of the loop.

2. Systems Thinking (The “Big Picture” View)

Systems thinking is used when a product is part of a massive, interconnected ecosystem (like a city’s power grid, a global supply chain, or a complex ERP).

• In the BRD (Interdependencies): Systems thinking identifies Feedback Loops. A business goal to “Increase Sales” might have a reinforcing loop that accidentally “Overwhelms Customer Support.” The BRD uses systems mapping to ensure the business goal doesn’t break another part of the company.
• In the PRD (Contextual Impact): The PRD looks beyond the user’s screen. It defines requirements for how this product interacts with third-party APIs, legacy databases, and environmental factors. It ensures the “What” doesn’t cause a “Butterfly Effect” of errors elsewhere.
• In the FRD (Structural Logic): This is where Causal Loop Diagrams or Stock and Flow Diagrams live. The FRD defines the system’s “State”—how data flows through the pipes, where it pools (stocks), and what triggers the release of information.

How to combine them

In a modern product team, you rarely use just one. You might use Systems Thinking to map out the complexity of a new healthcare platform (BRD), Design Thinking to figure out how a doctor will actually use the tablet (PRD), and Lean Startup to decide which single feature to build first to see if patients even want to log in (MVP).

Does your current project feel more like a “human” problem (Design), a “market” mystery (Lean), or a “complex machine” (Systems)?

FAQ

How to Install Stable Difussion

• https://aman.ai/primers/ai/diffusion-models/

Great explanation on how these model work

F/OSS Animations Suites

1. Synfig Studio: Synfig Studio is a 2D vector-based animation software. It’s designed for creating high-quality 2D animations with a focus on flexibility and scalability. Synfig Studio supports a wide range of features, including vector tweening, bone rigging, and bitmap artwork integration.

2. OpenToonz: OpenToonz is a professional 2D animation software used by studios such as Studio Ghibli. It offers a comprehensive set of features for traditional frame-by-frame animation, including raster and vector drawing tools, compositing, and animation effects.

Motion Canvas

6. Recently Motion Canvas was released as Open Source as well, with MIT license ❤️ - https://github.com/motion-canvas/motion-canvas

Motion Canvas is a tool that bridges the gap between code and animation, specifically targeted at creating animated videos.

• Create Animations with Code: https://github.com/motion-canvas/motion-canvas
  • https://github.com/motion-canvas/motion-canvas?tab=MIT-1-ov-file#readme

A TS library for creating animated videos using the Canvas API.

MIT| Visualize Your Ideas With Code

Python x OpenSCAD

• https://github.com/SolidCode/SolidPython