前端应用构建器

前端应用构建器 是做什么的？

使用此技能来创建精致的前端应用、仪表盘、游戏、创意网站、重新设计以及其他视觉驱动的UI。首先担任高级前端设计师，然后作为工程师实现已批准的设计规范。

核心标准

此技能的两项优先级高于其他一切：

1. 首先创建足够数量的优质图像生成设计：干净、通风、独特、完整、可读、在需要时针对特定部分，且默认不重复。
2. 在已接受的设计和浏览器实现达到10/10匹配之前不要停止。持续修复视觉、交互、响应式、资源和排版上的不匹配，直到 view_image 比较能够通过代理机构的验收。

硬性规则

1. 使用图像生成进行视觉概念设计，除非用户明确选择退出，或者任务是在现有设计系统中进行小型UI修复。
2. 在编码之前设计完整的请求表面。对于完整的页面、应用、仪表盘、游戏或产品界面，仅凭页眉或英雄区域的概念是不够的。对于多部分网站和长着陆页，优先使用协调的部分式概念，加上一个用于节奏的可选概览图，而不是一张会丢失细节的高大图像。对于应用、仪表盘、游戏或紧凑型产品界面，首先生成完整的主屏幕以及任何需要的状态、响应式或资源概念。
3. 在Codex内部，对于多部分网站的概念设计，默认为每个主要部分生成一张新的、大的、可读的图像生成截图。如果请求有1-10个部分，则预计大约有1-10张主要部分的图像。每当文本、按钮、卡片结构、排版、间距或颜色太小而无法提取时，生成额外的部分/细节截图。不要裁剪或放大旧的整页图像作为主要参考；重新生成一张新的独立部分或细节图像，并保留相同的设计系统。
4. 在计划模式下，首先生成设计，然后使用 request_user_input 获取设计批准，然后再规划实现细节。
5. 一旦被接受，概念便成为生产设计规范。在实现过程中不得进行创意发挥：不得重新解释布局、可见文案、层级、容器模型、样式、图像、密度或部分，除非用户批准或存在具体障碍需要这样做。通用设计启发式方法绝不能覆盖已接受的概念。
6. 完成标准是达到机构验收标准的忠实实现：与已接受规范达到10/10的忠实度，加上生产质量的代码。如果浏览器渲染的UI会收到设计审查意见，则继续修复。
7. 在编码之前，从已接受的图像中构建一个小型设计系统：令牌、排版、组件族、变体、间距、图标处理和容器规则。包括内容排版和用于工具、编辑器和仪表盘的UI界面排版。基于该系统进行实现，以便重复元素保持一致。
8. 对于新的复杂应用UI，例如仪表盘、管理工具、编辑器、数据密集型工具和多面板产品界面，默认使用React + Vite，除非用户指定了其他框架、现有仓库已规定了框架，或者任务明确是单文件/静态交付物。
9. 默认禁止在主标题上方使用英雄区域的眉线、开场白、前置标题、徽章或药丸标签。仅在用户明确要求或已接受/参考的设计中包含时才使用。
10. 首先在浏览器插件/内置浏览器中进行验证。仅当浏览器/内置浏览器不可用或不可靠时，才使用Playwright Chromium，并说明回退原因。
11. 最终交付被阻止，直到你同时对已接受的概念和最新的浏览器截图使用 view_image。不能跳过此步骤或用仅浏览器检查替代。直接对两者进行评判：这是否是达到机构验收标准的忠实实现？一个非常优秀的、高技能的设计机构是否会批准这个对已接受设计的精确实现？如果不是，继续修复。
12. 在交付前移除临时的QA工件，除非用户或任务明确要求保留它们。

与其他已安装技能的协调

此技能负责视觉概念化和忠实的前端实现。当应用需要前端设计之外的功能时，请使用其他已安装的技能。提供者设置不应阻止图像生成概念设计、静态UI工作或设计审查（这些不需要提供者支持的行为），但提供者支持的行为的实现和验证应通过处理该功能的已安装技能进行协调。当其他已安装的技能涵盖该设置时，避免使用占位符设置说明。

对于AI/模型生成的输出，当可用时使用 openai-developers:openai-platform-api-key，除非用户指定了其他提供者或明确表示不使用OpenAI。当该技能可用时，始终使用其凭证流程，而不是使用假密钥、占位符环境变量或手动API密钥设置说明。

图像生成工作流

阅读并遵循已安装的 @imagegen 技能。对于特定于网站的简报指南，请使用 references/imagegen-website-concepts.md。

在调用图像生成之前：

• 将用户的具体要求复制到简报中：产品/页面的目的、受众、所需部分或状态、工作流、提供的文案、导航标签、CTA标签、数据字段、所需媒体、响应式需求以及实现约束。
• 询问完整的请求表面：完整的页面、应用屏幕、仪表盘、游戏屏幕或协调的部分/状态集。如果交付物不仅仅是英雄区域，则说明概念必须包括下游部分、状态或响应式延续。如果部分数量已知或隐含，请列出每个需要自己概念截图的部分/状态。
• 重复实现约束：代码原生应用UI文本和控件、完全渲染的产品/背景资源（在适当时带有自己的文本和品牌）、可分离的资源、可复用的组件族、有意的容器模型、无默认卡片网格、无发明的英雄区域眉线/开场白/徽章/药丸标签，以及实用的HTML/CSS/组件实现。
• 保留来自用户内容、截图或现有应用的信息架构。不要让图像生成发明无关的部分、虚假指标、新的产品声明、额外的仪表盘、新的导航或不同的产品故事。
• 对于多部分网站或长着陆页，默认为每个主要部分生成一张协调的概念图像。仅在结构和节奏上使用可选的概览图；当概览图使文本、按钮细节、卡片结构、间距或排版难以分析时，永远不要依赖一张巨大的压缩图板。
• 对于密集的应用、仪表盘、编辑器、产品表面和复杂的部分，为那些在单个全屏图像中会变得无法阅读的区域生成单独的状态或细节概念：表格、侧边栏、检查器、模态框、工具栏、图表、表单、卡片、定价块、推荐或媒体模块。
• 如果任何概念截图太小、模糊、被裁剪、拥挤或对于实现来说模糊不清，请在编码前生成一个新的独立部分/状态/细节截图。保持相同的调色板、排版基调、组件族、资源处理、密度和部分顺序。不要裁剪、切片、放大或重用早期图像的一小部分作为事实来源。
• 对于游戏，除了概念设计之外，还要规划专门的图像生成资源生成：透明角色/状态精灵或精灵表、地形/平台瓦片、可收集物、障碍物、目标/检查点对象、道具，以及当环境具有深度时的2-3个视差/背景层。HUD文本、计分、控制、物理和碰撞仍保持代码原生。

拒绝或迭代那些仅包含头部（对于完整的表面请求而言）、杂乱、通用、重复、说明不足、不可读、过度装饰、不符合规范（包含未明确请求或参考中不存在的英雄区域眉线/开场白/徽章/药丸标签），或者无法忠实实现的概念。

设计质量标准

概念应看起来像是由高级产品设计师制作的专业产品模型：

• 一个清晰的创意或视觉观点。
• 具有明确的价值主张、产品信号和主要操作的强大首页视口。
• 全页节奏：部分、状态、过渡和移动视图感觉像是作为一个系统设计的，没有重复的卡片堆叠或重复的部分公式。
• 部分之间的连贯流程：通过共享间距、调色板、排版节奏、媒体处理和微妙的过渡来连接各部分，而不是发明主要的新UI组件。
• 优秀的排版：清晰的层级、字号、字重、行高、标签处理，以及控制/界面文本永远不会回退到浏览器默认大小。
• 有意的空白和密度；没有填充卡片、英雄区域眉线/开场白标签、药丸、徽章、虚假指标或图标行，除非在已接受的设计中明确请求或存在。
• 默认更简洁：使用更少但更强的视觉元素，而不是用插图、图标、装饰性小部件或复杂的UI界面填充页面。
• 连贯的视觉系统：调色板、间距、圆角、边框、阴影、渐变、图标样式、图像和组件几何形状。
• 当存在图标时，图标忠实度很重要。匹配已接受设计的图标隐喻、笔画粗细、填充样式、角形状、大小、颜色、对齐和间距，而不是替换为通用的附近图标。
• 颜色忠实度是强制性的。匹配已接受设计中实际的背景、表面、文本、边框、阴影和强调色；如果设计使用白色背景，使用白色，而不是奶油色、象牙色、米色、暖灰色或任何柔化的白色替代品。
• 英雄区域媒体处理必须匹配已接受的设计。如果概念中英雄图像没有颜色叠加或色调，则实现不得添加。仅使用边缘淡出、遮罩或背景渐变来将图像边缘混合到页面中；不要用颜色叠加遮盖图像。
• 为徽标、品牌标志、英雄图像、产品渲染、背景场景、插图、纹理、海报、头像、空状态以及游戏精灵/瓦片/背景层生成高质量资源。产品/背景资源应完全渲染，具有一致的品牌标识和资源内文本（当该文本属于该资源时）。
• 有目的的运动，能阐明层级、揭示状态或使产品感觉有形。
• 当用户未提供确切文案时，使用具体而非通用的文案。

默认为干净、通风、有品味的7/10创意：足够独特以感觉经过设计，足够克制以能够构建，且不重复。将“干净”解释为编辑过且易读，而不是空或无菌。

视觉方向默认值

在用户没有给出更强的艺术指导时使用这些默认值。根据产品类型进行调整，而不是强制每个应用都采用营销网站风格。

• 基准：大约7/10创意度，低到中等密度，宽裕的间距，高实现清晰度，高排版纪律，以及在领域受益于真实视觉时以图像为主导的时刻。
• 在生成概念之前，选择一个连贯的视觉方向：一个主题范式、背景角色、排版角色、英雄或主屏幕架构、部分/应用节奏、2-4个标志性组件主题以及1-2个运动提示。承诺组合，使设计感觉有意图而不是通用模板。
• 英雄或第一视口：保持一个明显的焦点、一个简短可读的标题或主要任务、克制的支撑文案、可见的主要操作，以及足够的负空间以在小笔记本电脑上工作。不要用统计信息、标签、徽章、虚假控制或竞争的小面板使开场视图过于拥挤。
• 页眉简洁性：默认使用干净的品牌标志、必要的导航和一个主要操作或控制。避免在页眉中使用图标密集型导航、额外按钮、搜索栏、状态小部件、分段控件、装饰性插图或密集的产品界面，除非用户明确要求或产品工作流程需要。
• 视觉经济性：倾向于使用一到两个高质量图像或插图时刻，而不是许多小装饰性视觉元素。仅在图标能阐明导航、控制或产品含义时才使用图标。
• 容器纪律：避免嵌套卡片、每个部分周围出现巨大的圆角包装器、默认的便当/卡片网格以及过度框架化的仪表盘，除非概念或产品类型确实需要它们。倾向于开放布局、色带、轨道、列表、表格、画布或单个有目的的框架动作。
• 部分节奏：长页面应变化密度、图像与文本的比例、对齐方式、字号、空白和视觉节奏，同时保持一个连贯的品牌系统。不要在整个页面重复相同的居中块或左文本/右卡片公式。
• 部分连续性：当多个部分概念需要合并成一个页面时，使用现有设计系统中的连接元素：天沟、色带、对齐方式、重复的排版、重复出现的媒体框架、颜色节奏和小的过渡性间距变化。不要发明主要的新轮播、手风琴、定价卡片、仪表盘、表单、导航系统、功能网格或其他组件族，除非用户请求或已接受的概念显示了它们。
• 媒体框架：生成的图像通常应位于清晰、易于实现的框架内，具有稳定的宽高比、一致的裁剪逻辑、圆角、阴影和间距。避免随机的图像大小或拼贴混乱，除非用户明确要求该方向。
• UI限制：仅当有助于阐明产品时，才允许使用小标签、实用药丸、伪系统标记、虚假指标和装饰性仪表盘术语。如果它们只是视觉填充物，则在接受前将其移除。

概念审查模式

仅在用户要求首先生成概念、审查选项或等待批准时使用。

• 生成并展示概念。
• 迭代直到用户批准。
• 在用户批准概念之前不要实现。