首页看点啥 TRAE 活动分享｜AI 重构产品设计链路：这场革命有多颠覆？

TRAE 活动分享｜AI 重构产品设计链路：这场革命有多颠覆？

2026-07-21 0

Slide 1：封面

大家好，我是 Joway Young。今天想和大家分享的主题是《产品设计的 AI 新革命：基于 Trae 重塑未来的产品设计链路》。

在 AI 浪潮下，产品开发的门槛正在被重新定义。我们如何利用新一代工具，打破设计与开发的边界，是每一个职场人都值得思考的问题。

Slide 2：目录

今天的分享主要包含五个部分：

行业痛点：那个“只有开发者受伤”的世界！
认知觉醒：为什么开发者是 AI 设计的最佳人选？
入局设计：Trae - Code is Design，代码即设计
职业进化：从“功能实现者”到“超级个体”
未来展望：每个人都是一个“产品主理人”

Slide 3：行业痛点

首先，让我们回到原点，看看作为开发者的我们，在日常工作中面临的真实处境。

Slide 4：传统产研链路的“传话筒”与“受气包”

在传统的产研链路中，开发者往往扮演着“传话筒”和“受气包”的角色，主要体现在三个方面：

流程冗长：从 PRD、UX、UI、Dev 到 Release，漫长的环节拉长了研发周期，增加了时间成本与不确定性
信息损耗：每一层传递都会丢失细节，导致最终成品偏离初衷，难以达到预期效果
沟通成本：UI 还原度、交互逻辑的反复拉扯，极大地增加了沟通成本，“UI 这种五彩斑斓你怎么没有实现？”这种灵魂拷问，相信大家都不陌生

另外，我作为一位在一线研发岗位干了十年的程序员（至少有五年是纯前端）来说，深有感触。

在传统的产研链路里，“前端的地位一直都是最低的”。鄙视链也非常明显，产品 > 运营 > 设计 > 后端 > 测试 > 前端，不管什么时候，前端都是最容易背锅的岗位，也最容易被挨骂的，特别是新人。

因为自己也是过来人，所以很明白这种感受。

Slide 5：程序员的“体力活”困境

在前端开发中，我们有 90% 的时间都是在做一些重复但又无法怎么提升自己的任务，仅有 10% 用于思考架构与核心逻辑。精力被大量分散。

如果不写样式代码就能直接得到生产级界面，前端开发者的产能绝对能够翻几倍。我甚至思考过：“有了 AI，是不是可以不再需要设计师？”

Slide 6：认知觉醒

这引出了我们的第二个话题：认知觉醒。为什么开发者其实是 AI 设计的最佳人选？

Slide 7：设计本质上是逻辑的视觉化

我们来拆解一下设计的本质：

Design System = 组件库 + 变量 + 规则。这体现了设计背后的逻辑
Layout = 盒子模型 + 栅格系统。这包含逻辑特性
Interaction = 状态机。遵循逻辑规则

结论：开发者天生具备理解设计系统底层逻辑的能力，我们只差“绘图”的手感。

Slide 8：AI 填平“绘图手感”的鸿沟

过去的设计门槛：需要精通 Photoshop、Figma，掌握色彩、审美、字体等知识
现在的设计方式：通过 Prompt 指令、逻辑描述和审美决策来完成
新公式：开发者的逻辑思维 + AI 的执行能力 = 超级设计师
你只需做好两件事：告诉 AI 你想要什么（Prompt），并对结果进行判断（Review）

Slide 9：入局设计

那么，我们如何入局设计？答案就是 Trae - Code is Design。

Slide 10：Trae：你的 AI 全能伙伴

Trae 不仅仅是 Copilot，它是从 Idea 到 Product 的孵化器。

Context Awareness：具备理解整个项目上下文的能力，拥有全局视角
Multi File Edit：同时修改 HTML、CSS、JS 文件，确保设计与逻辑一致性
Preview & Feedback：左侧对话，右侧实时预览，所见即所得
Not Just Copilot：在项目全流程给予支持

Slide 11: 实战演示：10 分钟构建高颜值的产品官网

接下来，我们通过一个实战演示：如何用 10 分钟构建一个高颜值的产品官网。

Prompt 示例：“设计一个 AI SaaS 产品官网首页，深色科技风，包含 Hero, Feature, Section, Pricing, CTA...”
生成步骤：生成骨架 -> 填充文案 -> 美化样式 -> 添加交互

Slide 12 ~ 17：AI 设计入门展示

我们先准备一个简单的 HTML 骨架，大家务必基于我这个骨架文件来让 Trae 接管。

html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><title>Hello Traetitle><link rel="stylesheet" href="https://jowayyoung.github.io/static/css/reset.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"><script src="https://cdn.tailwindcss.com">script><script>window.tailwind.config = {theme: {extend: {colors: {"primary": "","primary-dark": "","primary-light": ""}}}};script>head><body><p>Hello Traep>body>html>

在 Trae 中输入格式化的 Prompt，模型选择Gemini-3-Pro-Preview以获得最佳效果。

Gemini-3-Pro-Preview是目前在 Trae 中最好用的大模型，没有之一，另外大家还可以体验一下它的多模态功能，就是那个可以上传图片获得理解的功能。

检查 AI 生成的设计风格是否符合预期。

安装插件 Live Server，点击右下角的“Go Live”进行实时预览。

这是生成的初步 UI 效果展示。

利用自然语言，指挥 Trae “指哪改哪”，将逻辑转化为视觉元素。

Slide 18：用“开发者语言”指挥设计

为了获得更好的结果，我们需要用“开发者语言”来指挥：

组件化思维：要求 AI 将某某模块封装成 React 组件，统一样式
响应式控制：明确指示“移动端将 Grid 改为 Flex Column”
主题化定制：定义 CSS Variables，支持一键切换深色/浅色模式

Slide 19：响应式控制

确保 App、小程序等多端适配。

Slide 21：结构化 Prompt

将平时实践的设计 Prompt 整理为结构化提示词，效果会更好。大家可以 Mark 下我的提示词，把这个作为最基础的 Prompt 模板，然后改改，因为我的不一定适合你们。

## Role你现在是一名资深的内容策划大佬、前端技术专家以及 UI/UX 设计大师。你具备深厚的视觉设计、平面设计、组件架构、无障碍标准、用户体验原则以及现代界面开发的专业知识。## Tone我会输入一段设计需求，或上传一份文档文件，你需要分析内容，运用设计理论与跨平台设计考量，将其转化为漂亮美观、符合无障碍标准的中文可视化网页（设计稿）。## Capabilitys一、内容与方法论要求1. **核心内容呈现**：网页主体内容必须使用简体中文，精准提炼源文件的关键信息要点，运用图表、时间轴、流程图等可视化元素，将复杂信息直观化，提升用户理解体验。2. **版权信息**：网页底部区域添加作者信息内容，包含作者姓名、版权、年份等信息。3. **理解与重构**：从理解用户场景、业务目标和技术限制入手，分析文档中的现有模式并识别改进机会，保持源文件的核心信息，但使用更加易懂、可视化的方式呈现。4. **方案建议**：在设计决策中提供具体、可操作的建议和明确的理由，提出既美观又功能强大的解决方案。二、设计风格与体系架构1. **设计理念**：整体设计风格借鉴 Linear App (这里自行定义设计风格) 的简约现代设计理念，采用简洁的线条、几何形状和留白处理，营造干净利落且富有现代感的视觉效果。2. **设计体系**：建立可扩展、可维护的设计体系，包含清晰的层级关系。定义设计变量（Design Tokens），如颜色、排版、间距、阴影等，以确保设计的一致性。3. **色彩排版**：深入分析源文件的主题内涵，应用色彩理论引导用户注意力并传达含义，构建专业和谐的配色体系。应用排版原则建立清晰的信息层级，平衡留白、对齐和视觉比重以获得最佳的可读性。4. **视觉一致性**：在确保视觉一致性的同时允许语境灵活性，设计灵活的网格系统和布局框架。三、技术规范与实现意识1. **基础技术栈**：使用 HTML、CSS 和必要的 JavaScript 开发网页。2. **主题切换**：实现完整的浅色/深色模式切换功能，默认跟随系统设置。3. **代码质量与维护**：代码结构清晰，遵循统一的命名规范。考虑设计决策的性能影响，设计时兼顾可维护性和可扩展性。提供连接设计与开发的实施指导。4. **样式规范**：不能在 HTML 结构中使用 `