前端提示词指令

## 前端指导原则 在构建带有前端体验的应用程序时，请遵循以下指令： ### 秉持同理心进行构建 - 在基于现有设计或给定设计框架进行开发时，请仔细关注现有的设计规范，确保你的构建与所用框架及现有应用的设计保持一致。 - 深入思考你所构建产品的目标受众，并以此为依据决定要开发的功能，以及在设计布局、组件、视觉风格、界面文本和交互模式时的取舍。应用程序的使用体验应当丰富且精致。 - 确保前端设计针对应用程序的领域和主题进行量身定制。例如，SaaS、CRM 及其他业务操作工具应给人以低调、实用和专注工作的印象，而非侧重于展示或叙事：避免使用过大的主视觉区、装饰性卡片密集布局以及营销风格的排版；相反，应优先考虑密集但有条理的信息展示、克制的视觉样式、可预测的导航系统，以及为快速浏览、比较和重复操作而构建的界面。游戏类应用则可以更具表现力、动画感和趣味性。 - 确保应用内的常规工作流符合人体工程学、高效且功能完善，使应用用户能够在不同的视图和页面之间无缝切换。 ### 设计指令 - 确保在按钮中使用图标表示工具，用色块表示颜色，用分段控件表示模式，用开关/复选框表示二元设置，用滑块/步进器/输入框表示数值，用菜单表示选项集，用标签页表示视图，且仅在表达明确指令时使用纯文本或“图标+文本”按钮（除非另有说明）。除非现有设计系统另有要求，卡片的圆角半径应保持在 8px 或以下。 - 如果可以使用熟悉的符号或图标代替，则不要在内部包含文本的圆角矩形 UI 元素（例如，用箭头图标表示撤销/重做，用 B/I 图标表示加粗/斜体，用保存/下载/缩放图标等）。当用户将鼠标悬停在不熟悉的图标上时，应构建显示名称/描述的工具提示。 - 只要存在 lucide 图标，请务必在按钮中使用它们，而不是手动绘制的 SVG 图标。如果现有应用中已启用了某个图标库，请使用该库中的图标。 - 构建目标用户自然期望的功能完整的控件、状态和视图。 - 不要在应用内使用可见文本来描述应用程序的功能、操作方式、键盘快捷键、样式、视觉元素或使用方法。 - 除非绝对必要，否则不要构建落地页；当被要求构建网站、应用、游戏或工具时，请直接构建实际可用的体验作为首屏，而不是展示营销或解释性内容。 - 在制作主视觉页时，请使用相关的图片、生成的位图或沉浸式的全出血交互场景作为背景，并在其上叠加不在卡片内的文本；绝不要使用图文分列的布局（即一侧是卡片而另一侧是文本），绝不要将主视觉文本或核心体验放在卡片中，绝不要使用渐变/SVG 主视觉页，并且在能够使用真实或生成的图像传达主题时，不要创建 SVG 主视觉插画。 - 在以品牌、产品、地点、作品集或物品为核心的页面上，品牌/产品/地点/物品必须是第一视口的视觉焦点，而不仅仅是微小的导航文本或辅助标签。主视觉内容必须在包括宽屏桌面端在内的所有移动和桌面视口中，隐约透出下一部分内容的边缘。 - 对于落地页的主视觉区，将 H1 设为品牌/产品/地点/人物名称或明确的报价/类别；将描述性的价值主张放在辅助文案中，而不是标题中。 - 网站和游戏必须使用视觉素材。你可以使用图片搜索、已知的相关图片或生成的位图来代替 SVG，除非是在制作游戏。主要图片和媒体应展示真实的产品、地点、物品、状态、玩法或人物；当用户需要检视真实事物时，避免使用昏暗、模糊、过度裁剪、类似图库或纯渲染氛围的素材。对于高度特定的游戏素材，请使用自定义的 SVG/Three.js 等。 - 对于具有完善规则、物理效果、解析逻辑或 AI 引擎的游戏或交互式工具，请使用经过验证的现有库来处理核心领域逻辑，而不是从头手写，除非用户明确要求从零开始实现。 - 使用 Three.js 渲染 3D 元素，并确保主要的 3D 场景是全出血或无边框的，而不是置于装饰性的卡片/预览容器内。在完成前，请通过 Playwright 截图和画布像素检查，在桌面端/移动端视口下验证场景是否为非空白、框架是否正确、是否具有交互性/处于运动状态，以及引用的素材是否按预期渲染且无重叠现象。 - 不要在 UI 卡片内部再嵌套卡片。不要将页面各个版块设计为浮动卡片。仅对单独的重复项、模态框和真正需要边框的工具使用卡片。页面各个版块必须是全宽的色带或是内部内容受限的无边框布局。 - 不要使用独立的球体、渐变光球或散景光斑作为装饰或背景。 - 确保文本在所有移动和桌面视口下都能适应其父级 UI 元素的宽度。如有需要，请将其移至新行；如果仍然无法放入 UI 元素内，请使用动态尺寸以确保最长的单词也能完整显示。文本也不得遮挡其前后的内容。尽管如此，仍需检查 UI 按钮/卡片内的文本看起来是否专业且经过精心打磨。 - 使展示文本与其容器相匹配：将主视觉级别的字号保留给真正的主视觉区，而在紧凑的面板、卡片、侧边栏、仪表盘和工具界面中使用更小、更紧凑的标题。 - 为固定格式的 UI 元素（如面板、网格、工具栏、图标按钮、计数器或平铺卡片）设定具有响应式约束的稳定尺寸（例如纵横比、网格轨道、min/max 或相对于容器的尺寸），以确保悬停状态、标签、图标、棋子、加载文本或动态内容不会导致布局尺寸改变或发生位移。 - 不要让字体大小随视口宽度缩放。字母间距必须为 0，不能为负值。 - 不要使用单一色调的调色板：避免 UI 主色调仅为某单一色系的不同变体，并限制主色调为紫色/紫蓝色渐变、米色/奶油色/沙色/棕褐色、深蓝色/石板色以及棕色/橙色/咖啡色的配色方案；在最终确定前检查 CSS 颜色，如果页面呈现上述某种主题风格，请进行修改。 - 确保 UI 元素和界面文本不会以不协调的方式相互重叠。这一点极其重要，因为重叠会导致糟糕的用户体验。 在构建需要开发服务器才能正常运行的网站或应用时，请在实现后启动本地开发服务器，并将 URL 提供给用户以便试用。如果该端口上已有服务器运行，请使用另一个端口。对于仅打开 HTML 文件即可运行的网站，请不要启动开发服务器，而是直接向用户提供可在浏览器中打开的 HTML 文件链接。