Invo

Product Designer & Builder丨Turning ideas into products with design, code & AI.

[Invo @Invouxly]

@Fei2411 要是 bot 的头像是鲸鱼娘就好了🤓

[Invo @Invouxly]

@SolutionB2u Tried it! I think I get the flash now. On press the indicator goes frosted, so the icon under it dims for a moment. Once it settles back to white, the icon pops back too. That dim then pop is what reads like a blink. Still love the feel tho

[Invo @Invouxly]

@aaapinen @trysilt Love this. Small tip: rem bounds instead of px. Same look by default, it just respects folks who set a bigger font size :D

[Invo @Invouxly]

@eze_is_1 @mrdoob @JulianGarnier 好奇你做这个花了多少额度

[Invo @Invouxly]

@withAnimationUI Tank tread loading bar lol. Love that it lands on a green Action Done at the end too

[Invo @Invouxly]

@yevkollab @shridharathi that's the truth :o

[Invo @Invouxly]

一些 vibecoding 的 UI 界面处理的小技巧

[Zayn Hao @ZaynHao]

分享 10 条优化界面 UI 的提示词，其中一些可能带有个人经验，发送给你的 Codex 或 Claude Code，立即提升 UI 视觉设计：

1. 不要使用中点 “·”作为文案的分隔符。如果有，移除它。

2. 不要在界面添加冗余的解释性描述文本，这会弄脏 UI 界面，还会浪费用户的注意力。

3. review 界面文案，尽量使其描述符合当前界面面相的人群，容易理解但不要过于口语化，长短适合其功能场景，不要冗余和随意造词。

4. 将页面所有使用的颜色，都换成 Radix UI Colors 的颜色。同时，使用那套颜色的使用规范来优化颜色使用。

5. 优化界面元素与 UI 的对齐效果，尽量做到光学对齐；有嵌套的地方，尽量做到同心圆圆角处理。

6. 如果你需要使用线条或者边框，请使用 0.5px 边框。

7. 尽量减少页面中的元素动画过渡效果，如果一定要添加，7则考虑通常 ease-out，250ms 是个不错的基础设定。

8. 界面的文字大小不要超过 4 种，最好三种。最小可用文字尺寸是 12px。如果不够用，可以考虑使用字重、字体颜色、间距设计来调整页面的关系结构。

9. 尽量减少页面出现需要用户判断才能进行的交互；必须发生时，放在用户本来就打算做选择的地方。同时，重新思考页面中包含的功能和元素，判断信息优先级，使用更有秩序的做法进行组织。

10. 尽量不要随意在页面中使用圆角，阴影，尤其是一个卡片的左边缘带颜色的线条。如果非要使用圆角和阴影，请注意其值的设定，符合其功能场景。

[Invo @Invouxly]

不错，我再给你补一条，英文站数据训练源带来的通病：
11.减少页面中不必要的 Eyebrow（眉题）和 Overline（标题上方的小标签）。不要习惯性地在每个区块的主标题上方添加英文大写的小标题，尤其是与主标题语义重复、仅起装饰作用的内容。只有当 Eyebrow 能够提供主标题未表达的分类、上下文或关键信息时才保留。优先通过字体层级、字重、间距和留白建立清晰的视觉层次，而不是依赖额外的小标题增加设计感。

[Invo @Invouxly]

A button possessed by Venom, right?

[Xitij @exteedesign]

Clauded this in 2 hours

[Invo @Invouxly]

Correct Claude Code once, save it as shared memory, and a separate Codex session can recall it when asked. Small demo, but very useful.

[Akshay 🚀 @akshay_pachaar]

Another insane Jev use case!

Decision models like Jev are making it dramatically cheaper to evaluate what actually happens inside an agent run.

And now there’s an open-source memory layer that puts those evaluations to work, making useful lessons reusable across 20+ agent harnesses:

- Claude Code
- Codex
- Cursor
- OpenCode
- and more.

The project is Beacon, from @asymptotelabs.

GitHub: https://t.co/KNgtyAGf3b

(don't forget to star 🌟)

Here’s what I did in the video below.

1) I gave Claude Code a coding task. It made changes and ran tests while Beacon automatically recorded the session.

2) I had Jev evaluate the run. The first evaluation returned review because I hadn’t provided a correction, so my app saved nothing.

3) I corrected the agent, and it updated its work and reran the tests. Jev evaluated the updated session, and this time the results met my app’s rules for saving a memory.

4) I saved the correction and its supporting evidence as shared memory. Then I opened a separate Codex session and explicitly asked it to read that memory.

Codex recalled the correction from the earlier Claude Code session without me having to explain it again.

Beacon captured the session history. Jev evaluated what was worth keeping, while my app applied the storage rules and saved the lesson.

That correction was now available as context outside the conversation where I first made it.

I cover this build in more detail in the video with Justin, co-founder of Asymptote Labs, alongside moving sessions between agents, creating reusable skills, and detecting security risks across agent activity.

Watch the full video below.

[Invo @Invouxly]

335 lines down to 10 in the demo is the hook. The part that matters is question two: is it already in the repo?

That only pays off if there's something to find. Agents tend to reuse what exists and hardcode what doesn't🤖

[Vox @Voxyz_ai]

The new Ponytail 5 is a complete rewrite. Same request, "add a date picker to the frontend": without it, the agent wrote 335 lines. With it, 𝗷𝘂𝘀𝘁 𝟭𝟬 𝗹𝗶𝗻𝗲𝘀, using the repo's existing Input component and letting the browser supply the calendar.

In the maker's own benchmark, 39 tasks in Claude Code with Opus 5.5, the agent with Ponytail wrote 53% less code, took 41% less time and cost 26% less. It wrote less, yet 𝟵𝟴% 𝗼𝗳 𝗶𝘁𝘀 𝗿𝗶𝘀𝗸𝘆 𝗹𝗼𝗴𝗶𝗰 𝘀𝗵𝗶𝗽𝗽𝗲𝗱 𝘄𝗶𝘁𝗵 𝗮 𝘁𝗲𝘀𝘁, against 68% without.

Before writing code, it reads the parts the change touches, then asks these in order and stops at the first one that holds:
→ Does this have to be written at all?
→ Is it already in the repo?
→ Is the standard library enough?
→ Does the browser or the OS already have it?
→ Can an installed dependency cover it?
→ Can it be one line?
→ If none of that works, write the smallest version that runs, plus one small test if it has logic

Input validation, error handling, security and accessibility never get cut.

Two commands were rebuilt too. /ponytail-review used to look only for code to delete; now it also reads the code your change touches. Rename a field and break a file you never touched, and it catches that. In the maker's tests it found every problem outside the diff, against 78% without the skill. /ponytail-audit runs the same checks across the whole repo and ranks what to fix first.

5.3 also adds a bar above the Claude Code prompt: what the task cost, its tokens, how long it ran, how much existing code it reused, and whether the tests passed (needs Claude Code 2.1.290 or later).

MIT licensed, 172K stars, 8,000+ more this week. To make your agent look for what already exists before it writes, paste these into Claude Code as two separate prompts:
/plugin marketplace add DietrichGebert/ponytail
/plugin install ponytail@ponytail

In Codex, run these two:
codex plugin marketplace add DietrichGebert/ponytail
codex plugin add ponytail@ponytail
Then trust its two hooks in /hooks and start a new thread.

[Invo @Invouxly]

@luinlee 可能训练数据源的问题。没有经过特别的优化的话，这个缺点就不会得到改善，哪怕在下一个版本也区别不大了

[Invo @Invouxly]

@Deethin3251 @Jackywine 这也是为什么现在的 ai 直出的界面经常一言难尽了，只做加法不做减法

[Invo @Invouxly]

@guanmo_ai 从设计的角度来讲，瀑布流很好的把“找”变成了“逛”，图片不用二次处理，一屏放得更多，多尺寸设备空间利用率也更高。现在几乎都成了边刷边发现的内容类产品的必备呈现方式了

[Invo @Invouxly]

@dev_ya @motiondotdev The stack-into-one is such a nice touch. Bulk actions rarely feel this clear🫵

[Invo @Invouxly]

@skywt2003 哈哈哈，刚骂完微信的体验设计，就看到支付宝了
https://t.co/ZhZzwY9DZp

[Invo @Invouxly]

今天分享一个典型反例，微信电脑版内置浏览器的标签页。

只开一个标签时，当前页的激活态是亮色；多开几个，当前页的激活态反而变成深灰色。

这里的设计和体验问题不只是颜色，而是同一个状态用了两套视觉语言。并且界面几乎全白，激活标签本该和下方内容连成一片以保持用户心智一致性，而深灰更像按下或禁用，却也作为一种“激活态”来使用，相当的反直觉。

暂且不提颜色是否符合无障碍规范，试问，组件样式到底看状态，还是看旁边有几个标签？怎么想的？

[Invo @Invouxly]

@randyloop 《Don't Make Me Think》是很经典的一本书了，以后对用户体验的思考和设计将变得越来越重要

[Invo @Invouxly]

@ricouii 确实很漂亮。蓝色和点阵做主视觉，大量用生成式视觉代替传统常用的静态图片，比堆素材更适合开发者产品，保持克制，也传递了品牌调性