今天教大家免费使用Trae制作一个小红书小绿书帖子生成应用。
首先，我们打开Trae工具。这边需要先创建一个项目文件夹，以便生成的文档和程序在一个文件中便于管理。然后需要选择Claude 3.7 Sonnet模型。
提示词：
“你是一个html页面设计和高级编程专家，目前需要根据如下参考信息（“内容模版”）设计一款交互式内容产出html页面。
可以实现：
1. 当用户输入参考资料信息后可以主动参考“内容模版”输出类型格式的图文信息。
2. 界面上需要增加一个点击按钮“生成”，点击后开始运行 。
3. 页面需要简洁大方美观，可以使用Tailwind CSS, 苹果风格，科技感强。
参考信息（“内容模版”）：
# 任务：
请设计一张高级感视觉冲击的 SVG 卡片，竖屏比例，完美适配手机浏览。
## 设计要求：
- 视觉风格：采用当下流行的高饱和度渐变色+简约几何元素，打造"一眼心动"的高级感
- 色彩方案：选用2-3种互补色调组合，形成和谐yet醒目的视觉冲击
- 排版结构：信息层级分明，重点内容突出，视觉引导自然流畅
- 字体选择：正文使用现代简约无衬线字体，标题使用粗体或特色字体增强视觉重量感
- 装饰元素：融入几何图形、柔和阴影和微妙纹理，提升精致感与深度
- 互动细节：可添加微妙动效或视觉错觉元素，增强用户停留时间
- 专业呈现：技术内容需以清晰易懂的方式呈现，避免晦涩难懂的专业术语
- 信息密度：保持适中，避免视觉过载，关键数据用色块或图标强调
- 整体美感：追求"高级感×实用性"的完美平衡，让人想截图保存
## 注意事项：
- 避免使用低级感的过度装饰元素
- 确保所有文字在手机屏幕上清晰可读
- 突出核心卖点和关键数据
- 色彩搭配符合当下审美趋势
- 保持专业感的同时兼顾亲和力
- 不使用平台敏感词汇
- SVG 代码需放入代码框中
## 参考元素：
- 渐变背景（从浅色过渡到深色）
- 磨砂玻璃效果卡片
- 简约几何装饰
- 数据可视化小组件
- 清晰的视觉层次结构
- 关键词或数字的强调处理
- 适量留白增强呼吸感
- SVG 代码放到代码框中
## 精美卡片（SVG）示例
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 1334" width="750" height="1334">
<!-- 定义渐变和阴影 -->
<defs>
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#FFD4E5;stop-opacity:1" />
<stop offset="100%" style="stop-color:#AAE0FF;stop-opacity:1" />
</linearGradient>
<filter id="softShadow" x="-10%" y="-10%" width="120%" height="120%">
<feGaussianBlur in="SourceAlpha" stdDeviation="5" />
<feOffset dx="0" dy="3" result="offsetblur" />
<feComponentTransfer>
<feFuncA type="linear" slope="0.2" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<!-- 主背景 -->
<rect width="750" height="1334" fill="url(#bgGradient)" />
<!-- 装饰元素：几何形状 -->
<circle cx="50" cy="150" r="80" fill="#FFB6D9" opacity="0.5" />
<circle cx="700" cy="200" r="120" fill="#B6E5FF" opacity="0.4" />
<circle cx="120" cy="1200" r="100" fill="#FFC8A2" opacity="0.3" />
<circle cx="650" cy="1100" r="90" fill="#ADFFD6" opacity="0.3" />
<!-- 内容区域 -->
<rect x="75" y="280" width="600" height="880" rx="30" ry="30" fill="white" filter="url(#softShadow)" />
<!-- DeepSeek标志和标题区 -->
<rect x="75" y="140" width="600" height="180" rx="30" ry="30" fill="#615DFA" filter="url(#softShadow)" />
<!-- 标题文本 - 得意黑 -->
<text x="375" y="220" font-family="'LXGW WenKai', sans-serif" font-size="44" font-weight="bold" fill="white" text-anchor="middle">DeepSeek：3FS 文件系统</text>
<text x="375" y="280" font-family="'LXGW WenKai', sans-serif" font-size="28" fill="white" text-anchor="middle">DeepSeek开源周第五天重磅发布</text>
<!-- 技术解读区域 - 思源黑体 -->
<g font-family="'Noto Sans SC', sans-serif" fill="#333333">
<text x="105" y="360" font-size="26" font-weight="bold">这是什么？一句话解释👇</text>
<rect x="105" y="380" width="540" height="70" rx="15" ry="15" fill="#FFF4F9" />
<text x="125" y="425" font-size="22" fill="#333">3FS是一个能充分利用SSD存储和网络带宽的文件系统</text>
<!-- 核心数据指标 -->
<text x="105" y="490" font-size="26" font-weight="bold">🚀 性能有多强？</text>
<!-- 数据点1 -->
<rect x="105" y="510" width="255" height="120" rx="20" ry="20" fill="#E2F6FF" />
<text x="232.5" y="550" font-size="22" font-weight="bold" fill="#333" text-anchor="middle">读取速度</text>
<text x="232.5" y="590" font-size="30" font-weight="bold" fill="#615DFA" text-anchor="middle">6.6 TiB/秒</text>
<!-- 数据点2 -->
<rect x="390" y="510" width="255" height="120" rx="20" ry="20" fill="#FFEFEF" />
<text x="517.5" y="550" font-size="22" font-weight="bold" fill="#333" text-anchor="middle">排序性能</text>
<text x="517.5" y="590" font-size="30" font-weight="bold" fill="#FF6B95" text-anchor="middle">3.66 TiB/分钟</text>
<!-- 数据点3 -->
<rect x="105" y="650" width="255" height="120" rx="20" ry="20" fill="#F2FFEF" />
<text x="232.5" y="690" font-size="22" font-weight="bold" fill="#333" text-anchor="middle">KVCache查询</text>
<text x="232.5" y="730" font-size="30" font-weight="bold" fill="#52BF90" text-anchor="middle">40+ GiB/秒</text>
<!-- 数据点4 -->
<rect x="390" y="650" width="255" height="120" rx="20" ry="20" fill="#FFF8E1" />
<text x="517.5" y="690" font-size="22" font-weight="bold" fill="#333" text-anchor="middle">集群规模</text>
<text x="517.5" y="730" font-size="30" font-weight="bold" fill="#FFA726" text-anchor="middle">180节点</text>
<!-- 为什么重要 -->
<text x="105" y="810" font-size="26" font-weight="bold">💡 为什么这很重要？</text>
<rect x="105" y="830" width="540" height="170" rx="15" ry="15" fill="#F5F5FF" />
<text x="125" y="865" font-size="22" fill="#333">• 让AI模型训练和推理数据管理更高效</text>
<text x="125" y="905" font-size="22" fill="#333">• 支持数据预处理、加载和检查点存储</text>
<text x="125" y="945" font-size="22" fill="#333">• 向量搜索和推理KVCache查询更快</text>
<text x="125" y="985" font-size="22" fill="#333">• 分离式架构保证数据一致性</text>
<!-- 开源链接 -->
<text x="105" y="1040" font-size="26" font-weight="bold">🔗 开源地址</text>
<rect x="105" y="1060" width="540" height="70" rx="15" ry="15" fill="#EDFFF5" />
<text x="125" y="1100" font-size="20" fill="#333">github.com/deepseek-ai/3FS</text>
</g>
</svg>
## 参考资料：
---
🚀 中国多措并举大力提振消费
-先看数据，消费实现开门红。
-再看措施，新政策力度很大。
-瞄准破解制约消费的突出矛盾问题，新措施有的放矢。
💡 努力让老百姓的消费底气更足、预期更稳、信心更强。
📖 想要更多信息请看这边: https://baijiahao.baidu.com/s?id=1826918358255657044
---”
输入提示词后回车执行语句。Trae需要一些等待时间生成代码，主要受到Claude 3.7 Sonnet模型的使用限制问题。
生成的页面如下，看下效果：
界面上除了内容可以自定义输入，然后也有图片预览和SVG代码复制窗口板块。
上面程序应用运行后发现这个图片是无法复制也无法另存，我们可以再对上述程序进行迭代优化下，增加一个图片下载按钮。
提示词：
“上面程序界面上请添加一个预览图片的导出按钮以便将图片保存至本地。”
看下最终优化后的界面效果：
点击“导出图片”按钮后图片保存至本地。
打开后查看显示正常。
补充知识：
在Trae中创建HTML应用可通过以下步骤高效完成，结合其AI原生IDE特性可实现全流程自动化开发：
一、环境准备
安装与配置
下载Trae国内版并完成基础配置（主题选择、语言设置为中文）
登录账号（支持手机号或第三方平台），确保AI功能可用
项目初始化
在首页选择「Builder模式」，输入自然语言需求（如“创建一个带登录功能的HTML静态页面，包含响应式布局”）
AI自动生成项目框架，包括index.html 、style.css 、script.js 等文件
二、核心开发流程
代码生成
自然语言交互：输入如“添加一个轮播图，使用CSS动画实现渐变切换”，Trae会自动生成对应HTML结构和CSS样式
多模态支持：上传UI设计图，AI解析并生成匹配的HTML/CSS代码（如将Figma设计稿转为网页布局）
实时调试
点击编辑器下方「运行」按钮，Trae自动启动本地服务器并打开浏览器预览
发现布局问题后，输入“修复移动端菜单错位”，AI自动调整媒体查询参数
三、高级功能应用
依赖管理
若需引入第三方库（如Bootstrap），输入“添加Bootstrap 5依赖”，Trae自动修改package.json 并安装模块
代码优化
输入“压缩图片资源并合并CSS文件”，AI执行自动化构建流程
通过#标签指定文件（如#index.html 增加SEO元标签）实现精准修改
四、项目部署
一键发布
使用顶部「发布」按钮，AI生成Docker镜像并推送至阿里云/腾讯云服务器
支持生成GitHub Pages部署脚本，实现静态站点自动化上线
五、典型场景案例
基础页面：5分钟内生成响应式企业官网（含导航、图文区块、页脚）
交互应用：开发带表单验证的登录系统（自动生成JS验证逻辑）
数据可视化：输入“用Chart.js 展示销售数据”，AI插入图表代码并配置API数据源
注意事项
中文提示词更精准（如“按钮悬停效果”优于“hover effect”）
复杂项目可通过拖拽文件夹到对话框实现上下文关联修改
历史版本可回溯，避免生成结果不符预期
通过Trae的AI协同编程，开发者可将传统数小时的HTML开发流程压缩至分钟级，同时保障代码质量。建议从简单案例入手，逐步探索多模态开发、全栈集成等进阶功能。
需要更多免费AI工具、最新Ai信息、详细使用和丰富Ai教程、Ai变现方法的小伙伴可以加入路上侠客的知识星球，一年会员，原价199元，现在只需99元。
