TIL
HomeAbundance creates a demand for discernment. Create fast, edit slow. Because editing carefully is curation. Cam Worboys, How AI is Redefining the Role of UX and Product Designers
CashApp 的设计师分享了 from creating to curating 的理念。创造的事情应该大胆交给 AI 去做,人要慢慢成为 curator。今天我把这个理念用在了写代码里,当我不确定当前的效果时,我会开一个 playground 页面,让 AI 同时实现好几个版本,然后我再对比,挑选,修改。
让 AI 尽情的去创造吧。
和 AI 聊想法,让它来主导对话。 让它给你提问。AI 懂的多,让它一层一层的深入,带你找到真正想要的东西。推荐 Claude 的 AskUserQuestion 工具,或者 Claude Cowork,他们比较擅长提问。
和 AI 聊设计:用图片来交流。 用语言或者文字描述 UI 都是一件困难的事情。推荐我最爱的 AI 博主张咋啦分享的技巧:让 AI 做一个 Playground,去看看 AI 能做出什么,再找到自己想要的效果让 AI 实现。我们可以发图片给 AI,也可以反过来,让 AI 生成图片给我们。
和 AI 聊代码:你来主导对话。 要像一个会放权的 leader,描述现在的状况,存在的问题和期望的结果,把实现交给它。不符合预期时,让它找到根本原因,而不只是解决表面问题。并让 AI 告诉你下次应该如何写 prompt 来避免犯错。
从 Claude Code 官方学到的小技巧:
| Strategy | Before | After |
|---|---|---|
| Provide verification criteria | "implement a function that validates email addresses" | "write a validateEmail function. example test cases: user@example.com is true, invalid is false, user@.com is false. run the tests after implementing" |
| Verify UI changes visually | "make the dashboard look better" | "[paste screenshot] implement this design. take a screenshot of the result and compare it to the original. list differences and fix them" |
| Address root causes, not symptoms | "the build is failing" | "the build fails with this error: [paste error]. fix it and verify the build succeeds. address the root cause, don't suppress the error" |
| Scope the task. Specify which file, what scenario, and testing preferences. | "add tests for foo.py" | "write a test for foo.py covering the edge case where the user is logged out. avoid mocks." |
| Point to sources. Direct Claude to the source that can answer a question. | "why does ExecutionFactory have such a weird api?" | "look through ExecutionFactory's git history and summarize how its api came to be" |
| Reference existing patterns. Point Claude to patterns in your codebase. | "add a calendar widget" | "look at how existing widgets are implemented on the home page to understand the patterns. HotDogWidget.php is a good example. follow the pattern to implement a new calendar widget that lets the user select a month and paginate forwards/backwards to pick a year. build from scratch without libraries other than the ones already used in the codebase." |
| Describe the symptom. Provide the symptom, the likely location, and what "fixed" looks like. | "fix the login bug" | "users report that login fails after session timeout. check the auth flow in src/auth/, especially token refresh. write a failing test that reproduces the issue, then fix it" |
Recommended workflow:
- Explore: read /src/auth and understand how we handle sessions and login. also look at how we manage environment variables for secrets.
- Plan: I want to add Google OAuth. What files need to change? What's the session flow? Create a plan.
- Implement: implement the OAuth flow from your plan. write tests for the callback handler, run the test suite and fix any failures.
- Commit: commit with a descriptive message and open a PR.
Let Claude interview you:
I want to build [brief description]. Interview me in detail using the AskUserQuestion tool.
Ask about technical implementation, UI/UX, edge cases, concerns, and tradeoffs. Don't ask obvious questions, dig into the hard parts I might not have considered.
Keep interviewing until we've covered everything, then write a complete spec to SPEC.md.
Claude 的 Design Lead Jenny 分享了在 AI 时代的新设计流程,有几点很好玩:
- Starting from solution first. AI 技术发展太快,很多时候是先有了强大的模型,再看看这东西能用在什么场景里。很多需求是潜在的,所以打开想象力,多做无用的尝试吧。
- Caring ruthlessly about the details. 让一个功能跑起来是廉价的,但打磨细节的迭代是漫长的。Magic is just a lot of hard work.
- Doing something just for the sake of making people smile. 如果一个功能只是为了让用户笑一笑,那么它也是有意义的。
Simply shipping a product that works is no longer enough, everyone can do that, especially now with AI. It's not the differentiator anymore as people expect things to work. What makes a product stand out is the brand, design, how intuitive it is, the overall experience. Taste is what matters.Emil Kowalski, Developing Taste
- 在 AI 时代,做出一个可用的产品已经不重要,品味更重要。
- Learning from the best is the best way to learn.
- 想一想那些作品为什么会吸引自己,不要靠直觉,分析出模式。
- 把模式运用到自己的作品中。不断练习。
skills.sh
Vercel 维护的 skills leaderboard。关于前端性能的 vercel-react-best-practices,和 web design 相关的 skills 热度很高。
我之前有想过为什么没有一个 AI 工具来给现有的 design mockup 提意见,或是直接优化。可能是目前的大模型对于视觉处理的能力还不足够。看起来目前对于 design 和 performance 相关的优化,都是维护一些 best practice critique 来指导 AI 干活。
paper.design
我对 Figma 这样的 design tool 不是很熟悉,但 Figma Make 和 AI 的交互还是原始的 Chatbot,而 Paper 把与 AI 的交互真正放入了设计工具里。我试了几个例子,效果很不错!
我也下载了 pencil.dev,不过还没体验。
lenny-skills
Lenny Rachitsky 公开了他 300 多期访谈播客的脚本,于是有人这些内容做成了 skills,就可以利用 AI 在自己的项目里运用访谈里的精髓了。
loki.build
一键生成 Landing Page 的工具,入口是一句话的 prompt,在生成好初稿之后可以现场改动,支持一键部署和 SEO 优化。有点像 AI 进化版的 Framer。我试了一下,生成的页面挺好看的。