Vibe Coding
三个在浏览器里跑的实验:世界高亮地图、GRAIN 像素工作室,以及 TurboFlow 营销落地页。从单文件工具到多文件静态站点——用 Cursor 对话式迭代,把设计直觉直接落成可交互、可部署的页面。
设计师边聊边写代码,验证想法比画静态稿更快。
把设计手感延伸到可运行的界面
「Vibe coding」对我来说不是替代工程,而是用可运行的页面验证配色、动效、控件密度和导出流程——这些在 Figma 里很难一次摸到的细节。
共同点:零后端、客户端渲染;从单文件到静态站点,都能直接部署。
World · Highlight Map
深色底上的点阵世界地图:搜索国家、多选高亮、引线标注。适合运营图、投屏演示或社媒信息图。
GRAIN · Pixel Studio
上传、拖放或粘贴图片/视频,实时预览 ASCII、半色调、点阵、乐高等像素风格。控制面板按「预设 → 效果 → 源图 → 调色 → 纹理 → 导出」组织。
TurboFlow
链上永续 / 事件合约营销落地页:Everyone gets a seat at the table。深色终端感视觉,Hero 用点云椅子 + ASCII 装饰,章节带 Canvas 动效与 Live 链上 feed。
来自 TurboFlow.zip 原版文件。本地请用静态服务器预览整站(如 npx serve .)。
怎么做的
从一个具体场景出发
地图来自「快速做高亮信息图」;GRAIN 来自「像素风素材实验」;TurboFlow 来自「把 Web3 产品叙事做成可滚动落地页」。
对话式迭代 UI
在 Cursor 里描述视觉和交互,边预览边改 CSS 变量、章节色板、滚动节奏和动效曲线。
按体量收口
小工具保持单文件;复杂页面保持交付包原样——都能静态部署,也方便嵌进 portfolio demo。
设计师把关细节
字号阶梯、hairline 分隔、hover 状态、导出倍率——这些「手感」仍由设计决定,代码只是载体。
ChatGPT / Figma Make 负责出方向和结构;vibe coding 负责把高交互、高参数化的工具原型推到能用——不必等排期,想法当天就能摸。