Parsewise UI 组件库
组件库
技能的界面由现成的积木拼成。 卡片、开关、图库和表单 — 全在对话里。每一块都是一个 data 属性：你在 drawer.html 里写好标记，挂件自己把组件装出来。
个组件
卡片、选择、输入、媒体
个事件
在抽屉宿主上
行 CSS
只有 Tailwind 和 data 属性
观察器
MutationObserver 捕捉动态变化
开箱即用的组件
你写标记，挂件负责组装。 组件以 data 属性声明，并通过 MutationObserver 处理：静态标记和 JS 动态创建都支持。用户事件会派发到抽屉宿主上。
卡片
上图下文的竖版，或应用商店风格的横版：标题、文字，加一个圆形或圆角图标。
data-card · data-card-horizontal单选开关
带滑动指示的胶囊开关，支持 N 个选项。用 radio-switch--disabled 类禁用。
data-radio-switch选择网格
两到三列的可点单元格：标签、数值、说明。同一时间只有一个选中。
data-select-grid选择列表
带标题和描述的行 — 单列排布的互斥选项。
data-select-list自动补全
通过后端建议代理提供下拉候选的输入框。候选列表在文档流中，会把下方内容顶开。
data-suggest-input输入框与表格
现成的输入框样式类，配 Tailwind 结果网格 — 间距本身就是视觉分隔。
input-wrapper · input-field表情评分
三个动效表情 — 差、一般、很好。用于快速收集反馈和评价。
data-emoji-rate动作按钮
带自动品牌图标的链接（Telegram、WhatsApp、拨号），或带 Heroicons 图标的回调按钮。
data-action图库
带 Fancybox 灯箱的缩略图网格。链接可以是直链，也可以走包内资源 {{asset:…}}.
data-gallery明细列表
汇总卡：带分隔线的「标签 → 值」行。用于提交前确认。
data-detail-list文件上传
照片和视频的拖放区，通过预签名 URL 上传到对象存储。
data-file-upload系统内已对齐
样式隔离在 Shadow DOM 中。 你只写 Tailwind，品牌色由 skill-primary 系列工具类提供，输入框和开关的高度也事先对齐过。
个 skill-primary 工具类
text, bg, ring, border, fill
控件高度
输入与选择高度一致
单个资源上限
PNG, JPG, WebP, SVG, GIF
个包内文件
自动上传到存储
组件实战
现成的技能就是用这些积木拼的。 问答、内容增强、计算器、评价表 — 每一个都从组件库取件，并直接在对话里跑。
技能跑在沙箱里
通往技能的两条路
可视化编辑器是无代码那条路。 而组件加 .skill 格式，本身就是给模型的一份现成规范：交给大模型，它就能按需求拼出一个可交互的技能。
开发者的问题
在 drawer.html 里用 data 属性： <div data-radio-switch data-options="…">。挂件通过 MutationObserver 处理它 — 静态标记和 JS 动态创建都支持。
搭一个自己的技能
从文件到被调用。 组件库、.skill 格式和技能编辑器在免费套餐里就能用 — 无需银行卡。
告诉我们你的需求
各类型项目逐年增长
MVP、重构、AI 与运维——累计
工作室在关键维度上的画像
速度、质量、透明、工程
调研、设计与研发相互交叠
并行推进——不是瀑布