AI PROMPT ·
GPT-6 Astra 前端状态机提示词
这一条提示词将 GPT-6 Astra 变成前端开发专家 一个网站能正常运行还是崩溃，关键在于背后的提示词 大多数人只是要求模型生成一个可以切换颜色的漂亮喷漆风格网站 这会导致混乱，所有元素都会错位，无法对齐 所以这里是解决方案 你给模型提供一个数据模型，而不是模糊的感觉 构建一个包含 4 种颜色状态的 Hero 区域，每个状态都是一个对象，包含名称、背景图、强调色十六进制代码、标题和副标题 点击色块时，交换根节点上的 CSS 变量，并以 400ms ease-out 效果交叉淡入淡出图层 预加载全部 4 张图片，确保没有闪烁 在不同状态之间，布局保持完全一致，只有颜色发生变化 现在模型有了要遵循的模式，因此它只会更改你指定的那一项内容 这就是使用 GPT-6 Astra 的关键所在，你要交付的是状态机，而不是情绪板 明天我会发布那条经过数小时构建和调试网站才最终确定的完整提示词
PROMPT
THIS ONE PROMPT TURNS GPT-6 ASTRA INTO A FRONT END DEV the difference between a site that works and one that falls apart is the prompt underneath it most people ask the model for a pretty spray paint site where you can switch colors that gives you chaos, everything shifts around and nothing lines up so here is the fix you hand the model a data model instead of a vibe build a hero with 4 color states, each state is an object with a name, background art, accent hex, headline and subline clicking a swatch swaps the CSS variables on root and crossfades the art layer at 400ms ease out preload all 4 images so nothing flickers the layout stays identical between states, only the color moves now the model has a schema to follow, so it only changes the one thing you told it to this is the whole game with GPT-6 Astra, you ship the state machine not the mood board tomorrow i post the full prompt that took hours of building and breaking sites to land on