你将学到什么
- 如何进入 LingCode 编辑器
- 如何写出清晰的提示词以获得更好的结果
- 如何选择 AI 提供商（Claude、DeepSeek、GPT-4 等）
- 理解实时预览的工作方式
- 将作品导出为 HTML 或 PowerPoint
第一步：打开编辑器
1
进入编辑器页面
在浏览器中访问 /try.html。你会看到页面中央有一个大文本框，里面有占位提示词"Make me a pitch deck for an AI startup"。
第二步：写下你的第一个提示词
2
描述你想构建的内容
点击文本框，输入你的需求。第一次构建时，建议选择具体、明确的内容：
- "Build a single-page business proposal for a coffee shop"
- "Create an analytics dashboard with KPI cards and charts"
- "Design a landing page for a SaaS tool"
描述越具体，效果越好。与其说"做个网站"，不如说"构建一个简洁专业的落地页，包含英雄区域、三个功能介绍和一个注册表单"。
提示：LingCode 最擅长设计类交付物——演示文稿、数据看板、落地页、提案，以及其他单页或多页 HTML。如果你不知道从哪里开始，可以点击提示框下方的"Try:"示例标签，使用预填的提示词快速启动。
第三步：选择 AI 提供商
3
选择用于生成内容的 AI
在左侧边栏，你会看到提供商按钮：LingModel（内置，免费）、Claude、DeepSeek、GPT-4 等。
第一次构建建议选择 LingModel——免费、无需 API Key，设计类任务表现出色。如果你想使用 Claude 或其他提供商，需要先添加 API Key（参见设置 API Key）。
第四步：运行并预览
4
点击"Send"，看它自动构建
输入提示词并选好提供商后，点击底部蓝色的"Send"按钮。AI 会实时生成你的设计，右侧预览区域会立即渲染出来。
预览会随着代码流式输出而实时更新——看着你的想法一点一点变为现实。
提示：如果对第一次结果不满意，点击"Continue"并提出修改意见，比如："Make the colors warmer"、"Add a pricing table"、"Switch to a dark theme"。每次追问都会在现有基础上进行优化。
第五步：优化（可选）
5
迭代与改进
使用回复下方的"Continue"按钮提出调整需求：
- "Make the heading bigger"
- "Change the accent color to blue"
- "Add more spacing between sections"
- "Include a call-to-action button"
每次追问都会在上一次输出的基础上继续完善。你也可以在"Code"标签页中直接编辑 HTML 代码，修改会立即反映在预览中。
第六步：导出与下载
6
获取你的作品
满意之后，点击预览区上方的三点菜单，选择：
- Download .html — 获取原始 HTML 文件，可自行编辑或部署到任意平台
- Download .zip — 多页面站点可打包下载所有文件
- Export PDF — 适合文档和单页内容
- Export PPT — 如果你的构建包含
<section class="slide"> 元素，每个元素都会成为一张 PowerPoint 幻灯片
注意：导出功能完全在客户端完成——不会上传任何内容到我们的服务器。你的数据完全私密。
接下来做什么？
完成第一次构建后，你可以继续探索：