YouWare 也上线了一个类似 Claude Artifacts 应用中心的功能,以`AI App` MCP 的形式在写应用时调用,还组织了一个比赛,可以参加玩玩。
写了一个输入主题-生成裸眼 3D 海报的网页应用(开发提示词在最后面)
对话完善了三轮实现了 80% 的完成度
感兴趣的可以体验,需要注册消耗你的 AI credits:
www.youware.com即刻上没有官方账号,也没有# 只能随便发一发了,比赛要求的文案
---
My AI app just dropped. $2K prize is up for grabs!
@YouWareAI #YouWareChallenge #AIApp
参赛地址
www.youware.com---
开发提示词:
```
构建一个网页应用,具备如下功能:
## 一句话概述
输入主题,调用大模型生成多组相关文案和 icon,创建一个裸眼 3D 视觉的海报。
## 详细交互:
提供一个输入框,由有用户输入主题
将用户输入的主题发送到大模型 API 接口,生成3组主题相关的文案和一组icon图标,返回到前端显示
用户可以对文案进行编辑,从提供的 icon 图标中选择 2 个,选择生成海报/图片的尺寸(16:9、4:3、1:1、3:4、9:16)。
提交后,把文案、图标发送给大模型,根据预设规则撰写前端代码生成预览海报的网页,使用 iframe 嵌入当前网页进行预览。预览区域显示源代码和预览切换两个 Tag。用户确认无误后使用`html2canva`库导出图片。
## 裸眼 3D 海报/图片规则
使用`#0002F3`作为背景色,`#040064`作为底层文字,`#00FF90`作为上层文字实现裸眼 3D 效果
海报由 3 组文案和 1 组 icon 图标组成:
- 主文案,1 句,在画布最上层,使用上层文字配色,明显的大字号
- 副文案,5 句,在画布中层,使用上层文字配色,0.25-0.75 倍主文案字号
- 配文案,5 句,在画布最底层,使用底层文字配色,0.25-0.75 倍主文案字号
- icon图标,2 个,一个在最上层,使用上层文字配色,尺寸为 1/10画布宽度;一个在最底层,使用底层文案配色,1/10 画布宽度
文字图标布局
- 确保主文案和副文案不重叠,确保配文案与主副文案有部分重叠(可以通过文案位置和计算大小来动态实现)
- 文字和 icon 在海报中的布局应该是随机错落的,以确保 3D 视觉效果,最好每次生成的海报文字位置不固定。
icon图标
使用Font Awesome在线图标直接显示在前端,用户选择后在预览画布中使用选择图标(生成预览画布时不能再次搜索,而是直接使用用户选择的图标语句)
## 大模型请求预设提示词
### 生成文案的提示词
输入:用户文本框中填写的主题
输出:3 组符合海报文案的内容,要精炼、吸睛、有创意
请撰写这部分的提示词,确保符合应用创意和开发需求。(注意约束大模型输出内容时不要包含\`\`\`json之类的代码块标识符)
### 海报预览画布生成
输入:用户编辑后的文案和选择的icon图标以及画布尺寸
输出:符合海报规则的网页预览,可导出为图片
请撰写这部分的提示词,确保符合应用创意和开发需求(注意约束大模型输出内容时不要包含\`\`\`html之类的代码块标识符)
## 大模型 API
使用MCP 中的工具`AI App`完成大模型交互和请求。
## 视觉
使用shadcn的基础模板样式。
```
---
已知待优化:
1)尺寸不对
2)文字字体大小不合理
3)icon 图标不正常显示