By

Contents
  1. 1. 使用 Trae 和 Pencil 实现 AI 设计网页
    1. 1.1. 📋 环境准备
      1. 1.1.1. 1. 下载 Trae 中国版
      2. 1.1.2. 2. 安装 MCP 配置
      3. 1.1.3. 3. 登录 Pencil
    2. 1.2. 🔧 安装技能
    3. 1.3. 🎨 开始设计
    4. 1.4. 💻 生成 HTML 代码
    5. 1.5. ❓ 常见问题
      1. 1.5.1. 1. AI 不会正确使用 Pencil 技能
      2. 1.5.2. 2. 画布堆叠（元素左上角对齐重叠）
      3. 1.5.3. 3. 设计完后只显示左上角一部分内容
      4. 1.5.4. 4. 技能没有调用或调用到其他技能
    6. 1.6. 📊 总结
    7. 1.7. 🔗 相关资源

使用 Trae 和 Pencil 实现 AI 设计网页

本教程将带你从零开始，使用 Trae IDE 和 Pencil 扩展，通过 AI 对话完成网页设计并生成可部署的 HTML 代码。

📋 环境准备

1. 下载 Trae 中国版

访问官网下载：https://www.trae.cn/ide/download

安装后，点击左侧的扩展按钮，搜索 pencil，安装，如图：

安装 Pencil 扩展

2. 安装 MCP 配置

打开自己的用户目录：

Windows: 可以使用 Win+R 运行 %USERPROFILE% 打开

Mac: 需注意 . 开头是隐藏文件，按 Shift+Command+. 显示隐藏内容

刚刚安装时自动配置了一些 Agent 的 MCP，这里找个复制，推荐使用 Gemini，位于用户目录下的 .gemini，打开后里面有一个文件 settings.json，使用刚刚装好的 Trae-cn 打开它，内容如图：

settings.json 配置

全选、复制这些配置。依次点击右上角：设计图标 → 添加 → 手动添加

手动添加 MCP

删除示例的内容，粘贴刚刚的内容，如图（路径会和我的不同时正常的）、确认：

粘贴 MCP 配置

显示这个绿色对号 ✅ 说明 MCP 已经连上了：

MCP 连接成功

3. 登录 Pencil

安装好 Pencil 扩展后 Trae 左侧会多个铅笔图案的按钮，点击后根据引导登陆：

Pencil 登录

🔧 安装技能

还是要打开自己的用户目录，技能需要安装到个人目录下的 .trae-cn/ 先打开这个目录。

下载技能 pencil-design，我提供了一组常用技能组合，可以在 skills.zip 下载

把下载好的 skills.zip 复制到 .trae-cn 解压，确保解压后的结构如下：

1
2
3
4
5
[个人目录]
└── .trae-cn
    └── skills
        ├── pencil-design
        └── ...其他技能

技能装好了，回到 Trae，可以查看已经启用的技能，记得保持这几个技能时为启用的状态：

启用技能

🎨 开始设计

在右上角打开 AI 侧栏（默认应该就是开启），右下角修改模型。第一次使用建议选 Qwen3.5-Plus，因为第一次用可能会遇到各类问题，等流程能跑通了，记得让 AI 自己优化相关技能，然后就可以尝试 Kimi-K2.5、MiniMax-M2.7 等模型。多试试不同的模型，同样的提示词有些模型会在某一次尝试中给你惊喜：

选择 AI 模型

现在可以开始与 AI 对话来设计了，尽可能的说清楚需求，比如网站的用途、产品是什么、配色有什么要求等等，点击开始：

开始对话

输入提示词，点右下角发送，AI 就开始干活了：

发送提示词

提示词开头最好强调”帮我使用 pencil 设计一个…“防止用错技能。

测试提示词：

1
使用 pencil，开始新的页面设计 一个企业站首页，科技类、英语、简洁商务风格

AI 设计完成后效果：

AI 设计完成

💻 生成 HTML 代码

设计完成后：

  1. 保存设计稿：保存 .pen 文件（如”首页设计稿.pen”）
  2. 拖入对话：将 .pen 文件拖到 AI 对话右下角的输入框中
  3. 生成代码：告诉 AI 帮忙制作 HTML 页面

提示词示例：

1
根据这个设计稿，帮我生成 HTML 页面，使用 Tailwind CSS

点击这里查看生成的 HTML 页面

注意事项：
1.不要在AI正在绘画的时候保存，容易出错
2.如果只说制作html而不限定技术栈的话，AI会自由发挥，实际使用应添加更多约束

❓ 常见问题

1. AI 不会正确使用 Pencil 技能

症状：AI 无法在 Pencil 画布上操作

解决方案：

  1. 先换成 Qwen3.5-Plus 模型
  2. 依次提问测试：
    1
    使用技能，帮我测试能不能使用 pencil
    1
    帮我测试按照技能能不能在 pencil 画布上操作

2. 画布堆叠（元素左上角对齐重叠）

症状：所有元素都堆在左上角，互相遮挡

解决方案：

1
2
现在所有元素都是左上角对齐，互相重叠遮挡，帮我把设计稿重新整理：
页面之前要留足间隙，页面内元素要摆放到合适的位置

3. 设计完后只显示左上角一部分内容

症状：只能看到设计稿的一小部分

解决方案：

1
默认的 Frame 遮挡了设计稿的展示，帮我移开/移出它

4. 技能没有调用或调用到其他技能

解决方案：

提示词开头强调：

1
使用技能，通过 pencil 设计......

📊 总结

使用 Trae 和 Pencil 进行 AI 网页设计的完整流程：

1
1. 环境准备 → 2. 安装 MCP → 3. 安装技能 → 4. 对话设计 → 5. 生成代码

核心要点：

  • ✅ 首次使用推荐 Qwen3.5-Plus 模型
  • ✅ 提示词强调”使用技能，通过 pencil 设计”
  • ✅ 等 AI 完成后再保存设计稿
  • ✅ 明确指定技术栈避免 AI 自由发挥

🔗 相关资源

关键词：Trae, Pencil, AI 设计，网页设计，AI 工具，前端设计，低代码，AI 编程

Contents
  1. 1. 使用 Trae 和 Pencil 实现 AI 设计网页
    1. 1.1. 📋 环境准备
      1. 1.1.1. 1. 下载 Trae 中国版
      2. 1.1.2. 2. 安装 MCP 配置
      3. 1.1.3. 3. 登录 Pencil
    2. 1.2. 🔧 安装技能
    3. 1.3. 🎨 开始设计
    4. 1.4. 💻 生成 HTML 代码
    5. 1.5. ❓ 常见问题
      1. 1.5.1. 1. AI 不会正确使用 Pencil 技能
      2. 1.5.2. 2. 画布堆叠（元素左上角对齐重叠）
      3. 1.5.3. 3. 设计完后只显示左上角一部分内容
      4. 1.5.4. 4. 技能没有调用或调用到其他技能
    6. 1.6. 📊 总结
    7. 1.7. 🔗 相关资源