1. 先定义结果,不只定义风格
写清楚网站类型、受众、第一屏要让用户做什么、关键页面或模块。不要只说“酷炫”,要说“滚动时产品拆解、参数浮出、最后进入购买 CTA”。
面向 Codex、Gemini、v0、Claude Code、Cursor 等代码生成工具的中英双语 prompt。内容不是逐条搬运推特原文,而是根据 X、Codrops、Awwwards、Three.js、Globe.GL 等近一年热门交互形式做原创改写。
写清楚网站类型、受众、第一屏要让用户做什么、关键页面或模块。不要只说“酷炫”,要说“滚动时产品拆解、参数浮出、最后进入购买 CTA”。
指定触发方式、前后状态、过渡节奏和降级方案。例如 hover、scroll、drag、keyboard、mobile tap 各自如何响应。
告诉模型是否必须单 HTML、是否可用 Three.js/GSAP、是否允许 CDN、性能目标、移动端帧率和无 WebGL fallback。
复刻类 prompt 应强调借鉴布局、动效节奏、信息层级和设计系统,不复制受版权保护的素材、商标、图片和完整文案。
要求模型自检:桌面和手机都不重叠、按钮可点、动效不空白、复制/筛选/导航可用、长文本不溢出。
提示词里保留可替换变量:品牌、行业、配色、内容数量、技术栈、参考 URL、截图、目标设备和性能预算。