BlueRose/BlueRoseNote

Fork 0

Files

BlueRose 38e0dba063 vault backup: 2026-04-15 21:05:29

2026-04-15 21:05:29 +08:00

18 KiB

Raw Blame History

提示词

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

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

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

迭代方式

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

主要功能

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

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

视觉感知工具 (视觉分析核心)
- Skill (依赖): playwright (用于 headless 浏览器截图、DOM 分析)
- 安装命令: npm install playwright && npx playwright install
资源处理工具 (资产抓取核心)
- Skill (依赖): axios, mime-types (用于下载图片、字体)
- 安装命令: npm install axios mime-types
开发工具 (Vue 3 + Vite)
- Skill (依赖): @vitejs/plugin-vue (如果在 Vite 项目中未配置)

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

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

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

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

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

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

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

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

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

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

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

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

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

2. 最终输出物

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

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

操作说明

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

任务：

你帮我实现以上操作逻辑。
实现Workflow页面的中的白板与节点功能，参考原始页面。
在后端实现AI服务接口。
1. 可以接入Workflow中的AI服务（查询各个服务商的文档）
2. 可以通过Netease AIGW接入AI服务。
3. 可以通过 https://openai.nie.netease.com 的OpenAI、Claude样式的接口来接入服务（需要用户提供AUTH_TOKEN)
WorkFlow中存放一些Workflows，里面有当前工作流信息，你可以参考 https://app.assethub.io/workflow/10757
1. 生成完模型后，点击模型节点的View 3D Mesh就切换页面，在页面中载入3D模型，且模型带有贴图，使用PBR光照模型进行渲染。

使用ObsidianCli 维护docs下的文档。

主要功能

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

技术选型

文档目录结构

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

以上作废

# 提示词

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

功能

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

需求

在保证相关接口不变的情况下，重构./backend 中的服务端内容。
根据需求迭代./frontend
简单登录，预留OIDC登录。

OIDC 参考代码

#coding:UTF-8
"""
Requirements:
    1. Flask >= 0.10.1
    2. requests
    3. jwkest >= 1.1.7

Usage:
    python oidc_code_demo.py -H {listen_address} -p {listen_port}

Help:
    python oidc_code_demo.py -h
"""
import os
import uuid
from hashlib import md5
import datetime
from urllib import urlencode
import json
import requests
from flask import Flask, request, jsonify, session, redirect

from jwkest.jwk import SYMKey
from jwkest.jws import JWS
from jwkest.jwk import load_jwks_from_url
from jwkest.jws import NoSuitableSigningKeys

__revision__ = "0.01"
__author__ = "chenxs@corp.netease.com"

OIDC_CLIENT_ID = ""
OIDC_CLIENT_SECRET = ""
OIDC_PROVIDER = "https://login.netease.com/connect"
OIDC_AUTHORIZATION_SERVER = "https://login.netease.com/connect/authorize"
OIDC_TOKEN_ENDPOINT = "https://login.netease.com/connect/token"
OIDC_USERINFO_ENDPOINT = "https://login.netease.com/connect/userinfo"
OIDC_SCOPE = "openid nickname email fullname dep title empno"
OIDC_REDIRECT_URI = "https://127.0.0.1:5000/finish"
OIDC_JWKS_URI = "https://login.netease.com/connect/jwks"
OIDC_ALG = "HS256"

PYTHON_OIDC_DEMO = Flask(__name__)

@PYTHON_OIDC_DEMO.route("/", methods=['GET'])
def index():
    """index"""
    if 'username' in session:
        body = (
            u"</br><h2>OpenID Connect 鐧诲綍鎴愬姛銆<E5A79B></h2></br>"
            u"鎮ㄧ殑鐢ㄦ埛鍚嶆槸锛<E6A7B8>%s</br>"
            u"鎮ㄧ殑鍏ㄥ悕鏄細%s</br>"
            u"鎮ㄧ殑閭鏄細%s</br>"
            u"鎮ㄧ殑鑱屼綅鏄細%s</br>"
            u"鎮ㄧ殑閮ㄩ棬鏄細%s</br>"
            u"鎮ㄧ殑宸ュ彿鏄細%s</br>") % (
                session['username'], session.get('fullname', ''),
                session.get('email', ''), session.get('title', ''),
                session.get('dep', ''), session.get('empno', ''))
        body += u"<a href='/login'>鎴虫垜閲嶆柊鐧诲綍</a>"
        return body
    else:
        return u"<a href='/login'>鎴虫垜鐧诲綍</a>"

@PYTHON_OIDC_DEMO.route("/login", methods=['GET'])
def login():
    """AuthN Request"""
    session.clear()
    now = datetime.datetime.now().strftime("%s")
    session['uid'] = uuid.uuid4().hex
    session['state'] = session['uid']
    session['nonce'] = md5(session['uid'] + now).hexdigest()

    authn_request_params = {
        'response_type': 'code',
        'client_id': OIDC_CLIENT_ID,
        'state': session['state'],
        'nonce': session['nonce'],
        'scope': OIDC_SCOPE,
        'redirect_uri': OIDC_REDIRECT_URI,
        #'prompt': 'login',
        'display': 'touch',
    }

    redirect_url = "?".join([
        OIDC_AUTHORIZATION_SERVER, urlencode(authn_request_params)])

    return redirect(redirect_url)


def token_request(code):
    """2. Token Request"""
    params = {
        'grant_type': 'authorization_code',
        'code': code,
        'redirect_uri': OIDC_REDIRECT_URI,
        'client_id': OIDC_CLIENT_ID,
        'client_secret': OIDC_CLIENT_SECRET,
    }
    _resp = requests.post(OIDC_TOKEN_ENDPOINT, data=params)
    return json.loads(_resp.text)

def id_token_verify(id_token, nonce=None):
    """3. id token verify"""

    now = int(datetime.datetime.now().strftime("%s"))
    if OIDC_ALG == "HS256":
        signed_keys = [SYMKey(key=OIDC_CLIENT_SECRET)]
    else:
        signed_keys = load_jwks_from_url(OIDC_JWKS_URI)

    try:
        plain_id_token = JWS().verify_compact(id_token, signed_keys)
    except NoSuitableSigningKeys:
        # logger the id_token please
        return {'error': 'can not verify the id token'}

    print "idtoken: %s" % plain_id_token
    if nonce:
        if (not plain_id_token.has_key('nonce')) or (
                plain_id_token['nonce'] != nonce):
            return {'error': 'id token nonce not correct'}
    if plain_id_token['iss'] != OIDC_PROVIDER:
        return {'error': 'id token iss not correct'}
    if plain_id_token['aud'] != OIDC_CLIENT_ID:
        return {'error': 'id token aud not correct'}
    if now >= int(plain_id_token['exp']):
        return {'error': 'id token expired'}

    return {'id_token': plain_id_token}


@PYTHON_OIDC_DEMO.route("/finish", methods=['GET'])
def finish():
    """
    1. AuthN Response
    2. Token Request
    3. id token verify
    4. userinfo request
    5. login user
    """

    # 1. AuthN Response
    try:
        code = request.args.get('code')
        if session['state']:
            state = request.args.get('state')
            if state != session['state']:
                return u"闈炴硶璇锋眰"
    except ValueError:
        return u"闈炴硶璇锋眰"
    # 2. Token Request
    token = token_request(code)
    print "token: %s" % token
    if token.has_key('error'):
        return u"鍑洪敊浜嗭細%s" % str(token)
    # 3. id token verify
    id_token_verified = id_token_verify(token['id_token'])
    if id_token_verified.has_key('error'):
        return id_token_verified['error']
    else:
        id_token = id_token_verified['id_token']

    print "id_token: %s" % id_token

    # 4. userinfo request
    _req_session = requests.Session()
    _req_session.headers.update({
        "Authorization": "Bearer %s" % token['access_token']})
    userinfo_req = _req_session.get(OIDC_USERINFO_ENDPOINT)
    userinfo = json.loads(userinfo_req.text)
    # login the user
    session['username'] = userinfo['nickname']
    session['email'] = userinfo['email']
    session['title'] = userinfo.get('title', '')
    session['empno'] = userinfo.get('empno', '')
    session['dep'] = userinfo.get('dep', '')
    session['fullname'] = userinfo.get('fullname', '')
    return redirect("/")

if __name__ == "__main__":
    import sys
    import argparse
    parser = argparse.ArgumentParser(
        usage='%(prog)s [options]', version='%(prog)s ' + str(__revision__))
    parser.add_argument(
        '-H', '--host', dest='host', type=str,
        help="Specify listening adress, default is 127.0.0.1")
    parser.add_argument(
        '-p', '--port', dest='port', type=int,
        help="Specify listening port, default is 5000")
    parser.add_argument(
        '-c', '--client_id', dest='client_id', type=str,
        help="oidc client_id is required.")
    parser.add_argument(
        '-s', '--client_secret', dest='client_secret', type=str,
        help="oidc client_secret is required.")

    args = parser.parse_args()

    host = args.host or '127.0.0.1'
    port = args.port or 5000
    OIDC_REDIRECT_URI = "http://%s:%s/finish" % (host, port)
    OIDC_CLIENT_ID = args.client_id
    OIDC_CLIENT_SECRET = args.client_secret
    if not OIDC_CLIENT_ID or not OIDC_CLIENT_SECRET:
        parser.print_help()
        parser.exit()

    PYTHON_OIDC_DEMO.secret_key = "this is a random secret"
    PYTHON_OIDC_DEMO.debug = True
    PYTHON_OIDC_DEMO.run(host=host, port=port)

18 KiB Raw Blame History Unescape Escape

提示词

迭代方式

主要功能

技术选型

文档目录结构

复刻流程提示词

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

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

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

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

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

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

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

2. 最终输出物

操作说明

主要功能

技术选型

文档目录结构

# 提示词

功能

技术选型

文档目录结构

需求

OIDC 参考代码

18 KiB

Raw Blame History