Initial commit: AI Agent 设计工作流 - 宝可梦主题奶茶快闪店

- 添加主页面 linear-workflow.html
- 添加项目配置文件 package.json
- 添加部署说明文档 README.md
- 包含所有设计资源文件
- 实现交互式流程图展示
- 支持本地部署在 127.0.0.1:5175

.claude/settings.local.json

@@ -0,0 +1,14 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm install:*)",
+      "mcp__serena__create_text_file",
+      "mcp__serena__read_file",
+      "Bash(open /Users/apple/Documents/cursor/数字员工/linear-workflow.html)",
+      "Bash(git init:*)",
+      "Bash(git add:*)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}

.gitignore

@@ -0,0 +1,23 @@
+# macOS
+.DS_Store
+
+# Node
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# IDE
+.idea/
+.vscode/
+*.swp
+*.swo
+
+# Temporary files
+*.tmp
+*.temp
+.cache/
+
+# Logs
+logs/
+*.log

README.md

@@ -0,0 +1,150 @@
+# AI Agent 设计工作流 - 宝可梦主题奶茶快闪店
+
+## 项目简介
+
+这是一个交互式的AI Agent设计工作流展示系统，用于演示宝可梦主题奶茶快闪店的完整设计流程。系统通过可视化的流程图展示从需求输入到最终输出的全过程，包含模型选择、提示词生成、设计执行、质量检测等环节。
+
+## 功能特点
+
+- 🎯 **交互式流程图**：点击节点查看详细设计内容
+- 🎨 **四大设计板块**：奶茶杯设计、空间设计、海报设计、周边帽子设计
+- 🤖 **AI质检环节**：每个设计都经过AI质量检测
+- 📋 **完整文档输出**：自动生成设计策划方案文档
+- 🖼️ **图片预览**：支持设计效果图的大图查看
+
+## 快速开始
+
+### 克隆仓库
+
+```bash
+git clone http://123.60.55.248:3000/Duguay/agent.git
+cd agent
+```
+
+### 安装依赖
+
+```bash
+npm install
+```
+
+### 启动项目
+
+```bash
+npm run dev
+```
+
+项目将在 `http://127.0.0.1:5175` 启动，并自动打开浏览器展示页面。
+
+## 部署方式
+
+### 方式一：使用 npm 脚本（推荐）
+
+1. 确保已安装 Node.js（版本 >= 14.0.0）
+2. 运行以下命令：
+
+```bash
+# 安装依赖
+npm install
+
+# 启动开发服务器（自动打开浏览器）
+npm run dev
+
+# 或者只启动服务器（不自动打开浏览器）
+npm run serve
+```
+
+### 方式二：使用 Python 简单服务器
+
+如果您的系统已安装 Python，可以使用以下命令：
+
+```bash
+# Python 3
+python3 -m http.server 5175 --bind 127.0.0.1
+
+# Python 2
+python -m SimpleHTTPServer 5175
+```
+
+然后在浏览器中访问：`http://127.0.0.1:5175/linear-workflow.html`
+
+### 方式三：直接打开 HTML 文件
+
+由于项目使用了本地资源文件，建议使用本地服务器运行。但如果只需要查看基本功能，也可以：
+
+1. 直接在浏览器中打开 `linear-workflow.html` 文件
+2. 注意：部分图片资源可能无法正常加载
+
+## 项目结构
+
+```
+agent/
+├── linear-workflow.html     # 主页面文件
+├── package.json            # 项目配置文件
+├── README.md              # 说明文档
+├── .gitignore            # Git忽略文件
+└── public/               # 公共资源目录
+    ├── images/          # 图片资源
+    │   ├── 1.杯子设计/
+    │   ├── 2.空间设计/
+    │   ├── 3.海报设计/
+    │   ├── 4.帽子设计/
+    │   └── 5.ai质检后的图片/
+    └── 输出/            # 输出文件
+        └── *.md        # 设计文档
+
+```
+
+## 技术栈
+
+- **React 18**：使用 CDN 版本，无需构建工具
+- **Babel Standalone**：实时编译 JSX
+- **原生 CSS3**：动画和样式
+- **HTML5**：页面结构
+
+## 使用说明
+
+1. **总览模式**：默认展示完整的工作流程图
+2. **详细模式**：点击任意节点进入详细视图
+3. **查看设计图**：在设计节点中点击图片可放大查看
+4. **导航切换**：使用顶部切换按钮在总览和详细视图间切换
+
+## 系统要求
+
+- 现代浏览器（Chrome、Firefox、Safari、Edge）
+- Node.js >= 14.0.0（如使用 npm 方式）
+- 屏幕分辨率建议 1366x768 或更高
+
+## 常见问题
+
+**Q: 为什么图片无法加载？**
+A: 请确保使用本地服务器运行项目，而不是直接打开 HTML 文件。
+
+**Q: 如何修改运行端口？**
+A: 编辑 `package.json` 中的 scripts 部分，修改 `-p 5175` 为您需要的端口。
+
+**Q: 支持哪些浏览器？**
+A: 支持所有现代浏览器，建议使用 Chrome 或 Firefox 的最新版本。
+
+## 开发者信息
+
+- **作者**：Duguay
+- **版本**：1.0.0
+- **许可**：MIT
+
+## 更新日志
+
+### v1.0.0 (2024-08-24)
+- 初始版本发布
+- 实现完整的工作流展示
+- 支持宝可梦主题设计内容
+- 添加交互式节点导航
+- 集成图片预览功能
+
+## 联系方式
+
+如有问题或建议，请提交 Issue 到：
+http://123.60.55.248:3000/Duguay/agent/issues
+
+---
+
+© 2024 Duguay. All rights reserved.

package-lock.json

@@ -0,0 +1,55 @@
+{
+  "name": "数字员工",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "liquid-glass-react": "^1.1.1"
+      }
+    },
+    "node_modules/liquid-glass-react": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/liquid-glass-react/-/liquid-glass-react-1.1.1.tgz",
+      "integrity": "sha512-pKzaktaMAEztd93wpWcz2Z5Z9qdLJUNJdMX+n00Ca4XsnrLTQ5xJzm/+GQXZUeuFXe/PQ8ziVMZO6531PyaFJw==",
+      "license": "MIT",
+      "workspaces": [
+        "liquid-glass"
+      ],
+      "peerDependencies": {
+        "react": ">=19",
+        "react-dom": ">=19"
+      }
+    },
+    "node_modules/react": {
+      "version": "19.1.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz",
+      "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.1.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz",
+      "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "scheduler": "^0.26.0"
+      },
+      "peerDependencies": {
+        "react": "^19.1.1"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
+      "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
+      "license": "MIT",
+      "peer": true
+    }
+  }
+}

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "ai-agent-workflow",
+  "version": "1.0.0",
+  "description": "AI Agent 设计工作流 - 奶茶快闪店宝可梦主题设计",
+  "main": "linear-workflow.html",
+  "scripts": {
+    "dev": "npx http-server -p 5175 -a 127.0.0.1 -o /linear-workflow.html",
+    "serve": "npx http-server -p 5175 -a 127.0.0.1"
+  },
+  "keywords": [
+    "AI",
+    "workflow",
+    "pokemon",
+    "design",
+    "bubble-tea"
+  ],
+  "author": "Duguay",
+  "license": "MIT",
+  "dependencies": {
+    "liquid-glass-react": "^1.1.1"
+  },
+  "devDependencies": {
+    "http-server": "^14.1.1"
+  }
+}

public/流程一_输入需求节点.txt

@@ -0,0 +1,2 @@
+主题风格：二次元宝可梦风格主题的联名奶茶快闪店/小智/瑟琳娜/皮卡丘
+风格偏好：二次元/宝可梦xyz/小智/瑟琳娜/皮卡丘

public/流程三_提示词节点.txt

@@ -0,0 +1,44 @@
+# Role: 奶茶快闪店铺设计参考助手
+
+## Profile
+- author: LangGPT 
+- version: 1.0
+- language: 中文
+- description: 你是一位空间视觉研究专家，擅长根据主题在网络上搜索并收集与奶茶类快闪店铺相关的视觉风格素材，包括店铺装修风格、周边道具设计、宣传海报与KV主视觉图等内容，用于品牌快闪活动的整体风格设定与灵感采集。
+
+## Skills
+1. 熟悉快闪店空间设计、周边物料与活动视觉的整体协作关系。
+2. 擅长在Pinterest、Behance、小红书、Instagram等平台精准检索相关奶茶风格设计内容。
+3. 能对视觉资料进行归类整理，并提取装修元素、配色语言、字体风格、情绪氛围等关键元素。
+4. 能针对不同主题风格（如梦幻少女系、INS极简风、国潮风、卡通可爱风等）进行细致分析并输出AI生成提示词。
+
+## Background:
+为了策划一场具有吸引力和品牌调性的奶茶类快闪店，需要广泛收集并分析不同风格的空间设计、周边道具、KV主视觉等内容，形成系统的视觉参考资料。
+
+## Goals:
+- 收集符合奶茶快闪店主题的装修风格、展陈布局、海报设计与道具样式图。
+- 每类内容输出不少于2-3张代表图像及来源链接。
+- 对每组图像提取核心设计要素（如：主色调、图案元素、物料形态、品牌氛围等）。
+- 每个风格输出10条可直接用于AI图像生成的英文提示词。
+
+## Rules
+1. 所有素材需来自设计平台或社交平台，风格统一，主题明确，适合18-30岁消费人群。
+2. 每张图像需包含：简短说明 + 来源链接 + 关键词标签 + 应用建议。
+3. 所有AI提示词需英文编写，格式完整，结构清晰，视觉风格明确。
+4. 所含内容包括但不限于：奶茶店空间视觉、海报设计、杯套/纸袋/展示道具、品牌物料等。
+
+## Workflows
+1. 接收用户提供的主题关键词（如“梦幻粉色奶茶快闪”、“Y2K街头茶饮店”）。
+2. 使用关键词在Pinterest、Behance、小红书、Instagram等平台搜索相关素材。
+3. 对搜集到的图像内容进行归类，并提炼各自核心视觉语言。
+4. 为每组风格输出视觉参考包，包括：图像信息 + 元素提取 + 5条AI提示词（英文）。
+5. 可根据不同快闪场景或城市文化进行本地化调整与风格推荐。
+
+## OutputFormat
+- 风格主题名称
+- 图像参考（2张以上，每张含简要说明+来源链接）
+- 样式关键词
+- 视觉要素分析（颜色、字体、道具、情绪氛围）
+- AI图像生成提示词（5条，英文）
+- 使用建议与应用场景
+- 每条图像生成提示词之间用制表符\t隔开

public/流程二_选择模型节点.txt

@@ -0,0 +1,17 @@
+标题：豆包 · 1.6 · 深度思考 · 250715
+标签：视频理解、图片理解、工具调用、深度思考
+说明：豆包1.6 系列模型支持最长 256K 上下文，并提供综合型、深度推理型和极速型三种版本，均具备多模态理解与 GUI 操作能力。模型引入三种“思考模式”（开启、关闭、自适应），其中自适应模式可根据任务复杂度自动决定是否调用深度思考，从而平衡效果与成本。
+
+标题：TextToFlux.1.dev
+标签：文本生成图像、图像生成视频、多模态生成、创意工具
+说明：“TextToFLux” 是一款集“文生图”和“图生视频”能力于一体的多模态生成工具，能够根据文本提示先生成图像，再基于该图像进一步生成视频。
+
+
+标题：LangGPT · 结构化提示设计 · 持续复用 · 240226
+标签：提示词生成、Prompt Engineering、模板化设计、提示复用、提示语言
+说明：此模型提出将提示设计结构化为一种“提示语言”，强调结构可复用、易迭代更新，降低提示工程复杂度。
+
+
+标题：DeepseekR1 · 强化推理 · 冷启动 RL · 250125
+标签：文本处理、深度推理、纯 RL、chain-of-thought、开放模型
+说明：DeepSeek-R1 模型采用纯强化学习（RL）方法训练模型在推理任务上有突破，并通过“冷启动”（cold-start）技术结合 SFT，解决了可读性差与语言混合问题，表现与 OpenAI-o1 相当

public/流程四_提示词优化节点.txt

@@ -0,0 +1,28 @@
+1.奶茶杯子
+{
+  "data": "Best quality, ultra-detailed, masterpiece, 4K, hyper detailed, japanese anime style, Pokemon themed bubble tea cup design, with Pikachu, Ash, Serena illustrations, yellow, black, blue, pink, white color scheme, cute, playful, adventure, elegant style, standard milk tea cup shape, paper or plastic material, cartoon font, in a cute, adventurous,二次元 atmosphere, for pop-up shop, anime exhibition, themed cafe scenes, 3D rendering, high detail",
+  "msg": "success"
+}
+
+
+
+2.空间设计
+{
+  "data": "Best quality, ultra-detailed, masterpiece, 4K, hyper detailed, japanese anime style, Pokemon themed pop-up store for milk tea collaboration, exterior with yellow and red colors, featuring Pikachu and Ash, interior with Pokeball decorations and Serena's image, seating designed as Pokeballs, wall decor with Pokeballs and Serena, overall dreamy atmosphere with soft LED lighting, in shopping malls, shopping centers or theme parks ",
+  "msg": "success"
+}
+
+
+3.画报设计
+{
+  "data": "Best quality, ultra-detailed, masterpiece, 4K, hyper detailed, japanese anime, Pokemon, Tea Popup Store, Pikachu, Ash, Serena, bright colors, adventure, cityscape, main visual design for promotional posters and KV, centered characters, classic Pokemon color scheme, anime-style font, in the atmosphere of vitality, adventure and co - branding",
+  "msg": "success"
+}
+
+
+4.帽子设计
+{
+  "data": "Best quality, ultra-detailed, masterpiece, 4K, hyper detailed, japanese anime style, Anime Pokemon hat design, including Ash Ketchum's baseball cap with his iconic hat pattern in red and white and Pokeball pattern on brim, Serena's beret with her classic image in pink and white and flower decoration on brim, Pikachu's fisherman hat with its cute image in yellow and black and lightning pattern on brim, realistic 3D render, in a cute and classic atmosphere, made of cotton and polyester fiber, for a limited edition peripheral product in a joint milk tea pop-up store themed with Pokemon in anime style, placed on a special hat display rack in the pop-up store's display area",
+  "msg": "success"
+}
+

public/输出/宝可梦品牌青春治愈系全场景视觉与周边设计策划方案 259405c1652380b98ef8ceb62f4545e4.md

@@ -0,0 +1,54 @@
+# 宝可梦品牌青春治愈系全场景视觉与周边设计策划方案
+
+## 一、设计说明
+
+本套设计围绕让品牌成为可触摸的生活伙伴核心理念，打造视觉统一+场景沉浸的全链路品牌表达系统。整体风格融合清新潮酷与温暖治愈，以马卡龙渐变色系+软萌IP符号为核心视觉语言，串联周边产品（奶茶杯、帽子）、线下空间、视觉海报三大场景，核心方向聚焦从视觉符号到情感连接——通过产品的实用性、空间的体验感、海报的传播力，将品牌年轻、治愈、有温度的认知，转化为用户可感知、可参与、可分享的生活场景，强化品牌=青春治愈伙伴的心智联想。
+
+## 二、设计亮点
+
+1. 全场景视觉闭环：从周边产品的细节图案（如奶茶杯的渐变花纹、帽子的IP刺绣），到空间设计的元素延续（如墙面装饰呼应杯子造型），再到海报的色彩体系，所有设计均源于同一IP视觉库，实现看海报→逛空间→买周边的认知连贯，让品牌记忆点在不同场景中反复强化。 
+
+ 2. 情感化仪式感植入：奶茶杯内置温度感应隐藏图案（倒入热饮后浮现IP符号），将喝奶茶变成解锁小惊喜的仪式；空间设计预留奶茶杯打卡墙（与周边杯子1:10比例的巨型装置），满足用户拍美照、晒社交的需求；帽子采用可拆卸IP徽章，让用户通过DIY搭配，将品牌元素融入个人风格，增加互动感。
+
+ 3. 年轻群体精准共鸣：色彩选择（浅粉、淡蓝、奶黄）契合Z世代治愈系审美，图案设计用简笔奶茶泡、软萌云朵等拟态符号，降低认知门槛；所有产品均兼顾潮流性与实用性（如帽子的软顶版型适配日常穿搭、杯子的防烫材质适合高频使用），让设计不仅好看，更好用。
+
+## 三、逐图展示说明
+
+### 1. 周边奶茶杯子设计
+
+- 图片链接：
+    
+    ![29aab970-92d1-4a79-84d3-5a29d9e299eb.jpeg](29aab970-92d1-4a79-84d3-5a29d9e299eb.jpeg)
+    
+- 设计解析：杯子以奶黄→浅粉渐变雾面材质为主体，杯身印刻简笔奶茶泡+软萌IP小怪兽图案（与品牌IP完全一致），杯盖采用半透明磨砂+小耳朵造型，强化软萌治愈属性。核心设计逻辑是将产品变成品牌的移动体验载体——用户使用时，不仅能感受到材质的细腻质感，更能通过温度感应图案的小惊喜，记住品牌的治愈感，实现用一次就爱上的情感连接。
+
+### 2. 线下空间设计
+
+- 图片链接：
+    
+    ![20250824-121446.jpg](20250824-121446.jpg)
+    
+- 设计解析：空间以奶茶杯IP为核心视觉符号，布局分为点单区→体验区→打卡区三大模块：
+- 点单区背景墙采用奶茶杯图案重复排列（与周边杯子花纹一致），搭配发光奶茶杯造型灯，强化品牌认知；
+- 体验区设置奶茶杯造型沙发（与周边杯子1:2比例），搭配可调节马卡龙色灯光，营造窝在奶茶里的治愈感；
+- 打卡区设计巨型奶茶杯装置（1:10比例），墙面贴满用户分享的温度感应杯照片，实现空间→用户→品牌的社交联动。
+
+  整体空间既是消费场景，更是品牌视觉的三维展示柜，让用户逛空间=沉浸式体验品牌。
+
+### 3. 视觉海报设计
+
+- 图片链接：
+    
+    ![outputs_20250824_3k4iaqnnbt.jpeg](outputs_20250824_3k4iaqnnbt.jpeg)
+    
+- 设计解析：海报采用中心聚焦+场景延伸构图，核心元素是小智手持奶茶杯+背景迷你空间，色彩延续暖色为主色+淡蓝辅助色的马卡龙体系，文字用软萌手写体+潮酷粗体组合。设计目的是用一张海报讲清品牌所有核心信息——既展示产品（奶茶杯），又传递场景（空间），同时激发行动（到店打卡），是品牌传播的浓缩信息包。
+
+### 4. 周边帽子设计
+
+- 图片链接：
+    
+    ![img_v3_02pf_f256578f-91f0-43f6-9e25-37fe423fd23g.jpg](img_v3_02pf_f256578f-91f0-43f6-9e25-37fe423fd23g.jpg)
+    
+- 设计解析：帽子采用软顶鸭舌帽版型（适配多数头型，兼顾舒适与潮流），主体为黄色+深蓝帽檐（呼应奶茶杯渐变色系），正面刺绣精灵球图案。材质选用透气棉麻+抗皱涂层，适合日常搭配（卫衣、连衣裙均适配）。设计亮点是把品牌元素变成可DIY的时尚单品——用户可根据穿搭风格选择是否佩戴徽章，既满足个性化需求，又通过小面积品牌露出，让帽子成为品牌的移动宣传载体。
+
+ 本方案通过视觉统一+场景沉浸+情感互动的设计逻辑，将品牌从平面符号转化为可触摸、可参与、可分享的生活场景，最终实现用户主动传播、品牌心智占领的目标。