前言¶

写一个 React 页面的常规流程是：搭视图骨架、写组件、调样式、起本地服务看效果，改一句再刷新一次。页面本身不算复杂，但往返于代码和预览之间的时间占了大部分。ui-ux-dev 这个 Skill 把这个流程压缩成一句话：描述你要的页面，拿到可运行的 React 代码，并在预览里继续改。下面介绍它是什么、怎么启用、适合用在哪里。

这是什么¶

ui-ux-dev 是一个面向前端页面生成的 Agent Skill，坐标 @zcwl/ui-ux-dev，版本 1.0.0，由「智创未来」发布，来源标记为 enterprise，分类 dev-programming。官方页面给出的定位是一句话：「自然语言生成生产级 React 页面，实时预览迭代」。

它不需要 API Key（官方标签 requires_api_key=false），装上即可用。SkillHub 页面当前显示评分 100000、下载 3921 次。

核心功能¶

官方简介里明确写了两条能力：

1、自然语言生成生产级 React 页面：把页面需求用自然语言描述出来，得到 React 代码。
2、实时预览迭代：生成的页面可以即时预览，并根据反馈继续调整。

官方页面没有进一步展开功能清单。更细的行为，例如支持哪些组件、样式约定、是否生成路由，需要在实际使用中确认。

安装与启用¶

官方页面给出的安装入口是坐标：

@zcwl/ui-ux-dev

需要说明的是，官方页面快照中没有列出具体的安装命令或配置文件字段。该 Skill 基于通用 SKILL.md 格式，通常的做法是把 Skill 目录放进 Agent 的 skills 目录，或在支持 SkillHub 的 Agent 中通过坐标拉取，具体路径以 Agent 自身的说明为准。启用后在对话里直接描述页面需求即可，不需要配置 API Key。

典型用法¶

官方页面没有提供可复现的示例。下面的用法按官方定位示意，不是官方案例：

帮我生成一个产品详情页：顶部轮播图，中间展示参数表格，底部是购买按钮，整体用 Tailwind 样式。

预期结果是 Agent 产出一份可运行的 React 页面并在预览中打开；接着可以继续改，比如「把购买按钮改成悬浮样式」，不需要从头重写。

适用场景与注意¶

适合的场景：

• 需要快速产出页面初稿、再手工调整的前端开发。
• 一次性的活动页、后台列表页这类结构明确的页面。

需要注意的点：

• 官方标注 requires_api_key=false，意味着不依赖外部模型密钥，但要确认所用 Agent 自身已配置模型。
• 生成的是「生产级」起点代码，不是免检成品，样式细节和交互仍需人工过一遍。
• 功能清单以官方页面为准，本页快照信息可能滞后。

结尾¶

ui-ux-dev 的价值在于把「写页面 + 看效果」压缩进一轮对话：描述需求、拿到 React 代码、在预览里继续改。如果你的工作里有大量结构相似、需要快速起稿的页面，值得试一轮。

官方地址：https://api.skillhub.cn/zcwl/ui-ux-dev ，页面：https://www.skillhub.cn/skills/zcwl/ui-ux-dev