自然语言 React UI 设计师
将以下提示词粘贴到你的 AI 对话框中：
请根据 https://skillhub.cn/install/skillhub.md，安装 @zcwl/ui-ux-dev。
技能介绍
要解决什么问题
很多团队需要快速产出可对外展示的 React 落地页，但不想先搭构建链、配设计系统，再反复对齐间距与移动端细节。纯手写 HTML 容易变成「div 汤」、emoji 当图标、移动端文字贴边；交给模型一次性生成又缺少可验证的视觉闭环。
技能如何工作
ui-ux-dev 把流程固定成可重复的八步：立项（project.json）、偏好与设计系统入库、页面 slug、按 Design Principles 生成 CDN 版 React 页（无构建步骤）、桌面 + 390px 移动截图审查并修稿、给出可访问的 live URL 迭代、用户图片转 ../assets/*.webp、最后 zip 导出可独立打开的页面。
生成侧强调工程化细节：Tailwind 间距刻度、max-w-prose 行宽、WCAG AA 对比度、移动优先与汉堡导航、交互元素 transition 与 focus ring、语义化标签与组件拆分（useState 管 tabs/modal 等）。原型占位可用 picsum.photos / placehold.co，正式素材走 scripts/convert-image.sh 并汇报压缩率。
适用边界与注意点
- 适合单页/营销页/活动页类需求，不是完整设计工具链或组件库文档站。
- 首次使用需在
TOOLS.md配置 UI Designer（端口、scripts/setup.sh）；未配置时应先完成 setup。 - 质量依赖截图审查循环：至少一轮桌面 + 一轮移动后再交付；迭代时应对用户逐步播报当前动作（读配置、写 HTML、截图等），避免黑盒感。
- 图标必须用 SVG，不要用 emoji（无头浏览器下不稳定）。
使用场景
- 活动上线前用自然语言描述模块与配色，生成 CDN React 单页并在 390px 宽度下截图修稿
- 同一项目下按不同 slug 新增或覆盖页面，并在 project.json 里保留风格与设计系统
- 用户提供 hero 图后写入 assets，经 convert-image 转 webp 再嵌入页面并重新走审查循环
- 交付前将项目目录打包为 zip，recipient 仅用静态服务器打开 index.html 即可预览
适合人员
- 接营销落地页外包的前端，需要 Tailwind 间距、WCAG 对比度与 SVG 图标而非 emoji
- 小团队全栈在缺设计稿时，要用对话快速产出可 live 预览的单页并多轮改文案与布局
- 增长/运营负责频繁改版的活动页，希望每步操作有进度说明并拿到截图与可访问 URL
- 需要在无构建链环境下演示 React 交互区块（tabs、modal）的产品或售前同学
相关技能
为工程师提供 Java Spring Boot 后端开发指导，覆盖 REST API、数据库、安全、微服务、测试、部署与常见排障。
为 Agent 提供纯 Python 截图工具，支持全屏、窗口、滚动截图，并能进行标注、马赛克模糊和屏幕取色。
基于 Chrome CDP 执行云表 Web 登录，要求外部传入 baseUrl、username、password，并验证进入已登录首页。
输入主题后自动创作内容，按设计系统生成闪卡、学习、测试、索引与进度页面，并输出可部署的知识学习网站。