2026-03-30 17:22:50 +08:00
|
|
|
|
# 提示词
|
|
|
|
|
|
请你说中文，并使用中文编写文档。
|
2026-03-30 20:06:43 +08:00
|
|
|
|
|
|
|
|
|
|
我需要你发挥卓越的前端开发能力，对我指定的网站进行全方位的“像素级复刻”。这个复刻不仅包括静态页面的排版、配色和字体，还需要涵盖所有的交互细节、动画效果和响应式适配。我们将使用 **Vue 3** 框架和 **Vite** 构建工具。
|
|
|
|
|
|
|
2026-03-30 17:53:15 +08:00
|
|
|
|
我想制作一个AI 提示词 => 2D原画 => 参考图 => 3D模型生成的WorkFlow网站，功能与风格样式进行像素级复刻：
|
2026-03-30 17:22:50 +08:00
|
|
|
|
- https://app.assethub.io/
|
|
|
|
|
|
- https://app.assethub.io/inventory
|
|
|
|
|
|
- https://app.assethub.io/workflow
|
|
|
|
|
|
- https://app.assethub.io/texturing
|
|
|
|
|
|
- https://app.assethub.io/image
|
|
|
|
|
|
- https://app.assethub.io/settings/team/4430d872-b40f-4374-bfd0-936205e155aa
|
|
|
|
|
|
- 视频
|
|
|
|
|
|
- https://www.youtube.com/watch?v=h8fKTZDQ90s
|
|
|
|
|
|
- https://www.youtube.com/watch?v=i95-KHATaEY
|
|
|
|
|
|
## 迭代方式
|
|
|
|
|
|
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：前端相关文档。
|
2026-03-30 20:06:43 +08:00
|
|
|
|
- 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% 以上的像素级匹配度。
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
现在，请开始按照工作流执行。如果有任何步骤遇到困难，或者需要我提供更具体的指令，请立即告知。
|
