Linkeum 开发
| 登录 订阅

测试 Gemini 3:用 AI 创建咖啡菜单生成器而无需编写任何代码

生成式 AI 如何在一个提示中创建完整的工具

Gemini 3 代表了新一代 AI,能够理解复杂的需求并在几秒内生成生产就绪的代码。为了测试其真正的能力,我决定在不编写一行代码的情况下创建一个实用且通用的工具:一个可定制的咖啡菜单设计师,可导出为 PDF,并适应单个 HTML 文件。结果?令人印象深刻。

Barista Designer 界面 - 使用 Gemini 3 的咖啡菜单创建工具
Linkeum.com
广告后继续查看

测试 Gemini 3:用 AI 创建咖啡菜单

谷歌发布了 Gemini 的新版本:第 3 版。这个新的迭代承诺了新的推理能力和代码生成功能。让我们通过一个简单的测试来看看这一点。

第一步:开始

访问 Gemini 并在命令提示符中选择"推理"

对于这个测试,我决定创建一个快速轻松创建可导出 PDF 的咖啡/酒吧菜单的工具

初始提示

以下是使用的提示:

Create a single-file HTML tool for designing a coffee shop/bar menu.

FEATURES REQUIRED:

  1. Design Themes (user selectable):

    • Modern (minimalist, clean lines)
    • Nature (earthy, organic feel)
    • Futuristic (sleek, bold)
    • Zen (calm, balanced, minimal)
  2. Customization:

    • Editable menu items with names and prices
    • Add/remove menu categories (Coffee, Tea, Food, Desserts, etc.)
    • Text color selection from a palette
    • Theme color customization (primary accent color)
    • Option to add item descriptions
  3. Export:

    • PDF export in standard sizes: A4, A3, A5, Letter, Half Letter
    • Print-optimized layout
    • Maintain theme and colors in PDF
  4. Visual Elements:

    • Include an illustration/icon for each theme
    • Display theme preview on the left panel
    • Live preview of menu as user edits
  5. Technical:

    • Single HTML file (no dependencies, or use CDN links)
    • Use TailwindCSS via CDN
    • Include html2pdf library for PDF export
    • Fully responsive design
    • Save/load functionality (LocalStorage for user data)

STRUCTURE:

  • Left panel: Controls (theme, colors, export options)
  • Right panel: Live menu preview
  • Simple, intuitive UI

Make it production-ready, professional, and easy for non-developers to use.

Gemini 3 的响应

经过几分钟的思考,Gemini 响应:

Here is a complete, single-file HTML solution. It uses TailwindCSS for styling, FontAwesome for icons, and html2pdf.js for generating the PDF. It requires no installation—just save the code below as an .html file (e.g., menu-maker.html) and open it in your browser.

随后是代码。我获取代码并将其复制到一个 HTML 文件中,然后在浏览器中打开它。

结果如下:

Barista Designer - 使用 Gemini 3 的第一个结果

干净且功能强大。单个提示的结果令人印象深刻。我不会在这里放置代码,因为它相当长。我邀请您自己测试。

改进

有一些实际的改进需要做:

  • 使元素的大小可修改
  • 使菜单底部的文本可修改

让我们进一步推进,使用第二个提示完成它:

Add the following features to the coffee menu designer:

  1. DRAG & DROP:

    • Drag categories to reorder them
    • Drag menu items within categories to reorder them
    • Visual feedback during drag (highlight, shadow, cursor)
    • Smooth animations
  2. SIZE CUSTOMIZATION:

    • Adjustable font size for:
      • Category titles (slider: 16px - 32px)
      • Menu item names (slider: 12px - 24px)
      • Menu item prices (slider: 10px - 20px)
      • Menu item descriptions (slider: 10px - 16px)
    • Show current size value next to each slider
    • Live preview as user adjusts
  3. SPACING CUSTOMIZATION (bonus):

    • Gap between menu items (slider: 8px - 24px)
    • Gap between categories (slider: 16px - 32px)
  4. FOOTER TEXT CUSTOMIZATION:

    • Editable footer text (currently "Menu created with Barista Designer")
    • Text input field to modify footer content
    • Option to toggle footer visibility (show/hide checkbox)
    • Footer font size slider (8px - 16px)
    • Footer text color selection from palette
  5. UX IMPROVEMENTS:

    • Add "Reset sizes to default" button
    • Add icons for drag handles (≡ icon)
    • Group font size controls in a dedicated panel
    • Disable text selection during dragging
    • Add delete buttons for categories and items
  6. PERSISTENCE:

    • Save all size settings and footer text to LocalStorage
    • Load them when user reopens the tool

Keep the single-file HTML structure and maintain all existing features (themes, colors, PDF export).

增强的响应

经过几分钟的推理,这是 Gemini 的响应:

Here is the updated, single-file solution.

I have added SortableJS (via CDN) to handle robust drag-and-drop functionality, implemented CSS Variables for high-performance live font resizing, and added the requested Footer and Spacing controls.

随后是代码。我将代码复制粘贴到一个新的 HTML 文件中并在浏览器中打开它。

以下是结果:

Barista Designer - 第二个提示后 - 控制面板

Barista Designer - 第二个提示后 - 菜单预览

大小是可修改的,一切都有效,PDF 保存也有效。2 个提示的结果干净、功能强大,令人印象深刻!

广告后继续查看

关键要点

这个测试表明 Gemini 3 不仅仅是一个聊天机器人 – 它是一个真正的开发工具,能够创建专业应用程序。从小咖啡馆到餐厅,再到餐车,这个工具都可以直接使用。如果您有工具的想法,一个"简单"的网站,但不想深入代码,Gemini 可以将您的想象变为现实。开始吧!
L
Linkeum团队
Linkeum的技术和金融作家与专家团队。

相关关键词

#Gemini 3 #生成式 AI #网络开发 #HTML #JavaScript #TailwindCSS #咖啡 #菜单 #PDF #无代码 #氛围编码