嘿，各位，
越来越多的开发者使用代理进行UI工作，它们在很多方面看起来足够可靠。
但在处理复杂网格和数据密集的仪表盘时，事情往往会变得混乱。
当你要求分组、筛选或无障碍功能时，代理通常只会给你一个勉强能用的东西。
但代码很乱，所以你最终要么反复提示以得到正确结果，要么自己清理代码。
这就是我们花大量时间用LyteNyte Skills解决的问题，它可以大幅减少你构建网格/仪表盘所需的时间和令牌。
展示的期权仪表盘是使用Claude Code和LyteNyte Grid Skills构建的。
它功能齐全。
你可以展开、分组、排序和筛选。
它也完全无障碍。
我使用了一个提示：
使用LyteNyte Grid创建一个期权交易仪表盘。data.ts包含期权合约——代码、类型、行权价、到期日、IV和完整的希腊字母。
启用按代码和类型分组行，所有列排序，以及主从行，展开时显示完整的希腊字母细分。使用Vite + Shadcn。默认深色模式。
这种方法效果非常好，因为LyteNyte Grid是声明式的且类型安全。
代理可以配置网格，运行tsc，捕获错误，然后继续。
由于LyteNyte不使用包装器，之后调整或定制输出非常简单。
其他网格是命令式的，带有大量抽象和包装层，使得它们对编码代理不可靠。
因此，与其让Claude耗尽精力试图将UI调整到可用状态，你的代理可以在几分钟内完成大部分工作。
安装Skills：
npx skills add 1771-Technologies/lytenyte
2
8
仪表盘是代理暴露其最弱习惯的地方：它们优化的是在单次截图中看起来完整的东西，而不是密集状态、空状态、键盘使用、排序、分页和权限边界情况。
披露：我在CHANCE AI工作，这正是为什么我认为视觉上下文对代理很重要。一个好的测试是给代理一个真实的仪表盘截图，让它说出它看到的每一个状态，然后让它在代码之前生成一个实现检查清单。如果它跳过了交互规则，它可能会交付一个漂亮但脆弱的网格。