一场小分享

我和我的小人们

Ardenworld × Demi 的诞生

一个陪你走进作品集，一个替你把内容讲出来。

「最有爱奖」

Ardenworld · 二次开发Demi · 从 0 到 1

走进 Ardenworld →

分享者 Arden · ardencosmic.com

01 · Ardenworld 长这样

二次开发之前的样子

02 · 如果你也想做一个

可以从这几个角度入手

我全程用 Claude 的 Design + Claude Code 做出来的：

01 用 AI「设计」出原型

方向你定，产出交给它

把「想要什么感觉」讲清楚，让 AI（Claude Design）先出几版能看、能选的原型，定下产品主要风格。

02 用 AI「写代码」做成真东西

从一次性原型 → 可迭代工程

用 Claude Code 把原型重构成能部署、能持续改的项目；把「世界」变成一份数据，加内容只是改数据。

03 练的是「提需求」

不是练写代码

最该练的能力，是清楚说出你要什么、不要什么，并对 AI 的产出做判断。AI 是辅助，审美和方向始终是你的。

04 跑通「上线闭环」

把作品部署上线别人也能玩/用

Git → GitHub → Vercel → 域名，整条链路走一遍。

03 · Demi 长这样（1 / 2）

从一个入口，到挑一个替你出场的人

先把产品气质做对

手绘、亲近，但每个按钮都真能用——尾尾就是入口。

挑一个替你出场的讲解员

几十个手绘形象随便挑，点一下还能看 TA 的小情绪。

04 · Demi 长这样（2 / 2）

从替你讲 PPT，到走进真实网页

上传 PPT，她逐页替你讲

AI 写逐页口播，配音、字幕、翻页一个节奏走完。

从 PPT 走进任意网站

贴一行脚本，尾尾就在你的网页上边讲边点。

05 · Demi 从 0 到 1

先把感觉做对，再把每个按钮做真

Demi 从一张 Claude Design 前端原型开始，再用 Claude Code 一轮轮完善成真实产品。真正的 0→1，不是“一次生成完”，而是不断使用、发现问题、补齐能力。

01 定义

先定产品原则

幻灯片永远是主角；角色有生命感；点一次就应完整讲完。

02 设计

Claude Design 起稿

纸张质感、手绘角色、素材库，以及角落 / 舞台 / 画中画三种形态。

03 开发

Claude Code 落地

React 状态机、HTML 解析、AI 讲稿、TTS、字幕与自动翻页。

04 迭代

从功能走向系统

网页嵌入、自动导览、agent loop、限流、缓存与版本化发布。

谢谢观看

他们都还在长大。

一个帮作品被看见，一个帮内容被讲出来。

去走一走 →

分享者 Arden · ardencosmic.com