Creative Coding Workshop
VibeCoding 创意小工坊
用 AI 和代码把脑子里的奇怪想法做出来。
不是教程，不是产品，只是让创意从草图变成能跑起来的东西。
2 已上线
2 开发中
2 概念阶段
01
先把它做出来，再想它有没有用。
02
AI 是放大器，不是替代品。
03
能跑就是完成，能玩才算交付。
04
创意不需要完整方案，需要第一步。
Workshop Projects
全部作品
Prompt Canvas
用自然语言直接生成界面草图
输入一段描述，AI 实时解析意图并渲染对应的 UI 布局框架。不是代码生成，而是在设计思维和工程执行之间插入一层可视化对话层。
Claude API · React · tRPC
Mood Loop
情绪驱动的氛围音景生成器
选择一种当下的情绪状态，系统会把它翻译成音效层叠和视觉粒子场，让环境感知在浏览器里真正发生，而不只是播一首歌。
Web Audio API · Three.js · Tone.js
Type Morph
字体形态的实时探索工具
把字重、字宽、光学尺寸等可变字体轴参数暴露成可交互的旋钮，配合实时预览让字体选型从抽象参数变成可感知的造型决策。
Vanilla JS · CSS Houdini · Variable Fonts
Grid Composer
CSS Grid 的可视化排版编排台
拖拽放置元素到网格区域，系统实时生成对应的 CSS Grid 代码。把布局思维从记忆属性名解放出来，专注空间关系本身。
React · Monaco Editor · CSS Grid
Shader Sketchbook
碎片化的 GLSL 实验记录本
不是完整的教程，而是我自己在学 shader 路上留下的一系列有趣片段——光场、噪声、SDF 形状——每一个都是一个可以直接运行的小窗口。
Three.js · GLSL · Vite
Noise Field
Perlin 噪声驱动的交互流场
鼠标扰动粒子流向，Perlin 噪声决定底层动态，颜色随速度变化映射。把数学噪声变成可以玩的东西，而不是一串看不懂的公式。
Canvas API · p5.js