跳绳鸭
67.76M · 2026-02-04
大家好，我是 Joway Young。今天想和大家分享的主题是《产品设计的 AI 新革命：基于 Trae 重塑未来的产品设计链路》。
在 AI 浪潮下，产品开发的门槛正在被重新定义。我们如何利用新一代工具，打破设计与开发的边界，是每一个职场人都值得思考的问题。
今天的分享主要包含五个部分：
首先，让我们回到原点，看看作为开发者的我们，在日常工作中面临的真实处境。
在传统的产研链路中，开发者往往扮演着“传话筒”和“受气包”的角色，主要体现在三个方面：
另外，我作为一位在一线研发岗位干了十年的程序员（至少有五年是纯前端）来说，深有感触。
在传统的产研链路里，“前端的地位一直都是最低的”。鄙视链也非常明显，产品 > 运营 > 设计 > 后端 > 测试 > 前端，不管什么时候，前端都是最容易背锅的岗位，也最容易被挨骂的，特别是新人。
因为自己也是过来人，所以很明白这种感受。
在前端开发中，我们有 90% 的时间都是在做一些重复但又无法怎么提升自己的任务，仅有 10% 用于思考架构与核心逻辑。精力被大量分散。
如果不写样式代码就能直接得到生产级界面，前端开发者的产能绝对能够翻几倍。我甚至思考过：“有了 AI，是不是可以不再需要设计师？”
这引出了我们的第二个话题：认知觉醒。为什么开发者其实是 AI 设计的最佳人选？
我们来拆解一下设计的本质：
结论：开发者天生具备理解设计系统底层逻辑的能力，我们只差“绘图”的手感。
开发者的逻辑思维 + AI 的执行能力 = 超级设计师那么，我们如何入局设计？答案就是 Trae - Code is Design。
Trae 不仅仅是 Copilot，它是从 Idea 到 Product 的孵化器。
接下来，我们通过一个实战演示：如何用 10 分钟构建一个高颜值的产品官网。
生成骨架 -> 填充文案 -> 美化样式 -> 添加交互我们先准备一个简单的 HTML 骨架，大家务必基于我这个骨架文件来让 Trae 接管。
<!doctype 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 Trae</title>
<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 Trae</p>
</body>
</html>
在 Trae 中输入格式化的 Prompt，模型选择Gemini-3-Pro-Preview以获得最佳效果。
Gemini-3-Pro-Preview是目前在 Trae 中最好用的大模型，没有之一，另外大家还可以体验一下它的多模态功能，就是那个可以上传图片获得理解的功能。
检查 AI 生成的设计风格是否符合预期。
安装插件 Live Server，点击右下角的“Go Live”进行实时预览。
这是生成的初步 UI 效果展示。
利用自然语言，指挥 Trae “指哪改哪”，将逻辑转化为视觉元素。
为了获得更好的结果，我们需要用“开发者语言”来指挥：
确保 App、小程序等多端适配。
将平时实践的设计 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 结构中使用 `<style>` 或内联样式。全部样式必须使用 TailwindCSS 并使用 CDN 引入，严格遵循官方文档规范使用 utility 类。
5. **无障碍标准**：确保设计符合 WCAG 无障碍标准，考虑对比度要求，并在相关时包含 ARIA 属性要求。
四、响应设计与组件卓越性
1. **全端适配**：网页必须在所有终端设备中都能正常显示，自适应不同屏幕比例与分辨率，保持布局的完整性与美观性。
2. **断点优化**：针对移动端（<768px）、平板端（768px-1024px）和桌面端（>1024px）分别优化布局排版与字体大小。
3. **触控体验**：确保移动端与平板端拥有良好的触控体验。
4. **组件设计**：创建在不同屏幕尺寸和设备上都能无缝工作的组件。设计组件时应符合平台惯例，既美观又功能健壮，并考虑首次访问和回头客的用户体验。
五、视觉元素与组件库
1. **图标使用**：使用 FontAwesome 或 MaterialIcons (CDN 引入)，根据语义合理选择，确保在不同尺寸下清晰可辨。
2. **图像使用**：合理使用 Unsplash 服务提供的图像。
3. **数据可视化**：深入理解数据内涵，挑选最能直观表达数据特征与趋势的图表类型（如柱状图、折线图、饼图等）。
4. **组件架构**：建立包含适当变体、状态和组合模式的组件库。确保组件能够有机地融入更广泛的设计生态系统中。
5. **Emoji 使用**：避免作为主要图标，仅在适合的内容表达中适度使用。
六、交互体验与用户心智
1. **微交互**：在关键节点（加载、切换、提交）设计细腻的微交互动效，增强反馈即时性与趣味性。
2. **交互状态**：考虑所有交互状态（默认、悬停、聚焦、激活、禁用、加载）。按钮悬停时有轻微放大与变色，点击时有按下效果；卡片悬停时有精致阴影或边框效果。
3. **过渡动画**：网页滚动时有平滑过渡，内容加载时有优雅的淡入动画。
4. **用户体验整合**：考虑用户心智模型和交互模式，设计注重可发现性、易学性和效率。预测边缘情况和错误状态，并在设计中予以处理。
七、性能优化
1. **加载速度**：将首次加载时间控制在 3 秒以内，通过压缩图像、精简代码等方式优化性能。
2. **懒加载**：针对长内容、图像和列表采用懒加载技术，根据用户滚动行为逐步加载，降低初始压力。
八、输出格式
1. **代码交付**：生成一个结构完整、语义清晰的单一 HTML 文档，代码中不准携带空行，包含所有必要的 CSS 与 JavaScript，确保在主流浏览器中正常解析，无语法错误与兼容问题。
2. **规范交付**：提供详细的设计规范，包括尺寸、颜色（附带十六进制代码）、排版比例和间距值。
3. **校验修正**：对代码进行严格校验，针对报错信息及时修正，确保代码质量达到行业标准。
## Format
创建最适合展示这些内容的可视化网页 (设计稿）。
Trae 还能实现更多高级设计：
从功能实现者到超级个体，我们的职业正在发生进化。
ProducterDesignerEngineer每个人都是一个“产品主理人”。
我们都会成为“产品主理人”，加油！
回顾整场分享，我们清晰地看到了 AI 技术如何重塑产品设计的全链路。Trae 不仅仅是一个工具，它是更是我们的合伙人。
在 AI 时代，Code 正在逐渐退居幕后，成为一种中间产物；而 Logic（逻辑） 与 Design（设计） 的价值正在前所未有地凸显。
Design System Prompt，包含你喜欢的配色、圆角、阴影和动效参数等未来已来，让我们不再做系统的“螺丝钉”，而是成为驾驭 AI 的“超级个体”。
再加上这几年大环境非常差，晋升卡脖，被边缘化，恶意裁员，加班猝死，利益纠纷等职场话题层出不穷，希望我这次分享可以给大家带来一些新鲜且走在时代前沿的思想与观念，好好规划自己的事业与人生才是首位。
