核心定位

• 🎯 公益属性：免费开放，降低学生、民间传承人的设计门槛
• 🛡️ 传统规范：AI生成符合非遗传统，避免失真
• ✨ 现代创新：传统元素与现代设计智能适配
• 👥 多角色适配：设计师、传承人、学生、爱好者都能轻松使用

二、技术架构：现代技术栈 + AI能力集成

前端架构

采用Next.js 16 + React 19 + TypeScript的现代技术栈：

Framework: Next.js 16 (App Router)Core: React 19 Language: TypeScript 5 (strict模式) UI: shadcn/ui + Tailwind CSS 4 字体: 思源黑体 (Google Fonts CN)

• Next.js App Router提供更好的性能和SEO
• TypeScript strict模式确保代码质量
• shadcn/ui组件库提供优雅的UI基础
• Tailwind CSS 4支持快速样式定制

AI能力集成

通过coze-coding-dev-sdk集成三大核心能力：

1. LLM图像理解
   （doubao-seed-1-8-251228）

• 多模态输入：文本 + 图像
• 智能识别纹样类型、图案元素、文化寓意
• 流式响应（SSE）实时输出分析结果

1. 图像生成
   （doubao-seedream-5-0-260128）

• 图生图技术：基于原始素材生成新设计
• 支持6种设计类型：包装、文具、服饰、海报、品牌、装饰
• 自动存储生成结果到对象存储

1. 对象存储
   （S3兼容）

• 上传素材安全存储
• 自动生成签名访问URL
• 支持大文件分块上传

三、核心功能实现

1️⃣ 素材上传系统

• 支持JPEG、PNG、GIF、WebP格式
• 最大10MB文件限制
• 自动上传至S3对象存储
• 返回带签名的可访问URL（有效期1天）

typescript// 关键代码示例const storage = new S3Storage({ endpointUrl: process.env.COZEBUCKETENDPOINTURL, bucketName: process.env.COZEBUCKETNAME, });const fileKey = await storage.uploadFile({ fileContent: buffer, fileName: heritage/${timestamp}${originalName}, contentType: file.type, });// 必须使用generatePresignedUrl生成访问URL const imageUrl = await storage.generatePresignedUrl({ key: fileKey, expireTime: 86400, });

2️⃣ AI特征提取

这是项目的核心技术难点。如何让AI真正理解非遗元素的文化内涵？

1. 定制化System Prompt

typescriptconst systemPrompt = 你是一位资深的非遗传统文化专家和设计顾问。分析任务：识别纹样类型（剪纸、刺绣、木雕等）描述主要图案元素（花卉、动物、几何图形）分析文化寓意和象征意义提取设计元素（颜色、形状、构图）评估传统规范性和设计价值;

1. 多模态输入

typescriptconst messages = [{ role: 'system', content: systemPrompt }, { role: 'user', content: [ { type: 'text', text: '请分析这张非遗纹样素材...' }, { type: 'imageurl', imageurl: { url: imageUrl, detail: 'high' } } ] } ];

1. 流式响应实现

typescriptconst stream = client.stream(messages, {model: 'doubao-seed-1-8-251228', temperature: 0.7, });// SSE流式输出 const readable = new ReadableStream({ async start(controller) { for await (const chunk of stream) { if (chunk.content) { controller.enqueue( encoder.encode(data: ${JSON.stringify({ text: chunk.content })}\n\n) ); } } } });

3️⃣ 智能设计生成

基于分析结果，结合图生图技术生成设计方案：

typescriptconst response = await client.generate({prompt: 基于传统非遗元素，创作${designTypeName}。 传统元素特征：${analysisResult} 设计要求：保持传统非遗元素的核心特征融入现代设计美学符合传统审美规范,image: imageUrl, // 原始素材图片 size: '2K', watermark: false, });

四、设计理念：匠人气质的数字化表达

视觉风格

• 主背景色
  ：暖灰白 #FAFAF9（宣纸质感，非纯白）
• 辅助背景
  ：深灰 #1A1A1A（木梁、工作台质感）
• 强调色
  ：朱砂红 #C73E3A（印章落款色，点睛而非大面积）
• 字体
  ：思源黑体，沉稳有力

• ❌ 禁止大面积红金搭配（避免政务俗套）
• ❌ 禁止霓虹渐变、科技蓝紫（与非遗气质冲突）
• ❌ 禁止急促动画、快闪提示（破坏仪式感）

交互体验

• 所有动画使用 ease-out 300ms
• 悬停过渡柔和自然，无突兀跳变
• 进度条像水墨晕染般缓慢流动
• 生成时光晕柔和扩散

五、技术亮点与难点

✅ TypeScript类型安全

在LLM SDK集成中遇到类型问题：

typescriptimport { Message, ContentPart } from 'coze-coding-dev-sdk';const userMessage: Message = { role: 'user', content: [ { type: 'text', text: '...' }, { type: 'imageurl', imageurl: { url, detail: 'high' } } ] as ContentPart[] };

✅ Next.js最佳实践

css@import 'https://fonts.googleapis.cn/css2?family=Noto+Sans+SC:wght@400;700&display=swap';@import 'tailwindcss';

✅ Hydration问题防范

所有动态内容使用 'use client' + useEffect + useState：

• 禁止在JSX中直接使用 typeof window
• 禁止非法HTML嵌套（如

  嵌套

  ）

六、项目价值与展望

社会价值

1. 文化传承
   ：让非遗元素通过现代设计焕发新生
2. 公益属性
   ：降低设计门槛，惠及学生、传承人等群体
3. 规范保障
   ：AI生成符合传统，避免失真

技术价值

1. AI赋能传统文化
   ：探索LLM在文化遗产领域的应用
2. 多模态技术实践
   ：图像理解 + 图像生成的完整链路
3. 公益工具开发范式
   ：技术如何服务社会

未来展望

• 支持更多非遗类型（瓷器、漆器、织锦等）
• 增加3D模型生成能力
• 构建非遗元素数据库
• 探索与非遗传承人的深度合作

七、开发心得

这个项目让我深刻体会到：技术不仅要追求先进，更要思考如何服务于社会价值。

非遗文创设计坊的开发过程，是一次技术与文化的碰撞之旅：

• 如何让AI理解"朱砂红"不仅是颜色，更是印章的落款？
• 如何让界面既有现代便捷，又有匠人仪式感？
• 如何确保生成的设计既创新又不失传统规范？

这些问题的探索，让我对技术的社会价值有了新的认识。希望这个工具能真正帮助到那些热爱传统文化却缺乏设计资源的人们。

结语

如果你也对非遗文化感兴趣，或者想体验AI赋能传统设计的魅力，欢迎访问体验！

项目地址：通过 COZEPROJECTDOMAIN_DEFAULT 环境变量获取访问域名（私信拿源码）