有趣的交互式科学应用创意 Part 2 ✍ Dilum Sanjaya🕐 2026-05-07📦 4.0 KB 🟢 已读 𝕏 文章列表 文章展示了作者开发的系列交互式科学应用 Demo,包括黑洞时空扭曲可视化、达芬奇扑翼机机制实现以及科幻彗星探测器等。作者结合了 GPT Images、Nano Banana 2 进行设计,并使用 Gemini 3.1 Pro 编写代码。文章还分享了设计灵感和前端控件交互示例,旨在打造儿时向往的科学杂志风格的互动体验。 前端可视化AI编程设计灵感科学交互设计GeminiReactUI/UX开源 # Fun interactive science app ideas Part 2 > 采集时间: 2026-05-07 12:16:53 > 作者: Dilum Sanjaya (@DilumSanjaya) > 来源: https://x.com/DilumSanjaya/status/2052063467407057112 > 共 13 条帖子 --- ## 2026-05-07 00:30:30 Fun interactive science app ideas | Part 2 Made an app to visualize how massive objects like black holes warp spacetime Design: Nano Banana 2 Code: Gemini 3.1 Pro More demos ↓ [▶ 视频](https://x.com/DilumSanjaya/status/2052063467407057112) 视频缩略图:  --- ## 2026-05-07 00:30:31 The first part of this series [▶ 视频](https://x.com/DilumSanjaya/status/2052063469655175426) 视频缩略图:  > **引用的帖子** > @DilumSanjaya > Been thinking about sharing some fun, interactive science app ideas > > Made this one today > > UI design and planet textures > GPT Images 2 > > Code > Gemini 3.1 Pro > [查看原帖](https://x.com/DilumSanjaya/status/2052063469655175426) --- ## 2026-05-07 00:30:31 Here is a demo where I tried to implement Leonardo da Vinci's ornithopter mechanism [▶ 视频](https://x.com/DilumSanjaya/status/2052063471970484289) 视频缩略图:  > **引用的帖子** > @DilumSanjaya > Vibe Coding Robotics Part 7 > > Implemented an ornithopter mechanism with Gemini Pro, and generated a Leonardo da Vinci style UI using Nano Banana to go with it. > [查看原帖](https://x.com/DilumSanjaya/status/2052063471970484289) --- ## 2026-05-07 00:30:32 A sci-fi comet explorer demo I made a while back [▶ 视频](https://x.com/DilumSanjaya/status/2052063474390651278) 视频缩略图:  > **引用的帖子** > @DilumSanjaya > Updated the anomaly detection system while listening to some podcasts about 3I/Atlas. 3I/Atlas shows too many strange behaviors to be an average comet, too few to be an alien spaceship. probably something new we just don't recognize yet. > [查看原帖](https://x.com/DilumSanjaya/status/2052063474390651278) --- ## 2026-05-07 00:30:33 if you are looking for some unique controls for apps like these, here are some examples from my codepen, All open source. [▶ 视频](https://x.com/DilumSanjaya/status/2052063476852654273) 视频缩略图:  > **引用的帖子** > @DilumSanjaya > Experimenting with range sliders - all demos use HTML inputs with type='range', no drag event listeners. A dash of special CSS positioning makes it all more fun! > Demo: https://codepen.io/dilums/full/YzRwjBM… via @CodePen > > #codepenchallenge #React > [查看原帖](https://x.com/DilumSanjaya/status/2052063476852654273) --- ## 2026-05-07 08:24:59 haha, thanks! --- ## 2026-05-07 08:25:14 thanks! --- ## 2026-05-07 08:34:42 haha, true, thanks! --- ## 2026-05-07 08:35:02 thanks! it is gonna be awesome! --- ## 2026-05-07 08:35:14 thanks! --- ## 2026-05-07 08:35:36 thanks! --- ## 2026-05-07 08:35:55 thanks! --- ## 2026-05-07 08:57:05 thanks! Honestly, instead of following specific design practices, I mostly try to recreate the kind of science magazine illustrations and visuals I fell in love with as a kid. In a way, I'm just building the interactive science apps I wish already existed. Also, working with real data is tricky because it's hard to make everything look great all at once. I'd suggest starting small. For example, if you want to improve the look of a list or dashboard, go to a site like Dribbble and search for layouts you like. Then try recreating certain elements or adapting ideas from them. If you keep doing that regularly, your design instincts improve surprisingly fast. And yeah, I'll definitely be posting some biology related demos in this series too 🙂 --- --- ## 中文翻译 # 有趣的互动科学应用构想 第 2 部分 > 采集时间: 2026-05-07 12:16:53 > 作者: Dilum Sanjaya (@DilumSanjaya) > 来源: https://x.com/DilumSanjaya/status/2052063467407057112 > 共 13 条帖子 --- ## 2026-05-07 00:30:30 有趣的互动科学应用构想 | 第 2 部分 做了一个应用,用来可视化像黑洞这样的大质量物体是如何扭曲时空的。 设计: Nano Banana 2 代码: Gemini 3.1 Pro 更多演示 ↓ [▶ 视频](https://x.com/DilumSanjaya/status/2052063467407057112) 视频缩略图:  --- ## 2026-05-07 00:30:31 本系列的第一部分 [▶ 视频](https://x.com/DilumSanjaya/status/2052063469655175426) 视频缩略图:  > **引用的帖子** > @DilumSanjaya > 一直在考虑分享一些有趣的、互动的科学应用构想 > > 今天做了这一个 > > UI 设计和行星纹理 > GPT Images 2 > > 代码 > Gemini 3.1 Pro > [查看原帖](https://x.com/DilumSanjaya/status/2052063469655175426) --- ## 2026-05-07 00:30:31 这是一个演示,我尝试在其中实现了列奥纳多·达·芬奇(Leonardo da Vinci)的扑翼机机构 [▶ 视频](https://x.com/DilumSanjaya/status/2052063471970484289) 视频缩略图:  > **引用的帖子** > @DilumSanjaya > Vibe Coding 机器人技术 第 7 部分 > > 使用 Gemini Pro 实现了扑翼机机构,并使用 Nano Banana 生成了达·芬奇风格的 UI 来搭配它。 > [查看原帖](https://x.com/DilumSanjaya/status/2052063471970484289) --- ## 2026-05-07 00:30:32 我之前做的一个科幻彗星探测器演示 [▶ 视频](https://x.com/DilumSanjaya/status/2052063474390651278) 视频缩略图:  > **引用的帖子** > @DilumSanjaya > 在听关于 3I/Atlas 的播客时更新了异常检测系统。3I/Atlas 表现出了太多奇怪的行为,不像是一颗普通的彗星,但作为外星飞船又太少了。可能某种我们尚未识别的新事物。 > [查看原帖](https://x.com/DilumSanjaya/status/2052063474390651278) --- ## 2026-05-07 00:30:33 如果你正在为这类应用寻找一些独特的控件,这里有一些来自我 codepen 的示例,全部开源。 [▶ 视频](https://x.com/DilumSanjaya/status/2052063476852654273) 视频缩略图:  > **引用的帖子** > @DilumSanjaya > 正在试验范围滑块 - 所有演示都使用 HTML 类型为 'range' 的输入,没有拖拽事件监听器。一点特殊的 CSS 定位让一切都变得更有趣! > 演示: https://codepen.io/dilums/full/YzRwjBM… via @CodePen > > #codepenchallenge #React > [查看原帖](https://x.com/DilumSanjaya/status/2052063476852654273) --- ## 2026-05-07 08:24:59 哈哈,谢谢! --- ## 2026-05-07 08:25:14 谢谢! --- ## 2026-05-07 08:34:42 哈哈,确实,谢谢! --- ## 2026-05-07 08:35:02 谢谢!肯定会很棒的! --- ## 2026-05-07 08:35:14 谢谢! --- ## 2026-05-07 08:35:36 谢谢! --- ## 2026-05-07 08:35:55 谢谢! --- ## 2026-05-07 08:57:05 谢谢! 说实话,比起遵循特定的设计规范,我大多数时候只是试图重现我小时候迷恋的那种科学杂志插图和视觉效果。在某种程度上,我只是在构建我希望早已存在的互动科学应用。 此外,处理真实数据很棘手,因为很难让所有东西一下子都看起来很棒。我建议从小处着手。比如,如果你想改善列表或仪表盘的外观,可以去 Dribbble 这样的网站搜索你喜欢的布局。然后尝试重现某些元素或改编其中的想法。如果你坚持经常这样做,你的设计直觉会快得惊人地提升。 没错,在这个系列中我也肯定会发布一些与生物学相关的演示 🙂
t tldraw 不仅仅是白板:你可以构建的 14 种应用 文章介绍了 tldraw 作为一个可编程的 React 无限画布 SDK 的强大功能。除了基础的白板功能,它支持将 React 组件转化为画布形状、构建可视化的工作流自动化、集成 AI 视觉交互、实现多人实时协作以及作为持久化应用数据存储。tldraw 适用于构建各种空间软件,从架构图到 AI Agent 管道。 技术 › 工具与效率 ✍ mr-r0b0t🕐 2026-07-20 tldrawReactSDK无限画布可视化工作流实时协作AI开源前端
I I got tired of being a human AGENTS.md 作者受够了每次与编码代理沟通时重复上下文,因此开发了AsterMem,一个本地运行的内存服务器。它将记忆存储为Markdown文件,支持离线运行,并自动提炼用户画像供代理读取。用户可完全控制和编辑记忆,避免黑盒问题。 技术 › Agent ✍ Asterove🕐 2026-07-29 Agent本地化隐私保护MarkdownCursorClaudePythonFastAPIReact开源
如 如何(以及为何)构建 Agent First 应用 文章介绍了如何使用 Agent-Native 框架构建 Agent First 应用。通过统一的前端动作与 Agent 工具,实现 UI 与 Agent 的双向同步。应用支持通过聊天交互、集成外部 Agent、A2A 通信及自动化任务,且完全开源。 技术 › Agent ✍ Steve (Builder.io)🕐 2026-07-29 AgentAgent-NativeClaude前端A2A开源自动化框架UI
提 提升学习和工作效率,这2个GitHub热门开源项目千万不要错过 文章介绍了两个提升效率的GitHub开源项目:OmniGet整合下载、播放、阅读和笔记功能,一站式管理内容资源;Microsoft的Flint Chart是专为AI智能体设计的图表描述语言,简化图表生成流程。 技术 › 工具与效率 ✍ DaoYi.林🕐 2026-07-27 OmniGetFlint Chart开源效率AI知识管理可视化
拼 拼贴动画 B-roll Skill 正式开源 作者开源了一款基于 Codex 的拼贴动画 B-roll 生成 Skill。该工具可将口播文稿转化为黑白半调风格的 B-roll 视频,采用三重 QA 机制节省成本。目前仅支持 Codex,后续更新将增加定制化角色功能。 技术 › Skill ✍ 狗哥笔记🕐 2026-07-19 开源视频生成AI自动化CodexGeminiB-roll
用 用 Skills 给 AI Agent 注入设计品味 介绍了开源技能库 emilkowalski/skills,它能为 AI 编程 Agent 注入设计品味,解决 AI 生成 UI 动画和交互时缺乏质感的问题。文章详解了其核心功能、安装方法、实操流程,并对比了 Taste-Skill、Hallmark 等类似工具的差异。 技术 › 前端 ✍ sitin🕐 2026-07-15 AI设计前端Agent工具Claude CodeCursor开源交互UI
设 设计师专用的 AI Agent Skills 库开源 MengTo 开源了一个名为 Skills 的项目,包含 75+ 个专为设计师和前端开发者准备的 Agent Skills。这些 Markdown 格式的操作手册可加载到 Codex、Claude、Cursor 等 AI 工具中,将优秀工作流和规范固化,使 AI Agent 能按最佳实践完成设计任务,输出更稳定专业。 技术 › Skill ✍ 0xCrypto Tied (@CryptoTied)🕐 2026-07-11 AI AgentUI设计前端开源SkillClaudeCursor工作流提示词
G GitHub 开源宝藏:线性代数可视化教材与 3D 交互教学工具 文章推荐了两个 GitHub 上的优质开源教育资源。一是《线性代数不难》,这是一套通过几何可视化、动画和配套 .ipynb 笔记本将抽象概念直观化的开源教材,适合机器学习入门。二是 AetherViz Master,一个利用 Three.js + SVG 自动生成 3D 交互式教学网页的工具,能帮助教师将复杂的物理、数学等知识点转化为可视化的互动演示。 技术 › 工具与效率 ✍ 徐伦🕐 2026-06-29 GitHub开源线性代数可视化教学工具Three.js机器学习AI辅助
爆 爆肝两周,Codex 最全实战指南开源 作者苍何开源了《Codex 实战指南》,涵盖从认识、入门到实战的全过程。文档介绍了 Codex 的桌面端、CLI、手机端等多种入口,解决了账号配置、环境搭建等痛点。此外,还包含 Draw.io 架构图绘制、GitHub Actions 自动修复等 13 个实战案例,帮助用户通过 Computer Use 等能力实现“全天候 Vibe Coding”。 技术 › Codex ✍ 苍何🕐 2026-05-28 Codex实战指南开源AI编程Computer Use工具教程
C Codex 新玩法:从写代码到数字同事 文章深入分析了 Codex 的最新演变,指出其定位已从单纯的代码编写工具转变为具备跨 App 协作能力的“数字同事”。作者详细探讨了 Computer Use、评论式交互、Automations 自动化任务及移动端管理等新功能,并对比了 Codex 与 Claude Code 的差异化分工。文章认为,AI 工具的竞争维度正从“代码质量”扩展到“真实工作流的完成能力”,强调透明度与可控性是未来数字同事的核心。 技术 › Agent ✍ YuChen 大王(AI版)🕐 2026-05-25 CodexAgentAI编程Computer UseWorkflow自动化数字同事工具评测交互设计效率提升
自 自学Vibe Coding,这3个免费开源项目就够了,别买课 文章基于作者的Token消费经验,推荐了三个免费开源项目(Easy-Vibe、vibe-coding-cn、awesome-vibe-coding)作为学习Vibe Coding的替代方案,无需购买昂贵的课程。文章详细介绍了各项目的特点,提供了从入门到接单的详细学习路径,并分析了开源学习在更新速度、内容深度和社区支持上的优势。 技术 › LLM ✍ 莫先生🕐 2026-05-19 Vibe Coding开源项目教程Claude CodeAI编程自学工具推荐前端后端Agent
I If You Are Not Using These 100 Repositories, You Are Using Claude Code Wrong 文章指出大多数用户仅将 Claude Code 视为简单的终端助手,而忽略了其通过第三方仓库扩展的强大潜力。作者介绍了涵盖官方工具、生态索引、插件及技能库的 100 个精选仓库,旨在帮助开发者构建从简单的智能编程工具到全功能的 Agent 系统,从而显著提升生产力。 技术 › Claude ✍ NeilXbt🕐 2026-05-19 Claude CodeAI编程插件Agent工具推荐开源开发效率AnthropicSDK生态圈