我去年给自己做个人品牌官网，找了一个在站酷上挺有名的独立设计师，报价 3 万，交付周期 6 周。拿到稿子我还挺满意的，首屏一个流动的 Shader 背景，Hero 区嵌了段视频，过渡动效丝滑得像丝绸。
直到昨晚。
我看到 Kimi 更新了 K2.6之后，就丢了一句需求给它。
5 分钟后，它吐出来的东西，和那份 3 万块的稿子几乎是同一个水平。
就一年时间，AI 能干3万的活儿了？
所以今天这篇，就来帮大家实测 Kimi 2.6 的真实实力。三个 Case 我都按“客户真的会下单”的标准跑的。提示词贴在每个 Case 下面，想抄作业的可以直接拿走。
01. 日式威士忌品牌落地页
这个 Case 的起因是我有个朋友做精酿产品线，想做个高端化的产品页，之前找外包报价 1.8 万。
我用 Kimi 2.6 试了一下，定位是独立日式威士忌品牌。
下面是完整提示词：
做一个独立日式威士忌品牌的产品落地页。
品牌定位：小批量手工蒸馏，强调匠人精神和东方美学。
【首屏 Hero 区】
– 背景用 Three.js + GLSL Fragment Shader 做流体效果：
* 模拟威士忌在玻璃杯中缓慢晃动的视觉
* 主色调琥珀色 #C87533，混合深棕 #3B1F0E 和金色高光 #E8B547
* 光源从左上角打下来，明显的折射和高光
* 整个流体缓慢呼吸（10 秒一个循环）
– Shader 必须包含以下光学细节：
Fresnel reflection（菲涅尔反射）——边缘高光
Subsurface scattering（次表面散射）——液体内部透光
Caustics（焦散光）——液体表面波纹投影
- Chromatic aberration（色差）——高光边缘微小色散 参考 shadertoy.com 上 ‘liquid gold’ 相关 Shader 的质感- 前景左侧品牌名（竖排日文+横排英文）
– 右侧是 3D 威士忌瓶身，用 @react-three/fiber 渲染
* 瓶身缓慢旋转（30 秒一圈）
* 滚轮滚动时，瓶身内液体跟着惯性晃动
* 快速滚 → 液体产生小气泡上浮
* 静止 → 液体缓慢回归水平
【记忆点:冰块光标】
– Hover 到威士忌瓶身或产品卡片时， 鼠标变成一个浮动的 3D 冰块（透明质感，有折射效果）
– 冰块有极轻微旋转（5 秒一圈）
– 离开产品区域，光标恢复默认【第二屏:风味轮盘】- 交互式圆形风味轮盘，hover 到不同扇区：
* 扇区发光
* 中心出现一朵对应风味的”烟雾”（Shader 模拟）
* 右侧滑入风味描述
* 背景 Shader 颜色微调匹配（烟熏→灰蓝，蜂蜜→金黄）
– 从上一屏的 Shader “凝固成轮盘”的转场动画
【第三屏:酿造工艺】
– 横向滚动时间轴，5 个步骤：选麦、发酵、蒸馏、陈酿、装瓶- 每步一张黑白工艺照片 + 文字描述
【第四屏:产品系列】
– 3 款威士忌产品卡片，每款一个 3D 瓶身- 卡片 hover 时瓶身轻微倾斜和高光变化
【第五屏:购买区】- 极简购买按钮 + 数量选择 + 品牌故事长文本【风格参考】
– 主体参考山崎威士忌官网的克制感
– 气质混合三顿半官网（saturnbird.com）的产品呈现方式
– 排版节奏参考 Linear 官网
【技术栈】React 19 + TypeScript + Tailwind + Three.js + @react-three/fiber + @react-three/drei + GSAP
这份提示词里我没说“Shader 要好看”，而是直接指定了几个光学术语：Fresnel reflection（菲涅尔反射）、Subsurface scattering（次表面散射）、Caustics（焦散光）、Chromatic aberration（色差）。
模型听到这几个词直接换挡。
一般 AI 生成的 Shader 看起来像“动态渐变”，是因为它默认走的是最基础的渲染方程。一旦你要求菲涅尔反射+次表面散射，它会调用更完整的 GLSL 代码结构。这是跑出“真 Shader”的核心秘诀。
一起看看跑出来的效果。
首页Shader 是真 Shader，不是那种糊弄人的 CSS 渐变。琥珀色液体在屏幕上缓慢流动，边缘有菲涅尔高光，内部有透光感，表面有波纹投影的焦散光斑。盯着看五秒会有点眼晕，这就是我想要的那种真酒在玻璃杯里晃的感觉。
风味轮盘这一屏跑出来还不错，“烟雾和背景会根据风味联动变色”。这种全局色调的呼吸感，是我在很多国外获奖网站里才见过的做法。
酿造工艺这一屏是最“懂设计”的一屏，也是我最意外的一屏。我以为它会给我做一个常规的竖向时间轴，结果它默认就给了横向滚动，和前几屏的垂直节奏形成对比，让整页的呼吸感一下子打开了。黑白工艺照片处理得克制，没有滤镜叠加的廉价感，这种细节是加分项里的加分项。
毛病也有。3D 模型在低端机上确实吃性能，我用那台 5 年前的老 MacBook Air 打开，风扇起飞。这个锅不能全甩给 Kimi，复杂 Shader 加高精度 3D 模型本来就重。但它没主动做性能降级方案，比如检测到低端设备时降低像素比、关掉次表面散射这类高开销效果，或者直接退化成 2D 展示。这方面的考虑，目前和一个有经验的前端相比，有一定差距。
02. 独立调香师的个人网站
我给 Kimi 的设定是：一位叫 Lina 的独立调香师，在京都学艺 8 年，作品以“东方草本”为主题。
选“调香师”而不是更常见的“摄影师”，是因为调香师这个身份自带东方美学气质，适合跑出“高级感”，更能检验Kimi2.6的水准。做 Vibe Coding 的第一件事，是给模型一个具体到能想象出来的主角，而不是“做个漂亮网站”这种空话。
下面是我用的完整提示词，可以直接复制粘贴：
帮我做一个独立香水调香师的个人作品集网站。
身份背景：他叫 Lina，在京都学习调香 8 年，作品以”东方草本”为主题。
【首屏 Hero 区背景】
– 纯黑底色 #0A0A0A
– 一缕朱砂红色烟雾（#C9302C 渐变到 #8B1A1A）从画面 底部中偏左位置缓慢升起
– 烟雾向上升起时逐渐扩散、变淡，在画面上 2/3 处 溶解成若隐若现的朱砂雾气
– 烟雾有极轻微的横向飘移（2-3px 的左右摇摆）， 模拟无风环境下的气流
– 循环周期 8 秒，循环时新的烟雾从底部浮起， 旧的烟雾在顶部消散，保证画面始终有烟
– 烟雾用 Three.js + Fragment Shader 生成 （volumetric smoke shader，参考 shadertoy 上 “volumetric smoke” 类作品）
– 整体叠加一层极细的胶片颗粒感滤镜（film grain）， 颗粒尺寸 0.3px，密度 15%
– 右下角有一个极其微弱的橙红色光晕（#8B1A1A，20% 透明度）， 暗示”香炉”光源位置
【风格参考】- 排版参考 Linear 官网（linear.app）
– 质感参考 Awwwards 2025 年度获奖作品 Lando Norris 官网 （由 OFF+BRAND 工作室操刀，可从 awwwards.com 检索）
– 气质参考站酷 2024 百大设计榜里的品牌官网作品- 色板：主色墨黑 #0A0A0A，暖米白 #F5F0E8，朱砂红 #C9302C
– 字体：大标题 Instrument Serif / Canela / Editorial New（择优）， 正文 Inter / Söhne，装饰性中文字体用”思源宋体”
【记忆点：墨迹光标】
– 把默认鼠标光标隐藏，替换成一个跟随移动的水墨圆点
– 鼠标移动时，拖出一条会慢慢晕染、淡出的墨迹轨迹- Hover 到可点击元素时，圆点变大，墨迹变淡
– 这个效果要贯穿整站
【页面结构】
Hero 首屏（全屏视频）
About 区：左文右图，图片是她在工作室的黑白照片
Works 区：香水作品展示，卡片用 clip-path 从左向右揭幕动画
Process 区：调香流程的横向滚动时间轴
Contact 区：极简的预约表单
【技术栈】
React 19 + TypeScript + Tailwind + GSAP + Three.js + @react-three/fiber + WebGL Shader
首屏的视频融合处理得很细。背景的火苗能清晰区分内焰和外焰，光标移动过去，会根据光标的节奏舞动。这种细节，是我当年那位设计师加钱才做的。
墨迹光标是我朋友看到第一反应“等下这鼠标是怎么回事”的东西。默认鼠标被隐藏，替换成一个水墨线条，鼠标移动拖出慢慢晕染的墨迹轨迹。
当然也不是没毛病。响应式在 iPad 竖屏下，Hero 区的视频会有点溢出，我让它改，它第二轮就修好了。让我满意的是单点修改这件事，它没有把别的地方一起“优化”掉。以前我让某模型改个按钮颜色，它能顺手把我整个导航栏给重写了，当场血压飙升。
03. 瑜伽老师的预约系统
前两个 Case 玩的是审美。但这个 Case 玩的是，这东西真的能上线收钱。
因为看到 K2.6的Agent这次不仅升级了前端，还增加了后端功能。
所以我设定了一个很具体的场景：一位在巴厘岛教阴瑜伽 10 年的独立瑜伽老师 Peggy，需要一个能让学员在线预约的 SaaS 系统。
全栈应用不能一次性扔全部需求，要分轮对话。这样每一轮的产出都可验证，模型也不会迷失。我用了 4 轮。
第一轮：做出审美到位的官网前端
帮我做一个独立瑜伽老师 Peggy的个人官网。
她在巴厘岛教授阴瑜伽 10 年。
【首屏】
– Hero 背景是一段日出海边瑜伽的视频循环（先用占位符）
– 大标题用优雅的衬线字体，缓慢淡入
– 有一个 CTA 按钮”预约私教课”【风格参考】
– 排版和克制感参考 Linear 官网（linear.app）
– 氛围感参考 Awwwards 2024 SOTY 获奖作品 Igloo Inc （可从 awwwards.com 检索）
– 色板：主色米白 #F8F5F0，强调色青草绿 #6B8E5A 和陶土色 #C68B6A
– 字体：大标题用 Instrument Serif，正文用 Inter
【页面结构】
- Hero 首屏
- About 区（Lina 的故事）
- 课程介绍（三种课程）
- 学员评价
- 联系方式
【技术栈】
React 19 + TypeScript + Tailwind + shadcn/ui + GSAP先只做前端页面，不要做功能。
第一轮跑完我有点意外，海边日出的 Hero 视频、米白主色、蔚蓝色大海，整体呈现出精品瑜伽工作室应有的克制和松弛。字体选了 Instrument Serif 做大标题，衬线的柔和度和“阴瑜伽”的气质对上了。这一屏直接截图发朋友圈，估计都不会有人觉得是 AI 做的。
第二轮：加用户系统
非常好。现在给这个网站加用户系统：
– 学员可以邮箱注册+登录
– 用 Supabase 做后端
– 注册后有一个个人中心页面，可以看到自己的头像、预约记录
– 登录态要持久化（刷新不掉）
– 注册表单的报错提示要有动效（抖动+红色边框）
这一轮的惊喜点是登录态持久化和表单动效这两个细节，它没只做“能跑”的最小实现，而是默认考虑了真实用户场景：刷新不掉线、报错有抖动反馈、输入框有 focus 动效。Supabase 的环境变量它全程自己配置，我没碰过一行配置代码。以前我觉得“加登录”是件要开 1 小时 IDE 的事，这一轮 6 分钟跑完，个人中心的头像和预约记录区都已经在了。
第三轮：加预约系统
继续。
现在加预约功能：
– 我提供 3 种课程：
* 一对一私教（￥800/次）
* 小班课（￥300/次）
* 体验课（￥0）
– 学员可以选日期、时间段、课程类型
– 预约成功后写入 Supabase 数据库
– 预约页面要有一个日历组件，已约满的时段变灰不可选
【记忆点：预约成功的”莲花绽放”】
– 学员点击”确认预约”后，不是简单的弹窗
– 而是：
* 整个屏幕变暗
* 中间浮现一朵缓慢绽放的莲花（SVG 动画）
* 莲花下方显示”您的时光已为您保留”+ 具体日期时间 * 背景有轻微的花瓣飘落（粒子效果）
* 5 秒后自动跳回个人中心
日历组件出来的第一版就是能直接上线的水准。已约满时段自动变灰、不可选状态有 tooltip 提示、移动端的时间选择器做了单独适配。最让我愿意反复播放录屏的是“莲花绽放”：屏幕变暗 ， 莲花用 SVG path 动画逐瓣展开 ，花瓣粒子缓慢飘落 ，“您的时光已为您保留”淡入。整个过程 4 秒，但它把“仪式感”三个字做出来了。
第一个版本的莲花绽放效果，我不满意，我让Kimi只针对这一部分重新优化，它真的只改了这一部分，而且完成得很快。这一版是不是好多了。
一个会做“莲花绽放”的 AI，和一个只会弹“预约成功”的 AI，中间隔着十个设计师。
第四轮：加管理员后台
最后做 admin 后台，只有 admin 账号能登录：
【仪表盘】
– 今日预约数、本周收入、新增学员数（有数字滚动动画）
– “今日能量地图”模块：
* 展示老师今天的课程分布（时间轴样式）
* 每堂课是一个圆点，大小=学员数，颜色=课程类型 * Hover 显示详情- 本月预约趋势折线图（用 recharts）
【预约管理】
– 表格展示所有预约，可以筛选、取消
– 风格参考 Linear 官网的产品界面（linear.app）【学员管理】
– 所有注册学员列表【整体风格】
– 用 shadcn/ui 做
– 表格设计参考 Linear 的 Issue 列表视图
Admin 后台是整个 Case 最让我感到“档次变了”的一屏。“今日能量地图”那个非标准组件它没偷懒，圆点大小对应学员数、颜色对应课程类型、hover 浮层显示详情。配合 recharts 的折线图和数字滚动动画，这个后台的信息密度和颗粒度，已经接近我平时用的正经 SaaS 产品。
最后一步，也是最关键的：
帮我把这个应用部署到 Vercel，给我一个可以真实访问的 URL。
前端部署到 Vercel，Supabase 作为后端服务，把环境变量配置好。
十几分钟后，我拿到了这些东西：
前端官网 + 学员注册登录 + 课程预约系统 + 管理员后台 + 数据可视化 + 真实数据库 + 一个真实可访问的线上 URL。
04. 一些分享
测完这三个 Case，我感觉 Kimi 2.6 的审美是真的进了一个档位。顶尖设计师暂时还不用担心，但中间 90% 的外包市场，确实要抖三抖了。
另外，全栈这件事，比审美更有想象力。 因为审美是锦上添花，全栈是从 0 到 1。以前做 Vibe Coding，你得到的是一个漂亮的壳。现在做 Vibe Coding，你能得到一个能收钱、能留资、能运营的生意。一个瑜伽老师不用再花 2 万找外包做预约系统，一个咖啡店主不用再花 1 万做品牌官网，这件事比“模型的跑分”重要得多。
最后，坦率讲，审美这一项 Kimi 目前确实摸到了第一梯队，前端复杂度高的 Case 里，Shader 和 3D 效果稳定性比我预期的好。
几年前我们聊 AI，聊的是“能不能做”。 去年我们聊 AI，聊的是“做得像不像人”。 现在聊 Kimi 2.6 这种模型，我们在聊的是“审美够不够高级”。评价维度的变化，本身就在说明AI的进步。
AI 开始和人类争夺“品味”这块领地。
原文链接：K2.6 小更新大跃进！实测超越了我花 3 万找设计师做的网页
