用途
这是一个面向应用内界面（in-app screen）的 UI/UX 技能，处理仪表盘、列表、表格、表单、设置、弹窗等屏幕。它不负责销售页，价格表除外。技能不靠形容词讲“什么算好看”，而是做三件事：在动手前走对顺序、禁止那些一眼就能看出是 AI 生成的界面习惯、用具体数字约束让其余部分自然干净。
主要能力
- 默认以设计师方式工作：先写 brief、说明每个屏幕的主要任务，再给 2–3 个线框图，用户选定后才开始搭建。
- 提供多条工作分支：对比新旧版本、审查现有 UI、保留品牌重做、按技能风格重做、重构、直接搭建（跳过线框图）、先建 design system、修改单个小组件、制作 logo 等。
- 强制先做代码库审计（三层：技术栈、组件、风格），审计是阻塞关卡，未完成不得打开布局文件、不得提布局建议、不得写任何代码。
- 界面状态覆盖：选中、锁定、空、加载、错误、单页、无数据行等；需要看多个状态时并排做静态示例，不做可点击版本。
- 只负责界面：布局、风格、各状态外观；不写处理逻辑（翻页调用什么、改行数跳到哪里、是否写入 URL、调用哪个 API），这些留空 prop 或 handler（如 onPageChange、onConfirm）由用户自行连接。
使用方式
按四个问题依次推进：
- 题目走哪条分支？默认“像设计师一样”。按表格顺序读题，遇到第一个匹配行即停。
- 项目在用什么？自行查找，不要问。审计三层：技术栈（package.json、Tailwind、shadcn、专用库等）、组件（要建的东西是否已存在）、风格（glass、gradient、阴影、颜色、暗色、风格 token）。审计结果用一行报告，即使什么都没找到也要报。
- 想要 UI 长什么样？默认 flat。用户自述风格则照做；审计发现项目有非 flat 风格则跟随项目风格并在交付时说明；其余情况用 flat，不追问。
- 布局：用默认布局，交付时说明一行。
适用场景
应用内屏幕：仪表盘、列表、表格、表单、设置、弹窗、价格表。管理端（订单、产品、文章管理）属于应用内屏幕。
限制
- 未覆盖的 UI 类型：落地页、介绍页、网站首页；面向买家的在线商店（店铺首页、商品页、购物车、结账）；博客（博客首页、文章阅读页）；以及作品集、活动页等类似类型。遇到这类题目会先提示一行，然后仍然照做，但效果可能不如应用内屏幕。
- 不自行编写处理逻辑。
- 不自行安装专用库（图表、日历、表格、虚拟列表）：已有则用，没有则按模板正常搭建，仅在自建成本高时提一句建议，是否安装由用户决定。
- 没有 package.json 时按 HTML/CSS 或 WordPress、PHP、Rails、Django 处理，把 .tsx 模板翻译成 HTML 标签加 class。
- 暗色模式默认不需要。
- 表单输入框默认不带左侧图标，交付时说明一行。
分类
category: design