萬安云 个人中心
萬安云 › 技能广场 › UI Component Specifier S9131
AIXX SKILL · 编号 S9131 · 萬安品控 100 分

Creates precise UI component s…

Creates precise UI component specs for developers and testers, with element states and accessibility annotations.

$1.99 一次买断 永久使用 · 永久维护迭代 分钟级交付 商用素材 · 文件可下载
WHAT YOU GET

UI Component Specifier能帮你做什么

不说虚话——S9131 交付的是能直接拿去用的成品,不是“AI 能做”的空话。

◈
说清就开工

用大白话交代任务,它会先确认关键细节再动手,不瞎猜。

◆
一次到位

输出带结构与说明,拿来就能用,不用再自己整理格式。

▦
可组合

与 AIXX 其他技能叠加使用,组成你自己的工作流。

✎
越用越顺手

把常用要求沉淀成一句话模板,下次直接复用。

REAL OUTPUT

真实任务实跑产出

下面是真实任务由 S9131 实际生成的内容节选——不是宣传文案,是它真的干出来的活。

✦ 示例作品

UI Component Specifier · 实跑样例

任务:帮我把电商App购物车页面拆成组件规格:商品卡片含图100×100、数量步进器1-99、删除按钮,输出给开发者的字段、状态和交互说明。

# 购物车页面组件规格说明书

一、商品卡片组件(CartItemCard)

字段定义

| 字段 | 类型 | 说明 |

|---|---|---|

| goodsId | String | 商品唯一ID |

| skuId | String | SKU ID(区分规格) |

| imageUrl | String | 商品图 |

| title | String | 商品名称,超2行省略 |

| specs | String | 规格描述(如“黑色/XL”) |

| price | Number | 实际单价 |

| originPrice | Number | 原价(可选,划线展示) |

| stock | Number | 库存 |

| quantity | Number | 购买数量 |

| checked | Boolean | 选中状态 |

| status | Enum | NORMAL / SOLD_OUT / OFF_SHELF |

状态说明

  • 默认态:正常展示,可勾选、可编辑
  • 失效态:售罄/下架时置灰,禁止勾选与改数量,保留删除入口
  • 库存紧张态:库存 < quantity 时提示“仅剩N件”,步进器上限锁定为库存值
  • 选中态:勾选框变化触发合计金额与结算按钮联动

交互说明

  • 图片:100×100px,点击跳转商品详情页
  • 勾选框:点击切换,需防抖(300ms内不重复提交)
  • 卡片左滑:露出删除按钮(备选交互),点击弹二次确认

---

二、数量步进器组件(QuantityStepper)

字段

  • value:当前数量(1-99)
  • min = 1,max = min(99, stock)

状态

  • value = min 时,“−”按钮置灰禁用
  • value = max 时,“+”按钮置灰禁用,toast提示上限原因(库存不足/超出限购)

交互

  • 点击“−”到1再点击:不删除商品,仅禁用(或按需求改为弹删除确认,需产品确认)
  • 支持长按连续增减(步进间隔约300ms)
  • 支持点击数字唤起键盘直接输入,输入值越界时自动纠正为边界值
  • 数量变更后防抖约500ms再调接口,返回失败时回滚显示旧值并toast报错

---

三、删除按钮组件(DeleteButton)

字段

  • cartItemId / goodsId + skuId:删除目标标识

状态

  • 默认态:文字或图标按钮
  • 确认态:弹窗“确认删除该商品?”(确认/取消)
  • Loading态:请求中禁用重复点击

交互

  • 点击 → 二次确认 → 调删除接口 → 成功后卡片移除(建议带约200ms过渡动画)
  • 支持批量删除入口(配合多选模式),批量时展示选中商品数

---

四、通用约束

  • 所有接口失败需有降级提示与状态回滚
  • 数量/勾选变更需同步父级合计金额、全选状态、结算按钮可用性
  • 空购物车展示空态页(插画+去逛逛按钮)
WHY S9131

三种做法,一比就知道

再招一个人自己摸索萬安云 S9131
价格月薪数千起反复试错数小时$1.99 / 次
交付周期招聘+培训数周质量不稳定分钟级
独特性流动风险无人复核按你的任务从零生成
改稿迭代加钱,走流程反复试错说话就能迭代
GET STARTED

两步,让它开工

不用碰终端——你只管对 agent 说话,跑命令的活它来。

1
第一步 · 装AIXX

对你的 agent 说:

帮我运行npx aixxai install ┄┄┄┄┄┄
2
第二步 · 装技能

对你的 agent 说:

安装编号S9131
Codex
CodexOpenAI
Claude Code
Claude CodeAnthropic
OpenClaw
OpenClawOpen Source
Qwen
QwenAlibaba
Doubao
DoubaoByteDance
WorkBuddy
WorkBuddyTencent Cloud
ZCode
ZCodeZ.ai
···
更多AND MORE

以上 Agent 均可接入萬安云 · OpenAI 兼容接口 · 装好 AIXX 即可调用全部技能

FAQ

你可能想问

UI Component Specifier怎么安装使用?

三步:终端执行 npx aixxai 安装 AIXX;对您的 AI 说「安装编号 S9131」;交代任务背景与要求,UI Component Specifier即刻开工。

UI Component Specifier多少钱?怎么付费?

$1.99 一次买断(参考价,实际以平台标价为准)——永久使用,无订阅、无月费;该技能由萬安永久维护迭代,更新对已购用户免费。

产出内容能商用吗?

可以。产出为普通数字文件,归购买者使用,可用于商业场景。

具体能帮我做什么?

把你手头这件重复、费时、有固定套路的活交给它——先描述任务和背景,它会确认要点后直接产出成品,不满意可以继续改。

输出质量不稳定怎么办?

在指令里补充背景、受众与格式要求(例如“面向中小企业主、300 字以内、分三点”);要求越具体,产出越稳。

PRICING

一价买断,没有套路

一次买断
$1.99/技能

永久使用 · 无订阅无月费 · 永久维护迭代

现在,把UI Component Specifier装进你的 AI

一行命令,几秒接入萬安云

npx aixxai
html>