你可能已经发现，enter.converge.ai的核心魔力在于prompt。这是你用来与我们的AI沟通、协作和创造的语言。

你的prompt越好，结果就越令人印象深刻。

把Enter想象成一个聪明、速度极快的初级开发者……但却不擅长读心术。它可以构建你要求的任何东西，但它无法猜测你的意图。你的工作是提供一套清晰明确的指令，就像一份完美的业务需求文档（BRD）。

本指南将带你了解有效提示的艺术和科学，让你从新手成长为专家。

第一部分：核心原则——建立坚实的基础

在你构建任何东西之前，请将这三条黄金法则牢记于心。

规则1：清晰为王（不要含糊不清）

模糊不清是你最大的敌人。你的指令必须精确无误。

糟糕的Prompt 👎：

"我需要为我的网站制作定价方案。"

良好的Prompt 👍：

"创建一个交互式定价部分组件，包含以下功能：- 3个定价层级（Starter、Professional、Enterprise），带有月付/年付切换 - 使用Framer Motion制作的响应鼠标移动的动画星空背景 - 切换到年付时的彩纸动画 - 使用@number -flow/react实现的平滑价格过渡 - Professional卡片带有"最受欢迎"徽章，桌面端悬停时抬起 - 月付/年付切换带有动画滑动药丸效果 - 响应式布局，滚动时卡片错落显示动画 - 使用语义设计tokens的现代蓝色配色方案"

https://9564a74b85ba4b6b877a95dcf70a26a8.prod.enterapp.pro

专业提示：使用强有力的动作动词开始你的prompt，例如Create、Generate、Refactor、Write、Design或List

规则2：上下文为后（提供"为什么"）

Enter不知道你的项目是什么、面向谁或你的目标是什么。你必须提供"做什么"背后的"为什么"。

糟糕的Prompt 👎：

"为我创建一个落地页。"

好的提示词 👍:

"我正在为'Chroma'构建一个落地页,这是一款面向设计师的新AI配色方案生成器。设计必须给人以未来感、艺术感和高端感,以打动这一受众群体。我想要一个'玻璃拟态'风格的主视觉区,配有微妙的动画渐变背景。与其用无聊的'功能'列表,我想要一个互动区域,用户可以在其中看到示例配色方案动态应用到模拟UI卡片上。这是主要卖点。"

https://a9e8f5c49fbf4b2ca5a7ed6db9253f69.prod.enterapp.pro

规则3:强制一致性(定义你的"框架")

AI没有默认的审美。如果没有规则,它会变成一个混乱的艺术家。你必须定义"框架"——你的设计系统——让AI在其中发挥。这是打造精致、专业应用的秘诀。

不好的做法 👎:

"做一个蓝色的CTA按钮。"

"创建一个价格卡片并突出显示'Pro'计划。"

好的做法 👍:

"这个应用是一个高端金融分析工具,所以主题必须是'深色模式优先'、专业化、数据密集型,类似Bloomberg Terminal或Linear。强制执行这些规则:主题:仅深色模式。背景:'#111111'。主卡片/模块背景:'#1A1A1A'。排版:所有文本使用'Inter'。所有数字和金融数据使用'SF Mono'。强调色:单一鲜艳的强调色:'#00F5D4'(亮青色)。仅用于主要CTA和活动数据点。样式:无圆角;所有元素必须是锐利的90度直角。使用'#333333'的1px边框来定义组件,而不是阴影。"

https://41849c3aa6604b49a9b8a9a6e6cb5df4.prod.enterapp.pro

第2部分:enter.converge.ai攻略——像乐高一样构建

这是构建完整应用程序(而不仅仅是页面)最关键的策略。

策略1:模块化构建,而非单体式构建(乐高方法)

这是新手最常犯的错误。不要试图让Enter一次性生成一个完整的复杂应用程序。

专业的方法是一次构建一个完整的屏幕或用户流程。

不好的提示词 👎:

"给我构建一个像Airbnb一样的应用。"

好的提示词 👍:

"让我们为我们的Airbnb克隆版'Roam'构建完整的用户预订流程。我们将逐屏进行。从屏幕1开始:房源详情页。这个屏幕需要一个照片网格(像Airbnb那样,一张主图和4张小图),右侧有一个'粘性'侧边栏,包含预订/每晚价格模块,左侧是主内容列。"

"好的,很棒。现在创建屏幕2:'确认并支付'页面。当用户从屏幕1点击'预订'时,会跳转到这里。这个页面需要显示预订摘要、价格明细,以及一个简单、高度安全的信用卡输入表单。设计必须极其简洁和值得信赖,以最大化转化率。"

https://26985927857e4d70be5075c634aae015.prod.enterapp.pro

策略2:提供示例(少样本提示)

当你想要的设计模式难以描述时,展示而不仅仅是告诉。提供一个小的输入/输出示例来教Enter你想要的视觉模式。

不好的提示词 👎:

"我需要展示我的团队成员列表。"

好的提示词 👍:

"我需要生成一个'团队介绍'页面。我有一个人员列表,但我想对他们应用特定的视觉模式。这是我的模式:输入模式:[姓名],[职位],[简短简介],[图片URL] 输出模式(视觉布局):创建一个卡片。[图片URL]应该是3:4的宽高比,默认应用灰度滤镜。交互:悬停时,图像过渡到全彩色并稍微放大(缩放1.05)。在图像下方,以大写'Inter'字体显示[姓名](字符间距宽)。在姓名下方,以衬线字体、斜体和浅灰色显示[职位]。* 现在,将这个确切的视觉输出模式应用于以下数据:[3个团队成员的数据...]。然后,在响应式3列网格中渲染所有4张卡片。"

https://203ec90377454c449b382cba0dd6dc99.prod.enterapp.pro

第3部分:高级技巧 — 让AI成为你的伙伴

一旦掌握了基础知识,使用这些技巧来提升你的工作流程。

技巧1:让AI向你提问

不确定你是否为复杂的应用界面提供了足够的细节?反转思路,让Enter生成需求。

不好的提示词 👎:

"我想要一个用户资料页面。"

好的提示词 👍:

"我想为用户设计完整的'账户设置'区域。这将是一个包含多个标签页的复杂页面。在你开始构建之前,请向我提出5个关于所需部分、数据和用户操作(例如删除账户的'危险区域')的关键问题,以便你能创建完美的设计。"

技巧2:像艺术总监一样说话

Enter了解行业术语。使用行业关键词快速定义复杂的美学风格。

不好的提示词 👎:

"给我做一个展示我照片的网站。"

好的提示词👍

"为一位高端时尚摄影师构建主页。美学风格必须是'编辑性'和'极简主义'的。我想要一个全屏、不对称的'破碎网格'布局,灵感来自'Awwwards'或'Vogue'。网格必须是交互式的:当用户的鼠标悬停在图像上时,它必须略微扩大(例如,缩放:1.05)并从灰度过渡到全彩色。排版必须是粗体、优雅的衬线字体(如'Playfair Display'),一些标题要与图像重叠。导航必须是微小的、极简的无衬线字体,固定在左上角。"

https://d38e2d22eb6b4173b8adfefb7a02816a.prod.enterapp.pro

技巧3:如何调试(当出现问题时)

当Enter卡住或在你的应用上出现视觉错误时,不要只说"修复它"。像高级开发人员一样引导它。

提供截图 🌟: 这是最快的方法。上传损坏部分和错误消息的截图。

"正如你在这个移动端截图中看到的,卡片溢出了容器。它们应该在小于600px的屏幕上呈现单列弹性布局。请检查媒体查询。"

询问原因 🌟:

"这个布局偏移的根本原因是什么?用简单的术语向我解释一下。"

转向 🌟:

"这个 CSS Grid 方法似乎失败了。让我们尝试一个完全不同的方法。将整个部分重构为使用 Flexbox。"

结论：你的旅程才刚刚开始

提示既是一门艺术也是一项技能。最好的学习方式是通过试错和迭代。

不要害怕实验。你的指令越清晰，上下文越丰富，你的应用屏幕越模块化，你的结果就会越惊艳。

现在，访问enter.converge.ai并尝试你的第一个提示！

附录：enter.converge.ai提示速查表

尝试在你的提示中使用这些关键词。它们可以帮助Enter精准地理解你的意图。

Category	Keywords
Layout	`Responsive`, `Grid layout`, `Flexbox`, `Three-column layout`, `Sidebar`, `Navbar`, `Footer`, `Header`, `Full-width`, `Centered`, `Sticky`, `Split-screen`, `Masonry layout`, `Dashboard layout`, `Card-based layout`
Style	`Glassmorphism`, `Neumorphism`, `Minimalist`, `Techy`, `Corporate`, `Modern`, `Dark mode`, `Rounded corners`, `Shadow`, `Gradient`, `Brutalist`, `Playful`, `Editorial`, `Futuristic`, `Retro`, `Pastel`, `High contrast`, `Clean white`, `Colorful accents`
Component	`Modal`, `Popup`, `Date picker`, `Carousel`, `Slider`, `Accordion`, `Tabs`, `Breadcrumbs`, `CTA button`, `Form`, `Input field`, `Dropdown`, `Table`, `Pagination`, `Search bar`, `Sidebar menu`, `Chat bubble`, `Notification toast`, `Progress bar`, `Stepper`, `Timeline`, `Card`
Animation & Motion	`Hover animation`, `Fade-in`, `Slide-up`, `Parallax scrolling`, `Microinteraction`, `Smooth transition`, `Framer Motion`, `GSAP-like`, `Scroll-based reveal`, `Animated gradient`, `Looping hero video`, `Subtle hover glow`, `Animated icons`
Inspiration	`Inspired by Linear`, `Like Superhuman's onboarding`, `Airbnb-style grid`, `Bloomberg-style (data-dense)`, `Notion-like interface`, `Framer aesthetic`, `Apple-style marketing page`, `Stripe documentation look`, `Pitch deck vibe`, `Figma-like collaboration feel`