AI 创意网页工作坊：工具指南和案例

AI 创意网页工作坊：工具指南和案例 AI 创意网页工作坊：工具指南和案例 Modified June 28 2. 现场工具清单 场景 工具 入口 用途 扫码体验 二维码生成器 qrcode.antfu.me 作品上线后生成二维码，方便现场参与者扫码体验。 语音输入 微信语音/闪电说 / Typeless 现场推荐安装或使用 用语音快速描述需求，适合不想打长提示词的参与者。 页面设计 Refero Design styles.refero.design 参考优秀页面风格，复制 design.md 作为设计提示词素材。 创意代码 OpenProcessing openprocessing.org 参考 p5.js、生成艺术和互动视觉作品，复制思路后再加工。 部署上线 Vercel / GitHub vercel.com github.com 把网页发布成可访问链接，便于展示、扫码和收集作品。直接跟你的codex说，请部署到vercel即可 3. Codex 快速上手 1. 打开 ChatGPT Codex。 2. 选择一个任务：做页面、小游戏、互动海报、题目讲解页或作品改造。 3. 如果要让页面更好看，先在 Refero Design 找一个喜欢的风格，复制 design.md 内容给 Codex。 4. 如果要做更酷的互动效果，可以从 OpenProcessing 找灵感，说明要用 p5.js、Three.js 或其他库重做。 5. 完成后部署到 Vercel，或上传到 GitHub，再提交一个可访问的网页链接。 🎁 提示词 Tips • 小图标可以要求用 SVG 绘制，保持风格统一。 • 做互动页面：用 p5.js 制作一个 xxx 页面 • 做 3D 或小游戏：用 Three.js 制作一个 xx 游戏 • 做视觉参考复刻：参考这个作品的交互方式，保留我的主题和文案，重新实现一个网页版本 4. 部署与分享 • 首选方式：注册 Vercel，把项目部署成网页链接。 • 备用方式：上传到 GitHub，再请 AI 帮你生成可访问链接或部署说明。 • 现场展示：拿到链接后，用二维码生成器生成二维码，贴到作品展示区。 5. 案例参考 案例 链接 WaytoAGI Events https://events.waytoagi.com/ 制作WaytoAGI社区大事件网站 Hackerhouse Dali https://hackerhouse dali.waytoagi.com/ 2篇公众号+4篇飞书笔记，制作一个网站 模数OPC社区官网 https://moshuopc.com/ W8 Study https://w8study.waytoagi.com/ 把 晚8点共学 制作成网站 videobattle73期 https://videobattle.waytoagi.com/ 把这个网页下的子目录制作一个网站 📺 Video Battle AI视频挑战赛 一个PPT的展示方式 https://impress.js.org/ 源码https://github.com/impress/impress.js 把一个名字做成skill AI 时代学习的方法论指南：把一个名字用起来 Turbo 和 Nio 的奇幻王国小短篇 https://turbo nio fantasy site.vercel.app/ 帮我把这本书作者的行文风格和写作手法做个总结形成一个方法论和skill 再写个skill说明文档 6. 接入飞书文档上下文 如果要让小龙虾、Codex 或 Claude Code 读取飞书文档上下文，可先安装飞书 CLI 和相关 Skills。 安装 lark cli 与 Skills Plain Text 安装 lark cli npm install g @larksuite/cli 安装相关 skills npx skills add https://github.com/larksuite/cli y g 字体更童趣 自然拙趣字体包02135.zip 87.36MB 8. 更多创意编程库 如果参与者想继续做更炫酷的网页、互动视觉或小游戏，可以按方向选择工具。 方向 推荐工具 适合做什么 网页互动视觉 p5.js、Three.js、PixiJS、GSAP、D3.js 粒子、生成艺术、互动海报、3D 场景、网页动效、动态图表。 Shader / 高级视觉 GLSL、Shadertoy、WebGL、WebGPU 流体、噪声、光影、故障艺术、万花筒效果和高性能图形。 创意编程 Processing、openFrameworks、TouchDesigner、Hydra 生成艺术、装置艺术、展览互动、舞台视觉和实时音画互动。 游戏 / 实时 3D Unity + C 、Unreal Engine、Godot 小游戏、互动装置、AR/VR、高质量实时渲染和虚拟拍摄。 动效设计 CSS Animation、Framer Motion、Rive、Lottie 网页基础动效、React 动效、交互式矢量动画和 App 动画。 Python 方向 Manim、py5、Blender Python 数学动画、解释型视频、Python 生成艺术和自动生成 3D 场景。 9. 新手推荐路线 目标 推荐路线 会做网页 p5.js → Three.js → GLSL 视觉艺术 p5.js → Processing / py5 → TouchDesigner 3D 酷炫场景 Three.js → Unity / Unreal 音乐可视化 p5.js + Web Audio → Hydra / TouchDesigner 数据艺术 D3.js + Canvas / SVG ⭐ 最适合新手的组合：p5.js + GSAP + Three.js 最容易做出惊艳效果的组合：Three.js + GLSL qrcode.antfu.me styles.refero.design openprocessing.org vercel.com github.com ChatGPT Codex Refero Design OpenProcessing ​ 晚8点共学 📺 Video Battle AI视频挑战赛 AI 时代学习的方法论指南：把一个名字用起来 Turbo 和 Nio 的奇幻王国小短篇 2. 现场工具清单 场景 工具 入口 用途 扫码体验 二维码生成器 qrcode.antfu.me 作品上线后生成二维码，方便现场参与者扫码体验。 语音输入 微信语音/闪电说 / Typeless 现场推荐安装或使用 用语音快速描述需求，适合不想打长提示词的参与者。 页面设计 Refero Design styles.refero.design 参考优秀页面风格，复制 design.md 作为设计提示词素材。 创意代码 OpenProcessing openprocessing.org 参考 p5.js、生成艺术和互动视觉作品，复制思路后再加工。 部署上线 Vercel / GitHub vercel.com github.com 把网页发布成可访问链接，便于展示、扫码和收集作品。直接跟你的codex说，请部署到vercel即可 qrcode.antfu.me styles.refero.design openprocessing.org vercel.com github.com 场景 场景 工具 工具 入口 入口 用途 用途 扫码体验 扫码体验 二维码生成器 二维码生成器 qrcode.antfu.me qrcode.antfu.me qrcode.antfu.me qrcode.antfu.me 作品上线后生成二维码，方便现场参与者扫码体验。 作品上线后生成二维码，方便现场参与者扫码体验。 语音输入 语音输入 微信语音/闪电说 / Typeless 微信语音/闪电说 / Typeless 现场推荐安装或使用 现场推荐安装或使用 用语音快速描述需求，适合不想打长提示词的参与者。 用语音快速描述需求，适合不想打长提示词的参与者。 页面设计 页面设计 Refero Design Refero Design styles.refero.design styles.refero.design styles.refero.design styles.refero.design 参考优秀页面风格，复制 design.md 作为设计提示词素材。 参考优秀页面风格，复制 design.md 作为设计提示词素材。 创意代码 创意代码 OpenProcessing OpenProcessing openprocessing.org openprocessing.org openprocessing.org openprocessing.org 参考 p5.js、生成艺术和互动视觉作品，复制思路后再加工。 参考 p5.js、生成艺术和互动视觉作品，复制思路后再加工。 部署上线 部署上线 Vercel / GitHub Vercel / GitHub vercel.com github.com vercel.com github.com vercel.com vercel.com github.com github.com 把网页发布成可访问链接，便于展示、扫码和收集作品。直接跟你的codex说，请部署到vercel即可 把网页发布成可访问链接，便于展示、扫码和收集作品。直接跟你的codex说，请部署到vercel即可 3. Codex 快速上手 1. 打开 ChatGPT Codex。 ChatGPT Codex 2. 选择一个任务：做页面、小游戏、互动海报、题目讲解页或作品改造。 3. 如果要让页面更好看，先在 Refero Design 找一个喜欢的风格，复制 design.md 内容给 Codex。 Refero Design 4. 如果要做更酷的互动效果，可以从 OpenProcessing 找灵感，说明要用 p5.js、Three.js 或其他库重做。 OpenProcessing 5. 完成后部署到 Vercel，或上传到 GitHub，再提交一个可访问的网页链接。 🎁 提示词 Tips • 小图标可以要求用 SVG 绘制，保持风格统一。 • 做互动页面：用 p5.js 制作一个 xxx 页面 • 做 3D 或小游戏：用 Three.js 制作一个 xx 游戏 • 做视觉参考复刻：参考这个作品的交互方式，保留我的主题和文案，重新实现一个网页版本 提示词 Tips • 小图标可以要求用 SVG 绘制，保持风格统一。 • 做互动页面：用 p5.js 制作一个 xxx 页面 • 做 3D 或小游戏：用 Three.js 制作一个 xx 游戏 • 做视觉参考复刻：参考这个作品的交互方式，保留我的主题和文案，重新实现一个网页版本 4. 部署与分享 • 首选方式：注册 Vercel，把项目部署成网页链接。 • 备用方式：上传到 GitHub，再请 AI 帮你生成可访问链接或部署说明。 • 现场展示：拿到链接后，用二维码生成器生成二维码，贴到作品展示区。 5. 案例参考 案例 链接 WaytoAGI Events https://events.waytoagi.com/ 制作WaytoAGI社区大事件网站 Hackerhouse Dali https://hackerhouse dali.waytoagi.com/ 2篇公众号+4篇飞书笔记，制作一个网站 模数OPC社区官网 https://moshuopc.com/ W8 Study https://w8study.waytoagi.com/ 把 晚8点共学 制作成网站 videobattle73期 https://videobattle.waytoagi.com/ 把这个网页下的子目录制作一个网站 📺 Video Battle AI视频挑战赛 一个PPT的展示方式 https://impress.js.org/ 源码https://github.com/impress/impress.js 把一个名字做成skill AI 时代学习的方法论指南：把一个名字用起来 Turbo 和 Nio 的奇幻王国小短篇 https://turbo nio fantasy site.vercel.app/ 帮我把这本书作者的行文风格和写作手法做个总结形成一个方法论和skill 再写个skill说明文档 ​ 晚8点共学 📺 Video Battle AI视频挑战赛 AI 时代学习的方法论指南：把一个名字用起来 Turbo 和 Nio 的奇幻王国小短篇 案例 案例 链接 链接 WaytoAGI Events WaytoAGI Events https://events.waytoagi.com/ https://events.waytoagi.com/ 制作WaytoAGI社区大事件网站 制作WaytoAGI社区大事件网站 Hackerhouse Dali Hackerhouse Dali https://hackerhouse dali.waytoagi.com/ https://hackerhouse dali.waytoagi.com/ 2篇公众号+4篇飞书笔记，制作一个网站 2篇公众号+4篇飞书笔记，制作一个网站 模数OPC社区官网 模数OPC社区官网 https://moshuopc.com/ https://moshuopc.com/ W8 Study W8 Study https://w8study.waytoagi.com/ https://w8study.waytoagi.com/ 把 晚8点共学 制作成网站 ​ 晚8点共学 把 晚8点共学 制作成网站 ​ 晚8点共学 videobattle73期 videobattle73期 https://videobattle.waytoagi.com/ https://videobattle.waytoagi.com/ 把这个网页下的子目录制作一个网站 📺 Video Battle AI视频挑战赛 📺 Video Battle AI视频挑战赛 把这个网页下的子目录制作一个网站 📺 Video Battle AI视频挑战赛 📺 Video Battle AI视频挑战赛 一个PPT的展示方式 一个PPT的展示方式 https://impress.js.org/ 源码https://github.com/impress/impress.js https://impress.js.org/ 源码https://github.com/impress/impress.js 把一个名字做成skill 把一个名字做成skill AI 时代学习的方法论指南：把一个名字用起来 Turbo 和 Nio 的奇幻王国小短篇 https://turbo nio fantasy site.vercel.app/ AI 时代学习的方法论指南：把一个名字用起来 Turbo 和 Nio 的奇幻王国小短篇 AI 时代学习的方法论指南：把一个名字用起来 AI 时代学习的方法论指南：把一个名字用起来 Turbo 和 Nio 的奇幻王国小短篇 Turbo 和 Nio 的奇幻王国小短篇 https://turbo nio fantasy site.vercel.app/ 帮我把这本书作者的行文风格和写作手法做个总结形成一个方法论和skill 再写个skill说明文档 帮我把这本书作者的行文风格和写作手法做个总结形成一个方法论和skill 再写个skill说明文档 6. 接入飞书文档上下文 如果要让小龙虾、Codex 或 Claude Code 读取飞书文档上下文，可先安装飞书 CLI 和相关 Skills。 字体更童趣 自然拙趣字体包02135.zip 87.36MB 自然拙趣字体包02135.zip 87.36MB 8. 更多创意编程库 如果参与者想继续做更炫酷的网页、互动视觉或小游戏，可以按方向选择工具。 方向 推荐工具 适合做什么 网页互动视觉 p5.js、Three.js、PixiJS、GSAP、D3.js 粒子、生成艺术、互动海报、3D 场景、网页动效、动态图表。 Shader / 高级视觉 GLSL、Shadertoy、WebGL、WebGPU 流体、噪声、光影、故障艺术、万花筒效果和高性能图形。 创意编程 Processing、openFrameworks、TouchDesigner、Hydra 生成艺术、装置艺术、展览互动、舞台视觉和实时音画互动。 游戏 / 实时 3D Unity + C 、Unreal Engine、Godot 小游戏、互动装置、AR/VR、高质量实时渲染和虚拟拍摄。 动效设计 CSS Animation、Framer Motion、Rive、Lottie 网页基础动效、React 动效、交互式矢量动画和 App 动画。 Python 方向 Manim、py5、Blender Python 数学动画、解释型视频、Python 生成艺术和自动生成 3D 场景。 方向 方向 推荐工具 推荐工具 适合做什么 适合做什么 网页互动视觉 网页互动视觉 p5.js、Three.js、PixiJS、GSAP、D3.js p5.js、Three.js、PixiJS、GSAP、D3.js 粒子、生成艺术、互动海报、3D 场景、网页动效、动态图表。 粒子、生成艺术、互动海报、3D 场景、网页动效、动态图表。 Shader / 高级视觉 Shader / 高级视觉 GLSL、Shadertoy、WebGL、WebGPU GLSL、Shadertoy、WebGL、WebGPU 流体、噪声、光影、故障艺术、万花筒效果和高性能图形。 流体、噪声、光影、故障艺术、万花筒效果和高性能图形。 创意编程 创意编程 Processing、openFrameworks、TouchDesigner、Hydra Processing、openFrameworks、TouchDesigner、Hydra 生成艺术、装置艺术、展览互动、舞台视觉和实时音画互动。 生成艺术、装置艺术、展览互动、舞台视觉和实时音画互动。 游戏 / 实时 3D 游戏 / 实时 3D Unity + C 、Unreal Engine、Godot Unity + C 、Unreal Engine、Godot 小游戏、互动装置、AR/VR、高质量实时渲染和虚拟拍摄。 小游戏、互动装置、AR/VR、高质量实时渲染和虚拟拍摄。 动效设计 动效设计 CSS Animation、Framer Motion、Rive、Lottie CSS Animation、Framer Motion、Rive、Lottie 网页基础动效、React 动效、交互式矢量动画和 App 动画。 网页基础动效、React 动效、交互式矢量动画和 App 动画。 Python 方向 Python 方向 Manim、py5、Blender Python Manim、py5、Blender Python 数学动画、解释型视频、Python 生成艺术和自动生成 3D 场景。 数学动画、解释型视频、Python 生成艺术和自动生成 3D 场景。 9. 新手推荐路线 目标 推荐路线 会做网页 p5.js → Three.js → GLSL 视觉艺术 p5.js → Processing / py5 → TouchDesigner 3D 酷炫场景 Three.js → Unity / Unreal 音乐可视化 p5.js + Web Audio → Hydra / TouchDesigner 数据艺术 D3.js + Canvas / SVG 目标 目标 推荐路线 推荐路线 会做网页 会做网页 p5.js → Three.js → GLSL p5.js → Three.js → GLSL 视觉艺术 视觉艺术 p5.js → Processing / py5 → TouchDesigner p5.js → Processing / py5 → TouchDesigner 3D 酷炫场景 3D 酷炫场景 Three.js → Unity / Unreal Three.js → Unity / Unreal 音乐可视化 音乐可视化 p5.js + Web Audio → Hydra / TouchDesigner p5.js + Web Audio → Hydra / TouchDesigner 数据艺术 数据艺术 D3.js + Canvas / SVG D3.js + Canvas / SVG ⭐ 最适合新手的组合：p5.js + GSAP + Three.js 最容易做出惊艳效果的组合：Three.js + GLSL 最适合新手的组合：p5.js + GSAP + Three.js 最容易做出惊艳效果的组合：Three.js + GLSL 📌 这份指南用于现场工作坊。参与者可以按自己的基础选择任务分区，快速完成一个可展示、可分享的小作品：图片、音乐、小网页、小游戏、互动视觉或题目讲解页面。 建议现场目标：每位参与者完成一个轻量作品，并生成一个可访问链接或二维码，方便现场互相体验。 这份指南用于现场工作坊。参与者可以按自己的基础选择任务分区，快速完成一个可展示、可分享的小作品：图片、音乐、小网页、小游戏、互动视觉或题目讲解页面。 建议现场目标：每位参与者完成一个轻量作品，并生成一个可访问链接或二维码，方便现场互相体验。 1. 现场任务分区 👋 小白跟做区 适合第一次接触 AI 的家庭和学生。老师现场演示并陪同完成一个小任务，例如生成一张图、一首歌、一个小网页，或把一道题讲清楚。 • 目标：先做出一个完整作品。 • 节奏：跟随示范，少量改动。 • 成果：作品截图、网页链接或二维码。 💡 任务卡体验区 适合已经有想法的人。选择一张任务卡，用自己熟悉的工具，或使用现场推荐的 AI 工具，完成一个轻量作品。 • 目标：把自己的想法快速做成原型。 • 节奏：自由创作，老师答疑。 • 成果：可演示 Demo、作品链接或改造计划。 👋 小白跟做区 适合第一次接触 AI 的家庭和学生。老师现场演示并陪同完成一个小任务，例如生成一张图、一首歌、一个小网页，或把一道题讲清楚。 • 目标：先做出一个完整作品。 • 节奏：跟随示范，少量改动。 • 成果：作品截图、网页链接或二维码。 👋 小白跟做区 适合第一次接触 AI 的家庭和学生。老师现场演示并陪同完成一个小任务，例如生成一张图、一首歌、一个小网页，或把一道题讲清楚。 • 目标：先做出一个完整作品。 • 节奏：跟随示范，少量改动。 • 成果：作品截图、网页链接或二维码。 小白跟做区 适合第一次接触 AI 的家庭和学生。老师现场演示并陪同完成一个小任务，例如生成一张图、一首歌、一个小网页，或把一道题讲清楚。 • 目标：先做出一个完整作品。 • 节奏：跟随示范，少量改动。 • 成果：作品截图、网页链接或二维码。 💡 任务卡体验区 适合已经有想法的人。选择一张任务卡，用自己熟悉的工具，或使用现场推荐的 AI 工具，完成一个轻量作品。 • 目标：把自己的想法快速做成原型。 • 节奏：自由创作，老师答疑。 • 成果：可演示 Demo、作品链接或改造计划。 💡 任务卡体验区 适合已经有想法的人。选择一张任务卡，用自己熟悉的工具，或使用现场推荐的 AI 工具，完成一个轻量作品。 • 目标：把自己的想法快速做成原型。 • 节奏：自由创作，老师答疑。 • 成果：可演示 Demo、作品链接或改造计划。 任务卡体验区 适合已经有想法的人。选择一张任务卡，用自己熟悉的工具，或使用现场推荐的 AI 工具，完成一个轻量作品。 • 目标：把自己的想法快速做成原型。 • 节奏：自由创作，老师答疑。 • 成果：可演示 Demo、作品链接或改造计划。 建议使用codex 7. 没有 Codex 时的替代方案 ✅ 可以使用秒哒完成轻量网页和小游戏原型。 入口：miaoda.waytoagi.com miaoda.waytoagi.com 可以使用秒哒完成轻量网页和小游戏原型。 入口：miaoda.waytoagi.com miaoda.waytoagi.com 百度秒哒教育典型场景和小游戏 百度秒哒教育典型场景和小游戏 注册后填写秒哒的ID，获得500积分