UI组件生成工具免费版为个人开发者提供常用HTML/CSS组件的快速生成能力,覆盖表单、表格、卡片、模态框、导航栏等基础组件。核心能力: - 表单组件生成(输入框、选择器、复选框) - 表格组件生成(基础表格、带样式表格) - 卡片组件生成(信息卡片、产品卡片) - 模态框组件生成(基础弹窗) - 导航栏组件生成(顶部导航) 适用场景: - 个人项目快速搭建页面原型 - 学习HTML/CSS组件结构 - 快速生成可运行的单文件HTML组件 差异化:免费版聚焦个人开发者的基础组件需求,输出单文件HTML
Coding
UI/UX开发工具免费版
Try it面向个人开发者的自然语言驱动React页面生成工具,通过CDN方式零构建运行, 内置截图视觉审查循环,支持快速原型迭代。核心能力: - 自然语言描述生成React页面(CDN零构建) - 项目配置与偏好管理 - 截图视觉审查与迭代修复 - 基础设计原则自动应用 - 图片转WebP格式优化 - 静态文件导出 适用场景: - 个人开发者快速生成落地页原型 - 独立项目单页面快速开发 - 设计概念验证与视觉迭代 差异化:免费版聚焦单页面快速生成与视觉审查,使用CDN方式零构建, 适合个人快速原型
What it does
面向个人开发者的自然语言驱动React页面生成工具,通过CDN方式零构建运行, 内置截图视觉审查循环,支持快速原型迭代。核心能力: - 自然语言描述生成React页面(CDN零构建) - 项目配置与偏好管理 - 截图视觉审查与迭代修复 - 基础设计原则自动应用 - 图片转WebP格式优化 - 静态文件导出 适用场景: - 个人开发者快速生成落地页原型 - 独立项目单页面快速开发 - 设计概念验证与视觉迭代 差异化:免费版聚焦单页面快速生成与视觉审查,使用CDN方式零构建, 适合个人快速原型
The skill document
UI/UX开发工具 - 免费版
概述
UI/UX开发工具免费版是一款面向个人开发者的自然语言驱动React页面生成工具。通过描述需求即可生成生产质量的React页面,采用CDN方式零构建运行,内置截图视觉审查循环,支持桌面端和移动端的快速迭代. 免费版聚焦单页面快速生成,自动应用布局、排版、配色、响应式等设计原则,适合个人项目的快速原型开发和概念验证.
核心能力
1. 自然语言生成React页面
通过CDN方式加载React,无需构建步骤,直接生成可运行的HTML页面:
输入格式
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| input | string | 是 | UI/UX开发工具免费版处理的输入数据或指令 |
| options | object | 否 | 附加配置选项,如模式选择、格式偏好等 |
| callback_url | string | 否 | 异步处理完成后的回调通知URL |
<!DOCTYPE html>
页面标题
com/react-dom@18/umd/react-dom.production.min.js">
com/@babel/standalone/babel.min.js">
处理: 解析自然语言生成React页面的输入参数,完成核心逻辑,返回结构化响应. 输出: 返回自然语言生成React页面的响应数据,包含状态码、结果和日志.
- 执行此能力时使用
input_params参数,支持创建/查询/导出操作
2. 项目配置管理
每个项目使用JSON文件管理配置:
{
"name": "my-landing-page",
"preferences": {
"style": "minimal",
"font": "Inter",
"primary_color": "#2563EB",
"dark_mode": false
},
"design_system": {
"max_width": "max-w-6xl",
"spacing_scale": "tailwind-default",
"border_radius": "rounded-lg"
},
"pages": ["landing"]
}
处理: 解析项目配置管理的输入参数,完成核心逻辑,返回结构化响应. 输出: 返回项目配置管理的响应数据,包含状态码、结果和日志.
- 执行此能力时使用
input_params参数,支持创建/查询/导出操作
3. 截图视觉审查
生成页面后,通过截图工具进行视觉审查并迭代修复:
# 桌面端截图审查(1400x900)
bash （请参考skill目录中的脚本文件） "http://localhost:5174/my-project/landing/" /tmp/landing-review.png 1400 900
# .
# 移动端截图审查(390x844)
bash （请参考skill目录中的脚本文件） "http://localhost:5174/my-project/landing/" /tmp/landing-mobile.png 390 844
处理: 解析截图视觉审查的输入参数,完成核心逻辑,返回结构化响应. 输出: 返回截图视觉审查的响应数据,包含状态码、结果和日志.
- 执行此能力时使用
input_params参数,支持创建/查询/导出操作
4. 图片WebP转换
将用户提供的图片转换为WebP格式以优化性能:
# 转换图片为WebP(默认质量80)
bash （请参考skill目录中的脚本文件） input.png output.webp 80
# .
# Hero横幅图片(质量85)
bash （请参考skill目录中的脚本文件） hero.jpg hero.webp 85
# .
# 缩略图/图标(质量70)
bash （请参考skill目录中的脚本文件） icon.png icon.webp 70
处理: 解析图片WebP转换的输入参数,完成核心逻辑,返回结构化响应. 输出: 返回图片WebP转换的响应数据,包含状态码、结果和日志.
- 执行此能力时使用
input_params参数,支持创建/查询/导出操作
5. 自动应用设计原则
生成的页面自动遵循以下设计原则:
| 原则类别 | 规则 |
|---|---|
| 布局间距 | 使用Tailwind标准间距(4/6/8/12/16/24),最大宽度max-w-5xl或max-w-6xl |
| 排版层次 | h1最大,最多3-4种字号,行宽65-75字符,加粗标题+常规正文 |
| 色彩对比 | WCAG AA标准4.5:1,最多1主色+1强调色+中性色 |
| 响应式 | 移动优先390px,断点sm/md/lg,触摸目标44x44px |
| 组件交互 | SVG图标(非emoji),悬停反馈,150-200ms过渡,可见焦点环 |
| 性能 | WebP图片,懒加载,aspect-ratio防布局偏移 |
处理: 解析自动应用设计原则的输入参数,完成核心逻辑,返回结构化响应. 输出: 返回自动应用设计原则的响应数据,包含状态码、结果和日志. 能力覆盖范围：本skill的核心能力覆盖以下场景关键词：零构建、含截图审查循环、适合个人快速原型、面向个人开发者的、自然语言驱动、页面生成工具、方式零构建运行、内置截图视觉审查、支持快速原型迭代、核心能力、自然语言描述生成、项目配置与偏好管、截图视觉审查与迭、基础设计原则自动、格式优化、静态文件导出等。这些关键词对应description中声明的使用场景,均已在上述能力点中提供对应的操作支持.
使用场景
场景一:快速生成产品落地页
开发者需要为一个新产品快速生成落地页原型. 工作流程:
- 确定项目名称:"ProductLaunch"
- 确认偏好:极简风格、Inter字体、蓝色主色
- 确定页面slug:"landing"
- 描述内容:Hero区+功能特性+定价方案+CTA
- 生成React页面并截图审查
# 启动本地服务
bash （请参考skill目录中的脚本文件） 5174
# .
# 生成页面后截图审查
bash （请参考skill目录中的脚本文件） "http://localhost:5174/ProductLaunch/landing/" /tmp/review.png 1400 900
场景二:个人作品集页面
设计师需要快速生成个人作品集展示页面. 设计要点:
- 使用max-w-4xl控制内容宽度
- 卡片网格展示作品(grid-cols-1 md:grid-cols-2)
- 深色背景(bg-slate-900)配合分层暗色
- 图片懒加载+WebP格式
场景三:活动推广页面
为一次线上活动生成推广页面,包含倒计时和报名表单.
不适用场景
以下场景UI/UX开发工具免费版不适合处理：
- 3D建模和动画制作
- 照片级写实渲染
- 手绘原创插画
触发条件
、品牌视觉时使用。不适用于非本工具能力范围的需求.
快速开始
- 阅读## 核心能力章节了解skill功能
- 按## 依赖说明配置环境
- 执行所需能力对应的命令
- 参考## 错误处理章节处理异常
- 查看## FAQ解答常见疑问
首次设置
# 检查端口配置(默认5174)
# 运行首次设置脚本
bash （请参考skill目录中的脚本文件） 5174
# .
# 验证服务启动
curl http://localhost:5174/
单页面生成流程
# 第1步:创建项目目录
mkdir -p serve/my-project/landing
# .
# 第2步:创建项目配置
cat > serve/my-project/project.json << 'EOF'
{
"name": "my-project",
"preferences": {
"style": "modern",
"font": "Inter",
"primary_color": "#2563EB"
},
"pages": ["landing"]
}
EOF
# .
# 第3步:生成React页面到 index.html
# (Agent根据需求生成页面代码)
# .
# 第4步:截图审查
bash （请参考skill目录中的脚本文件） "http://localhost:5174/my-project/landing/" /tmp/review.png 1400 900
# .
# 第5步:移动端审查
bash （请参考skill目录中的脚本文件） "http://localhost:5174/my-project/landing/" /tmp/mobile.png 390 844
响应解析: 完成完成后,查看输出响应确认任务状态。成功时输出包含解析摘要和响应数据;失败时根据错误信息排查问题,查阅错误解析章节获取恢复步骤.
示例
项目目录结构
serve/
├── my-project/
│ ├── project.json # 项目配置
│ ├── assets/ # 图片资源
│ │ ├── logo.webp
│ │ └── hero.webp
│ ├── landing/
│ │ └── index.html # React页面(CDN)
│ └── about/
│ └── index.html # 关于页面
免费版与专业版功能对比
| 功能项 | 免费版 | 专业版 |
|---|---|---|
| 页面生成 | 单页面 | 多页面项目管理 |
| 项目配置 | 基础JSON | 完整设计系统持久化 |
| 截图审查 | 桌面+移动 | 多分辨率+自动化循环 |
| 图片处理 | WebP转换 | 批量转换+优化报告 |
| 导出 | 静态文件 | Zip打包+独立部署 |
| 设计系统 | 基础原则 | 完整设计系统引用 |
| 迭代流程 | 手动反馈 | 自动化审查+修复 |
| 适用对象 | 个人开发者 | 团队/代理机构 |
最佳实践
1. 每步操作都告知用户
在生成过程中,每个操作步骤都应向用户报告进度:
-> 正在读取项目配置.
-> 正在确认页面slug.
-> 正在生成React页面代码.
-> 正在运行截图审查.
-> 桌面端审查完成,发现3个问题.
-> 正在修复问题.
-> 移动端审查完成.
-> 页面已就绪,预览地址:http://localhost:5174/my-project/landing/
2. 桌面+移动双端审查
每次生成页面后,至少进行一次桌面端和一次移动端审查:
# 桌面端(1400x900)
bash （请参考skill目录中的脚本文件） "" /tmp/desktop.png 1400 900
# .
# 移动端(390x844)
bash （请参考skill目录中的脚本文件） "" /tmp/mobile.png 390 844
错误处理
| 错误 | 正确做法 | 处理方式 |
|---|---|---|
| 文字触碰屏幕边缘 | 移动端最小px-4内边距 | 对照依赖说明章节逐项验证配置项,确认环境变量已正确设置后执行ping命令测试网络连通性,检查防火墙和代理设置连接后重新执行命令 |
| emoji用作图标 | 使用SVG图标 | 对照依赖说明章节逐项验证配置项,确认环境变量已正确设置后执行ping命令测试网络连通性,检查防火墙和代理设置连接后重新执行命令 |
| 纯黑背景 | 使用分层暗色(bg-900 > bg-800) | 对照依赖说明章节逐项验证配置项,确认环境变量已正确设置后执行ping命令测试网络连通性,检查防火墙和代理设置连接后重新执行命令 |
| 无悬停状态 | 添加颜色/阴影过渡 | 对照依赖说明章节逐项验证配置项,确认环境变量已正确设置后执行ping命令测试网络连通性,检查防火墙和代理设置连接后重新执行命令 |
| 圆角不一致 | 统一rounded-lg | 对照依赖说明章节逐项验证配置项,确认环境变量已正确设置后执行ping命令测试网络连通性,检查防火墙和代理设置连接后重新执行命令 |
| 移动端字号溢出 | 测试390px宽度 | 对照依赖说明章节逐项验证配置项,确认环境变量已正确设置后执行ping命令测试网络连通性,检查防火墙和代理设置连接后重新执行命令 |
| 缺少viewport meta | 添加meta viewport标签 | 对照依赖说明章节逐项验证配置项,确认环境变量已正确设置后执行ping命令测试网络连通性,检查防火墙和代理设置连接后重新执行命令 |
| 移动端无汉堡菜单 | 包含移动导航菜单 | 对照依赖说明章节逐项验证配置项,确认环境变量已正确设置后执行ping命令测试网络连通性,检查防火墙和代理设置连接后重新执行命令 |
4. 图片优化报告
转换图片后,向用户报告压缩效果:
-> 图片转换完成:
logo.png: 1.2MB -> 340KB (减少72%)
hero.jpg: 3.5MB -> 890KB (减少75%)
icon.png: 45KB -> 12KB (减少73%)
常见问题
Q1: 免费版支持多页面项目吗?
免费版支持在项目目录下创建多个页面文件夹,但缺少专业版的多页面设计系统持久化和批量管理功能。每个页面需独立生成和审查.
已知限制
CDN方式无需构建步骤,直接在浏览器中运行。限制包括:无法使用npm包、Babel转译有性能开销、不适合生产环境大规模部署。适合原型开发和概念验证.
Q3: 截图审查如何工作?
通过截图脚本捕获页面渲染结果,Agent通过图像分析工具检查视觉问题(布局错位、对比度不足、响应式问题等),然后修复并重新截图,形成迭代循环.
Q4: 可以使用自定义字体吗?
可以。在HTML头部通过Google Fonts或本地字体文件引入。建议使用Inter(无衬线UI)配合JetBrains Mono(等宽代码).
Q5: 如何导出页面?
免费版生成的HTML文件是独立的静态文件,可直接打开或通过任意静态服务器提供服务。专业版支持Zip打包导出整个项目.
- 当前为免费版本,如需完整功能请升级到付费版获取全部能力
依赖说明
运行环境
- Agent平台: 支持SKILL.md的任意AI Agent(Claude Code / Cursor / Codex / Gemini CLI等)
- 操作系统: Windows / macOS / Linux
- 浏览器: Chrome/Chromium(用于截图审查)
- 本地服务器: Python http.server或Node.js静态服务器
依赖详情
| 依赖项 | 类型 | 是否必需 | 获取方式 |
|---|---|---|---|
| Bash | 运行时 | 必需 | 系统内置(macOS/Linux)或Git Bash(Windows) |
| Chrome/Chromium | 截图工具 | 必需 | 浏览器安装 |
| cwebp | 图片转换 | 推荐 | libwebp工具包 |
| LLM API | API | 必需 | 由Agent内置LLM提供 |
| CDN资源 | 前端库 | 必需 | 自动从CDN加载 |
CDN加载的前端库:
- React 18 (react.production.min.js)
- ReactDOM 18 (react-dom.production.min.js)
- Babel Standalone (babel.min.js)
- Tailwind CSS (cdn.tailwindcss.com)
安装cwebp(WebP转换工具):
# macOS
brew install webp
# .
# Ubuntu/Debian
sudo apt install webp
# .
# Windows
# 下载 libwebp 并添加到PATH
API Key 配置
本skill基于Markdown指令规范和本地脚本运行,无需额外API Key。页面生成由Agent内置LLM驱动,截图和图片转换为本地工具执行。CDN前端库通过公网加载,无需配置.
可用性分类
- 分类: MD+EXEC(纯Markdown指令,部分功能需exec命令行执行)
- 说明: 基于Markdown的AI Skill,通过自然语言指令驱动Agent完成操作。页面生成后需要exec工具执行截图脚本和图片转换脚本。本地服务需通过Bash启动,截图功能依赖Chrome/Chromium浏览器.
输出格式
{
"success": true,
"data": {
"result": "UI/UX开发工具免费版处理结果",
"execution_time": "0.5s",
"metadata": {
"version": "1.0",
"processor": "ui ux dev"
}
},
"execution_log": ["解析输入参数", "执行核心处理", "格式化输出结果"],
"error": null
}
Related skills
UI/UX设计助手免费版为个人开发者提供基础的UI/UX设计指导,涵盖布局方向、配色系统、排版规模与设计令牌输出。核心能力: - UI概念与布局方向快速建议 - 配色系统生成(主色/辅色/语义色) - 排版规模(字号/行高/字重)建议 - 基础设计令牌输出(ASCII友好) - 响应式断点推荐 适用场景: - 个人项目界面设计快速起步 - 学习UI/UX设计基础概念 - 生成基础设计令牌用于CSS变量 差异化:免费版聚焦个人开发者的基础设计需求,输出ASCII友好令牌
编排完整API开发生命周期：设计、规格生成、脚手架、测试、文档与版本部署。Use when 需要代码生成、编程辅助、调试测试、开发部署时使用。不适用于无明确技术栈的模糊需求。适用于独立开发者、企业团队和自动化工作流场景。支持中文交互，无需复杂配置即开即用。输出结果可直接使用，减少二次加工成本。提供结构化输出和错误处理机制。
1 installs
全流程游戏开发向导,涵盖设计、编码、测试、发布与运营基础。Use when 需要代码生成、编程辅助、调试测试、开发部署时使用。不适用于无明确技术栈的模糊需求。适用于独立开发者、企业团队和自动化工作流场景。支持中文交互，无需复杂配置即开即用。输出结果可直接使用，减少二次加工成本。提供结构化输出和错误处理机制。
3 installs
面向个人开发者的前端界面设计助手，产出有辨识度的高质量页面。Use when 需要设计创作、UI设计、海报制作、品牌视觉时使用。不适用于3D建模和动画制作。适用于独立开发者、企业团队和自动化工作流场景。支持中文交互，无需复杂配置即开即用。输出结果可直接使用，减少二次加工成本。提供结构化输出和错误处理机制。
面向设计团队和企业项目的专业级UI/UX设计决策引擎,涵盖全部10个设计域、 10种技术栈、设计系统持久化、页面级覆盖、批量搜索等高级能力。核心能力: - 全部10个设计域搜索(product/style/typography/color/landing/chart/ux/react/web/prompt) - 10种技术栈实现指引(html-tailwind/react/nextjs/vue/svelte/swiftui/react-native/flutter/shadcn/jetpack-compose) - 设计系统持久化:...
1 installs