正在打开每日关注
正在打开每日关注
通过可切换的多版本原型与逐层反馈,将模糊前端审美收敛为可执行方案。
I built a variant of @mattpocockuk's grilling skill dedicated to frontend and it has improved how I build new apps and components. The general idea: 1. Use /grilling and /prototype as a base 2. Tell Claude to build 5 WILDLY different prototypes 3. Tell Claude to include a picker that lets you switch between each variant live 4. Each round you select your favorite(s) + leave feedback, and Claude will walk down each branch of the design tree, helping you zoom in on your desired design And THEN, I went and added it to /wayfinder, so whenever I make a new map and there's novel frontend work, a ticket is created specifically referencing that /grilling-frontend-prototyping needs to be invoked. This will not be the last time I build a cool skill and add it to Wayfinder; this is a very powerful pattern for planning work. You can find my skill here: https://t.co/4M4QPlfnp1
是什么
这不是一个单纯的 UI 组件库,而是 will-ness-ai/skills 中名为 grill-design 的 Agent Skill,README 说明其旧名为 grilling-frontend-prototyping,面向 Claude Code 与其他 Agent-Skills harnesses。仓库创建于 2026-07-13,最近提交于 2026-08-21,拥有 165 stars,主体语言为 Markdown。它把 /grilling 的逐题决策流程与 /prototype 的低成本实现组合起来:每轮将同一设计问题做成五个差异明显的单文件 HTML 原型,交由人选择和反馈,再逐层收敛。
核心设计
关键交互是右下角可拖拽 picker:用左右箭头切换方案,并在需要时切换 full/empty 等状态;讨论对象从整体视觉缩小到组件组,再到单个组件。Wayfinder 会在新颖前端工作出现时创建引用该 skill 的 ticket,使探索成为规划流程的一部分。截图中的 nutrition.exe 以 Today、Trends、Add-form 等变体展示了从宏观布局到录入细节的比较过程。
关键洞察
它把“我喜欢哪个风格”转化为可操作的并行实验,减少文字描述与 Agent 臆测之间的损耗;HITL 反馈保留了人的审美判断,原型资产又能成为后续实现依据。README 配套的 link/check 脚本把技能目录、agents/openai.yaml 与索引保持一致,外部依赖则明确标注为需另行安装。
边界与风险
五个方案会增加单轮生成成本,也可能制造选择疲劳;picker 只能帮助比较,不能替代真实数据、可访问性、响应式和工程约束验证。README 只描述技能组织与安装检查,没有提供效果指标,因此“改进了开发方式”仍主要是作者经验,不能直接视为普遍结论。