
Pinch 结账
电商结账模块
Claude Sonnet 5.5
5 · 设计案例
查看结账、登录引导、空间预订与文件上传的完整流程,参考字段分组、步骤推进、输入校验和失败恢复,而不只是排列整齐的输入框。
用真实输入走完流程,故意留下必填项并触发一次错误。观察标签是否一直可见、错误是否靠近对应字段、返回上一步后输入是否保留,以及完成状态是否明确。
安装与使用指南 →
电商结账模块
Claude Sonnet 5.5

登录与新手引导
GPT 6.1 Sol

录音棚预约网站
GPT 6.1 Sol

民宿详情与预订
GPT 6.1 Sol

文件分享工具 · 上传模块
Claude Fable 5.1
避免把手机 App 做成“压窄的桌面网页”。学习用 390×844 真实视口与多屏并排页(screens.html)设计冲浪预报、打车、数字银行与冥想等移动界面。
Agent 指南 · Claude Code在 Claude Code 中安装 Oil UI Skill,用真实任务提示词、多方向同屏对比和浏览器截图走查,设计网页、移动 App 与交互组件。
设计方法 · 真实截图与盲审光看 JSX 和 CSS 代码找不出文字截断、对比度发灰和版面头重脚轻。详解 Oil UI 如何通过 1440px/390px 真实浏览器截图、200% 局部放大、色块结构图和无上下文子 Agent 盲审把控界面质量。