AI 应用构建工具提示词

AI 应用构建工具的 HTML、CSS 和 JavaScript 提示词。

Bolt、Lovable、v0 和 Cursor 等 AI 应用构建工具可以将一段提示词转化为可运行的 HTML 页面。以下提示词专为静态 HTML、CSS 和 JavaScript 输出而设计，每个结果都是可以立即预览和分享的页面。

npx @htmlshare/cli install --agent all

一条命令即可把本地 Skill 安装到 Codex、Claude 和 Cursor。安装后，在任一工具中使用 /htmlshare 发布当前 HTML 项目。

即用提示词

复制提示词，粘贴到你的 AI 构建工具中。

包含 hero 区域、功能网格和价格表的完整页面布局。

构建一个 SaaS 落地页，包含醒目的 hero 标题和 CTA 按钮、带图标的三列功能网格、免费和付费两档价格表，以及 FAQ 手风琴。使用 HTML、通过 CDN 引入的 Tailwind CSS 和原生 JavaScript 实现手风琴效果。所有内容放在一个文件中。

创建一个简洁的产品发布页面，包含全屏 hero 区域、邮件收集表单和五项功能列表。无外部依赖，所有样式内联。

导航栏、卡片、弹窗和标签等可复用的 UI 组件。

构建一个响应式导航栏，左侧为 logo，中间有 4 个导航链接，右侧有「开始使用」按钮。为移动端添加汉堡菜单。仅使用 HTML 和 CSS，无需 JavaScript 库。

创建三种卡片变体：带图标和描述的功能卡片、带功能列表和 CTA 的价格卡片、带头像和引用的评价卡片。使用 HTML 和 CSS 自定义属性。

管理后台、数据统计卡片和数据展示布局。

创建一个管理仪表板，包含固定的左侧图标导航、带搜索框和用户头像下拉菜单的顶部栏，以及展示 4 张统计卡片和占位数据表格的主内容区。使用 HTML 和 CSS Grid。

构建一个响应式数据分析页面，包含日期范围选择器、顶部 3 张 KPI 汇总卡片，以及仅用 CSS 和 HTML 实现的条形图（不使用 canvas 或 SVG 库）。下方添加数据表格。

多步骤表单、手风琴、标签页和模态框。

构建一个三步骤表单：个人信息、账户偏好和确认摘要。顶部显示步骤进度条。使用 HTML、CSS 和原生 JavaScript，无需任何库或框架。

创建一个带有 4 个标签页和平滑内容切换效果的标签页组件。每个面板包含标题和段落。使用 HTML、CSS 过渡动画和原生 JavaScript。

更多提示词来源

除了上面的模板，这些是查找经过验证的 AI HTML 和 CSS 构建工具提示词的最佳去处。

在 GitHub 搜索 'bolt-prompts'、'v0-prompts' 或 'ai-html-prompts'，可以找到社区维护的提示词库和入门模板合集。

r/ChatGPT、r/ClaudeAI 和 r/webdev 经常分享提示词模板，讨论哪些方法能生成更干净的 HTML 和 CSS 代码。

Bolt.new、Lovable、v0 by Vercel 和 Cursor 各自在官方文档和社区 Discord 中发布了示例提示词和最佳实践。

浏览 Bolt Gallery 和 v0 社区中已发布的示例，从你想复现的效果出发，反向推导出有效的提示词写法。

可以从标有 'ai-prompts' 或 'bolt-prompts' 的 GitHub 仓库、你的 AI 构建工具官方文档（Bolt、v0、Lovable、Cursor），以及 Reddit 社区（r/ChatGPT、r/ClaudeAI）开始。本页面的提示词可以直接复制粘贴使用。

要具体说明布局方式（CSS Grid、Flexbox），列出所需的每个部分（hero、特性、定价、FAQ），指定样式方案（Tailwind CDN、内联 CSS 或独立 style 块），最后加上「将所有内容放在一个 HTML 文件中」。越详细的提示词产生的结果越稳定。

将生成的 HTML 文件粘贴或上传到 HTMLShare，即可立即生成可分享的浏览器预览链接——无需 Git 仓库、无需托管配置、无需本地服务器。用它来查看结果并与队友或客户分享。