UI Design System
build dev

Prompt

展示可复用提示词或任务入口。中文惯用名:提示词入口;可引用素材库提示词资产 ID。
稳定本期新增已接入

元信息

字段值
规范 IDcomponent.prompt
名称Prompt
二级分类AI 与会话(ai-chat)
用途展示可复用提示词或任务入口
描述中文惯用名:提示词入口;可引用素材库提示词资产 ID。

预览

静态结构:卡片按钮(border p-3 hover:border-primary)= 主色前缀图标 + 标题(font-medium)+ 描述(text-xs muted);点击经 onSelect 传出 value(缺省取 title)。

DSL 结构

DslNode
{
  "type": "Prompt",
  "props": {
    "title": "生成月报",
    "description": "汇总本月销售、库存与客服数据",
    "icon": "chart",
    "value": "generate-monthly-report"
  }
}

何时用

何时使用

  • 展示可复用提示词或任务入口:提示词库、常用任务卡。

何时不用

  • 轻量追问:使用 Suggestion。
  • 会话空状态整体:使用 Welcome。

变体

变体视觉形态适用场景
带图标主色图标 + 标题 + 描述任务入口
禁用opacity-50不可用任务

API 属性

属性类型默认值说明
titlestring—提示词标题
descriptionstring—补充描述
iconstring—前缀图标名(Icon 白名单)
valuestringtitle点击传出值
disabledbooleanfalse禁用
onSelectevent—选择事件(${event})
className / stylestring / CSSProperties—通用:根节点 class 合并 / 内联样式

使用规范

  • 标题动宾短语,描述说清产出物。

正例

  • ✓ 提示词库:Prompt 卡片点击填入输入框。

反例

  • ✕ 把 Prompt 当内容卡片展示信息(它是操作入口)。

Design Token 映射

不适用:组件 tokenRefs 为空:样式 Token 数据尚未接入,三层映射(Primitive → Semantic → Component)待样式 Token 接入后回填。