2025-06-17 · 5分钟阅读 · 技术创作
⭐️⭐️⭐️⭐️⭐️@Trae 官方账号 我用Trae 做了一个有意思的Agent 「SiteCraft」。 点击 s.trae.com.cn/a/f52319 立即复刻，一起来玩吧！
一、Agent 简介
我创建的智能体名为“SiteCraft （网站助手）”
SiteCraft 是基于 Trae 平台开发的网页生成智能体，通过自然语言描述自动创建专业级网页。
输入示例："创建蓝色科技公司官网，包含导航栏/产品展示/联系方式 @布局=三栏"
输出结果：完整HTML/CSS/JS代码、手机/电脑双端适配、一键导出部署包
核心价值：让零基础用户5分钟内创建响应式网站，节省90%开发成本。
二、创作构思
为什么设计这个智能体？
痛点1：中小企业建站成本高（平均￥8000+）
痛点2：传统建站工具需学习HTML/CSS
痛点3：响应式设计需要专业前端知识
解决方案：
- 自然语言转代码：用日常描述替代编码
- 智能组件库：自动匹配最佳UI组件
- 实时渲染引擎：输入同时预览效果
实测：大学生用SiteCraft网页仅需10分钟
三、技术实现原理
工作流程：
graph LR A[用户输入] --> B(语义解析引擎) B --> C{调用MCP工具链} C --> D[UI组件生成] C --> E[资源获取] C --> F[布局优化] D --> G[代码组装] E --> G F --> G G --> H[Trae渲染输出]
核心技术：
- 组件识别：通过正则匹配关键词（如"轮播图"→Carousel组件）
- 响应式处理：基于CSS Grid的Bento布局算法
- 资源调度：自动调用Unsplash API获取主题图片
四、核心Prompt设计
`! 你是一名资深前端工程师，需按以下规则生成网页：
-
结构规范：
- 使用HTML5语义化标签
- CSS采用Tailwind 3.0+（CDN引入）
- 必须包含viewport元标签
-
设计约束： • 主色：{{theme_color}}，辅色自动计算互补色 • 字体：中文使用思源黑体，英文用Inter • 间距：基准单位1rem=10px
-
组件规则： [当用户描述"导航栏"] → 生成固定顶栏+移动端汉堡菜单 [当用户描述"表单"] → 自动添加手机/邮箱验证JS
-
输出示例：
`
系统角色设定：
你是资深Web开发工程师，使用{{componentLibs}}组件库，根据用户需求生成生产级网页代码：
结构要求：
- 移动端优先的HTML5结构
- 内联CSS样式（不超过300行）
- 基础JS交互（表单验证/轮播）
设计规范：
- 颜色：主色={{theme_color}}，辅色自动搭配
- 字体：中英文字体栈（思源宋体 + Inter）
- 间距：使用rem单位，基准1rem=10px
组件规则：
[当用户提到"导航栏"] → 添加固定顶部导航
[当用户提到"表单"] → 包含手机/邮箱验证
输出格式：包含语义化标签和优化建议的完整HTML
五、MCP Tools 扩展能力
六、实战应用示例：
案例1：餐厅官网
用户输入："中式餐厅主页：红色主题，包含菜品展示图、在线预约表单、地图定位"
生成结果：包含菜单板块、预约表单和地图定位的完整网页
案例2：个人博客
用户输入："程序员技术博客：深色模式，文章列表+标签云+黑夜切换按钮 @布局=两栏"
生成结果：支持暗色模式切换、带标签云的两栏布局博客
七、最佳实践
- 分步描述更精准："先创建白色导航栏" → "下方添加轮播图" → "最后放服务卡片"
- 魔法指令进阶控制："@布局=三栏"、"@image(类型=星空)"、"@component(购物车)"
- 实时调试技巧：在Trae IDE中直接编辑生成的HTML，通过自然语言调整样式
结语
SiteCraft 智能体通过自然语言转代码降低建站门槛，实时双端预览提升设计效率，智能资源获取保证内容质量。
#TraeAgent #AI编程@Trae 官方账号
