【More than Coding】207颗微光:一个非技术人眼中的科技温度

1. 摘要

我是一个非技术背景的人,用 SOLO 在不到半小时内完成了一个罕见病互动艺术实验的完整方案设计。「微光宇宙」——让207颗星代表207种罕见病,用户可以"走进"每一颗星,体验患者的身体世界。这个项目想回答一个问题:科技除了提效以外,能不能也温暖人心?


2. 背景

昨天在论坛里玩游戏看到一些公益相关的项目,突然咯噔被触动了一下 :glowing_star:

我开始想:科技的意义到底是什么?是让我们更快地完成工作?是帮公司省下成本?还是——去看见那些被忽视的人?

中国有约2000万罕见病患者,但33%的医生都不了解罕见病。普通人更是知之甚少。他们像是生活在一片暗色的宇宙里,微弱地发光,却几乎没人看见。

我不是技术出身,也没有产品设计的专业背景。但我想,能不能做一个东西,让更多人"看见"他们?

带着这个模糊的想法,我打开了 SOLO。


3. 实践过程

3.1 从一个念头到一个方向

一开始我只有一个模糊的想法:做点和罕见病相关的东西。但具体做什么?怎么做?完全没有头绪。

我把想法告诉 SOLO,让它帮我做市场调研和方向分析。一开始只是一些通用的答案比如人口老龄化、就业压力、教育资源配置不均、医疗与养老保障压力, 我不是很满意,当我询问有没有更特殊一点的视角,罕见病这个主题引起我的关注。

于是我又尝试让它帮我查询更多的内容,中间也有踩过的坑,发现项目太大自己搞不定,并不是想做成一个论坛的样子,虽然它确实做出来了:

第二次,我们推到重来,SOLO 给了我几个方向建议,最终确定了:做一个互动艺术体验——不是枯燥的科普网站,而是一个能让用户"沉浸式感受"的 Web 应用。

3.2 核心概念的诞生

有了方向,接下来是核心概念的设计。

现在看到有一些做宇宙的项目,我们讨论:用"星"来代表罕见病。SOLO 帮我完善了这个隐喻:

「在一片暗色宇宙中,207颗微光星点漂浮其中——走近每一颗,都是一个完整的身体世界。」

这个概念让我很兴奋 :sparkles:

  • 暗色宇宙 = 大众对罕见病的认知空白
  • 207颗微光 = 国家卫健委目录内的207种罕见病
  • 星的亮度 = 公众认知度
  • 进入星内 = 走进患者的身体世界

3.3 方案细节的打磨

概念确定后,SOLO 帮我把方案一点点充实起来:

第一层「星图」:用户在207颗微光中漫游,悬停查看疾病信息,选择进入某颗星。

第二层「呼吸旅程」:第一人称视角的身体微观世界,用滚动控制叙事节奏,配合粒子动画和患者真实语录。


**核心概念:**
- 这是一个Web网页端的互动艺术体验项目
- 体验时长5-10分钟
- 数据来源:国家卫健委罕见病目录(207种)
- 核心隐喻:暗色宇宙中的207颗微光星点,每颗代表一种罕见病

**两层体验结构:**
1. 第一层「星图」:宏观感知 - 解决认知问题
2. 第二层「呼吸」:微观共情 - 解决共情问题

**场景设计:**
- 完整体验流程:入口引导 → 星图漫游 → 选择进入 → 呼吸旅程 → 出口与行动 → 返回星图/分享传播
- 星图场景:207颗星点,分为亮星(~15颗)、微光星(~180颗)、暗星(~12颗)
- 首批5条呼吸旅程:成骨不全症、法布雷病、SMA、视网膜色素变性、马凡综合征

**交互设计:**
- 星图层交互:鼠标移动、悬停、点击、点亮、拖拽旋转
- 呼吸旅程层交互:滚动控制叙事、暂停、倒滚、鼠标/触屏位置响应


- 出口层交互:点亮、分享、了解更多、回到星图

**技术实现:**
- 前端:Three.js(3D渲染)、GSAP ScrollTrigger(滚动叙事)、Howler.js + Web Audio API(声音)、Zustand(状态管理)
- 框架:React/Vue 3
- 部署:Vercel/Netlify静态部署

这是一个非常完整、专业的互动艺术项目方案,融合了数据可视化、叙事设计、交互设计和技术实现等多个维度。方案的核心价值在于通过艺术化的方式让公众了解罕见病,建立共情,并促进社会关注。

现在我已经充分理解了这个方案的内容,可以向用户确认我的理解。
我已仔细阅读并理解了这份「微光宇宙」罕见病互动艺术实验的完整方案。以下是我的理解:

---

## 方案核心理解

### 一、项目定位
这是一个**Web端互动艺术体验项目**,旨在通过沉浸式的视觉叙事,让公众认知并共情中国207种罕见病患者群体。体验时长5-10分钟,数据来源于国家卫健委罕见病目录。

### 二、双层体验架构

| 层级 | 名称 | 目的 | 核心机制 |
|------|------|------|----------|
| 第一层 | 星图 | 解决「认知」问题 | 207颗微光星点的三维宇宙漫游 |
| 第二层 | 呼吸旅程 | 解决「共情」问题 | 第一人称身体微观世界的滚动叙事 |

### 三、核心隐喻体系
- **暗色宇宙** → 公众认知空白
- **207颗微光** → 罕见病种类
- **星的亮度** → 公众认知度
- **星的色系** → 疾病系统分类
- **点亮** → 公众关注与传播

### 四、首批5条呼吸旅程
1. **成骨不全症**「水晶骨骼」— 碎裂与重组
2. **法布雷病**「红色涟漪」— 血管中的毒素堆积
3. **SMA**「消逝的信号」— 神经元熄灭与医保希望
4. **视网膜色素变性**「渐暗的星空」— 视野被吞噬的体验
5. **马凡综合征**「拉伸的织网」— 结缔组织与主动脉风险

### 五、技术架构
- **3D渲染**:Three.js + WebGL
- **滚动叙事**:GSAP ScrollTrigger
- **声音引擎**:Howler.js + Web Audio API
- **状态管理**:Zustand
- **部署**:静态托管(Vercel/Netlify)

### 六、设计亮点
- 滚动作为唯一叙事驱动力,不打断沉浸感
- 粒子系统参数化,每条旅程有独特的视觉语言
- 患者真实语录贯穿全程,增强情感温度
- 「点亮」机制驱动社交传播

3.4 技术架构的梳理

虽然我不是技术背景,但 SOLO 帮我生成了完整的技术架构方案:Three.js 做3D渲染、GSAP 控制滚动叙事、Howler.js 处理声音……甚至还有详细的粒子系统参数设计。

这些内容如果让我自己来写,可能要花好几天。


4. 成果展示

完成的核心产出:

:page_facing_up: 一份完整的方案文档

  • 罕见病数据调研报告
  • 项目方案书
  • 交互设计详细文档
  • 技术实现文档
  • 内容清单与合规性核查

:bullseye: 一个简单的demo项目

http://s-sh-14944-test.oss.dogecdn.com/glimmer-universe%20-%20豆包浏览器%202026-04-14%2021-46-43.mp4

视频地址

马凡综合征

成骨不全症

脊髓性肌萎缩症


5. 效果与总结

时间对比

环节 原本预估 实际耗时
市场调研与方向确定 2-3天 10分钟
核心概念设计 1天 5分钟
方案细节撰写 3-5天 15分钟
技术架构梳理 需要技术支持 SOLO 直接生成

不到半小时,从零到完整方案。 这在以前是不可想象的。

SOLO 的角色

SOLO 在这个项目里扮演了三个角色:

  • 调研助手:帮我快速了解罕见病领域
  • 设计伙伴:一起打磨概念和交互设计
  • 技术顾问:生成我本无法独立完成的技术方案

个人思考

做这个项目的过程中,我一直在想一个问题:AI 能不能帮我们做一些"温暖"的事情?

很多时候我们用 AI 来提效、省钱、自动化。但也许,AI 也可以帮我们把那些"看不见的人"带到更多人面前。

非技术背景的我,以前不可能做出这样的方案。但现在,我至少可以迈出第一步。


:speech_balloon: 如果你是技术背景,觉得这个方案技术上可行吗? 有什么建议欢迎指教!


其他一些用solo做的项目: