Frontend Design 是 builderio/agent-native 项目提供的产品专属界面设计技能，适用于创建或修改 Agent-Native 应用中任何面向用户的 UI，包括截图反馈、文案与信息密度等场景。
用途与设计原则 该技能围绕用户任务和应用已有的视觉语言进行设计，强调独特界面源自清晰的产品视角，而不是额外装饰，同时要求实现保持可访问与响应式。
选定方向 在开始较大规模的新界面或改版前，需明确使用者身份、其来访目的以及下一步应看到或执行什么，并选择契合产品品牌与领域的视觉方向。常规改动则先检查并沿用现有组件、字体、颜色令牌与间距。若一个屏幕承载两个不相关的主要任务，应拆分工作流或状态，而不是靠增加卡片、标签、控件或说明文案来解决结构不清的问题。
保持首屏聚焦 首屏应显示用户所处位置、当前工作或状态，以及此刻需要的输入或决策，并让一个操作足够明确。稀有、高级、诊断、破坏性与历史性控件应延后到相关菜单或展开项中。每个可见元素都应起到定位、展示内容状态、收集必要输入或促成下一步操作的作用；无用途的元素应移除或隐藏。信息密度应来自有用数据而非多余框架。技能明确不建议添加重复选中导航项的页面标题、标题下的副标题或小标题、内容上方的计数条、设置中的关于部分，以及重复标签的辅助文案，除非用户要求。卡片、面板、标签或设置组只给标题或描述之一。非当前决策所需的解释使用工具提示或渐进披露。用户撰写的描述属于内容，存在时渲染、为空时不渲染。顺序式设置应一次显示一个决策，并给出清晰进度与合理默认值；小编辑用内联行或对话框，多步工作用聚焦流程。
使用应用设计系统 保留现有品牌与主题，优先使用语义颜色令牌与应用字体系统，而非原始调色板颜色或新造视觉体系。强调色与字体处理应有理由，避免无产品目的的通用渐变、玻璃效果、装饰性色块和 hero 区域。标准控件应使用应用本地 UI 适配器；在 Agent-Native 应用中修改共享控件外观前，先检查已配置的设计系统与工具包提供方。实现或组合标准控件时阅读 shadcn-ui，产品专属布局与视觉决策保留在本技能中。在有助于用户理解主题时使用真实或生成图像，不要仅为填充空白添加装饰素材。
协调 UI 与智能体 可重复的直接操作留在领域 UI 中，需要判断、探索或对话的工作交给智能体。若应用有上下文智能体侧边栏，应复用它提供就地帮助，让用户停留在当前工作界面，不要新增第二个自由输入提示框。承诺提供智能体帮助的控件应传递相关上下文；本地确定性行为需如实标注。
交互响应性 用户操作后应立即给出反馈，目标为 100 毫秒；工作无法立即完成时，应在网络往返前确认，并在 400 毫秒内显示聚焦的待处理状态。安全时使用乐观更新，失败后确认或回滚。长时间工作应可见地推进，操作支持取消时提供停止方式。
清晰与无障碍交互 支持键盘使用、可见焦点、可访问名称、可读对比度以及清晰的校验与恢复。对话框和菜单控件应使用应用现有的无障碍原语，而非手写点击外部行为。禁止使用浏览器 alert、confirm 或 prompt 对话框。动效用于阐明状态变化，优先对透明度或变换使用短过渡，尊重减少动态偏好，避免用装饰性入场或长动画延迟内容。内容需适配窄屏与桌面，文本和控件不应溢出容器，固定格式编辑器、看板与工具栏应保持稳定尺寸。
检查结果 确认主要任务与下一步操作足够明显，查看适用的默认、加载、空、错误与成功状态，并检查窄视口，移除任何无助于用户操作或理解状态却与任务竞争的元素。
使用方式与限制 该资料以设计指导原则为主，未提供具体安装命令、代码示例或接口细节；具体使用方式暂未提供。适用场景为 Agent-Native 应用的前端界面设计与改版，不适用于非界面类任务。