百宝箱平台是一款可以提供一站式 AI 原生应用的开发平台，您无需具有任何代码基础，只需通过自然语言即可三步完成应用的创建与发布。百宝箱平台不仅可以帮助您轻松创建各类智能体，一键发布到支付宝小程序，释放无限可能，来开启您的 AI 应用创作之旅吧！

前言

最近发现Tbox多了一个任务的功能，实际上就是多智能体协同进行任务开发。
博主觉得这种轻量级步骤式开发和实际效果的过程实在是太棒了，可以让我们发挥自己无限的想象。
博主本次要实现的一个效果就是随机菜单，之前也是在朋友那里看到的一个效果，所以想着通过Tbox任务的方式去实现，出来的效果还不错，一起来看下博主是如何实现的。

应用效果

博主选择的是应用任务，并且是以网页方式展示效果。
体验地址：https://www.tbox.cn/agents/h/ae37beff59a047f08dd82a9059f86588

实现过程

任务小组

自定义任务

可以通过克隆官方任务小组，然后可以用官方的智能体或者自己创建的智能体进行协同开发。

提示词

通过上面简单了解下有那些任务小组，然后明确我们自己要开发那个应用后，开始编辑自己的提示词

每天中午都不知道吃什么，帮我做一个随机生成一个菜单，比如：鱼香肉丝、隆江猪脚饭等等。
生成一个炫酷的界面，并且中间有一个按钮，帮我选套餐，
点击后，菜单随机变动，是当前一个位置变动，不要下拉式那种，5秒后显示一个套餐。
并且界面也若隐若现的显示各式套餐。
配图一定要是和推荐的套餐是一样的，比如：隆江猪脚饭一定是实际配图。

目前，博主认为还是以提示词作为核心，正确合理的表达描述也非常重要，不然大模型可能会有理解偏差，个人认为尽量的实用领域词，不要用太泛的词语。

遇到的情况

在做这个应用的过程中，也是经过了好几次打磨。第一次的提示词里，我有一个词是这么写的，菜单随机滚动，出来的效果是下面这样的，类似一种下拉式随机滚动，并不是我想要的效果。

核心变动：最后就是把随机滚动改为了随机变动，并且再限定不要出现这种下拉式滚动效果，经过多轮尝试就是达到上一步的效果了。所以准确的表述很重要，可以多尝试就能够优化到自己想要的效果。

研发工程师

Tbox作为一个产品经理或者项目总统筹的角色来安排各个角色智能体来完成当前这个任务。
由于这个任务比较简单，只需要让研发工程进行页面开发即可实现。

追加优化

第一次出来的效果，整体布局博主觉得都非常好了，在体验的过程中发现，随机已经完成，但是图片出来的效果有点慢，就是要隔几秒才显示实际配图，这个体验上有待提高。
所以，博主进一步进行追问

实际配图出来的时候有点慢，可以优化下

到这里，是不是感觉它就是你的一个开发员工，不久将来，一个人就可以统筹安排多角色智能体作为你的员工来完成不同的事情。

代码结构

相信对于前端开发人员，并且实用的是react就很熟悉了。
代码下载地址：https://download.csdn.net/download/lmy_520/92481569

核心代码

import React, { useState, useEffect, useRef } from 'react';
import { Utensils, Sparkles } from 'lucide-react';
import FloatingBackground from './components/FloatingBackground';
import MealCard from './components/MealCard';
import { meals } from './data/meals';
import { getMealImageUrl } from './utils/image';

const App = () => {
  const [currentMeal, setCurrentMeal] = useState(meals[0]);
  const [isShuffling, setIsShuffling] = useState(false);
  const [buttonText, setButtonText] = useState('帮我选套餐');

  const intervalRef = useRef(null);
  const timeoutRef = useRef(null);

  // 核心优化：预加载所有图片
  useEffect(() => {
    const preloadImages = () => {
      // 延迟 500ms 开始预加载，优先保证首屏渲染
      setTimeout(() => {
        meals.forEach(meal => {
          const img = new Image();
          img.src = getMealImageUrl(meal);
        });
        console.log('Images preloading started...');
      }, 500);
    };

    preloadImages();
  }, []);

  const startShuffle = () => {
    if (isShuffling) return;

    setIsShuffling(true);
    setButtonText('正在随机挑选...');

    let speed = 100; // 初始速度 100ms
    let elapsedTime = 0;
    const totalDuration = 5000; // 总时长 5秒

    if (intervalRef.current) clearInterval(intervalRef.current);
    if (timeoutRef.current) clearTimeout(timeoutRef.current);

    const runShuffle = () => {
      const randomIndex = Math.floor(Math.random() * meals.length);
      setCurrentMeal(meals[randomIndex]);

      elapsedTime += speed;

      // 减速算法
      if (elapsedTime > totalDuration * 0.6) {
        speed += 20;
      }

      if (elapsedTime < totalDuration) {
        intervalRef.current = setTimeout(runShuffle, speed);
      } else {
        finishShuffle();
      }
    };

    runShuffle();
  };

  const finishShuffle = () => {
    setIsShuffling(false);
    setButtonText('再选一次');
    if (navigator.vibrate) {
      navigator.vibrate(50);
    }
  };

  useEffect(() => {
    return () => {
      if (intervalRef.current) clearTimeout(intervalRef.current);
      if (timeoutRef.current) clearTimeout(timeoutRef.current);
    };
  }, []);

  return (
    <div className="relative min-h-screen w-full flex flex-col items-center justify-center p-4">
      <FloatingBackground />

      <div className="z-10 w-full max-w-md flex flex-col items-center gap-8">
        <div className="text-center space-y-2">
          <div className="flex items-center justify-center gap-2 text-yellow-400 mb-2">
            <Utensils className="w-6 h-6" />
            <span className="text-sm font-bold tracking-widest uppercase">
              What to eat today
            </span>
          </div>
          <h1 className="text-3xl md:text-4xl font-extrabold text-white tracking-tight">
            今天吃什么？
          </h1>
          <p className="text-gray-400 text-sm md:text-base">
            纠结症福音，让命运决定你的下一顿美味
          </p>
        </div>

        <MealCard meal={currentMeal} isShuffling={isShuffling} />

        <button
          onClick={startShuffle}
          disabled={isShuffling}
          className={`
            group relative px-8 py-4 rounded-full font-bold text-lg shadow-[0_0_20px_rgba(250,204,21,0.3)]
            transition-all duration-300 transform active:scale-95
            flex items-center gap-3 overflow-hidden
            ${
              isShuffling
                ? 'bg-gray-700 text-gray-400 cursor-not-allowed'
                : 'bg-gradient-to-r from-yellow-400 to-orange-500 text-black hover:shadow-[0_0_30px_rgba(250,204,21,0.6)] hover:-translate-y-1'
            }
          `}
        >
          {!isShuffling && (
            <div className="absolute inset-0 -translate-x-full group-hover:animate-[shimmer_1.5s_infinite] bg-gradient-to-r from-transparent via-white/30 to-transparent" />
          )}

          <Sparkles
            className={`w-5 h-5 ${isShuffling ? 'animate-spin' : ''}`}
          />
          <span>{buttonText}</span>
        </button>
      </div>
    </div>
  );
};

export default App;

总结

在这个AI即将成熟的时代，对于各行各业以及各个岗位，博主觉得都要不断去接触和学习，否则还真可能被远远落后于别人。
不管如何进步，都无需太过于焦虑，迎难而上，我们永远不做落后者，好好吃饭好好学习，天天进步。
最后，百宝箱Tbox你值得拥有。