拓冰网站定制 
AI 技能MCP 服务前端【免费下载链接】ui-skillsSkills for Design Engineers项目地址https://gitcode.com/GitHub_Trending/ui/ui-skills点击查看免费下载本文以 README.md 为骨架围绕 GitHub 开源项目ui-skillsSkills for Design Engineers展开系统讲解其技能注册表Skills Registry、终端 CLI、Model Context ProtocolMCP服务器与 Playbook 四大核心能力。读完本文你将掌握如何用npx ui-skills在终端浏览与拉取技能、如何在 Claude 等 Agent 中通过 MCP 端点https://www.ui-skills.com/mcp连接技能目录以及如何在本地构建、校验并部署这套站点。一、项目定位为设计工程师打造的可检索技能库ui-skills 是一个面向设计工程师Design Engineers的开源技能集合项目其核心交付物是一批Agent Skill——即供 AI 编码 Agent如 Claude、Cursor 等加载的、以 Markdown 形式编写的领域知识包每个 Skill 通过SKILL.md提供结构化的约束、步骤与示例帮助 Agent 在具体的 UI 任务中产出更专业、更一致的结果。仓库自带的技能示例足以说明其形态与使用方式skills/baseline-ui/SKILL.md定义了一套反 AI 界面油腻感的 UI 基线约束涵盖 Stack、Components、Interaction、Animation、Typography、Layout、Performance、Design 八个维度例如「MUST 只动画合成器属性transform、opacity」「NEVER 使用h-screen改用h-dvh」「NEVER 未经请求就添加动画」等。技能本身以 YAML frontmatternamedescription声明元信息正文以 MUST / SHOULD / NEVER 的规范语言组织方便 Agent 直接引用。围绕这些技能仓库构建了三层消费入口CLI终端浏览与拉取、MCPAgent 协议接入、Playbook人类可读的设计经验提炼页这正是 README 的主线也是本文的核心脉络。二、技能注册表一切入口的数据底座无论是 CLI 的list、MCP 的list_skills还是站点上的技能列表页最终都来自同一个注册表数据源。src/data/registry.ts 定义了RegistrySkill类型slug、pathSlug、sourceKey、user、repo、rawUrl、githubUrl、name、description、topics并声明了TopicSlug联合类型覆盖 accessibility、motion、systems、visual、interaction、performance、craft、taste、typography、color、3d以及 nextjs、nuxt、vue、react-native、threejs、remotion、swiftui 等更细分的主题。注册表内汇聚了来自 ibelick、MengTo、anthropics、vercel、vercel-labs、addyosmani、antfu、vuejs-ai、remotion-dev、microsoft 等多个来源的技能条目如frontend-design、swiss-design、vue-best-practices、threejs-*系列等每一条都带有来源仓库地址与主题标签。src/data/skills.ts 基于注册表派生站点用数据结构slug为ui-skills-root和baseline-ui的条目被固定排在列表最前其余按pathSlug字典序排列。src/lib/skill-catalog.ts 在此基础上建立索引按 path、slug、source、topic 四种维度预构建 Map并提供getSkillByPath、getSkillsByTopic、getSkillRoutePaths等查询函数供路由与页面渲染使用。可以这样理解数据流registry.ts原始目录→skills.ts站点视图→skill-catalog.ts查询索引→ CLI / MCP / 页面三个出口保证了「同一套目录、三种消费方式」的一致性。三、CLI在终端浏览与拉取技能README 给出了 CLI 的四条核心命令直接可用npx ui-skills start npx ui-skills categories npx ui-skills list --category motion npx ui-skills get baseline-ui各命令的用途如下命令作用npx ui-skills start启动交互式会话引导 Agent 或用户快速进入技能浏览流程npx ui-skills categories列出全部技能分类对应注册表中的 topic 体系npx ui-skills list --category motion按分类过滤列出技能例如--category motion只展示动效相关技能npx ui-skills get baseline-ui按技能名拉取某个技能的完整 Markdown 内容从源码实现看这四条命令被定义为「Agent 启动引导文案」的固定序列src/lib/ui-skills-cli.ts 中的AGENT_START_COMMANDS数组逐一声明了start、categories、list --category category、get skill并通过formatShellCommand统一拼装成npx ui-skills …形式同时提供了buildSkillsInstallCommand用于生成把某个技能安装到本地 Agent 的命令模板npx skills add repoUrl --skill skillName。这说明 CLI 不仅服务人类用户也被设计为 Agent 的冷启动指引——Agent 在开始 UI 任务前可以先运行这几条命令了解可用的技能集。配套的测试位于 tests/ui-skills-cli.test.ts可用于验证命令文案的拼装结果是否符合预期。四、MCP让 Agent 通过协议直接消费技能目录MCPModel Context Protocol是 README 重点介绍的第二入口用于把注册表以标准化协议暴露给 Agenthttps://www.ui-skills.com/mcp该端点暴露两个工具list_skills列出注册表中的技能可传可选参数query对pathSlug、name、description做子串过滤。get_skill按 discovery name、slug 或 pathSlug 拉取某个技能的 Markdown 内容例如baseline-ui或ibelick/baseline-ui。4.1 服务端实现细节MCP 端点由 src/pages/mcp/rpc.ts 导出、核心逻辑在 src/lib/mcp-server.ts 中实现是一个标准的 JSON-RPC 2.0 服务主要行为包括握手initialize返回protocolVersion: 2025-06-18、capabilities: { tools: {} }与serverInfonotifications/initialized返回 202。工具枚举tools/list返回上述两个工具的inputSchemalist_skills的query为可选字符串get_skill的name为必填。工具调用tools/call内部分发list_skills与get_skill。list_skills对注册表做小写化包含匹配返回的每个技能附带namediscovery name、pathSlug、description与指向技能工件的urlget_skill通过getRegistrySkillByDiscoveryName解析名称再经defaultSkillContentLoader读取技能 Markdown 原文返回找不到技能或读取失败时会返回isError: true与可读错误信息。健壮性请求体超过 64 KB 返回 413非法 JSON 或缺少jsonrpc/method字段返回 400 的-32600 Invalid Request未知方法返回-32601 Method not found。响应统一携带 CORS 头Access-Control-Allow-Origin: *便于跨域接入。4.2 接入方式与端点发现站点同时提供文档页src/pages/mcp/docs.astro 列出了端点地址、Server card 地址与两个工具的说明重定向src/pages/mcp/server.astro 将/mcp直接重定向到/mcp/docsServer card站点还发布/.well-known/mcp/server-card.json供支持 MCP 服务器发现的客户端自动探测详见 public/mcp.json 相关约定。接入时你可以在 Claude Desktop、Cursor 等支持 MCP 的客户端中把https://www.ui-skills.com/mcp配置为远程 MCP 服务器地址或使用支持远程 MCP 的 CLI 工具连接后调用list_skills/get_skill获取技能内容get_skill返回的内容与npx ui-skills get skill完全同源二者可互为替代。五、Playbook把技能经验提炼为可读的设计课README 中 Playbook 的定位是「Distilled UI lessons from the best design engineering skills」——从最佳技能中蒸馏出面向人类的 UI 经验课程。入口页面src/pages/playbook/index.astro单篇内容页为 src/pages/playbook/[slug].astro。内容数据定义在 src/data/playbook.ts 与 src/data/playbook-demos.ts。每篇 Playbook 通常配套一个可交互演示组件全部位于 src/ui/playbook/例如text-balance-demo.tsx、focus-ring-demo.tsx、touch-target-demo.tsx、spring-vs-ease-demo.tsx、line-clamp-demo.tsx等覆盖排版、焦点、触控目标、缓动曲线等具体设计工程话题并通过 src/ui/playbook/demo-router.tsx 按 slug 路由到对应演示。可以推断Playbook 与技能注册表共享同一套设计工程知识体系只是把 Agent 可执行的规范语言转译成了图文 交互演示的人类学习材料。六、在本地构建、校验与运行这套站点仓库是标准的 Astro Cloudflare 项目package.json、astro.config.mjs、wrangler.jsonc你可以克隆后在本地查看与验证# 安装依赖并启动开发服务器 npm install npm run dev # 构建生产版本构建前会先更新 GitHub Stars 与同步 stonks 数据 npm run build # 本地预览构建产物 npm run preview仓库还内置了一套完整的一致性校验脚本scripts/ 与 tests/npm run check:skills运行 scripts/check-registry-skills.mjs校验注册表中的技能条目是否符合规范npm run check:publisher-skills运行 scripts/check-publisher-skills.mjs校验外部发布者的技能npm run digests与npm run check:digests预计算并校验 Agent 技能的摘要digests相关数据见 src/data/agent-skills-digests.jsonnpm test运行 tests/ 下的全部单元测试其中 tests/markdown-negotiation.test.ts、tests/skills-mcp-discovery.test.ts、tests/routes.test.ts 覆盖了内容协商、MCP 发现与路由完整性npm run smoke运行 tests/smoke.mjs 做构建后的冒烟检查npm run check一键依次执行类型检查、技能校验、测试、构建与冒烟作为发布前的完整门禁。七、许可与使用前提项目以 MIT 许可证开源见 LICENSE可自由查看、安装、运行与在其基础上扩展CLI 与 MCP 端点的可用性以部署站点www.ui-skills.com为准在本地仓库中CLI 命令文案与 MCP 工具逻辑均已实现在 src/lib/ui-skills-cli.ts 与 src/lib/mcp-server.ts 中可作为离线对照参考技能目录会随注册表数据演进具体的技能条目、分类与数量请以当前仓库 src/data/registry.ts 中的内容为准。八、小结ui-skills 用一个注册表数据源同时驱动了三条消费链路终端 CLI 面向快速检索与脚本化获取MCP 端点面向 Agent 的协议化接入Playbook 面向人类学习的设计经验沉淀。对于想为自己的设计工程工作流引入 Agent 技能体系的开发者最直接的路径是先用npx ui-skills categories/npx ui-skills list --category topic了解目录用npx ui-skills get skill或 MCP 的get_skill拉取具体技能再让 Agent 在baseline-ui这类基线技能的约束下产出更高质量的 UI 代码。赞分享AI 技能MCP 服务前端【免费下载链接】ui-skillsSkills for Design Engineers项目地址https://gitcode.com/GitHub_Trending/ui/ui-skills点击查看免费下载相关推荐tchMaterial-parser电子课本下载工具把课本预览链接存成本地 PDFtchMaterial parser电子课本下载工具把课本预览链接存成本地 PDF tchMaterial parser 是一款面向国家中小学智慧教育平台的网页爬虫教育skills为设计师与工程师打造的 AI 技能集让 Agent 拥有真正的动画与界面品味skills为设计师与工程师打造的 AI 技能集让 Agent 拥有真正的动画与界面品味 本文围绕开源仓库 skills https://link.gitcAI 技能设计系统前端mcp-use 实战用 SKILL.md 为 MCP 服务器发布 Agent SkillsSkills over MCP 指南mcp use 实战用 SKILL.md 为 MCP 服务器发布 Agent SkillsSkills over MCP 指南 本篇技术指南以 mcp u后端MCP 服务MCP ClientsAI Agent人工智能上一篇gogcli gog youtube subscriptions subscribe 命令详解在终端中一键订阅 YouTube 频道下一篇使用 Aspire Dashboard 纵览分布式应用资源、日志、追踪与指标全解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 UI Skills 使用指南：用 CLI、MCP 与 Playbook 为设计工程师搭建 Agent 技能目录
AI 技能MCP 服务前端【免费下载链接】ui-skillsSkills for Design Engineers项目地址https://gitcode.com/GitHub_Trending/ui/ui-skills点击查看免费下载本文以 README.md 为骨架围绕 GitHub 开源项目ui-skillsSkills for Design Engineers展开系统讲解其技能注册表Skills Registry、终端 CLI、Model Context ProtocolMCP服务器与 Playbook 四大核心能力。读完本文你将掌握如何用npx ui-skills在终端浏览与拉取技能、如何在 Claude 等 Agent 中通过 MCP 端点https://www.ui-skills.com/mcp连接技能目录以及如何在本地构建、校验并部署这套站点。一、项目定位为设计工程师打造的可检索技能库ui-skills 是一个面向设计工程师Design Engineers的开源技能集合项目其核心交付物是一批Agent Skill——即供 AI 编码 Agent如 Claude、Cursor 等加载的、以 Markdown 形式编写的领域知识包每个 Skill 通过SKILL.md提供结构化的约束、步骤与示例帮助 Agent 在具体的 UI 任务中产出更专业、更一致的结果。仓库自带的技能示例足以说明其形态与使用方式skills/baseline-ui/SKILL.md定义了一套反 AI 界面油腻感的 UI 基线约束涵盖 Stack、Components、Interaction、Animation、Typography、Layout、Performance、Design 八个维度例如「MUST 只动画合成器属性transform、opacity」「NEVER 使用h-screen改用h-dvh」「NEVER 未经请求就添加动画」等。技能本身以 YAML frontmatternamedescription声明元信息正文以 MUST / SHOULD / NEVER 的规范语言组织方便 Agent 直接引用。围绕这些技能仓库构建了三层消费入口CLI终端浏览与拉取、MCPAgent 协议接入、Playbook人类可读的设计经验提炼页这正是 README 的主线也是本文的核心脉络。二、技能注册表一切入口的数据底座无论是 CLI 的list、MCP 的list_skills还是站点上的技能列表页最终都来自同一个注册表数据源。src/data/registry.ts 定义了RegistrySkill类型slug、pathSlug、sourceKey、user、repo、rawUrl、githubUrl、name、description、topics并声明了TopicSlug联合类型覆盖 accessibility、motion、systems、visual、interaction、performance、craft、taste、typography、color、3d以及 nextjs、nuxt、vue、react-native、threejs、remotion、swiftui 等更细分的主题。注册表内汇聚了来自 ibelick、MengTo、anthropics、vercel、vercel-labs、addyosmani、antfu、vuejs-ai、remotion-dev、microsoft 等多个来源的技能条目如frontend-design、swiss-design、vue-best-practices、threejs-*系列等每一条都带有来源仓库地址与主题标签。src/data/skills.ts 基于注册表派生站点用数据结构slug为ui-skills-root和baseline-ui的条目被固定排在列表最前其余按pathSlug字典序排列。src/lib/skill-catalog.ts 在此基础上建立索引按 path、slug、source、topic 四种维度预构建 Map并提供getSkillByPath、getSkillsByTopic、getSkillRoutePaths等查询函数供路由与页面渲染使用。可以这样理解数据流registry.ts原始目录→skills.ts站点视图→skill-catalog.ts查询索引→ CLI / MCP / 页面三个出口保证了「同一套目录、三种消费方式」的一致性。三、CLI在终端浏览与拉取技能README 给出了 CLI 的四条核心命令直接可用npx ui-skills start npx ui-skills categories npx ui-skills list --category motion npx ui-skills get baseline-ui各命令的用途如下命令作用npx ui-skills start启动交互式会话引导 Agent 或用户快速进入技能浏览流程npx ui-skills categories列出全部技能分类对应注册表中的 topic 体系npx ui-skills list --category motion按分类过滤列出技能例如--category motion只展示动效相关技能npx ui-skills get baseline-ui按技能名拉取某个技能的完整 Markdown 内容从源码实现看这四条命令被定义为「Agent 启动引导文案」的固定序列src/lib/ui-skills-cli.ts 中的AGENT_START_COMMANDS数组逐一声明了start、categories、list --category category、get skill并通过formatShellCommand统一拼装成npx ui-skills …形式同时提供了buildSkillsInstallCommand用于生成把某个技能安装到本地 Agent 的命令模板npx skills add repoUrl --skill skillName。这说明 CLI 不仅服务人类用户也被设计为 Agent 的冷启动指引——Agent 在开始 UI 任务前可以先运行这几条命令了解可用的技能集。配套的测试位于 tests/ui-skills-cli.test.ts可用于验证命令文案的拼装结果是否符合预期。四、MCP让 Agent 通过协议直接消费技能目录MCPModel Context Protocol是 README 重点介绍的第二入口用于把注册表以标准化协议暴露给 Agenthttps://www.ui-skills.com/mcp该端点暴露两个工具list_skills列出注册表中的技能可传可选参数query对pathSlug、name、description做子串过滤。get_skill按 discovery name、slug 或 pathSlug 拉取某个技能的 Markdown 内容例如baseline-ui或ibelick/baseline-ui。4.1 服务端实现细节MCP 端点由 src/pages/mcp/rpc.ts 导出、核心逻辑在 src/lib/mcp-server.ts 中实现是一个标准的 JSON-RPC 2.0 服务主要行为包括握手initialize返回protocolVersion: 2025-06-18、capabilities: { tools: {} }与serverInfonotifications/initialized返回 202。工具枚举tools/list返回上述两个工具的inputSchemalist_skills的query为可选字符串get_skill的name为必填。工具调用tools/call内部分发list_skills与get_skill。list_skills对注册表做小写化包含匹配返回的每个技能附带namediscovery name、pathSlug、description与指向技能工件的urlget_skill通过getRegistrySkillByDiscoveryName解析名称再经defaultSkillContentLoader读取技能 Markdown 原文返回找不到技能或读取失败时会返回isError: true与可读错误信息。健壮性请求体超过 64 KB 返回 413非法 JSON 或缺少jsonrpc/method字段返回 400 的-32600 Invalid Request未知方法返回-32601 Method not found。响应统一携带 CORS 头Access-Control-Allow-Origin: *便于跨域接入。4.2 接入方式与端点发现站点同时提供文档页src/pages/mcp/docs.astro 列出了端点地址、Server card 地址与两个工具的说明重定向src/pages/mcp/server.astro 将/mcp直接重定向到/mcp/docsServer card站点还发布/.well-known/mcp/server-card.json供支持 MCP 服务器发现的客户端自动探测详见 public/mcp.json 相关约定。接入时你可以在 Claude Desktop、Cursor 等支持 MCP 的客户端中把https://www.ui-skills.com/mcp配置为远程 MCP 服务器地址或使用支持远程 MCP 的 CLI 工具连接后调用list_skills/get_skill获取技能内容get_skill返回的内容与npx ui-skills get skill完全同源二者可互为替代。五、Playbook把技能经验提炼为可读的设计课README 中 Playbook 的定位是「Distilled UI lessons from the best design engineering skills」——从最佳技能中蒸馏出面向人类的 UI 经验课程。入口页面src/pages/playbook/index.astro单篇内容页为 src/pages/playbook/[slug].astro。内容数据定义在 src/data/playbook.ts 与 src/data/playbook-demos.ts。每篇 Playbook 通常配套一个可交互演示组件全部位于 src/ui/playbook/例如text-balance-demo.tsx、focus-ring-demo.tsx、touch-target-demo.tsx、spring-vs-ease-demo.tsx、line-clamp-demo.tsx等覆盖排版、焦点、触控目标、缓动曲线等具体设计工程话题并通过 src/ui/playbook/demo-router.tsx 按 slug 路由到对应演示。可以推断Playbook 与技能注册表共享同一套设计工程知识体系只是把 Agent 可执行的规范语言转译成了图文 交互演示的人类学习材料。六、在本地构建、校验与运行这套站点仓库是标准的 Astro Cloudflare 项目package.json、astro.config.mjs、wrangler.jsonc你可以克隆后在本地查看与验证# 安装依赖并启动开发服务器 npm install npm run dev # 构建生产版本构建前会先更新 GitHub Stars 与同步 stonks 数据 npm run build # 本地预览构建产物 npm run preview仓库还内置了一套完整的一致性校验脚本scripts/ 与 tests/npm run check:skills运行 scripts/check-registry-skills.mjs校验注册表中的技能条目是否符合规范npm run check:publisher-skills运行 scripts/check-publisher-skills.mjs校验外部发布者的技能npm run digests与npm run check:digests预计算并校验 Agent 技能的摘要digests相关数据见 src/data/agent-skills-digests.jsonnpm test运行 tests/ 下的全部单元测试其中 tests/markdown-negotiation.test.ts、tests/skills-mcp-discovery.test.ts、tests/routes.test.ts 覆盖了内容协商、MCP 发现与路由完整性npm run smoke运行 tests/smoke.mjs 做构建后的冒烟检查npm run check一键依次执行类型检查、技能校验、测试、构建与冒烟作为发布前的完整门禁。七、许可与使用前提项目以 MIT 许可证开源见 LICENSE可自由查看、安装、运行与在其基础上扩展CLI 与 MCP 端点的可用性以部署站点www.ui-skills.com为准在本地仓库中CLI 命令文案与 MCP 工具逻辑均已实现在 src/lib/ui-skills-cli.ts 与 src/lib/mcp-server.ts 中可作为离线对照参考技能目录会随注册表数据演进具体的技能条目、分类与数量请以当前仓库 src/data/registry.ts 中的内容为准。八、小结ui-skills 用一个注册表数据源同时驱动了三条消费链路终端 CLI 面向快速检索与脚本化获取MCP 端点面向 Agent 的协议化接入Playbook 面向人类学习的设计经验沉淀。对于想为自己的设计工程工作流引入 Agent 技能体系的开发者最直接的路径是先用npx ui-skills categories/npx ui-skills list --category topic了解目录用npx ui-skills get skill或 MCP 的get_skill拉取具体技能再让 Agent 在baseline-ui这类基线技能的约束下产出更高质量的 UI 代码。赞分享AI 技能MCP 服务前端【免费下载链接】ui-skillsSkills for Design Engineers项目地址https://gitcode.com/GitHub_Trending/ui/ui-skills点击查看免费下载相关推荐tchMaterial-parser电子课本下载工具把课本预览链接存成本地 PDFtchMaterial parser电子课本下载工具把课本预览链接存成本地 PDF tchMaterial parser 是一款面向国家中小学智慧教育平台的网页爬虫教育skills为设计师与工程师打造的 AI 技能集让 Agent 拥有真正的动画与界面品味skills为设计师与工程师打造的 AI 技能集让 Agent 拥有真正的动画与界面品味 本文围绕开源仓库 skills https://link.gitcAI 技能设计系统前端mcp-use 实战用 SKILL.md 为 MCP 服务器发布 Agent SkillsSkills over MCP 指南mcp use 实战用 SKILL.md 为 MCP 服务器发布 Agent SkillsSkills over MCP 指南 本篇技术指南以 mcp u后端MCP 服务MCP ClientsAI Agent人工智能上一篇gogcli gog youtube subscriptions subscribe 命令详解在终端中一键订阅 YouTube 频道下一篇使用 Aspire Dashboard 纵览分布式应用资源、日志、追踪与指标全解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考