前言¶

写网页界面时常见的问题是：布局靠感觉、间距随手填、组件各写各的，结果是同一个项目里出现多种字号、多种按钮高度，改起来要全站扫一遍。这个 Skill 针对的就是这类问题——它把「专业网页界面」拆成可执行的约束：网格系统、设计令牌、组件视觉一致性审计。

这是什么¶

「专业网页UI设计系统｜简诗 AI」是一个面向网页 UI 的 Skill，坐标 @user_fccf428b/professional-web-ui-system-blueprint，由 user_fccf428b 发布，来源标记为 community，分类 design-media。

它的定位是：通过系统化布局、清晰视觉层级和一致组件来构建专业网页界面，覆盖网格系统、设计令牌和组件视觉一致性审计三个环节。版本 1.0.2，标签 requires_api_key=false，即不需要额外 API Key。

抓取资料中的快照数据：评分 100000，下载 1054，安装 0。这里的评分是平台分数，不是用户评价；下载量和安装量为抓取时点数值，后续可能变化。

核心功能¶

按官方简介，它提供的是一套可执行的约束，而不是现成的页面模板。三个能力点对应界面开发中三个容易失控的环节：

1、网格系统：页面布局按网格落位，而不是逐个元素凭感觉摆放，间距和对齐有统一依据。
2、设计令牌：颜色、字号、间距、圆角这类基础值以令牌形式定义，改一处即可全局生效，避免散落在组件里的硬编码。
3、组件视觉一致性审计：对已写出的组件做一致性检查，发现同一个界面里按钮高度、字号、间距不一致的地方，并给出统一方向。

三层关系是：网格管布局，令牌管基础值，审计管执行结果。前两层定规则，第三层检查规则有没有被落实。

安装与启用¶

这个 Skill 基于通用 SKILL.md 格式，在支持该格式的 Agent 环境（Cursor、Codex CLI、Claude Code 等）中加载本地 Skill 目录即可使用。

需要说明的是：本次抓取未能打开 SkillHub 页面（https://www.skillhub.cn/skills/user_fccf428b/professional-web-ui-system-blueprint）和官方接口地址（https://api.skillhub.cn/user_fccf428b/professional-web-ui-system-blueprint），因此安装命令、目录路径和具体配置字段没有可核对的官方信息，这里不给出推测命令。请到官方页面确认当前版本和安装方式后再执行。

典型用法¶

抓取资料只提供了简介，没有给出可直接复现的命令行示例或输入输出样例。所以下面只描述它适用的工作方式，具体措辞以你在 Agent 中加载到的 SKILL.md 为准。

1、在开始画页面之前，先让它给出当前项目的网格方案和设计令牌清单，明确栅格列数、间距档位、字号层级和颜色令牌命名。
2、按这套令牌和网格写组件，而不是直接写死数值。
3、界面初稿完成后，让它对组件做一致性审计，输出不一致清单和统一建议。

三步对应它的三个能力点：先定规则，再按规则实现，最后审计结果。

适用场景与注意¶

适合的场景：需要从零搭一套网页 UI、或已有页面视觉散乱需要统一约束时；团队协作、需要让界面基础值有单一来源时。

限制和注意：

• 它是约束和检查工具，不生成完整业务代码，页面结构和交互仍需自己实现。
• 抓取资料中安装数为 0，社区样本少，实际效果需要在你自己的项目里验证。
• 抓取资料中无详细使用文档，接口、命令和配置字段需要以官方页面为准，不要照搬其他 Skill 的安装方式。
• 评分 100000 是平台分数，不能当作质量证明。

结尾¶

这个 Skill 的价值在于把「界面看起来专业」这件事落到网格、令牌和审计三个可检查的环节，而不是依赖个人手感。如果你的界面正在被间距和字号不统一的问题拖累，可以拿它先定规则再做审计。

官方地址：https://api.skillhub.cn/user_fccf428b/professional-web-ui-system-blueprint
SkillHub 页面：https://www.skillhub.cn/skills/user_fccf428b/professional-web-ui-system-blueprint