BlueRose/BlueRoseNote
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
18fc94823e19e9f5fa40f5ca99da380cb8f1e1e6
BlueRoseNote/07-Other/AI/AI Agent/WY/Website/Netease AITA AssetMaker.md

12 KiB
Raw Blame History

提示词

请你说中文，并使用中文编写文档。

我需要你发挥卓越的前端开发能力，对我指定的网站进行全方位的“像素级复刻”。这个复刻不仅包括静态页面的排版、配色和字体，还需要涵盖所有的交互细节、动画效果和响应式适配。我们将使用 Vue 3 框架和 Vite 构建工具。

我想制作一个AI 提示词 => 2D原画 => 参考图 => 3D模型生成的WorkFlow网站，功能与风格样式进行像素级复刻：

迭代方式

  1. 你可以使用浏览器打开这个网站，我会帮你登录。
  2. 依次打开左边侧边按钮，读取各个页面的HTML结构、CSS信息。将截图存储在Screenshots，使用中文名。视频在github上寻找合适工具给我下载下来作为参考。
  3. 下载网站都用的图片的，并在复刻网站时用上。
  4. 搭建完前后端基础代码之后，先进行前端框架与效果迭代，之后反复对照截图、原始站点进行迭代，保证网站与原站点效果完全一致。
  5. 使用ObsidianCli 维护docs下的文档。

主要功能

  1. 该网站的主要功能是通过一套完整流程来生成3D模型，大致流程如下：
    1. 用户输入的参考图与提示来生成模型原画。
    2. 通过原画生成三视图。
    3. 使用三视图来生成3D模型。
    4. 3DMesh重拓扑。
    5. UV Unwrap
    6. auto texture
  2. 具备3D渲染功能，请根据参考原站点使用方案。
  3. 具备节点工作流，请使用合适的节点框架，可以考虑使用 https://github.com/comfy-org/ComfyUI 中的节点渲染与流程控制逻辑。
    1. 节点工作在线共同预览与编辑功能，实现协同工作。
  4. 简单的账户登录机制， 并且提供OpenID登录方式。

技术选型

我打算使用： 前端技术：TypeScript、Vue 3、Vite；前端组件请使用Element Plus，使用pnpm install element-plus 进行安装。 后端技术：nodejs、Fastify、Mongoose、fastify-jwt 数据库：MongoDB、MySQL。 工具函数：Axios、VueUse、pnpm 文档管理：Obsidian Cli

文档目录结构

  • docs
    • Netease_AITA_AssetMaker.md：项目技术、设计细节入口文档，方便Agent来寻找
    • Screenshots：存放截图。
    • Videos：视频参考。
    • WebsiteSource：存放HTML、CSS相关信息。
    • Web：前端相关文档。
    • Server：后端相关文档。

复刻流程提示词

0. 准备阶段：安装必要 Skills (工具)

为了精准地感知和复刻目标网站，请优先完成以下工具的安装和配置。如果尚未安装，请在本地环境中执行相关命令：

  1. 视觉感知工具 (视觉分析核心)

    • Skill (依赖): playwright (用于 headless 浏览器截图、DOM 分析)
    • 安装命令: npm install playwright && npx playwright install

  2. 资源处理工具 (资产抓取核心)

    • Skill (依赖): axios, mime-types (用于下载图片、字体)
    • 安装命令: npm install axios mime-types

  3. 开发工具 (Vue 3 + Vite)

    • Skill (依赖): @vitejs/plugin-vue (如果在 Vite 项目中未配置)

1. 执行阶段：网站复刻工作流

请按照以下详细步骤执行任务。每完成一步，请向我反馈进度。

目标网站 URL: [在此处替换为您要复刻的网站 URL，例如：https://example.com]

第一步：全面观察与分析 (Observation)

  1. 高清截图: 使用 Playwright 对目标网站进行全长（Full Page）高清截图。同时，抓取以下状态的截图：
    • 特定组件（如 Button, Nav Item）的 Hover 状态。
    • 移动端（如 iPhone 12 Pro）的截图。
  2. 配色提取: 分析截图，生成一份完整的 JSON 格式色板（Palette），包括主色、辅助色、文本色、背景色、边框色以及渐变色参数。
  3. 字体分析: 确定目标网站使用的主要 WebFonts、字体大小（Font Size）、行高（Line Height）和字重（Font Weight）。
  4. 结构分析: 使用 Playwright 导出核心 DOM 树的计算后样式（Computed Styles），特别是关键组件的 padding, margin, display (Flex/Grid) 属性和 border-radius。

第二步：静态资源抓取 (Asset Collection)

  1. 文件下载: 自动下载目标网站的所有：
    • SVG 图标
    • 图片资源（PNG/JPEG/WEBP）
    • 字体文件（WOFF2/WOFF）
  2. 目录整理: 将下载的资产按照以下结构有序存入您的项目目录中（例如：src/assets/images, src/assets/icons, src/assets/fonts）。

第三步：代码生成 (Vue 3 Component Generation)

  1. 项目脚手架: 如果尚未在当前目录创建 Vite + Vue 3 项目，请创建一个：npm init vite@latest . -- --template vue。
  2. 组件拆解: 将目标网页拆解为可复用的 Vue 组件（例如：Header.vue, HeroSection.vue, Card.vue, Footer.vue）。
  3. 样式复刻 (全都要):
    • 使用全局样式文件（如 src/style.css）定义色板变量和字体定义。
    • 在 Vue 组件中，使用 <style scoped> 编写 完全一致 的 CSS 样式。必须精确还原计算后的数值，不要估算。
    • 使用原生 CSS Flexbox 和 Grid 进行布局还原。

第四步：动画与交互复刻 (Interaction & Animation)

  1. 动态特效: 分析目标网站的关键动画（例如：页面滚动时的元素渐现、Header 缩放、Hover 时的微动效）。
    • 使用 CSS Transitions/Animations 或 Vue 3 的 <Transition> 组件精准还原。
    • 尽可能复刻其 cubic-bezier 缓动曲线和持续时间（Duration）。
  2. 交互状态: 确保所有按钮、链接在 Hover 和 Active 状态下的像素细节与原站一致。

第五步：自我校对 (Self-Correction)

  1. 组件预览: 完成关键组件后，启动 Vite 开发服务器（npm run dev）。
  2. 视觉比对: 将您生成的页面截图与原站截图进行叠加比对，特别注意边距和字体的偏差。
  3. 代码清理: 删除不必要的脚手架代码（如 Vite 默认的 HelloWorld 组件）。

2. 最终输出物

  1. 一个完整的、结构清晰的 Vue 3 + Vite 项目代码库。
  2. 在当前目录中可以成功运行 (npm run dev)。
  3. 生成的页面在视觉和交互上与目标网站达到 95% 以上的像素级匹配度。

现在，请开始按照工作流执行。如果有任何步骤遇到困难，或者需要我提供更具体的指令，请立即告知。

操作说明

  1. 在首页的Drop your concept art here，可以使用拖拽或点击的方式，上传模型的参考图。此时该区域会显示当前上传的图片。
  2. 点击下面的Clear清除图片；点击Generate 3D开始3D模型生成流程。按钮会显示成Generating,之后切换到Workflow页面。./docs/screenshots/workflow/Workflow_使用单张图片生成参考图与三视图_1.png
  3. Workflow界面主要由白板与节点系统构成。
    1. SourceImage节点
      1. Inputs为输入图片
      2. auto pipeline为是否进行自动流程，即 输入图片=> 参考图=> 三视图 => 3D模型 流程。
      3. AllowedModel为流程使用的模型设置。
    2. Pose节点
      1. 用于控制输出参考图的Pose。
      2. 节点Transform to Pose即可进行图片生成。

任务：

  1. 你帮我实现以上操作逻辑。
  2. 实现Workflow页面的中的白板与节点功能，参考原始页面。
  3. 在后端实现AI服务接口。
    1. 可以接入Workflow中的AI服务（查询各个服务商的文档）
    2. 可以通过Netease AIGW接入AI服务。
      1. 参考以下网站，网站需要认证，打开浏览器，我来帮你登录。
      2. https://aigw.doc.nie.netease.com/21_%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/10_%E5%9F%BA%E6%9C%AC%E8%AF%B4%E6%98%8E/1_%E5%9F%BA%E6%9C%AC%E8%AF%B4%E6%98%8E.html
      3. https://aigw.doc.nie.netease.com/21_%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/11_%E8%BA%AB%E4%BB%BD%E8%AE%A4%E8%AF%81/2_%E8%BA%AB%E4%BB%BD%E8%AE%A4%E8%AF%81.html
      4. https://aigw.doc.nie.netease.com/21_%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/14_%E8%AE%A4%E8%AF%81%E4%B8%8E%E7%AE%A1%E7%90%86/%E8%AE%A4%E8%AF%81%E4%B8%8E%E7%AE%A1%E7%90%86.html
      5. https://aigw.doc.nie.netease.com/25_AIGW%E5%8A%9F%E8%83%BD%E6%8C%87%E5%8D%97/10_API%E6%8E%A5%E5%8F%A3.html
      6. https://aigw.doc.nie.netease.com/50_FAQ/2_API%E6%8A%A5%E9%94%99.html
    3. 可以通过 https://openai.nie.netease.com 的OpenAI、Claude样式的接口来接入服务（需要用户提供AUTH_TOKEN)
  4. WorkFlow中存放一些Workflows，里面有当前工作流信息，你可以参考 https://app.assethub.io/workflow/10757
    1. 生成完模型后，点击模型节点的View 3D Mesh就切换页面，在页面中载入3D模型，且模型带有贴图，使用PBR光照模型进行渲染。
  1. 使用ObsidianCli 维护docs下的文档。

主要功能

  1. 该网站的主要功能是通过一套完整流程来生成3D模型，大致流程如下：
    1. 用户输入的参考图与提示来生成模型原画。
    2. 通过原画生成三视图。
    3. 使用三视图来生成3D模型。
    4. 3DMesh重拓扑。
    5. UV Unwrap
    6. auto texture
  2. 具备3D渲染功能，请根据参考原站点使用方案。
  3. 具备节点工作流，请使用合适的节点框架，可以考虑使用 https://github.com/comfy-org/ComfyUI 中的节点渲染与流程控制逻辑。
    1. 节点工作在线共同预览与编辑功能，实现协同工作。
  4. 简单的账户登录机制， 并且提供OpenID登录方式。

技术选型

我打算使用： 前端技术：TypeScript、Vue 3、Vite；前端组件请使用Element Plus，使用pnpm install element-plus 进行安装。 后端技术：nodejs、Fastify、Mongoose、fastify-jwt 数据库：MongoDB、MySQL。 工具函数：Axios、VueUse、pnpm 文档管理：Obsidian Cli

文档目录结构

  • docs
    • Netease_AITA_AssetMaker.md：项目技术、设计细节入口文档，方便Agent来寻找
    • Screenshots：存放截图。
    • Videos：视频参考。
    • WebsiteSource：存放HTML、CSS相关信息。
    • Web：前端相关文档。
    • Server：后端相关文档。

以上作废

# 提示词

请你说中文，并使用中文编写文档。

功能

  1. 该网站的主要功能是通过一套完整流程来生成3D模型，大致流程如下：
    1. 用户输入的参考图与提示来生成模型原画。
    2. 通过原画生成三视图。
    3. 使用三视图来生成3D模型。
    4. 3DMesh重拓扑。
    5. UV Unwrap
    6. auto texture
  2. 具备3D渲染功能，请根据参考原站点使用方案。
  3. 具备节点工作流，请使用合适的节点框架，可以考虑使用 https://github.com/comfy-org/ComfyUI 中的节点渲染与流程控制逻辑。
    1. 节点工作在线共同预览与编辑功能，实现协同工作。
  4. 简单的账户登录机制， 并且提供OpenID登录方式。

技术选型

我打算使用： 前端技术：TypeScript、Vue 3、Vite；前端组件请使用Element Plus，使用pnpm install element-plus 进行安装。 后端技术：nodejs、Fastify、Mongoose、fastify-jwt 数据库：MongoDB 工具函数：Axios、VueUse、pnpm 文档管理：Obsidian Cli

文档目录结构

  • docs
    • Netease_AITA_AssetMaker.md：项目技术、设计细节入口文档，方便Agent来寻找
    • Screenshots：存放截图。
    • Videos：视频参考。
    • WebsiteSource：存放HTML、CSS相关信息。
    • Web：前端相关文档。
    • Server：后端相关文档。
  1. 简单登录，预留OIDC登录。
Reference in New Issue View Git Blame Copy Permalink