跳转到主要内容

使用智能体模式从零构建网页应用

以开发一个网页小游戏为例,演示 Qoder 智能体模式从需求规划到多轮迭代的完整流程

Qoder 的智能体模式(Agent Mode)可以根据自然语言需求描述,自主完成项目规划、编码、运行与调优。本文以开发一个"技能五子棋"网页游戏为例,演示从零开始使用智能体模式的完整流程。

前提条件

已安装并登录 Qoder IDE,详见接入客户端/开发工具

步骤一:创建项目并描述需求

  1. 在本地创建空文件夹(如 wuziqi),在 Qoder IDE 中选择文件 > 打开文件夹,打开该文件夹。
  2. 打开智能会话(快捷键 Ctrl+L),选择智能体模式,输入项目需求:
    编写一个名为"技能五子棋"的网页游戏,游戏包含一个经典简洁的五子棋界面,
    游戏包含技能规则和技能数值系统,要体现一个对战双方的UI界面,显示其
    韧性状态条、气值、技能面板等UI元素,其中黑子方叫"玩家1",白子方为"玩家2"。
    
智能会话面板中输入的项目需求
  1. Qoder 会先规划项目任务,以文本形式输出对需求的理解,便于在编码前确认方向是否正确。
Qoder 输出的待办任务规划列表
  1. 确认无误后,Qoder 会自主完成编码,并在完成后启动运行、输出项目总结。通常会自动打开生成的页面;若未自动打开,可进入项目目录手动打开 index.html
首次生成的游戏页面,包含五子棋盘与双方技能面板

步骤二:调整界面风格并替换技能素材

首轮生成结果已覆盖大部分核心功能,但界面风格与技能内容仍需继续通过对话迭代。先将设计风格的具体描述发送给 Qoder:
优化一下界面,设计为小丑牌游戏的风格,描述如下:

Balatro (小丑牌) UI设计风格定义
这是一种像素化CRT复古未来主义(Pixelated CRT Retro-Futurism)风格。
它巧妙地将80-90年代的经典PC游戏/终端机的视觉元素与现代、清晰、
信息密度高的UI布局相结合,创造出一种既怀旧又极具功能性的独特美学。

核心特征:
- 视觉核心:所有图形元素由清晰可见的像素块构成,模仿老式CRT显示器效果
- 色彩方案:深色背景搭配高饱和度霓虹色(科技蓝、警示红、亮黄、活力橙)
- 版式与布局:遵循现代网格系统原则,信息区域划分明确,对齐工整
- 字体:经典像素点阵等宽字体,边缘锐利无抗锯齿
- 窗口与控件:硬朗矩形无圆角,1-2像素亮色描边,通过颜色变化提供视觉引导
- 动效:快速干脆的像素动画,如闪烁、快速位移
再继续在对话中补充技能规则与素材替换指令:
技能替换为如下内容:
- 飞沙走石 3气 移除对方两颗非上回合的棋子
- 静止如水 4气 一个3x3区域两回合双方不可落子
- 力拔山兮 5气 随机重排一个3x3区域内的所有棋子
- 东山再起 0气 牺牲落子获得4气(每局2次)
- 调虎离山 6气 终极奥义 额外获得一个回合
- 拾金不昧 6气 终极奥义 将对方一颗非关键棋子变为己方棋子
- 两级反转 9气 终极奥义 交换己方和对方全部棋子的颜色
- See You Again 10气 终结技 仅能在对方韧性为0时发动,直接获胜

技能图片按照 images 目录里的图片替换。
若需要使用本地图片作为素材,需提前将素材文件放入项目目录,并在指令中明确素材与目标元素的对应关系。
编码完成后查看结果,界面风格与技能内容已按预期呈现:
调整界面风格并替换技能素材后的游戏界面

步骤三:微调数值

查看运行结果后发现韧性值设计过低,无法支撑完整对局体验,继续让 Qoder 调整韧性值参数。编码完成后再次查看结果,韧性值已调整完毕:
韧性值调整完毕后的最终游戏界面

最佳实践

  • 需求描述越具体(明确功能规则、数值参数、视觉参考),生成结果与预期的匹配度越高。
  • 通过多轮对话逐步细化,每轮聚焦一个方面(风格、功能、数值),避免一次描述过多内容。
  • Qoder 输出任务规划后,先确认理解是否正确再让其编码,可减少返工。
  • 涉及素材替换时,明确素材文件与目标元素的对应关系。