Skill · 界面设计
网页界面设计助手
按产品用途选择界面风格、配色、字体与布局，整理设计系统并辅助前端实现；提供可检索的设计数据和脚本。
统计本站下载按钮点击次数；点击后在新窗口打开网盘。
网页界面设计助手是什么
这是一项辅助 AI 智能体进行界面设计和前端实现的 Skill。你可以说明产品用途、目标用户和页面需求，让它检索设计参考，组织配色、字体、布局和交互建议，再指导页面实现。
它包含可检索的设计数据、脚本与客户端接入资源，适合把“页面再清楚一点、好看一点”转成具体可执行的设计要求。当前包是完整开发源码，接入后仍需要结合真实页面验证。
主要功能
- 按产品用途选风格
- 结合官网、工具、后台或其他产品场景，查找合适的界面风格与表现方向。
- 配色与字体搭配
- 为页面选择主色、辅助色和字体组合，帮助统一标题、正文和不同状态的视觉层级。
- 布局与组件建议
- 围绕页面内容安排导航、区块、卡片与交互组件，形成更具体的实现依据。
- 整理设计系统
- 把颜色、字体、间距、组件和交互规则整理成可复用的设计建议，减少各页风格不一致。
- 交互与可访问性检查
- 辅助排查常见的对比度、点击区域、焦点、状态反馈和响应式问题，实际效果仍需浏览器验证。
- 辅助前端实现
- 通过设计数据与搜索脚本，为智能体编写或修改页面提供参考。不会代替产品需求和代码验收。
适合哪些人
- 正在用 AI 制作官网、落地页、工具页面或管理后台的人。
- 希望把已有页面的风格、排版和组件统一起来的小团队。
- 需要设计参考与实现依据的前端开发者。
下载后怎么开始
- 解压后先读
先读我-中文使用说明.md与source/README.zh.md。 - 搜索脚本需要 Python 3；按官方 CLI 方式接入还需要 Node.js / npm。让智能体先核对环境和客户端类型。
- 保留
source/src/ui-ux-pro-max/下的数据、脚本和模板，以及需要的 CLI 资源。已有同名安装先比较，不直接覆盖。 - 选择一个具体页面需求，先给出设计系统与修改清单，再实现和验证桌面、手机上的实际效果。
可以这样交代需求
我要做一个面向内容创作者的工具目录。请先给出配色、字体、卡片和手机布局建议，再统一首页、列表页和详情页的设计规则。
常见问题
完整 ZIP 能直接上传为 Claude.ai Skill 吗？
不能把这个开发仓库 ZIP 当成单项 Skill 上传包。原项目说明完整仓库包含多项资源，应按所用客户端的官方接入方式准备。
必须懂设计或编程吗？
可以用自然语言描述需求，但仍需要具备本地操作能力的智能体和对应运行环境；修改后的页面需要实际预览与确认。
这个包改了原代码吗？
除中文交付资料外，保留上游源码。为方便 Windows 解压，将 gallery/data/styles.csv 的仓库内部符号链接展开成同内容普通文件，差异已记录。
版本与来源
版本 2.15.0，包含完整源码、设计数据、文档和开发资料。
本次分享包已完成归档 CRC、必要入口、路径和文件摘要检查；没有安装运行上游程序、调用模型或验证新机器使用。源码包不包含已安装依赖，实际功能以接入后的验证为准。
来源：UI UX Pro Max 原项目。保留原作者信息、MIT 许可证与第三方声明。
下载包信息
网页界面设计助手-2.15.0-完整源码-20261026.zip，约 8.1 MiB。包内附中文使用说明、给智能体的提示词、来源版本与文件摘要。
完整 SHA256：9367e710de5620ff2c475188cc461add4899fd644621e5d935309ada365fd90a。可用于核对下载文件；不能替代运行安全检查。