能跟随光标移动的猫眼角色，由一个提示词生成。

当目标是一个交互式网页时，提示词能做到多深入？这里的测试案例是一只名叫Catty的趣味猫咪，它的双眼会跟随访问者的光标移动，这个内容是通过一条消息直接发送给GPT-6 Astra的。

方向而非请求

很多有创意的人会在AI中输入“帮我做一个可爱的猫咪网站”，得到的却是单调无趣的结果，于是便认为该工具还不够成熟。同样的工具、同样的模型，不同的人使用却会得到截然不同的结果。问题从来不在AI本身。一个人只是提出了愿望，而另一个人则给出了完整的方案。

愿望只说明了你期望得到的结果，而方案则会详细描述具体行为，并明确所有已有答案的决策点。本文余下部分将把这种差异具象化。

发送的指令

那并非一段文字，而是一份结构化的创意与技术说明，完整内容如下。如需重复使用，只需替换为自己的图片、坐标信息，然后将整个说明作为一条消息粘贴到模型中即可。

Build a polished one-page interactive portfolio demo called “Catty”
using the attached cat image as the primary visual reference and hero asset.

The audience is designers and front-end developers browsing a portfolio. The experience should feel like a small, charming interactive art experiment: soft, editorial, playful, and responsive. Preserve the image's fluffy white cat, dusty pink background, dreamy lighting, and gentle pastel mood. Use the image as a real responsive box with a fixed aspect ratio, not as a CSS background, so interactive overlays remain aligned when the page scales.
HERO
- Make the cat image fill the first viewport with cover-like behavior while remaining a real aspect-ratio image box.
- Place the headline "It sees you." on the emptiest side of the image.
- Add a primary button labeled "Try the stare →" linking to #demo.
- Add a small brand label "catty" and minimal navigation to the section below.
- Keep the copy readable on desktop and mobile. Do not cover the cat's face.

EYE-TRACKING EFFECT
- For each eye, create an invisible circular socket positioned in percentages of the original image dimensions so it scales correctly.
- Inside each socket, use the matching crop from the same image, enlarged 1.4× and clipped to the circle.
- On mousemove, calculate the angle from each eye center to the pointer and translate the enlarged eye toward it.
- Cap the translation at 14% of the socket width.
- Use a 120ms ease-out transition.
- On touchmove and touchstart, use the touch position in the same way.
- After 2.5 seconds without movement, ease both eyes back to center.
- Add a random blink every 3–6 seconds. Use a fur/skin-colored lid scaling over each socket.
- Respect prefers-reduced-motion.

CUSTOM CURSOR
- Replace the native desktop cursor with a small, cute grey mouse character.
- The mouse should wiggle or scurry while moving, sniff gently when idle, and hop when clicked.
PAGE CONTENT
- Add a "What's inside" section with three items:
  1. Cursor-locked gaze
  2. Soft blinks on idle
  3. Touch-friendly tracking
- Add the line "Free demo · open source vibe".
- Add a simple footer.
RESPONSIVE AND ACCESSIBLE BEHAVIOR
- Make the page work on desktop, tablet, and mobile without horizontal scrolling.
- Preserve the image aspect ratio and keep all interactive hotspots aligned as the image scales.
- Ensure buttons and hotspots have visible keyboard focus states.
- Use aria-labels and aria-live status text where appropriate.
- Add reduced-motion behavior that removes or minimizes moving effects.
DELIVERY
- Build the complete working page, not a mockup.
- Keep the implementation self-contained with HTML, CSS, and vanilla JavaScript.
- Use the attached image as the local asset.
- Check the interactions, touch behavior, and mobile layout.
- Report the eye coordinates used, what was implemented, and any limitations.

注意这份说明刻意回避了什么。它从未要求模型猜测猫的眼睛位置，而是要求模型测量并反馈具体数值。用数据取代猜测，正是让演示显得生动与仅仅是在照片上叠加的 JavaScript 效果之间的区别。

这些眼睛是以百分比形式作为叠加层存在的，而非固定像素，因此无论屏幕尺寸如何都能始终位于脸部位置。它们是原始眼睛的放大版本，被裁剪进圆形眼窝中，并会随着光标移动而随之移动。

第一层：凝视

当你移动时，猫会计算每只眼睛到光标的角度，然后平滑地朝那个方向稍作移动，之后停止。有三条规则让这一效果显得真实可信：

1. 眼睛永远不会离开眼窝。
2. 动作的开始和结束都是渐变的，不会突然停止。
3. 如果2.5秒内没有动作，眼睛会慢慢回到中心位置。

第三条规则的重要性超乎想象。没有它，一旦你停下动作，她就会僵在凝视的状态中，目光空洞地盯着虚无，仿佛看到的是猫的图片而非真正的猫。将视线重新聚焦于中心点能让她以一种放松的状态保持注视。偶尔的眨眼会叠加在之上，从而维持这种错觉。

第二层：光标变成老鼠

在凝视效果发挥作用后，标准的光标会被一只小灰老鼠取代。它会跟随你移动，在你走动时快速爬行，你在停下时它就会嗅探，点击时则跳跃，而且会在任何可点击的物体上方稍微变大。这个微小的细节改变了整个情境——光标不再只是控制工具，而变成了一个角色，这意味着猫不再注视着你，而是在看着那只老鼠。

第三层：追逐

接下来是一个小游戏。一只不安分的老鼠每隔几秒就会跳到演示框内的新位置，你有八秒钟的时间，在时间耗尽前抓住它就是整个目标。她的目光会一直跟随那只老鼠，因此这个游戏并非后来添加的功能，而是从一开始就存在的、带有挑战性的互动环节。

这是一种值得借鉴的设计思路：光标引出了老鼠，老鼠引出了游戏，而游戏则让页面有了被多次打开的理由。所有元素都不是因为看起来酷而添加的，每一个部分都是在前一个基础上发展而来的。游戏的操作说明如下：

CATCH-THE-MOUSE MINI-GAME
- Add a section below the stare demo called “Catch the mouse.”
- Include a “Start the chase →” button and an eight-second countdown.
- When the game starts, show a grey mouse inside the demo frame.
- Make it move to a new random position every 850–1500ms, staying within safe bounds.
- Catty’s gaze should follow the mouse during the game.
- Let visitors catch the mouse by clicking, tapping, or pressing Enter while it has focus.
- When caught, show a playful success message such as “Got you!” and allow replay.
- If eight seconds pass, show that the mouse escaped and offer replay.
- Include an accessible live status message and an Escape/Stop control.
- Pause or stop the game when the page becomes hidden.

第四层：抚摸

最后的互动方式最为简单，或许也是最好的。在猫咪的额头上方有一个看不见的热点，轻轻抚过它，它的双眼就会闭上，头部会浮现出闪光点，同时还会发出轻柔的呼噜声。这种方式可以使用鼠标、手指或键盘实现，对于不喜欢屏幕上有物体移动的人，还提供了低动作模式的选项。

每种互动都会引发不同的情绪：注视会激发好奇心，追逐能带来玩乐感，而抚摸则能培养更接近于亲昵的情感。大多数首页甚至无法实现其中任何一种互动。

PET THE CAT
- Add an invisible, keyboard-focusable forehead hotspot over the cat’s forehead.
- When a visitor rubs across the hotspot with a mouse or finger, make Catty close its eyes, show a few floating sparkles, and display “prrr… ♡”.
- Keep the reaction gentle and short, then return to the normal state.
- Support click/tap and keyboard activation as well as rubbing.
- Do not trigger petting while the mini-game is active.

模型无法决定的事项

该模型虽然构建了整个系统，却无法做出让系统变得出色的关键决策。仍需有人来选定标题的位置、决定其对何种内容作出反应、判断何时动作显得自然流畅而何时出现故障、确定空闲时鼠标应如何移动、为何选择八秒而非十五秒，以及哪些交互属于必要部分、哪些应被视为冗余内容而剔除。

人工智能负责生成系统，而审美则决定了其是否具有刻意设计的感觉。如今的真正技能在于进行引导而非输入提示，这首先要求在问题出现之前就能识别出“过度”的部分。审美依然不可或缺。你不再需要花费三天时间并依赖开发者来确认自己的判断是否正确。

需复制的八个模块

如果你想构建类似的东西，不要写句子，而是写出八个模块：

• 视觉参考：原始图片，以及色彩搭配、构图、主题和氛围。
• 初始视图：首页显示的内容以及文案所在的位置。
• 核心交互：访问者会执行哪些操作，以及相关元素如何响应，需详细说明。
• 动画规则：速度、缓动效果、移动范围、空闲状态及时间参数的数值设定。
• 次要交互：仅那些从核心理念自然衍生出的交互方式。
• 响应式行为：触摸操作及小屏幕适配方案，需在初期确定，不可后期临时修改。
• 内容结构：各板块、标题、按钮以及实际文案内容。
• 技术限制：资源处理方式、无障碍访问要求、减少动画效果以及页面的发布方式。

当所有八个要素都填满后，模型就不再需要猜测你的喜好，可以直接按照你的要求生成结果。如果缺少其中任何一个要素，结果就会让人大失所望。

更大的变革

真正有价值的部分从来不是代码，而是从“我有一个关于趣味角色互动的点子”到最终能让人点击使用的成品之间的这段过程。过去这个过程需要数天时间，现在则只需一个下午，因此尝试成本大大降低，你可以在投入更多精力之前先体验某个点子的效果。一次性提示并不能永远避免迭代，但它能快速生成一个足够好的初版，让后续的迭代变得值得。

为何一次性提示就足够了

一次性提示并不意味着模型能神奇地理解一切。只有当提示包含足够的结构，让模型能够做出合理选择时，它才能发挥作用。在多个要素中，有五个部分的作用最为显著：

1. 清晰的视觉锚点。猫咪图片确定了色彩方案、构图、氛围与风格，为页面提供了坚实的起点。
2. 明确的交互规则。“让眼睛跟随光标”这一要求进一步细化为具体的眼睛位置、眼窝大小、移动范围、过渡时长、空闲状态重置时间以及眨眼频率。行为描述越具体，模型需要解读的内容就越少。
3. 分层的交互结构。页面按层次构建：静态构图、眼睛追踪、光标行为、小游戏，最后是抚摸功能。这种分层设计保持了整体一致性，因为每一项新增功能都是在前一项基础上发展而来的。
4. 明确的受众群体。该页面面向浏览作品集的设计师和前端开发者，因此必须既易记又易于理解。访问者无需阅读文档就能知道该做什么。

响应式设计要求。从一开始就明确了触摸交互功能，这样页面就不会变成仅适用于桌面端、在移动设备上无法正常使用的实验性设计。

其他适用场景

• 聊天机器人和助手：一个会注视光标、在访客靠近聊天按钮时变得活跃，并会留意每一条新回复的吉祥物。
• 宠物、玩具及儿童相关品牌：能够对产品、零食或有趣的光标对象做出反应的角色。这正是Catty最合适的应用领域。
• 作品集与工作室：通过绘制的面孔追踪访客，几秒钟内就能展现出色的交互能力。
• 游戏：角色会盯着光标，而光标则可以成为需要追逐、躲避或收集的对象。
• 产品发布：一个机器人、生物或产品模型，它会注视标题，然后引导访客前往主要的行动号召区域。

新手引导与学习：这类指南会将视线聚焦在下一个字段或控件上，无需手册即可向用户展示操作方法。

博物馆与故事讲述：那些仿佛能察觉到观看者存在的肖像，让展览页面显得充满生机。

时尚、美容与眼镜领域：模特的视线会跟随指针移动或转向重点展示的商品，但表现方式必须极为自然。

隐私与安全宣传：监控者可以表达出正在关注和保持警惕的态度，但需显得刻意而非令人不适。

活动专题页：若能突出新颖性，一个令人难忘的互动元素就能激发用户探索欲望并促使他们分享。

最具商业价值的版本并非仅仅让眼睛跟随用户移动，而是引导用户前进。想象一下，Catty先看向标题，短暂注视访客，当光标靠近时再将目光转向“试用演示”按钮。这样就能将视觉效果与希望用户采取的行动路径紧密关联起来。音效序列分为四个步骤：

1. 吸引注意：Catty眨眼，或察觉到有人到来。
2. 指引方向：她的目光滑向标题或主要按钮。
3. 反馈响应：在按钮上悬停或点击时会有可见的反应。
4. 奖励机制：完成操作后会有小动画作为闭环反馈。

除非有明确的功能需求，否则在银行、法律、医疗、企业软件或结账页面上应避免使用此功能。在内容严肃或任务繁重的页面上，一直盯着光标的画面可能会削弱用户的信任感，或使其分心而无法完成操作。

除了用于趣味演示外，跟随光标的视线还能让人工智能助手显得像一位响应迅速的向导，引导用户注意操作提示，赋予其教育性特征，或为游戏或娱乐品牌带来易于识别的互动体验。关键不在于让眼睛动起来，而在于确定视线要传达什么信息：关注、指引、好奇、警告还是邀请。

可重复使用的提示框架

重复使用结构

在发送任何内容之前，先使用相同的八个模块按顺序填充到自己的项目中。把它们写出来能让你将页面视为一个连贯的整体，而非一堆独立的特效，模型也会据此做出反应。如果某个模块你无法填写，那就说明那部分尚未设计完成，应先解决它。