[{"data":1,"prerenderedAt":649},["ShallowReactive",2],{"navigation":3,"\u002Fblog\u002Fhow-you-should-think-about-and-design-software-from-now-on":30,"\u002Fblog\u002Fhow-you-should-think-about-and-design-software-from-now-on-surround":644},[4],{"title":5,"path":6,"stem":7,"children":8,"page":29},"Blog","\u002Fblog","blog",[9,13,17,21,25],{"title":10,"path":11,"stem":12},"From Mockup to Market: My End-to-End Product Design Process","\u002Fblog\u002Ffrom-mockup-to-market","blog\u002Ffrom-mockup-to-market",{"title":14,"path":15,"stem":16},"How I Built My Design System from Scratch","\u002Fblog\u002Fhow-i-built-my-own-design-system-from-scratch","blog\u002Fhow-i-built-my-own-design-system-from-scratch",{"title":18,"path":19,"stem":20},"现在开始你应该如何去思考和设计软件","\u002Fblog\u002Fhow-you-should-think-about-and-design-software-from-now-on","blog\u002Fhow-you-should-think-about-and-design-software-from-now-on",{"title":22,"path":23,"stem":24},"The Psychology of Color in UI Design","\u002Fblog\u002Fpsychology-of-color-in-ui-design","blog\u002Fpsychology-of-color-in-ui-design",{"title":26,"path":27,"stem":28},"The Case for Slow Design in a Fast-Paced Digital World","\u002Fblog\u002Fslow-design-in-fast-paced-digital-world","blog\u002Fslow-design-in-fast-paced-digital-world",false,{"id":31,"title":18,"author":32,"body":36,"date":636,"description":42,"extension":637,"image":638,"meta":639,"minRead":640,"navigation":641,"path":19,"seo":642,"stem":20,"__hash__":643},"blog\u002Fblog\u002Fhow-you-should-think-about-and-design-software-from-now-on.md",{"name":33,"avatar":34},"Gary Tang",{"src":35,"alt":33},"https:\u002F\u002Fimg.garytang.cn\u002Favatar.avif",{"type":37,"value":38,"toc":619},"minimark",[39,43,46,54,75,81,98,104,122,137,141,169,175,179,267,270,343,346,366,372,383,389,392,398,404,408,434,438,493,496,500,506,511,548,551,583,586,609,616],[40,41,42],"p",{},"Naval:\"Software went from desktop-first to mobile-first, now going to agent-first.\"",[40,44,45],{},"近半年来，我在为企业设计和构建 AI 智能体的服务中,随着各种 Agent 智能体和 AI 架构思想的不断出现。深有感触软件开发和设计模式（paradigm）正在发生第三次重大转变。",[47,48,50],"h3",{"id":49},"桌面优先desktop-first",[51,52,53],"strong",{},"桌面优先（Desktop-first）",[55,56,57,65,72],"ul",{},[58,59,60,61,64],"li",{},"早期软件主要是为",[51,62,63],{},"电脑","设计的（Windows、Mac上的应用）。",[58,66,67,68,71],{},"核心交互方式：",[51,69,70],{},"键盘 + 鼠标 + 大屏幕","。",[58,73,74],{},"用户主动坐在电脑前操作。",[47,76,78],{"id":77},"移动优先mobile-first",[51,79,80],{},"移动优先（Mobile-first）",[55,82,83,90,95],{},[58,84,85,86,89],{},"从 iPhone 时代开始，软件转向",[51,87,88],{},"手机优先","设计。",[58,91,67,92,71],{},[51,93,94],{},"手指触屏 + 小屏幕 + 随时随地",[58,96,97],{},"很多产品先做移动端，再考虑桌面端（甚至桌面端体验变差）。",[47,99,101],{"id":100},"智能体优先-agent-first现在正在发生",[51,102,103],{},"智能体优先 \u002F Agent-first（现在正在发生）",[55,105,106,112],{},[58,107,108,109,89],{},"未来软件将转向",[51,110,111],{},"AI Agent（智能体）优先",[58,113,114,117,118,121],{},[51,115,116],{},"核心变化","：用户不再是主要“操作者”，而是",[51,119,120],{},"下指令的人","。AI Agent 代替你去执行具体操作。",[40,123,124,125,128,129,132,133,136],{},"以前是你",[51,126,127],{},"亲手","用鼠标\u002F手指操作软件；",[130,131],"br",{},"\n以后是你",[51,134,135],{},"告诉","一个 AI 代理（Agent）“帮我办这件事”，它自己去完成（打开各种 App、调用 API、处理流程等）。",[47,138,140],{"id":139},"实际含义对产品和开发的影响","实际含义（对产品和开发的影响）：",[55,142,143,153,160,166],{},[58,144,145,148,149,152],{},[51,146,147],{},"界面（UI）不再是最重要","：Agent 需要的是",[51,150,151],{},"强大的 API、清晰的动作定义、持久化记忆、可靠的错误处理","，而不是漂亮的按钮。",[58,154,155,156,159],{},"很多工作流程会变成“",[51,157,158],{},"意图驱动","”（intent-based），而不是一步步点击。",[58,161,162,163,71],{},"未来优秀的软件 = 好用给人类 + ",[51,164,165],{},"极度友好给 AI Agent",[58,167,168],{},"这会像当年从桌面到移动一样，诞生全新一代的“Agent-native”应用。",[40,170,171,174],{},[51,172,173],{},"AI智能体（Agent）时代的软件形态会和今天有本质区别","，从“为人设计”转向“为人 + 为AI智能体共生设计”。",[47,176,178],{"id":177},"核心转变从点击操作到意图驱动","核心转变：从“点击操作”到“意图驱动”",[180,181,182,198],"table",{},[183,184,185],"thead",{},[186,187,188,192,195],"tr",{},[189,190,191],"th",{},"维度",[189,193,194],{},"当前（Mobile-first）",[189,196,197],{},"Agent-first 时代（未来 2-5 年）",[199,200,201,215,228,241,254],"tbody",{},[186,202,203,209,212],{},[204,205,206],"td",{},[51,207,208],{},"主要用户",[204,210,211],{},"人类（手指\u002F鼠标）",[204,213,214],{},"AI Agent（为主） + 人类（下指令）",[186,216,217,222,225],{},[204,218,219],{},[51,220,221],{},"交互方式",[204,223,224],{},"点击按钮、填表单、滑动",[204,226,227],{},"自然语言意图（“帮我处理这个”），Agent 自主执行",[186,229,230,235,238],{},[204,231,232],{},[51,233,234],{},"界面重点",[204,236,237],{},"漂亮 UI\u002FUX、视觉设计",[204,239,240],{},"强大 API、清晰动作定义、机器可读描述",[186,242,243,248,251],{},[204,244,245],{},[51,246,247],{},"软件形态",[204,249,250],{},"独立 App \u002F 网页",[204,252,253],{},"模块化服务 + Agent 编排平台",[186,255,256,261,264],{},[204,257,258],{},[51,259,260],{},"开发重点",[204,262,263],{},"前端框架、响应式设计",[204,265,266],{},"Agent 友好架构、工具集成、记忆\u002F规划能力",[47,268,269],{"id":269},"未来软件的具体形态",[271,272,273,286,317,330],"ol",{},[58,274,275,278],{},[51,276,277],{},"极简或“无界面”应用（Invisible Apps）",[55,279,280,283],{},[58,281,282],{},"很多软件不再需要复杂的前端界面。你直接对 Agent 说需求，它在后台调用各种工具完成。",[58,284,285],{},"示例：不再打开 Excel + CRM + 邮件，而是说“分析本季度销售，给 top10 客户发个性化跟进邮件”，Agent 自己搞定。",[58,287,288,291],{},[51,289,290],{},"Agent-native 架构（智能体原生设计）",[55,292,293,299,305,311],{},[58,294,295,298],{},[51,296,297],{},"API 优先、工具优先","：每个功能都暴露成清晰的“动作”（tools\u002Ffunctions），带详细描述，让 Agent 容易理解和调用。",[58,300,301,304],{},[51,302,303],{},"事件驱动 + 记忆系统","：软件支持长期上下文、状态持久化，Agent 可以“记住”你的偏好和工作流程。",[58,306,307,310],{},[51,308,309],{},"多 Agent 协作","：一个复杂任务由多个专精 Agent 分工（如规划 Agent + 执行 Agent + 验证 Agent）。",[58,312,313,316],{},[51,314,315],{},"可观测性与治理","：内置监控、权限控制、安全沙箱，因为 Agent 会自主行动。",[58,318,319,322],{},[51,320,321],{},"动态生成式软件",[55,323,324,327],{},[58,325,326],{},"Agent 能“一键”生成个性化小程序或工作流。Naval 提到过，AI coding agents 可以直接生成定制 App。",[58,328,329],{},"传统 SaaS 可能被部分取代：很多简单工具变成“按需生成”的 Agent 服务，而不是固定订阅的 App。",[58,331,332,335],{},[51,333,334],{},"混合人类-AI 界面",[55,336,337,340],{},[58,338,339],{},"保留少量人类友好界面（用于监督、复杂决策），但底层是为 Agent 优化的。",[58,341,342],{},"设计系统会进化成“机器可读”的组件库，Agent 能自动组装 UI。",[47,344,345],{"id":345},"对不同角色的影响",[55,347,348,354,360],{},[58,349,350,353],{},[51,351,352],{},"普通用户","：成为“老板”，管理一群 AI 助手。工作效率大幅提升，但需要学会清晰表达意图。",[58,355,356,359],{},[51,357,358],{},"开发者\u002F产品人","：重点从写代码转向“编排 Agent”（prompt engineering、工具设计、评估框架）。纯 UI 工作可能减少。",[58,361,362,365],{},[51,363,364],{},"企业","：软件采购从“买工具”转向“构建\u002F部署 Agent 生态”。数据安全、Agent 协作框架成为关键。",[40,367,368,371],{},[51,369,370],{},"潜在挑战","：",[55,373,374,377,380],{},[58,375,376],{},"可靠性：Agent 可能出错，需要强有力的验证机制。",[58,378,379],{},"安全与隐私：Agent 有权限访问系统时，风险更高。",[58,381,382],{},"过渡期：很多现有软件会逐步“Agent 化”，而不是一夜之间消失。",[40,384,385,388],{},[51,386,387],{},"软件会变得更像“操作系统 + 生态”","，Agent 是里面的“活跃居民”。人类负责设定目标和把关，AI 负责执行细节。这类似于从“手动驾驶”到“自动驾驶 + 人类监督”的转变。",[40,390,391],{},"这个趋势已经在 2025-2026 年快速推进，未来几年会看到更多真正 Agent-first 的产品出现。",[40,393,394,397],{},[51,395,396],{},"在 AI 智能体（Agent）时代，作为软件开发工程师，你的思考方式、设计原则和开发流程需要发生根本性转变","：从“为人设计界面”转向“为人 + 为 AI Agent 共生设计”。",[40,399,400,401,71],{},"核心理念是：",[51,402,403],{},"你的应用不再主要被人类点击操作，而是被 AI Agent 通过意图（intent）驱动、自主调用",[47,405,407],{"id":406},"思维方式的转变mindset-shift","思维方式的转变（Mindset Shift）",[55,409,410,416,422,428],{},[58,411,412,415],{},[51,413,414],{},"从“功能完整”到“意图友好 + 可执行”","：不再只想“用户怎么点击”，而是要思考“Agent 如何理解这个功能、可靠地执行它”。",[58,417,418,421],{},[51,419,420],{},"人类是“老板”，Agent 是“员工”","：你设计的是让 Agent 能高效工作、少出错、可监督的系统。",[58,423,424,427],{},[51,425,426],{},"软件 = 动作（Actions\u002FTools） + 状态 + 记忆 + 治理","，而非只是 UI + Backend。",[58,429,430,433],{},[51,431,432],{},"接受不确定性","：Agent 会自主规划和行动，你需要强有力的验证、安全和观测机制。",[47,435,437],{"id":436},"设计原则design-principles","设计原则（Design Principles）",[55,439,440,463,469,475,481,487],{},[58,441,442,445,446,449,450],{},[51,443,444],{},"API \u002F Tools 优先","：每个核心功能都暴露为清晰的、机器可读的 ",[51,447,448],{},"Tool","（带详细描述、输入输出 schema、权限控制）。",[55,451,452,455],{},[58,453,454],{},"用 OpenAPI + 丰富描述，让 Agent 容易发现和调用。",[58,456,457,458,462],{},"示例：不是只提供“发送邮件”按钮，而是提供 ",[459,460,461],"code",{},"send_email(to, subject, body, attachments)"," Tool，并说明使用场景。",[58,464,465,468],{},[51,466,467],{},"模块化 + 可组合","：设计成微服务或独立 Action 模块，支持多 Agent 协作（一个 Agent 规划，多个执行）。",[58,470,471,474],{},[51,472,473],{},"持久化状态与记忆","：支持长期上下文、用户偏好、工作流状态，让 Agent 可以“记住”并跨会话执行复杂任务。",[58,476,477,480],{},[51,478,479],{},"可观测性（Observability）第一","：内置详细日志、 tracing、人类审核点。Agent 行动必须透明、可中断、可回滚。",[58,482,483,486],{},[51,484,485],{},"安全与治理","：沙箱执行、权限最小化、成本控制、错误恢复机制。Agent 出错成本可能很高。",[58,488,489,492],{},[51,490,491],{},"混合界面","：保留人类友好 UI（用于监督、高级决策），但底层为 Agent 优化。未来很多 App 会“无界面”或动态生成。",[40,494,495],{},"事实上，我们在claude中已经可以看到动态生成式应用界面的交互卡片。",[47,497,499],{"id":498},"开发流程how-to-build","开发流程（How to Build）",[40,501,502,505],{},[51,503,504],{},"传统流程","：需求 → 设计 UI → 写前后端 → 测试 → 上线。",[40,507,508,371],{},[51,509,510],{},"Agent-first 流程",[271,512,513,519,525,531,536,542],{},[58,514,515,518],{},[51,516,517],{},"定义高层次意图与 Actions","：先列出 Agent 应该能完成的核心任务，用自然语言描述。",[58,520,521,524],{},[51,522,523],{},"设计 Tooling Layer","：实现可被 LLM 调用的函数\u002F API。",[58,526,527,530],{},[51,528,529],{},"构建 Agent 编排层","：使用框架定义循环（ReAct、Plan-and-Execute、多 Agent 协作）。",[58,532,533,71],{},[51,534,535],{},"添加记忆、规划、反思机制",[58,537,538,541],{},[51,539,540],{},"人类监督 + Eval","：建立评估框架（evals），测试可靠性、成本、边界情况。",[58,543,544,547],{},[51,545,546],{},"迭代","：用 AI Coding Agents（Claude Code、Cursor、Codex 等）加速开发你自己。",[47,549,550],{"id":550},"实际开发建议",[55,552,553,559,565,571,577],{},[58,554,555,558],{},[51,556,557],{},"从小开始","：先做一个单一 Agent + 几个 Tools 的 MVP，验证可靠性，再扩展到多 Agent。",[58,560,561,564],{},[51,562,563],{},"把代码库当作 Agent 的知识库","：写清晰注释、规范、文档，让 Agent 容易理解你的代码。",[58,566,567,570],{},[51,568,569],{},"测试优先","：Agent 生成代码快，但必须有强测试覆盖和验证循环。",[58,572,573,576],{},[51,574,575],{},"关注生产就绪","：可靠性 > 炫酷功能。重点解决幻觉、漂移、成本超支、安全问题。",[58,578,579,582],{},[51,580,581],{},"学习重点","：Tool calling、状态图（State Graph）、多 Agent 编排、上下文工程、评估框架。",[47,584,585],{"id":585},"角色的变化",[55,587,588,595,602],{},[58,589,590,591,594],{},"你更多是 ",[51,592,593],{},"Agent 架构师 + Orchestrator","：设计系统、定义规则、审核结果。",[58,596,597,598,601],{},"纯 CRUD \u002F UI 工作会减少，",[51,599,600],{},"意图建模、工具设计、可靠性工程"," 成为核心技能。",[58,603,604,605,608],{},"顶级工程师会擅长“",[51,606,607],{},"Vibe Coding","” + 系统思考：用自然语言引导 Agent 快速构建，然后精炼。",[40,610,611,612,615],{},"在 Agent 时代，",[51,613,614],{},"好软件 = 强大且清晰的 Action 接口 + 可靠的 Agent 运行时 + 优秀的人类监督","。你不是在给人类造工具，而是在造一个“Agent 友好的数字生态”，让 AI 能高效地在里面工作，同时人类轻松掌控。",[40,617,618],{},"这个转变类似当年从桌面到移动端的重构，早适应的人会领先。",{"title":620,"searchDepth":621,"depth":621,"links":622},"",2,[623,625,626,627,628,629,630,631,632,633,634,635],{"id":49,"depth":624,"text":53},3,{"id":77,"depth":624,"text":80},{"id":100,"depth":624,"text":103},{"id":139,"depth":624,"text":140},{"id":177,"depth":624,"text":178},{"id":269,"depth":624,"text":269},{"id":345,"depth":624,"text":345},{"id":406,"depth":624,"text":407},{"id":436,"depth":624,"text":437},{"id":498,"depth":624,"text":499},{"id":550,"depth":624,"text":550},{"id":585,"depth":624,"text":585},"2026-05-28","md","https:\u002F\u002Fimages.pexels.com\u002Fphotos\u002F196644\u002Fpexels-photo-196644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",{},6,true,{"title":18,"description":42},"ALgNWGC_TeQKn870fT9ldm3fHeC3AVMBHA0U-b97iZQ",[645,647],{"title":14,"path":15,"stem":16,"description":646,"children":-1},"A practical guide to creating your own design system, from initial audit to implementation, and the lessons learned along the way.",{"title":22,"path":23,"stem":24,"description":648,"children":-1},"Exploring how strategic color choices can influence user behavior, evoke emotions, and enhance the overall user experience of digital products.",1779983694215]