---
title: "我用 Gemini 3 一口气做了 10 个应用，附教程"
type: source
tags: [Gemini, AI应用开发, 提示词工程, SVG可视化, 前端开发]
date: 2025-11-24
---

## Source File
- [[raw/AI/我用 Gemini 3 一口气做了 10 个应用，附教程.md]]

## Summary（用中文描述）
- 核心主题：作者分享如何利用 Gemini 3（大模型）+ 前端 SVG/HTML 可视化，在极短时间内快速构建 10 个实际可用的 AI 应用，并总结了一套通用的 AI 应用开发方法论。
- 问题域：AI 应用快速原型开发、提示词约束大模型结构化输出、前端可视化 AI 生成内容。
- 方法/机制：通过"三步法"——① 限定垂直输入场景、② 约束模型结构化输出、③ 设计前端可视化容器——实现"两句对话做出一个应用"。
- 结论/价值：提供了一套可复用的 AI 应用开发范式，降低 AI 应用开发门槛。

## Key Claims（用中文描述）
- Gemini 3 模型配合提示词约束，能够在两句对话内生成完整的可交互应用。
- AI 生成 SVG 代码可直接作为前端可视化容器，展示结构化信息。
- 配色卡片生成应用可从主题词（如画家名字）扩展出完整配色方案，包括渐变色、纯色及颜色名称解释。
- 绘画思维导图应用通过 AI 对关键词进行头脑风暴，以思维导图形式呈现，用户选择维度后生成最终图片。
- 电影海报应用通过提示词约束模型输出结构化信息（海报元素、上映时间、导演、简介），再由前端 SVG 渲染。

## Key Quotes
> "制作原理，就是让 AI 输出 SVG 的语言，可视化展示整个信息。" — 应用制作核心机制
> "这些都是靠提示词设计的。约束好大模型结构化输出信息。" — 关键提示词工程方法
> "如果你感兴趣的话，我下期再来详细分享一下做这些应用的具体对话内容，我是怎么把这些应用两句对话就实现出来的。" — 开发效率承诺

## Key Concepts
- [[结构化输出]]：通过提示词约束大模型按预定格式输出信息（如电影海报元素、配色值）。
- [[SVG可视化]]：利用 AI 生成 SVG 代码作为前端展示层，将文本信息转换为图形卡片。
- [[AI应用三步法]]：① 思考输入场景（垂直场景限定） → ② 约束模型思考（提示词/MCP扩展为结构化内容） → ③ 设计输出容器（前端代码可视化）。
- [[思维导图式提示词生成]]：AI 将用户关键词头脑风暴为多维度思维导图，用户选择后生成最终内容。
- [[配色方案生成]]：从主题词（如画家名字）自动扩展为包含渐变、纯色、颜色名称的完整配色卡片。

## Key Entities
- [[Gemini 3]]：Google 的多模态大模型，用于生成应用内容和 SVG 代码。
- [[AI Studio]]：Google 的 AI 应用开发和分享平台，用于托管和分享 Gemini 应用。

## Connections
- [[如何写出完美的Prompt（提示词）？]] ← 关联 ← [[AI应用三步法]]（提示词约束为核心）
- [[Vibe Coding]] ← extends ← [[AI应用三步法]]（AI辅助编程的具体实践）
- [[不会Gemini的产品经理真的要被淘汰了-附保姆级PRD生成指南]] ← 相关 ← [[Gemini 3]]（Gemini 应用案例）

## Contradictions
- 无已知冲突内容。