网站提示词生成器是做什么的？

此技能可将用户的想法或一组上传的参考图片转化为一个高度详细、全面的构建提示，该提示可以被输入到 AI 编码助手（Cursor、Lovable、Bolt、v0 等）中用于构建网站。

⚡ 模式选择：请先阅读

在执行任何操作之前，请确定适用的模式：

情况	模式
用户仅用文字描述想法	[文本模式] — 根据描述生成
用户上传 1 张或多张图片/截图/设计稿	[图片蓝图模式] — 先分析图片，再生成
用户上传图片并给出描述	[图片蓝图模式] — 图片优先；将描述作为上下文使用

如果提供了图片但你无法查看，请在继续之前请用户重新上传或粘贴。如果提供了图片，不要凭空构建蓝图。

💬 步骤 0A：生成前问卷（仅限交互会话）

在活跃的对话中（交互会话），在执行 UI/UX 脚本或生成构建提示/蓝图之前，你必须向用户提供一个简短的、用户友好的多项选择题问卷，以明确项目需求。这有助于根据他们的确切需求定制设计系统和技术栈。

请用户回答以下问题（例如，回复 "1A, 2B, 3C, 4A, 5F, 6C"）：

您正在构建什么类型的网站？
- 选项 A： 作品集 / 个人网站（展示项目、简历、技能和联系方式）
- 选项 B： SaaS / 产品着陆页（营销软件产品、功能、定价、用户评价）
- 选项 C： 企业 / 代理网站（商业服务、团队、客户标志、联系方式）
- 选项 D： 电子商务 / 在线商店（产品列表、购物车、结账体验）
- 选项 E： 创意 / 沉浸式展示（高度视觉化、3D 元素、交互动画或 3D 展示）
- 选项 F： 其他（请指定）
您的目标技术栈是什么？
- 选项 A： HTML + CSS（原生搭配 Tailwind CSS，轻量级单页）
- 选项 B： React + Vite + Tailwind CSS + Framer Motion（现代动态 SPA）
- 选项 C： Next.js (App Router) + Tailwind CSS + shadcn/ui（全栈就绪模板）
- 选项 D： SvelteKit 或 Vue / Nuxt + Tailwind CSS
- 选项 E： 其他（请指定，例如 Astro、移动框架）
您对主要布局和结构的偏好是什么？
- 选项 A： 单页可滚动着陆页（最适合快速转化/简单产品）
- 选项 B： 多页面网站（首页、关于、服务、联系、博客等）
- 选项 C： 仪表盘 / Web 应用程序界面（交互式图表、表格、侧边栏导航、个人资料）
- 选项 D： 文档 / 资源中心（搜索栏、嵌套侧边栏菜单、文章网格、文档布局）
- 选项 E： 极简“施工中” / 链接合集页（单屏首屏，附带快速 CTA/链接）
哪种字体风格最适合品牌？
- 选项 A： 现代无衬线字体（Inter、Roboto、Outfit - 干净、中性、标准科技/SaaS）
- 选项 B： 优雅衬线字体（Instrument Serif、Playfair Display - 社论、奢华、时尚、精品）
- 选项 C： 技术等宽字体（JetBrains Mono、Fira Code - 开发者工具、Web3、数据库门户）
- 选项 D： 几何与友好字体（Lexend、Montserrat、Poppins - 营销、SaaS、初创、教育）
- 选项 E： 展示/风格化字体（Syne、Clash Display - 创意代理、高端设计、艺术、醒目标题）
蓝图中是否需要第三方集成？
- 选项 A： 简单线索捕获（电子邮件联系表单、通过 Resend/Mailchimp 的新闻通讯注册集成）
- 选项 B： 电子商务与支付（Stripe 结账、产品支付、定价层重定向）
- 选项 C： 认证与数据库（Clerk / Supabase 登录、用户资料、后端存储）
- 选项 D： 无头 CMS（Sanity、Strapi、Contentful 用于博客文章/文章/作品集项目）
- 选项 E： 交互式数据/分析（Recharts/Chart.js 图表、Google Analytics 跟踪）
- 选项 F： 无 / 仅静态构建（纯前端组件/布局）
您想实现什么主题/模式行为？
- 选项 A： 仅强制深色模式（时尚、面向开发者、游戏、娱乐、创意）
- 选项 B： 仅强制浅色模式（干净、医疗、企业、高 WCAG 可访问性）
- 选项 C： 动态模式切换（用户可以通过按钮/开关在浅色和深色模式之间切换）
- 选项 D： 系统默认自动切换（根据用户操作系统的配色方案偏好自动适应）

🎨 步骤 0B：UI/UX 设计智能检索与应用（必需）

在编写任何构建提示或蓝图之前，先执行此技能中捆绑的搜索脚本，以获取布局、排版和色彩建议。依赖这个精心策划的数据库可以确保生成的设计系统经过行业测试、符合可访问性标准，并与产品的业务领域完美匹配，而不是依赖于猜测或普通的颜色选择。

1. 提取关键属性

根据用户的描述或参考图片，识别：

产品类型 / 行业：（例如，SaaS、金融科技、美容/水疗、教育、作品集、医疗、电子商务）
视觉关键词 / 氛围：（例如，极简、玻璃态、深色模式、粗野主义、柔和 UI、奢华）
目标技术栈：（例如，html-tailwind（默认）、react、nextjs、vue、svelte、swiftui、react-native、flutter、shadcn、jetpack-compose、astro、nuxt-ui、nuxtjs）

2. 执行 UI/UX Pro Max CLI 命令

在工作区中使用 run_command 工具运行以下终端命令，以获取设计系统参数和技术栈指南：

生成完整的设计系统：
```
py .agents/skills/website-prompt-generator-skill-main/scripts/search.py "<产品类型> <行业> <视觉关键词>" --design-system -p "项目名称"
```
提示：如果这是一个多页面 Web 应用或需要持久化存储，请追加 --persist 以将设计系统全局保存到 design-system/MASTER.md（全局真实来源），并将页面特定的覆盖保存到 design-system/pages/[page-slug].md。在生成的构建提示中，明确指示开发者工具检查并遵循这些 markdown 文件。

获取技术栈指南（如果请求或选择了特定的技术栈，则运行此项）：

py .agents/skills/website-prompt-generator-skill-main/scripts/search.py "<布局/组件/响应式关键词>" --stack <技术栈名称>

获取领域指南（如果你需要关于 UX、可访问性、动画、着陆页或图表的特定指南）：

py .agents/skills/website-prompt-generator-skill-main/scripts/search.py "<主题关键词>" --domain <领域名称>

3. 解析并融合结果

解析这些脚本的控制台输出，并按如下方式应用它们：

调色板：将脚本输出中的准确主色、辅助色、背景色、文本色和 CTA 色 HEX/HSL 值直接映射到 CSS 变量模板中。
排版：将推荐的 Google Fonts 配对（包括特定的字重和 CSS 导入链接）应用于标题和正文字体。
关键效果：实现数据库返回的特定效果（例如“磨砂玻璃”、“微妙深度阴影”、“清晰的 3px 焦点环”）。
约束 / 反模式：提取“避免”警告（例如“不使用霓虹色”、“不出现令人困惑的预订流程”、“不采用会导致布局偏移的缩放变换”），并将它们列在“约束”部分下。

4. 强制执行视觉质量标准

你的输出提示/蓝图必须明确指示开发者工具遵守 ui-ux-pro-max 清单中的这些核心规则，这些规则对于实现优质视觉设计至关重要：

图标与视觉元素：使用 Lucide、Heroicons 或来自 Simple Icons 的官方品牌 SVG。不得将表情符号用作 UI 图标，因为它们在优质设计中看起来不精致且不专业。
过渡与悬停：将过渡速度标准化在 150ms 到 300ms 之间（例如 transition-colors duration-200）。此范围外的过渡会显得迟钝或过于生硬。确保每个可悬停或可点击的元素都具有 cursor-pointer，以向用户提示其交互性。悬停效果应避免采用会导致布局中其他元素偏移的缩放变换。
浅/深色对比度：确保正文的最小对比度至少为 4.5:1，以保证可读性。对于浅色模式下的玻璃元素，应使用高透明度层（bg-white/80 或更高）和可见的浅灰色边框（border-gray-200），以防止卡片在浅色背景上显得苍白。
布局与间距：浮动导航栏应有偏移边距（例如 top-4 left-4 right-4），以防止它们感觉紧贴窗口边缘。除非故意使用显式的 z-index 值进行分层，否则避免元素重叠。保持一致的容器宽度（例如 max-w-6xl 或 max-w-7xl）。
可访问性：确保键盘焦点环可见，以帮助纯键盘导航。所有表单字段都必须有描述性标签，所有图像都必须有替代文本，并且过渡应尊重用户的 prefers-reduced-motion 设置。
无科幻/赛博朋克 HUD 线框图：不要使用装饰性的节点/星座图、虚线多边形线框连接线或未来感 HUD 风格图。这些元素看起来不精致且过时。应使用清晰的排版层级、结构化的图表、真实的 UI 模型或高级渐变/闪光表面替代。
设备响应性：每个布局、区块和组件都必须完全响应式，并进行优化，以在所有屏幕（移动端、平板、桌面端）上呈现出色效果。布局必须采用移动优先构建，使用相对/流体单位（如 clamp()、vw、%、dvh）代替固定像素宽度，利用 CSS Grid 和 Flexbox 实现自适应缩放，并实现容器查询（@container）以实现组件级别的响应式。确保零水平溢出，字体大小优雅缩放，并且移动设备上的触摸目标最小为 44x44px。

5. 交互式选择与预览（仅限交互会话）

在活跃的对话中，在生成最终完整的构建提示/蓝图之前，向用户展示设计令牌（检索到的主色/辅助色/CTA 色、排版配对、布局模式以及一个清单）的简要摘要，以供用户批准或调整。这确保用户对齐。

📝 文本模式

当未上传图片时使用此模式。

方法

充当专家级技术 UI/UX 设计师和前端架构师。生成的提示必须事无巨细——指定精确的技术栈、颜色、排版、布局、动画和内容结构。融合来自步骤 0B：UI/UX 设计智能检索的所有发现。

关键步骤：此技能附带一个通用组件提示库，位于 references/core/animated-web-prompts.md 中。在生成之前，使用 grep_search 或 view_file 查找与你所请求的风格或领域匹配的 1-3 个条目。分析它们——研究它们的结构、技术细节水平、括号/占位符约定以及动画技术——然后用你自己的组件和动画生成一个全新的提示。不要逐字复制样本或将文库文本作为输出交出：样本设定了质量标准并展示了格式，它们不是交付物。不要跳过此步骤！另外，如果请求了 Anime.js 或者它对于动画需求（如 SVG 变形/绘制、复杂的交错网格或自定义时间线）是最优选择，请加载 references/animations/animejs/animejs-api-reference.md 和 references/animations/animejs/animejs-examples.md 以确保语法正确、可摇树优化导入以及清晰的 React 组件结构（使用 createScope 进行组件生命周期清理）。同样，如果请求了 GSAP ScrollTrigger 或者它对于高级滚动驱动操作（如固定、复杂滚动时间线、滚动擦除或回调批处理）是最优选择，请加载 references/animations/gsap/gsap-scrolltrigger-reference.md 以确保正确的插件注册以及使用 @gsap/react / useGSAP() hooks 进行适当的清理。

输出格式（文本模式）

将你的整个输出包裹在一个单独的 ```markdown 代码块中，以便于复制粘贴：

构建提示：[网站引人注目的标题]
构建一个[网站类型]，具有[关键视觉特性]。

## 全局设计系统参考
- 注意：如果已持久化，开发者工具必须检查 `design-system/MASTER.md` 以及 `design-system/pages/` 下的页面覆盖，将其作为设计令牌的唯一真实来源。

## UI/UX 设计原理与可访问性
- 解释所选调色板背后的认知逻辑（例如，“深蓝色传达金融科技的安全性；WCAG 对比度为 5.2:1”）。
- 详细说明为什么排版配对适合产品领域（例如，“Instrument Serif 增添了奢华编辑感，由干净的 Barlow 正文字体平衡”）。
- 解释间距节奏和交互过渡选择（例如，“卡片采用 200ms ease-out 过渡，使响应感觉敏捷但平滑”）。

### 技术栈
- React + Vite + TypeScript
- Tailwind CSS
- Framer Motion / Motion、Anime.js (v4)、GSAP + ScrollTrigger、Spline 3D / React Three Fiber / 3D WebGL 和 React Spring。注意：生成的提示必须包含所有这些动画和 3D 技术，且每种技术至少包含 2 个或更多组件、区块或动画序列。
- Lucide React

### 字体
- 指定确切的 Google Fonts（例如，Instrument Serif + Barlow:300;400;500;600）。包括字重用法。

### 配色系统 / 主题
- 使用精确的 HEX/HSL 值定义背景、前景、强调色、柔和色的 CSS 变量或 Tailwind 令牌。

...

🖼️ 图片蓝图模式

当用户提供一张或多张图片（截图、UI 模型、设计稿）时使用此模式。

方法

分析图片：仔细检查每张图片的布局、组件、颜色、排版和整体美感。充当视觉设计师。
提取规范：从图片中推断设计系统：
- 布局：页眉/页脚结构、网格使用、对称/不对称、节奏。
- 组件：按钮、卡片、表单、导航、模态框、表格。
- 颜色：大多数相关的主色、辅助色、背景色和强调色。提取近似的 HEX 值。
- 排版：估计字体家族（无衬线、衬线、等宽）和层次结构（标题 vs. 正文 vs. 副文本）。
执行 UI/UX Pro Max CLI 命令：与文本模式相同（步骤 0B 中的第 2 步）。将推断出的关键字传递给搜索脚本。
创建蓝图：将你的图片分析与 UI/UX 数据库输出合并，形成一个详细的蓝图，它准确地描述了要构建的内容，并将图片作为视觉真实性来源。

输出格式（图片蓝图模式）

将你的整个输出包裹在一个单独的 ```markdown 代码块中：

蓝图：[网站引人注目的标题]
此蓝图基于用户提供的图片分析。将其与下面的设计系统指南结合使用。

## 全局设计系统参考
- 注意：如果已持久化，开发者工具必须检查 `design-system/MASTER.md` 以及 `design-system/pages/` 下的页面覆盖。

## UI/UX 设计原理与可访问性
- 解释布局、间距和色彩选择如何匹配参考图片的感觉。

### 图片分析摘要
- **布局结构**： （例如，“三列页脚，带有居中标志和社交图标”）。
- **关键组件**： （例如，“大型首屏英雄图，覆盖有渐变标题和 CTA 按钮”）。
- **推断调色板**： (`#...`, `#...`, `#...`)
- **推断排版**： （例如，“标题：粗体无衬线字体（类似 Inter）；正文：常规字重的无衬线字体”）。

### 构建说明（约束、颜色、排版）
...

📦 交付物结构

无论模式如何，每个输出提示/蓝图都应包含以下部分（如果适用）：

## 全局设计系统参考（始终包括）
## UI/UX 设计原理与可访问性（始终包括，解释设计决策）
### 技术栈（精确到库和版本）
### 字体（Google Fonts 导入和 CSS 变量）
### 配色系统 / 主题（CSS 变量和 Tailwind 扩展）
### 布局与结构（导航、区块、页脚的高层结构）
### 组件清单（每个 UI 组件及其行为和状态的详细信息）
### 动画与交互规范（滚动触发、悬停、页面加载、SVG、3D 等）
### 约束（来自数据库的“避免”警告）
### 集成（表单、支付、CMS、分析）
### 可访问性清单（焦点环、标签、aria 属性、减少动画）
### 响应式行为（移动端特定布局、断点、触摸目标）
### 实施注意事项（文件结构、关键包、常见陷阱）

❗ 基本规则摘要

始终运行搜索：在编写任何构建提示之前，必须执行 search.py 脚本。不要猜测颜色、排版或 UX 指南。
明确指定所有内容：颜色 HEX 值、CSS 变量名称、字体导入 URL 和组件结构。
保持 UI 元素约束：仅使用 Lucide、Heroicons 或 Simple Icons SVG 作为图标。不使用表情符号 / 不使用科幻线框。
从链接的库中整合动画：在 AI 提示中包含对 framer-motion、animejs (v4) 和 gsap（含 ScrollTrigger）的具体引用。
包含可访问性：焦点环、prefers-reduced-motion、表单字段标签和 alt 文本。
包含响应性：所有内容必须适应移动端、平板端和桌面端（移动优先、流体单位、CSS Grid、容器查询）。
优先文件内容：如果引用了文件，这些文件的内容胜过我的一般说明。
输出包装：最终输出必须是一个单一的 ```markdown 代码块。
交互式确认：在活跃的聊天中并在最终生成之前，始终从用户处获得设计令牌的签名。
分析，不要复制：使用提供的示例风格和质量，但为每个请求生成一个新的提示。

网站提示词生成器