[{"data":1,"prerenderedAt":1254},["ShallowReactive",2],{"navigation":3,"index":30,"mdc--bnud8k-key":186,"mdc--xfoigd-key":199,"mdc-9lez36-key":208,"index-blogs":217},[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":32,"about":33,"blog":36,"body":39,"description":40,"experience":41,"extension":78,"faq":79,"hero":119,"meta":153,"navigation":154,"path":155,"seo":156,"stem":159,"testimonials":160,"__hash__":185},"index\u002Findex.yml","嗨！🤠我是Gary Tang， AI 产品开发者。🍻",{"title":34,"description":35},"Hey~","程序员→研发部门负责人→全栈开发者→All in AI+产品是我的职业路径。近些年我积极的拥抱商业认知，和非技术的朋友交流，转变看待问题的观念和表达语言的方式，找到可以为之解决问题或者提供价值。\n深度的利用AI技术+编程经验打造应用探索可以撬动商业价值的可能，也为企业提供AI信息化架构实施服务。\n",{"title":37,"description":38},"最新博文","一点点的学习、生活、思考、复盘、分享...",null,"我创造直观的产品体验，让设计符合功能，通过人工智能和创意将想法带入生活。",{"title":42,"items":43},"关注的技术",[44,52,60,68,73],{"position":45,"date":46,"company":47},"Assets Designer at","2022 - 2023",{"name":48,"logo":49,"url":50,"color":51},"Anthropic","i-simple-icons-claude","https:\u002F\u002Fraycast.com","#FF6363",{"position":53,"date":54,"company":55},"Brand Designer at","2025 - Present",{"name":56,"logo":57,"url":58,"color":59},"OpenAI","i-simple-icons-openai","https:\u002F\u002Fnuxt.com","#00DC82",{"position":61,"date":62,"company":63},"Senior UX\u002FUI Designer at","2020 - 2021",{"name":64,"logo":65,"url":66,"color":67},"Apple","i-simple-icons-ios","https:\u002F\u002Flinear.app","#5AA65A",{"position":61,"date":62,"company":69},{"name":70,"logo":71,"url":66,"color":72},"HuaWei","i-simple-icons-harmonyos","#5586EF",{"position":61,"date":62,"company":74},{"name":75,"logo":76,"url":66,"color":77},"Google","i-simple-icons-android","#F1BD39","yml",{"title":80,"description":81,"categories":82},"Frequently Asked Questions","Answers to common questions about my process and services.",[83,95,110],{"title":84,"questions":85},"Services & Process",[86,89,92],{"label":87,"content":88},"What services do you offer?","I specialize in UX\u002FUI design and front-end development. This includes user research, wireframing, interactive prototyping, creating intuitive user interfaces, building responsive websites and web applications (especially with Vue.js\u002FNuxt.js), and developing design systems. My goal is to create seamless digital experiences from concept to deployment.\n",{"label":90,"content":91},"What is your design process like?","My process is collaborative and iterative, typically involving stages like Discovery & Research, Ideation & Prototyping, User Testing, Visual Design, and close collaboration with development teams during implementation. I tailor the process based on project needs, always focusing on user-centered solutions.\n",{"label":93,"content":94},"Do you work with startups?","Absolutely! I enjoy working with startups to help shape their product vision and create user-friendly interfaces from the ground up. I can adapt my process to fit the fast-paced startup environment.\n",{"title":96,"questions":97},"Pricing & Timelines",[98,101,104,107],{"label":99,"content":100},"How much does a project typically cost?","Project costs vary based on scope, complexity, features, and timeline. For comprehensive UX\u002FUI design and front-end development projects, my engagements typically start around $5,000, with average projects ranging between $8,000 and $25,000. For consulting or specific design tasks, my day rate is $700.\n",{"label":102,"content":103},"What are your payment terms?","I generally require a 40% deposit to schedule the project and begin work, with the remaining 60% due upon successful project completion and delivery. I accept payments via bank transfer and Stripe.\n",{"label":105,"content":106},"How long does a typical project take?","Timelines depend heavily on the project's scope and complexity. Smaller projects might take 3-4 weeks, while larger, more involved projects can range from 2 to 4 months. I always provide a detailed timeline estimate after the initial discovery phase.\n",{"label":108,"content":109},"Do you offer retainers or ongoing support?","Yes, for clients needing ongoing design support, feature development, or maintenance, I offer monthly retainer options tailored to specific needs. Let's discuss if this is something you're interested in.\n",{"title":111,"questions":112},"About Me",[113,116],{"label":114,"content":115},"What do you enjoy most about your work?","I love the challenge of solving complex problems through design and technology. It's incredibly rewarding to see people interact with something I've created and find it genuinely useful and easy to navigate. Bridging the gap between user needs and technical possibilities is what truly excites me.\n",{"label":117,"content":118},"What are your hobbies outside of work?","When I'm not designing or coding, I enjoy exploring Boston's neighborhoods, trying out new coffee shops, and hiking in the nearby reservations. I'm also passionate about photography and occasionally contribute to open-source projects.\n",{"links":120,"images":125},[121],{"label":122,"to":123,"color":124},"了解 更多","\u002Fabout","neutral",[126,129,132,135,138,141,144,147,150],{"src":127,"alt":128},"\u002Fhero\u002Frandom-1.avif","Random Image 1",{"src":130,"alt":131},"\u002Fhero\u002Frandom-2.avif","Random Image 2",{"src":133,"alt":134},"\u002Fhero\u002Frandom-3.avif","Random Image 3",{"src":136,"alt":137},"\u002Fhero\u002Frandom-4.avif","Random Image 4",{"src":139,"alt":140},"\u002Fhero\u002Frandom-5.avif","Random Image 5",{"src":142,"alt":143},"\u002Fhero\u002Frandom-6.avif","Random Image 6",{"src":145,"alt":146},"\u002Fhero\u002Frandom-7.avif","Random Image 7",{"src":148,"alt":149},"\u002Fhero\u002Frandom-8.avif","Random Image 8",{"src":151,"alt":152},"\u002Fhero\u002Frandom-9.avif","Random Image 9",{},true,"\u002F",{"title":157,"description":158},"Gary Tang - AI产品开发者","欢迎来到我的个人网站！ 我是Gary Tang， 独立产品开发者、全栈开发工程师、AI应用开发者、PMP项目管理专家，居住在武汉。我专注于创造以用户为中心的AI+产品体验。","index",[161,169,177],{"quote":162,"author":163},"Emma's approach to UX design completely transformed our product. She has a rare ability to balance beautiful aesthetics with functional simplicity. The redesign not only looked better, but it reduced our customer support tickets by 40% and increased conversion rates across all key metrics.",{"name":164,"description":165,"avatar":166},"Sarah Chen","Product Director at Bloom Finance",{"src":167,"srcset":168},"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=40&h=40&q=80","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=80&h=80&q=80 2x",{"quote":170,"author":171},"Working with Emma was the best decision we made for our startup. She didn't just deliver designs—she challenged our assumptions, conducted thorough user research, and created an experience that truly resonated with our audience. Her technical knowledge of front-end development meant the handoff to our engineering team was seamless.",{"name":172,"description":173,"avatar":174},"Michael Rodriguez","Co-founder of Wavelength Music",{"src":175,"srcset":176},"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=40&h=40&q=80","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=80&h=80&q=80 2x",{"quote":178,"author":179},"Emma stands out in her ability to translate complex sustainability data into intuitive interfaces. Her work on EcoTrack wasn't just visually stunning—it fundamentally changed how our users interact with environmental information. She approaches each problem with both creativity and analytical rigor, which is exactly what we needed.",{"name":180,"description":181,"avatar":182},"Dr. Aisha Johnson","Chief Innovation Officer at GreenTech Solutions",{"src":183,"srcset":184},"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1573497019940-1c28c88b4f3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=40&h=40&q=80","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1573497019940-1c28c88b4f3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=80&h=80&q=80 2x","KXh2VVAqVlLS4ONKp6Jq7h2Wmdx3CiYbr9h5hjvJUl8",{"data":187,"body":188},{},{"type":189,"children":190},"root",[191],{"type":192,"tag":193,"props":194,"children":195},"element","p",{},[196],{"type":197,"value":198},"text","I specialize in UX\u002FUI design and front-end development. This includes user research, wireframing, interactive prototyping, creating intuitive user interfaces, building responsive websites and web applications (especially with Vue.js\u002FNuxt.js), and developing design systems. My goal is to create seamless digital experiences from concept to deployment.",{"data":200,"body":201},{},{"type":189,"children":202},[203],{"type":192,"tag":193,"props":204,"children":205},{},[206],{"type":197,"value":207},"My process is collaborative and iterative, typically involving stages like Discovery & Research, Ideation & Prototyping, User Testing, Visual Design, and close collaboration with development teams during implementation. I tailor the process based on project needs, always focusing on user-centered solutions.",{"data":209,"body":210},{},{"type":189,"children":211},[212],{"type":192,"tag":193,"props":213,"children":214},{},[215],{"type":197,"value":216},"Absolutely! I enjoy working with startups to help shape their product vision and create user-friendly interfaces from the ground up. I can adapt my process to fit the fast-paced startup environment.",[218,830,1201],{"id":219,"title":18,"author":220,"body":224,"date":823,"description":229,"extension":824,"image":825,"meta":826,"minRead":827,"navigation":154,"path":19,"seo":828,"stem":20,"__hash__":829},"blog\u002Fblog\u002Fhow-you-should-think-about-and-design-software-from-now-on.md",{"name":221,"avatar":222},"Gary Tang",{"src":223,"alt":221},"https:\u002F\u002Fimg.garytang.cn\u002Favatar.avif",{"type":225,"value":226,"toc":806},"minimark",[227,230,233,241,262,268,285,291,309,324,328,356,362,366,454,457,530,533,553,559,570,576,579,585,591,595,621,625,680,683,687,693,698,735,738,770,773,796,803],[193,228,229],{},"Naval:\"Software went from desktop-first to mobile-first, now going to agent-first.\"",[193,231,232],{},"近半年来，我在为企业设计和构建 AI 智能体的服务中,随着各种 Agent 智能体和 AI 架构思想的不断出现。深有感触软件开发和设计模式（paradigm）正在发生第三次重大转变。",[234,235,237],"h3",{"id":236},"桌面优先desktop-first",[238,239,240],"strong",{},"桌面优先（Desktop-first）",[242,243,244,252,259],"ul",{},[245,246,247,248,251],"li",{},"早期软件主要是为",[238,249,250],{},"电脑","设计的（Windows、Mac上的应用）。",[245,253,254,255,258],{},"核心交互方式：",[238,256,257],{},"键盘 + 鼠标 + 大屏幕","。",[245,260,261],{},"用户主动坐在电脑前操作。",[234,263,265],{"id":264},"移动优先mobile-first",[238,266,267],{},"移动优先（Mobile-first）",[242,269,270,277,282],{},[245,271,272,273,276],{},"从 iPhone 时代开始，软件转向",[238,274,275],{},"手机优先","设计。",[245,278,254,279,258],{},[238,280,281],{},"手指触屏 + 小屏幕 + 随时随地",[245,283,284],{},"很多产品先做移动端，再考虑桌面端（甚至桌面端体验变差）。",[234,286,288],{"id":287},"智能体优先-agent-first现在正在发生",[238,289,290],{},"智能体优先 \u002F Agent-first（现在正在发生）",[242,292,293,299],{},[245,294,295,296,276],{},"未来软件将转向",[238,297,298],{},"AI Agent（智能体）优先",[245,300,301,304,305,308],{},[238,302,303],{},"核心变化","：用户不再是主要“操作者”，而是",[238,306,307],{},"下指令的人","。AI Agent 代替你去执行具体操作。",[193,310,311,312,315,316,319,320,323],{},"以前是你",[238,313,314],{},"亲手","用鼠标\u002F手指操作软件；",[317,318],"br",{},"\n以后是你",[238,321,322],{},"告诉","一个 AI 代理（Agent）“帮我办这件事”，它自己去完成（打开各种 App、调用 API、处理流程等）。",[234,325,327],{"id":326},"实际含义对产品和开发的影响","实际含义（对产品和开发的影响）：",[242,329,330,340,347,353],{},[245,331,332,335,336,339],{},[238,333,334],{},"界面（UI）不再是最重要","：Agent 需要的是",[238,337,338],{},"强大的 API、清晰的动作定义、持久化记忆、可靠的错误处理","，而不是漂亮的按钮。",[245,341,342,343,346],{},"很多工作流程会变成“",[238,344,345],{},"意图驱动","”（intent-based），而不是一步步点击。",[245,348,349,350,258],{},"未来优秀的软件 = 好用给人类 + ",[238,351,352],{},"极度友好给 AI Agent",[245,354,355],{},"这会像当年从桌面到移动一样，诞生全新一代的“Agent-native”应用。",[193,357,358,361],{},[238,359,360],{},"AI智能体（Agent）时代的软件形态会和今天有本质区别","，从“为人设计”转向“为人 + 为AI智能体共生设计”。",[234,363,365],{"id":364},"核心转变从点击操作到意图驱动","核心转变：从“点击操作”到“意图驱动”",[367,368,369,385],"table",{},[370,371,372],"thead",{},[373,374,375,379,382],"tr",{},[376,377,378],"th",{},"维度",[376,380,381],{},"当前（Mobile-first）",[376,383,384],{},"Agent-first 时代（未来 2-5 年）",[386,387,388,402,415,428,441],"tbody",{},[373,389,390,396,399],{},[391,392,393],"td",{},[238,394,395],{},"主要用户",[391,397,398],{},"人类（手指\u002F鼠标）",[391,400,401],{},"AI Agent（为主） + 人类（下指令）",[373,403,404,409,412],{},[391,405,406],{},[238,407,408],{},"交互方式",[391,410,411],{},"点击按钮、填表单、滑动",[391,413,414],{},"自然语言意图（“帮我处理这个”），Agent 自主执行",[373,416,417,422,425],{},[391,418,419],{},[238,420,421],{},"界面重点",[391,423,424],{},"漂亮 UI\u002FUX、视觉设计",[391,426,427],{},"强大 API、清晰动作定义、机器可读描述",[373,429,430,435,438],{},[391,431,432],{},[238,433,434],{},"软件形态",[391,436,437],{},"独立 App \u002F 网页",[391,439,440],{},"模块化服务 + Agent 编排平台",[373,442,443,448,451],{},[391,444,445],{},[238,446,447],{},"开发重点",[391,449,450],{},"前端框架、响应式设计",[391,452,453],{},"Agent 友好架构、工具集成、记忆\u002F规划能力",[234,455,456],{"id":456},"未来软件的具体形态",[458,459,460,473,504,517],"ol",{},[245,461,462,465],{},[238,463,464],{},"极简或“无界面”应用（Invisible Apps）",[242,466,467,470],{},[245,468,469],{},"很多软件不再需要复杂的前端界面。你直接对 Agent 说需求，它在后台调用各种工具完成。",[245,471,472],{},"示例：不再打开 Excel + CRM + 邮件，而是说“分析本季度销售，给 top10 客户发个性化跟进邮件”，Agent 自己搞定。",[245,474,475,478],{},[238,476,477],{},"Agent-native 架构（智能体原生设计）",[242,479,480,486,492,498],{},[245,481,482,485],{},[238,483,484],{},"API 优先、工具优先","：每个功能都暴露成清晰的“动作”（tools\u002Ffunctions），带详细描述，让 Agent 容易理解和调用。",[245,487,488,491],{},[238,489,490],{},"事件驱动 + 记忆系统","：软件支持长期上下文、状态持久化，Agent 可以“记住”你的偏好和工作流程。",[245,493,494,497],{},[238,495,496],{},"多 Agent 协作","：一个复杂任务由多个专精 Agent 分工（如规划 Agent + 执行 Agent + 验证 Agent）。",[245,499,500,503],{},[238,501,502],{},"可观测性与治理","：内置监控、权限控制、安全沙箱，因为 Agent 会自主行动。",[245,505,506,509],{},[238,507,508],{},"动态生成式软件",[242,510,511,514],{},[245,512,513],{},"Agent 能“一键”生成个性化小程序或工作流。Naval 提到过，AI coding agents 可以直接生成定制 App。",[245,515,516],{},"传统 SaaS 可能被部分取代：很多简单工具变成“按需生成”的 Agent 服务，而不是固定订阅的 App。",[245,518,519,522],{},[238,520,521],{},"混合人类-AI 界面",[242,523,524,527],{},[245,525,526],{},"保留少量人类友好界面（用于监督、复杂决策），但底层是为 Agent 优化的。",[245,528,529],{},"设计系统会进化成“机器可读”的组件库，Agent 能自动组装 UI。",[234,531,532],{"id":532},"对不同角色的影响",[242,534,535,541,547],{},[245,536,537,540],{},[238,538,539],{},"普通用户","：成为“老板”，管理一群 AI 助手。工作效率大幅提升，但需要学会清晰表达意图。",[245,542,543,546],{},[238,544,545],{},"开发者\u002F产品人","：重点从写代码转向“编排 Agent”（prompt engineering、工具设计、评估框架）。纯 UI 工作可能减少。",[245,548,549,552],{},[238,550,551],{},"企业","：软件采购从“买工具”转向“构建\u002F部署 Agent 生态”。数据安全、Agent 协作框架成为关键。",[193,554,555,558],{},[238,556,557],{},"潜在挑战","：",[242,560,561,564,567],{},[245,562,563],{},"可靠性：Agent 可能出错，需要强有力的验证机制。",[245,565,566],{},"安全与隐私：Agent 有权限访问系统时，风险更高。",[245,568,569],{},"过渡期：很多现有软件会逐步“Agent 化”，而不是一夜之间消失。",[193,571,572,575],{},[238,573,574],{},"软件会变得更像“操作系统 + 生态”","，Agent 是里面的“活跃居民”。人类负责设定目标和把关，AI 负责执行细节。这类似于从“手动驾驶”到“自动驾驶 + 人类监督”的转变。",[193,577,578],{},"这个趋势已经在 2025-2026 年快速推进，未来几年会看到更多真正 Agent-first 的产品出现。",[193,580,581,584],{},[238,582,583],{},"在 AI 智能体（Agent）时代，作为软件开发工程师，你的思考方式、设计原则和开发流程需要发生根本性转变","：从“为人设计界面”转向“为人 + 为 AI Agent 共生设计”。",[193,586,587,588,258],{},"核心理念是：",[238,589,590],{},"你的应用不再主要被人类点击操作，而是被 AI Agent 通过意图（intent）驱动、自主调用",[234,592,594],{"id":593},"思维方式的转变mindset-shift","思维方式的转变（Mindset Shift）",[242,596,597,603,609,615],{},[245,598,599,602],{},[238,600,601],{},"从“功能完整”到“意图友好 + 可执行”","：不再只想“用户怎么点击”，而是要思考“Agent 如何理解这个功能、可靠地执行它”。",[245,604,605,608],{},[238,606,607],{},"人类是“老板”，Agent 是“员工”","：你设计的是让 Agent 能高效工作、少出错、可监督的系统。",[245,610,611,614],{},[238,612,613],{},"软件 = 动作（Actions\u002FTools） + 状态 + 记忆 + 治理","，而非只是 UI + Backend。",[245,616,617,620],{},[238,618,619],{},"接受不确定性","：Agent 会自主规划和行动，你需要强有力的验证、安全和观测机制。",[234,622,624],{"id":623},"设计原则design-principles","设计原则（Design Principles）",[242,626,627,650,656,662,668,674],{},[245,628,629,632,633,636,637],{},[238,630,631],{},"API \u002F Tools 优先","：每个核心功能都暴露为清晰的、机器可读的 ",[238,634,635],{},"Tool","（带详细描述、输入输出 schema、权限控制）。",[242,638,639,642],{},[245,640,641],{},"用 OpenAPI + 丰富描述，让 Agent 容易发现和调用。",[245,643,644,645,649],{},"示例：不是只提供“发送邮件”按钮，而是提供 ",[646,647,648],"code",{},"send_email(to, subject, body, attachments)"," Tool，并说明使用场景。",[245,651,652,655],{},[238,653,654],{},"模块化 + 可组合","：设计成微服务或独立 Action 模块，支持多 Agent 协作（一个 Agent 规划，多个执行）。",[245,657,658,661],{},[238,659,660],{},"持久化状态与记忆","：支持长期上下文、用户偏好、工作流状态，让 Agent 可以“记住”并跨会话执行复杂任务。",[245,663,664,667],{},[238,665,666],{},"可观测性（Observability）第一","：内置详细日志、 tracing、人类审核点。Agent 行动必须透明、可中断、可回滚。",[245,669,670,673],{},[238,671,672],{},"安全与治理","：沙箱执行、权限最小化、成本控制、错误恢复机制。Agent 出错成本可能很高。",[245,675,676,679],{},[238,677,678],{},"混合界面","：保留人类友好 UI（用于监督、高级决策），但底层为 Agent 优化。未来很多 App 会“无界面”或动态生成。",[193,681,682],{},"事实上，我们在claude中已经可以看到动态生成式应用界面的交互卡片。",[234,684,686],{"id":685},"开发流程how-to-build","开发流程（How to Build）",[193,688,689,692],{},[238,690,691],{},"传统流程","：需求 → 设计 UI → 写前后端 → 测试 → 上线。",[193,694,695,558],{},[238,696,697],{},"Agent-first 流程",[458,699,700,706,712,718,723,729],{},[245,701,702,705],{},[238,703,704],{},"定义高层次意图与 Actions","：先列出 Agent 应该能完成的核心任务，用自然语言描述。",[245,707,708,711],{},[238,709,710],{},"设计 Tooling Layer","：实现可被 LLM 调用的函数\u002F API。",[245,713,714,717],{},[238,715,716],{},"构建 Agent 编排层","：使用框架定义循环（ReAct、Plan-and-Execute、多 Agent 协作）。",[245,719,720,258],{},[238,721,722],{},"添加记忆、规划、反思机制",[245,724,725,728],{},[238,726,727],{},"人类监督 + Eval","：建立评估框架（evals），测试可靠性、成本、边界情况。",[245,730,731,734],{},[238,732,733],{},"迭代","：用 AI Coding Agents（Claude Code、Cursor、Codex 等）加速开发你自己。",[234,736,737],{"id":737},"实际开发建议",[242,739,740,746,752,758,764],{},[245,741,742,745],{},[238,743,744],{},"从小开始","：先做一个单一 Agent + 几个 Tools 的 MVP，验证可靠性，再扩展到多 Agent。",[245,747,748,751],{},[238,749,750],{},"把代码库当作 Agent 的知识库","：写清晰注释、规范、文档，让 Agent 容易理解你的代码。",[245,753,754,757],{},[238,755,756],{},"测试优先","：Agent 生成代码快，但必须有强测试覆盖和验证循环。",[245,759,760,763],{},[238,761,762],{},"关注生产就绪","：可靠性 > 炫酷功能。重点解决幻觉、漂移、成本超支、安全问题。",[245,765,766,769],{},[238,767,768],{},"学习重点","：Tool calling、状态图（State Graph）、多 Agent 编排、上下文工程、评估框架。",[234,771,772],{"id":772},"角色的变化",[242,774,775,782,789],{},[245,776,777,778,781],{},"你更多是 ",[238,779,780],{},"Agent 架构师 + Orchestrator","：设计系统、定义规则、审核结果。",[245,783,784,785,788],{},"纯 CRUD \u002F UI 工作会减少，",[238,786,787],{},"意图建模、工具设计、可靠性工程"," 成为核心技能。",[245,790,791,792,795],{},"顶级工程师会擅长“",[238,793,794],{},"Vibe Coding","” + 系统思考：用自然语言引导 Agent 快速构建，然后精炼。",[193,797,798,799,802],{},"在 Agent 时代，",[238,800,801],{},"好软件 = 强大且清晰的 Action 接口 + 可靠的 Agent 运行时 + 优秀的人类监督","。你不是在给人类造工具，而是在造一个“Agent 友好的数字生态”，让 AI 能高效地在里面工作，同时人类轻松掌控。",[193,804,805],{},"这个转变类似当年从桌面到移动端的重构，早适应的人会领先。",{"title":807,"searchDepth":808,"depth":808,"links":809},"",2,[810,812,813,814,815,816,817,818,819,820,821,822],{"id":236,"depth":811,"text":240},3,{"id":264,"depth":811,"text":267},{"id":287,"depth":811,"text":290},{"id":326,"depth":811,"text":327},{"id":364,"depth":811,"text":365},{"id":456,"depth":811,"text":456},{"id":532,"depth":811,"text":532},{"id":593,"depth":811,"text":594},{"id":623,"depth":811,"text":624},{"id":685,"depth":811,"text":686},{"id":737,"depth":811,"text":737},{"id":772,"depth":811,"text":772},"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,{"title":18,"description":229},"ALgNWGC_TeQKn870fT9ldm3fHeC3AVMBHA0U-b97iZQ",{"id":831,"title":10,"author":832,"body":836,"date":1194,"description":1195,"extension":824,"image":1196,"meta":1197,"minRead":1198,"navigation":154,"path":11,"seo":1199,"stem":12,"__hash__":1200},"blog\u002Fblog\u002Ffrom-mockup-to-market.md",{"name":833,"avatar":834},"Emma Thompson",{"src":835,"alt":833},"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1701615004837-40d8573b6652?q=80&w=1480&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",{"type":225,"value":837,"toc":1164},[838,841,844,849,852,856,859,865,869,872,876,879,890,894,897,901,904,908,911,937,941,944,970,974,977,981,984,988,991,1002,1006,1009,1020,1024,1027,1038,1042,1045,1049,1052,1066,1070,1073,1087,1091,1094,1098,1101,1105,1108,1112,1115,1119,1122,1133,1137,1140,1151,1154,1158,1161],[193,839,840],{},"Creating successful digital products isn't about following a rigid formula—it's about developing a flexible framework that adapts to the unique challenges of each project. After refining my approach across dozens of products, I've developed a process that consistently delivers results while leaving room for creativity and iteration.",[193,842,843],{},"In this article, I'll walk through my end-to-end design process, from initial discovery to developer handoff, using my recent work on the EcoTrack application as a case study.",[845,846,848],"h2",{"id":847},"phase-1-discovery-research","Phase 1: Discovery & Research",[193,850,851],{},"Every great product starts with understanding the problem it's trying to solve. For EcoTrack, our challenge was creating an engaging way for users to track their environmental impact without feeling overwhelmed by guilt or complex data.",[234,853,855],{"id":854},"user-interviews","User Interviews",[193,857,858],{},"I began by conducting interviews with 12 potential users across different demographics, focusing on their current habits and attitudes toward sustainability. These conversations revealed a crucial insight: most people wanted to make environmentally friendly choices but felt paralyzed by the complexity of calculating their impact.",[860,861,862],"blockquote",{},[193,863,864],{},"\"I care about the environment, but I have no idea if using a paper bag is actually better than plastic, or if my reusable water bottle makes any difference.\" — Interview participant",[234,866,868],{"id":867},"competitive-analysis","Competitive Analysis",[193,870,871],{},"Next, I analyzed existing sustainability apps, creating a feature comparison matrix to identify gaps and opportunities. Most competitors focused on carbon footprint calculations but failed to provide actionable guidance or positive reinforcement.",[234,873,875],{"id":874},"defining-success","Defining Success",[193,877,878],{},"Before opening Figma, I collaborated with stakeholders to define clear success metrics:",[242,880,881,884,887],{},[245,882,883],{},"Increase daily active usage by 40%",[245,885,886],{},"Improve user-reported understanding of environmental impact",[245,888,889],{},"Drive measurable behavior changes in at least two sustainability categories",[845,891,893],{"id":892},"phase-2-ideation-conceptualization","Phase 2: Ideation & Conceptualization",[193,895,896],{},"With a solid understanding of the problem space, I moved into the creative phase of the process.",[234,898,900],{"id":899},"sketching","Sketching",[193,902,903],{},"I always start with pen and paper, rapidly exploring different approaches without the constraints of digital tools. For EcoTrack, I filled three sketchbooks with concepts ranging from gamified experiences to data-heavy dashboards.",[234,905,907],{"id":906},"information-architecture","Information Architecture",[193,909,910],{},"Based on research insights, I developed a user-centered information architecture that prioritized simplicity and actionable information:",[458,912,913,919,925,931],{},[245,914,915,918],{},[238,916,917],{},"Dashboard"," — Personalized overview with immediate impact insights",[245,920,921,924],{},[238,922,923],{},"Daily Tracker"," — Simple logging of activities with immediate feedback",[245,926,927,930],{},[238,928,929],{},"Impact Journey"," — Visualization of progress over time",[245,932,933,936],{},[238,934,935],{},"Action Center"," — Customized recommendations based on user behavior",[234,938,940],{"id":939},"design-principles","Design Principles",[193,942,943],{},"I established four core design principles to guide all decisions:",[242,945,946,952,958,964],{},[245,947,948,951],{},[238,949,950],{},"Simplify complexity"," — Translate environmental impact into understandable units",[245,953,954,957],{},[238,955,956],{},"Celebrate progress"," — Focus on positive reinforcement rather than guilt",[245,959,960,963],{},[238,961,962],{},"Enable informed choices"," — Provide context for decision-making",[245,965,966,969],{},[238,967,968],{},"Design for habit formation"," — Create satisfying interaction loops",[845,971,973],{"id":972},"phase-3-prototyping-testing","Phase 3: Prototyping & Testing",[193,975,976],{},"With the conceptual framework in place, I moved into the iterative cycle of prototyping and testing.",[234,978,980],{"id":979},"low-fidelity-wireframes","Low-Fidelity Wireframes",[193,982,983],{},"I created wireframes focusing on user flows and information hierarchy, deliberately keeping the visual design minimal to focus feedback on functionality and structure.",[234,985,987],{"id":986},"user-testing-round-1","User Testing (Round 1)",[193,989,990],{},"Testing wireframes with 8 participants revealed several key insights:",[242,992,993,996,999],{},[245,994,995],{},"Users wanted more immediate feedback when logging activities",[245,997,998],{},"The impact visualization wasn't intuitive for most users",[245,1000,1001],{},"People were confused by technical environmental terminology",[234,1003,1005],{"id":1004},"mid-fidelity-prototypes","Mid-Fidelity Prototypes",[193,1007,1008],{},"Based on testing feedback, I refined the concept and developed interactive prototypes with more visual detail, focusing on:",[242,1010,1011,1014,1017],{},[245,1012,1013],{},"Simplified data visualization using familiar metaphors",[245,1015,1016],{},"Immediate positive reinforcement for logged activities",[245,1018,1019],{},"Progressive disclosure of more complex environmental information",[234,1021,1023],{"id":1022},"user-testing-round-2","User Testing (Round 2)",[193,1025,1026],{},"A second round of testing showed significant improvements in usability, but highlighted new challenges:",[242,1028,1029,1032,1035],{},[245,1030,1031],{},"Users wanted to compare their impact with friends or community averages",[245,1033,1034],{},"Weekly summaries were more motivating than daily statistics",[245,1036,1037],{},"The onboarding process felt too lengthy",[845,1039,1041],{"id":1040},"phase-4-visual-design-refinement","Phase 4: Visual Design & Refinement",[193,1043,1044],{},"With the core experience validated, I moved into high-fidelity visual design.",[234,1046,1048],{"id":1047},"visual-language","Visual Language",[193,1050,1051],{},"I developed a visual language that balanced approachability with credibility:",[242,1053,1054,1057,1060,1063],{},[245,1055,1056],{},"A nature-inspired color palette with clear functional color coding",[245,1058,1059],{},"Custom iconography that simplified complex concepts",[245,1061,1062],{},"Typography that prioritized readability across devices",[245,1064,1065],{},"Micro-interactions that provided satisfaction and reinforcement",[234,1067,1069],{"id":1068},"design-system","Design System",[193,1071,1072],{},"To ensure consistency and facilitate development, I created a comprehensive design system including:",[242,1074,1075,1078,1081,1084],{},[245,1076,1077],{},"Component library with documented states and behaviors",[245,1079,1080],{},"Responsive layout guidelines",[245,1082,1083],{},"Animation specifications",[245,1085,1086],{},"Accessibility standards",[234,1088,1090],{"id":1089},"final-prototype","Final Prototype",[193,1092,1093],{},"The final prototype brought together all elements into a cohesive experience, which we tested with a broader user group before moving to development.",[845,1095,1097],{"id":1096},"phase-5-implementation-iteration","Phase 5: Implementation & Iteration",[193,1099,1100],{},"The design process doesn't end when development begins—it evolves.",[234,1102,1104],{"id":1103},"developer-collaboration","Developer Collaboration",[193,1106,1107],{},"I worked closely with developers throughout implementation, participating in code reviews and adjusting designs to address technical constraints while preserving the core experience.",[234,1109,1111],{"id":1110},"analytics-implementation","Analytics Implementation",[193,1113,1114],{},"We integrated analytics to track our success metrics, setting up dashboards to monitor key interactions and user journeys.",[234,1116,1118],{"id":1117},"post-launch-iteration","Post-Launch Iteration",[193,1120,1121],{},"After launch, we established a regular cycle of analysis and iteration:",[242,1123,1124,1127,1130],{},[245,1125,1126],{},"Weekly reviews of user feedback and behavior data",[245,1128,1129],{},"Bi-weekly design sprints to address emerging issues",[245,1131,1132],{},"Monthly feature planning based on usage patterns",[845,1134,1136],{"id":1135},"results-learnings","Results & Learnings",[193,1138,1139],{},"Six months after launch, EcoTrack has exceeded our initial success metrics:",[242,1141,1142,1145,1148],{},[245,1143,1144],{},"52% increase in daily active usage",[245,1146,1147],{},"78% of users report better understanding of their environmental impact",[245,1149,1150],{},"Average user has adopted 3.4 new sustainable habits",[193,1152,1153],{},"The most valuable lesson from this project was the importance of making abstract concepts tangible. By translating complex environmental data into personal, actionable insights, we created an experience that not only educated users but empowered them to make meaningful changes.",[845,1155,1157],{"id":1156},"conclusion","Conclusion",[193,1159,1160],{},"Effective product design is never a linear journey—it's a continuous cycle of learning and refinement. By staying focused on user needs while maintaining a flexible approach to problem-solving, we can create products that not only meet business objectives but genuinely improve people's lives.",[193,1162,1163],{},"I'd love to hear about your own design process and how you approach similar challenges. Feel free to reach out with questions or share your experiences in the comments below.",{"title":807,"searchDepth":808,"depth":808,"links":1165},[1166,1171,1176,1182,1187,1192,1193],{"id":847,"depth":808,"text":848,"children":1167},[1168,1169,1170],{"id":854,"depth":811,"text":855},{"id":867,"depth":811,"text":868},{"id":874,"depth":811,"text":875},{"id":892,"depth":808,"text":893,"children":1172},[1173,1174,1175],{"id":899,"depth":811,"text":900},{"id":906,"depth":811,"text":907},{"id":939,"depth":811,"text":940},{"id":972,"depth":808,"text":973,"children":1177},[1178,1179,1180,1181],{"id":979,"depth":811,"text":980},{"id":986,"depth":811,"text":987},{"id":1004,"depth":811,"text":1005},{"id":1022,"depth":811,"text":1023},{"id":1040,"depth":808,"text":1041,"children":1183},[1184,1185,1186],{"id":1047,"depth":811,"text":1048},{"id":1068,"depth":811,"text":1069},{"id":1089,"depth":811,"text":1090},{"id":1096,"depth":808,"text":1097,"children":1188},[1189,1190,1191],{"id":1103,"depth":811,"text":1104},{"id":1110,"depth":811,"text":1111},{"id":1117,"depth":811,"text":1118},{"id":1135,"depth":808,"text":1136},{"id":1156,"depth":808,"text":1157},"2025-04-23","A detailed breakdown of my iterative design methodology, from initial research to final handoff, with practical tips for designers at every stage.","https:\u002F\u002Fimages.pexels.com\u002Fphotos\u002F1050312\u002Fpexels-photo-1050312.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",{},8,{"title":10,"description":1195},"CDWNWgtx3hCIt749zuw2sfgA2mN5rNXUtBLTjjH0nz4",{"id":1202,"title":22,"author":1203,"body":1205,"date":1247,"description":1248,"extension":824,"image":1249,"meta":1250,"minRead":1251,"navigation":154,"path":23,"seo":1252,"stem":24,"__hash__":1253},"blog\u002Fblog\u002Fpsychology-of-color-in-ui-design.md",{"name":833,"avatar":1204},{"src":835,"alt":833},{"type":225,"value":1206,"toc":1245},[1207,1210,1213,1216,1219,1222,1239,1242],[193,1208,1209],{},"Color is one of the most powerful tools in my design arsenal, yet I find it's often reduced to mere aesthetics or brand guidelines. After conducting a series of A\u002FB tests for the Wavelength music app redesign, I've gathered some fascinating insights about how color psychology directly impacts user behavior.",[193,1211,1212],{},"When we initially launched the app, we used a vibrant purple as our primary action color. The color looked great with our brand palette, but our conversion metrics were underwhelming. On a hunch, I proposed testing different primary colors while keeping all other elements identical.",[193,1214,1215],{},"The results were striking: switching to a specific shade of blue increased our call-to-action conversion by 34%. Even more interesting was how different user segments responded to color variations—younger users engaged more with vibrant tones, while our 35+ demographic showed stronger preference for more subdued colors.",[193,1217,1218],{},"Beyond conversion metrics, I discovered that color significantly affected how users perceived waiting times. By implementing a softer color progression in our loading animations, users reported that the app felt faster, even though the actual loading times remained unchanged.",[193,1220,1221],{},"I've since developed a framework for color decision-making that goes beyond aesthetics:",[458,1223,1224,1227,1230,1233,1236],{},[245,1225,1226],{},"Consider the emotional response you want to evoke",[245,1228,1229],{},"Test color choices with your specific user demographics",[245,1231,1232],{},"Use color to create visual hierarchies that guide users naturally",[245,1234,1235],{},"Consider cultural associations of colors for international audiences",[245,1237,1238],{},"Ensure sufficient contrast for readability and accessibility",[193,1240,1241],{},"The most valuable lesson I've learned is that there are no universal \"right\" colors—only colors that effectively communicate your message and guide users toward their goals within your specific context.",[193,1243,1244],{},"Next time you're selecting a color palette, think beyond what looks good and consider what your colors are actually saying to your users.",{"title":807,"searchDepth":808,"depth":808,"links":1246},[],"2025-03-15","Exploring how strategic color choices can influence user behavior, evoke emotions, and enhance the overall user experience of digital products.","https:\u002F\u002Fimages.pexels.com\u002Fphotos\u002F40799\u002Fpaper-colorful-color-loose-40799.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",{},5,{"title":22,"description":1248},"fN5DAgIRMQc3gJh92rH6lK6TjZLKEQivx8hu2JR3VJI",1779983694048]