前端与界面 on AI 观察

设计变量同步 Skill 避坑指南：写法、权限与输出问题

Sun, 18 Oct 2026 08:46:31 +0800

如果你在浏览器、组件库与设计稿里反复做设计变量同步，可以考虑把经验沉淀为一个 Skill：写清触发条件、步骤、输出格式和边界，让智能体代劳重复部分，人只负责把关。

下面是把「设计变量同步」做成技能时最常见的 8 个问题，每条都给出改法。

1. 描述写成口号

智能体判断不出何时该用。改为“把设计稿中的颜色、字号整理为设计变量；当用户提到设计变量同步时使用”。

「打包体积分析」Skill 常见坑：8 个问题与改法

Sun, 18 Oct 2026 08:46:27 +0800

前端工程师经常要做「打包体积分析」这类事：分析打包产物，找出过大依赖与重复打包。每次都从头写提示词，结果时好时坏；把它做成智能体 Skill，就能让智能体每次按同一套步骤执行，输出结构也更稳定。

下面是把「打包体积分析」做成技能时最常见的 8 个问题，每条都给出改法。

表单校验 Skill 的 SKILL.md 模板与写作要点

Sun, 18 Oct 2026 08:45:15 +0800

如果你在浏览器、组件库与设计稿里反复做表单校验，可以考虑把经验沉淀为一个 Skill：写清触发条件、步骤、输出格式和边界，让智能体代劳重复部分，人只负责把关。

本文以「表单校验」为例，逐段讲解 SKILL.md 的写法。SKILL.md 是 Claude Agent Skills 采用的格式：YAML 头 + Markdown 正文，其结构思路也适用于其他平台的规则文件与指令。

用 n8n AI Agent 实现「落地页搭建」：流程搭建与工具配置

Sun, 18 Oct 2026 08:44:56 +0800

把「落地页搭建」交给智能体，难点不在模型能力，而在流程是否说清楚：输入是什么（文案与品牌色），按什么顺序处理，交付什么（页面代码），哪些事不能做。Skill 就是把这些写下来的载体。

本文介绍如何在 n8n AI Agent 上实现这个技能，包括它的形态、示例配置、启用步骤、一次完整的运行过程和常见坑。

关于落地页搭建 Skill 的 8 个常见问题

Sun, 18 Oct 2026 08:44:37 +0800

项目	说明
技能	落地页搭建（`landing-page-builder`）
作用	根据文案与卖点生成单页落地页代码
输入	文案与品牌色
输出	页面代码
形态	纯提示词
风险	低
适用人群	前端工程师

1. 「落地页搭建」技能和直接写提示词有什么区别？

技能把步骤、格式和约束固定下来，由平台在相关时自动加载；提示词需要每次手动提供，效果依赖当次写法。

状态管理重构 Skill 上传到 Claude 应用的完整流程

Sun, 18 Oct 2026 08:43:55 +0800

把「状态管理重构」交给智能体，难点不在模型能力，而在流程是否说清楚：输入是什么（组件代码），按什么顺序处理，交付什么（重构方案），哪些事不能做。Skill 就是把这些写下来的载体。

本文介绍如何在 Claude 应用中的 Skills 上实现这个技能，包括它的形态、示例配置、启用步骤、一次完整的运行过程和常见坑。

「前端组件测试」Skill 组合用法：和相关技能串成流水线

Sun, 18 Oct 2026 08:43:47 +0800

把「前端组件测试」交给智能体，难点不在模型能力，而在流程是否说清楚：输入是什么（组件代码），按什么顺序处理，交付什么（测试文件），哪些事不能做。Skill 就是把这些写下来的载体。

单个技能解决一个环节，把几个技能串起来，才能覆盖一整段工作。本文示范「前端组件测试」与三个相关技能的组合。

「前端错误兜底」Skill 场景实录：一次完整任务怎么跑

Sun, 18 Oct 2026 08:42:51 +0800

把「前端错误兜底」交给智能体，难点不在模型能力，而在流程是否说清楚：输入是什么（页面代码），按什么顺序处理，交付什么（改造代码），哪些事不能做。Skill 就是把这些写下来的载体。

背景（虚构）

Mia是一名前端工程师，每周都要做几次前端错误兜底。过去靠复制粘贴提示词，结果不稳定。这次团队把它做成了技能，下面记录一次完整运行。

用 Function Calling 实现「多语言排版检查」：函数定义与调用流程

Sun, 18 Oct 2026 08:42:49 +0800

如果你在浏览器、组件库与设计稿里反复做多语言排版检查，可以考虑把经验沉淀为一个 Skill：写清触发条件、步骤、输出格式和边界，让智能体代劳重复部分，人只负责把关。

本文介绍如何在 Function Calling 上实现这个技能，包括它的形态、示例配置、启用步骤、一次完整的运行过程和常见坑。

「样式清理」Skill 常见问题解答

Sun, 18 Oct 2026 08:42:32 +0800

把「样式清理」交给智能体，难点不在模型能力，而在流程是否说清楚：输入是什么（样式文件与页面），按什么顺序处理，交付什么（清理建议），哪些事不能做。Skill 就是把这些写下来的载体。

项目	说明
技能	样式清理（`css-cleanup`）
作用	找出未使用和重复的样式规则
输入	样式文件与页面
输出	清理建议
形态	带脚本
风险	低
适用人群	前端工程师

1. 「样式清理」技能和直接写提示词有什么区别？

技能把步骤、格式和约束固定下来，由平台在相关时自动加载；提示词需要每次手动提供，效果依赖当次写法。

样式清理 Skill 定制指南：改风格、改阈值、改输出格式

Sun, 18 Oct 2026 08:42:30 +0800

前端工程师经常要做「样式清理」这类事：找出未使用和重复的样式规则。每次都从头写提示词，结果时好时坏；把它做成智能体 Skill，就能让智能体每次按同一套步骤执行，输出结构也更稳定。

通用版的「样式清理」能覆盖大多数情况，但每个团队都有自己的习惯。下面列出最值得调整的几个地方。

怎么评估「深色模式适配」Skill 好不好用：评分表与回归测试

Sun, 18 Oct 2026 08:42:19 +0800

把「深色模式适配」交给智能体，难点不在模型能力，而在流程是否说清楚：输入是什么（样式文件），按什么顺序处理，交付什么（适配方案与代码），哪些事不能做。Skill 就是把这些写下来的载体。

“感觉好用”不足以说明技能有效。下面给出一套轻量的评估方法，用来判断「深色模式适配」是否达标，以及每次修改后是变好还是变坏。

页面性能优化 Skill 如何与其他技能协作：交接格式与顺序

Sun, 18 Oct 2026 08:41:07 +0800

如果你在浏览器、组件库与设计稿里反复做页面性能优化，可以考虑把经验沉淀为一个 Skill：写清触发条件、步骤、输出格式和边界，让智能体代劳重复部分，人只负责把关。

单个技能解决一个环节，把几个技能串起来，才能覆盖一整段工作。本文示范「页面性能优化」与三个相关技能的组合。

界面微文案 Skill 实战演练：从请求到交付的全过程

Sun, 18 Oct 2026 08:40:52 +0800

前端工程师经常要做「界面微文案」这类事：为按钮、空状态、错误提示写清晰的界面文案。每次都从头写提示词，结果时好时坏；把它做成智能体 Skill，就能让智能体每次按同一套步骤执行，输出结构也更稳定。

背景（虚构）

Mia是一名前端工程师，每周都要做几次界面微文案。过去靠复制粘贴提示词，结果不稳定。这次团队把它做成了技能，下面记录一次完整运行。

图表组件 Skill 快速开始：最少步骤跑通一次

Sun, 18 Oct 2026 08:40:17 +0800

前端工程师经常要做「图表组件」这类事：根据数据结构生成可复用的图表组件。每次都从头写提示词，结果时好时坏；把它做成智能体 Skill，就能让智能体每次按同一套步骤执行，输出结构也更稳定。

这篇是最短路径：不追求完美，只求在 10 分钟内让「图表组件」第一次跑通。

打包体积分析 Skill 故障排查：不触发、格式乱、结果不准

Sun, 18 Oct 2026 08:37:28 +0800

把「打包体积分析」交给智能体，难点不在模型能力，而在流程是否说清楚：输入是什么（打包报告），按什么顺序处理，交付什么（体积优化建议），哪些事不能做。Skill 就是把这些写下来的载体。

「打包体积分析」技能出问题时，先别急着重写。按下面的表格对号入座，大部分问题都能在几分钟内定位。

「状态管理重构」Skill 安全审查：权限、数据与提示注入

Sun, 18 Oct 2026 08:36:54 +0800

「状态管理重构」是前端工程师的高频任务。它的输入通常是组件代码，期望得到的是重构方案。这类有固定流程、又需要一点判断力的工作，很适合封装成智能体 Skill。

风险画像

这个技能是纯指令型，主要风险来自输入内容本身（提示注入、敏感信息）与输出被直接使用。风险较低，但输出仍需快速过目再使用。

用扣子（Coze）实现「图表组件」：人设、工作流与发布

Sun, 18 Oct 2026 08:36:08 +0800

本文介绍如何在 扣子（Coze）智能体与工作流 上实现这个技能，包括它的形态、示例配置、启用步骤、一次完整的运行过程和常见坑。

多语言排版检查 Skill 的 SKILL.md 模板与写作要点

Sun, 18 Oct 2026 08:34:38 +0800

「多语言排版检查」是前端工程师的高频任务。它的输入通常是页面与语言包，期望得到的是问题清单。这类有固定流程、又需要一点判断力的工作，很适合封装成智能体 Skill。

本文以「多语言排版检查」为例，逐段讲解 SKILL.md 的写法。SKILL.md 是 Claude Agent Skills 采用的格式：YAML 头 + Markdown 正文，其结构思路也适用于其他平台的规则文件与指令。

给「前端错误兜底」Skill 写测试用例：6 类输入与预期行为

Sun, 18 Oct 2026 08:34:06 +0800

如果你在浏览器、组件库与设计稿里反复做前端错误兜底，可以考虑把经验沉淀为一个 Skill：写清触发条件、步骤、输出格式和边界，让智能体代劳重复部分，人只负责把关。

技能写好后，最常见的问题是“演示时很好，真用时出错”。原因通常是只用一份理想样例试过。本文给「前端错误兜底」准备 6 类测试输入。

用扣子（Coze）实现「深色模式适配」：人设、工作流与发布

Sun, 18 Oct 2026 08:34:02 +0800

本文介绍如何在 扣子（Coze）智能体与工作流 上实现这个技能，包括它的形态、示例配置、启用步骤、一次完整的运行过程和常见坑。

用 Gemini CLI 做打包体积分析：命令文件与 GEMINI.md 配合

Sun, 18 Oct 2026 08:33:54 +0800

本文介绍如何在 Gemini CLI 上实现这个技能，包括它的形态、示例配置、启用步骤、一次完整的运行过程和常见坑。

LangChain 工具实战：把页面结构说明变成可调用的智能体

Sun, 18 Oct 2026 08:33:40 +0800

如果你在浏览器、组件库与设计稿里反复做页面结构说明，可以考虑把经验沉淀为一个 Skill：写清触发条件、步骤、输出格式和边界，让智能体代劳重复部分，人只负责把关。

本文介绍如何在 LangChain / LangGraph 工具 上实现这个技能，包括它的形态、示例配置、启用步骤、一次完整的运行过程和常见坑。

Cline 规则实战：让智能体稳定完成状态管理重构

Sun, 18 Oct 2026 08:33:18 +0800

如果你在浏览器、组件库与设计稿里反复做状态管理重构，可以考虑把经验沉淀为一个 Skill：写清触发条件、步骤、输出格式和边界，让智能体代劳重复部分，人只负责把关。

本文介绍如何在 Cline Rules 上实现这个技能，包括它的形态、示例配置、启用步骤、一次完整的运行过程和常见坑。

用 OpenAI Agents SDK 实现「前端组件测试」：工具与智能体代码

Sun, 18 Oct 2026 08:32:50 +0800

前端工程师经常要做「前端组件测试」这类事：为组件编写交互测试。每次都从头写提示词，结果时好时坏；把它做成智能体 Skill，就能让智能体每次按同一套步骤执行，输出结构也更稳定。

本文介绍如何在 OpenAI Agents SDK 上实现这个技能，包括它的形态、示例配置、启用步骤、一次完整的运行过程和常见坑。

无障碍修复通用提示词模板：任何对话助手都能直接用

Sun, 18 Oct 2026 08:32:43 +0800

如果你在浏览器、组件库与设计稿里反复做无障碍修复，可以考虑把经验沉淀为一个 Skill：写清触发条件、步骤、输出格式和边界，让智能体代劳重复部分，人只负责把关。

不是每个人都有能装技能的智能体平台。下面这份提示词可以直接粘贴到任何对话助手中使用，效果接近技能版本，只是需要每次手动粘贴。

用 Function Calling 实现「前端错误兜底」：函数定义与调用流程

Sun, 18 Oct 2026 08:32:12 +0800

本文介绍如何在 Function Calling 上实现这个技能，包括它的形态、示例配置、启用步骤、一次完整的运行过程和常见坑。

接口调用层生成 Skill 如何与其他技能协作：交接格式与顺序

Sun, 18 Oct 2026 08:32:00 +0800

把「接口调用层生成」交给智能体，难点不在模型能力，而在流程是否说清楚：输入是什么（接口文档），按什么顺序处理，交付什么（请求函数代码），哪些事不能做。Skill 就是把这些写下来的载体。

单个技能解决一个环节，把几个技能串起来，才能覆盖一整段工作。本文示范「接口调用层生成」与三个相关技能的组合。

Cline 规则实战：让智能体稳定完成图表组件

Sun, 18 Oct 2026 08:31:46 +0800

本文介绍如何在 Cline Rules 上实现这个技能，包括它的形态、示例配置、启用步骤、一次完整的运行过程和常见坑。

Cline 规则实战：让智能体稳定完成邮件 HTML 模板

Sun, 18 Oct 2026 08:31:16 +0800

前端工程师经常要做「邮件 HTML 模板」这类事：生成兼容主流邮箱客户端的 HTML 邮件模板。每次都从头写提示词，结果时好时坏；把它做成智能体 Skill，就能让智能体每次按同一套步骤执行，输出结构也更稳定。

本文介绍如何在 Cline Rules 上实现这个技能，包括它的形态、示例配置、启用步骤、一次完整的运行过程和常见坑。

用扣子（Coze）实现「打包体积分析」：人设、工作流与发布

Sun, 18 Oct 2026 08:31:14 +0800

「打包体积分析」是前端工程师的高频任务。它的输入通常是打包报告，期望得到的是体积优化建议。这类有固定流程、又需要一点判断力的工作，很适合封装成智能体 Skill。

本文介绍如何在 扣子（Coze）智能体与工作流 上实现这个技能，包括它的形态、示例配置、启用步骤、一次完整的运行过程和常见坑。

Cursor 项目规则实战：让 Agent 按流程做前端组件测试

Sun, 18 Oct 2026 08:30:29 +0800

如果你在浏览器、组件库与设计稿里反复做前端组件测试，可以考虑把经验沉淀为一个 Skill：写清触发条件、步骤、输出格式和边界，让智能体代劳重复部分，人只负责把关。

本文介绍如何在 Cursor Rules 上实现这个技能，包括它的形态、示例配置、启用步骤、一次完整的运行过程和常见坑。

Agents SDK 实战：几十行代码做一个图标规范整理智能体

Sun, 18 Oct 2026 08:29:53 +0800

「图标规范整理」是前端工程师的高频任务。它的输入通常是图标文件，期望得到的是图标规范与清单。这类有固定流程、又需要一点判断力的工作，很适合封装成智能体 Skill。

本文介绍如何在 OpenAI Agents SDK 上实现这个技能，包括它的形态、示例配置、启用步骤、一次完整的运行过程和常见坑。

「图标规范整理」Skill 组合用法：和相关技能串成流水线

Sun, 18 Oct 2026 08:29:40 +0800

把「图标规范整理」交给智能体，难点不在模型能力，而在流程是否说清楚：输入是什么（图标文件），按什么顺序处理，交付什么（图标规范与清单），哪些事不能做。Skill 就是把这些写下来的载体。

单个技能解决一个环节，把几个技能串起来，才能覆盖一整段工作。本文示范「图标规范整理」与三个相关技能的组合。

Cursor 项目规则实战：让 Agent 按流程做响应式检查

Sun, 18 Oct 2026 08:29:22 +0800

如果你在浏览器、组件库与设计稿里反复做响应式检查，可以考虑把经验沉淀为一个 Skill：写清触发条件、步骤、输出格式和边界，让智能体代劳重复部分，人只负责把关。

本文介绍如何在 Cursor Rules 上实现这个技能，包括它的形态、示例配置、启用步骤、一次完整的运行过程和常见坑。

用 GPTs 实现「页面元信息检查」：指令、知识与 Actions

Sun, 18 Oct 2026 08:29:07 +0800

前端工程师经常要做「页面元信息检查」这类事：检查页面标题、描述、结构化数据是否完整。每次都从头写提示词，结果时好时坏；把它做成智能体 Skill，就能让智能体每次按同一套步骤执行，输出结构也更稳定。

本文介绍如何在 GPTs 上实现这个技能，包括它的形态、示例配置、启用步骤、一次完整的运行过程和常见坑。

用 Function Calling 实现「组件生成」：函数定义与调用流程

Sun, 18 Oct 2026 08:28:08 +0800

把「组件生成」交给智能体，难点不在模型能力，而在流程是否说清楚：输入是什么（设计说明），按什么顺序处理，交付什么（组件代码与示例），哪些事不能做。Skill 就是把这些写下来的载体。

本文介绍如何在 Function Calling 上实现这个技能，包括它的形态、示例配置、启用步骤、一次完整的运行过程和常见坑。

「页面性能优化」Skill 常见坑：8 个问题与改法

Sun, 18 Oct 2026 08:27:24 +0800

「页面性能优化」是前端工程师的高频任务。它的输入通常是性能报告，期望得到的是优化清单。这类有固定流程、又需要一点判断力的工作，很适合封装成智能体 Skill。

下面是把「页面性能优化」做成技能时最常见的 8 个问题，每条都给出改法。

1. 描述写成口号

智能体判断不出何时该用。改为“针对加载与交互性能指标给出优化方案；当用户提到页面性能优化时使用”。

把「响应式检查」写成 MCP 服务：工具定义与客户端配置

Sun, 18 Oct 2026 08:26:39 +0800

前端工程师经常要做「响应式检查」这类事：检查页面在不同屏幕宽度下的布局问题。每次都从头写提示词，结果时好时坏；把它做成智能体 Skill，就能让智能体每次按同一套步骤执行，输出结构也更稳定。

本文介绍如何在 MCP 服务 上实现这个技能，包括它的形态、示例配置、启用步骤、一次完整的运行过程和常见坑。

GPTs 实战：做一个专门深色模式适配的定制助手

Sun, 18 Oct 2026 08:25:42 +0800

「深色模式适配」是前端工程师的高频任务。它的输入通常是样式文件，期望得到的是适配方案与代码。这类有固定流程、又需要一点判断力的工作，很适合封装成智能体 Skill。

本文介绍如何在 GPTs 上实现这个技能，包括它的形态、示例配置、启用步骤、一次完整的运行过程和常见坑。

页面性能优化 Skill 介绍：让智能体按固定流程完成任务

Sun, 18 Oct 2026 08:25:38 +0800

一句话说明

「页面性能优化」技能让智能体针对加载与交互性能指标给出优化方案。你提供性能报告，它按固定步骤处理，交付优化清单。

「组件文档编写」Skill 常见问题解答

Sun, 18 Oct 2026 08:25:31 +0800

前端工程师经常要做「组件文档编写」这类事：为组件编写 Storybook 示例与说明。每次都从头写提示词，结果时好时坏；把它做成智能体 Skill，就能让智能体每次按同一套步骤执行，输出结构也更稳定。

项目	说明
技能	组件文档编写（`storybook-writer`）
作用	为组件编写 Storybook 示例与说明
输入	组件代码
输出	示例文件
形态	纯提示词
风险	低
适用人群	前端工程师

1. 「组件文档编写」技能和直接写提示词有什么区别？

技能把步骤、格式和约束固定下来，由平台在相关时自动加载；提示词需要每次手动提供，效果依赖当次写法。

Agents SDK 实战：几十行代码做一个浏览器兼容检查智能体

Sun, 18 Oct 2026 08:25:08 +0800

如果你在浏览器、组件库与设计稿里反复做浏览器兼容检查，可以考虑把经验沉淀为一个 Skill：写清触发条件、步骤、输出格式和边界，让智能体代劳重复部分，人只负责把关。

本文介绍如何在 OpenAI Agents SDK 上实现这个技能，包括它的形态、示例配置、启用步骤、一次完整的运行过程和常见坑。

在 Claude 应用里启用「落地页搭建」Skill：打包、上传与使用

Sun, 18 Oct 2026 08:24:15 +0800

「落地页搭建」是前端工程师的高频任务。它的输入通常是文案与品牌色，期望得到的是页面代码。这类有固定流程、又需要一点判断力的工作，很适合封装成智能体 Skill。

本文介绍如何在 Claude 应用中的 Skills 上实现这个技能，包括它的形态、示例配置、启用步骤、一次完整的运行过程和常见坑。

用 GPTs 实现「组件生成」：指令、知识与 Actions

Sun, 18 Oct 2026 08:23:22 +0800

本文介绍如何在 GPTs 上实现这个技能，包括它的形态、示例配置、启用步骤、一次完整的运行过程和常见坑。

Claude Code Skill 实战：浏览器兼容检查的目录结构与示例

Sun, 18 Oct 2026 08:22:08 +0800

把「浏览器兼容检查」交给智能体，难点不在模型能力，而在流程是否说清楚：输入是什么（代码与目标浏览器），按什么顺序处理，交付什么（兼容问题清单），哪些事不能做。Skill 就是把这些写下来的载体。

本文介绍如何在 Claude Code Skill 上实现这个技能，包括它的形态、示例配置、启用步骤、一次完整的运行过程和常见坑。

关于表单校验 Skill 的 8 个常见问题

Sun, 18 Oct 2026 08:21:15 +0800

「表单校验」是前端工程师的高频任务。它的输入通常是字段说明，期望得到的是校验代码与文案。这类有固定流程、又需要一点判断力的工作，很适合封装成智能体 Skill。

项目	说明
技能	表单校验（`form-validation`）
作用	为表单生成前后端一致的校验规则与错误提示
输入	字段说明
输出	校验代码与文案
形态	纯提示词
风险	低
适用人群	前端工程师

1. 「表单校验」技能和直接写提示词有什么区别？

技能把步骤、格式和约束固定下来，由平台在相关时自动加载；提示词需要每次手动提供，效果依赖当次写法。

10 分钟上手「设计稿转代码」Skill：从零到第一次跑通

Sun, 18 Oct 2026 08:21:13 +0800

前端工程师经常要做「设计稿转代码」这类事：根据设计稿截图或标注生成页面结构代码。每次都从头写提示词，结果时好时坏；把它做成智能体 Skill，就能让智能体每次按同一套步骤执行，输出结构也更稳定。

这篇是最短路径：不追求完美，只求在 10 分钟内让「设计稿转代码」第一次跑通。

「接口调用层生成」Skill 不生效怎么办：症状、原因与排查步骤

Sun, 18 Oct 2026 08:20:31 +0800

「接口调用层生成」是前端工程师的高频任务。它的输入通常是接口文档，期望得到的是请求函数代码。这类有固定流程、又需要一点判断力的工作，很适合封装成智能体 Skill。

「接口调用层生成」技能出问题时，先别急着重写。按下面的表格对号入座，大部分问题都能在几分钟内定位。

Function Calling 实战：给无障碍修复设计 JSON Schema

Sun, 18 Oct 2026 08:20:29 +0800

本文介绍如何在 Function Calling 上实现这个技能，包括它的形态、示例配置、启用步骤、一次完整的运行过程和常见坑。

前端与界面 on AI 观察

设计变量同步 Skill 避坑指南：写法、权限与输出问题

1. 描述写成口号

「打包体积分析」Skill 常见坑：8 个问题与改法

表单校验 Skill 的 SKILL.md 模板与写作要点

用 n8n AI Agent 实现「落地页搭建」：流程搭建与工具配置

关于 落地页搭建 Skill 的 8 个常见问题

1. 「落地页搭建」技能和直接写提示词有什么区别？

状态管理重构 Skill 上传到 Claude 应用的完整流程

「前端组件测试」Skill 组合用法：和相关技能串成流水线

「前端错误兜底」Skill 场景实录：一次完整任务怎么跑

背景（虚构）

用 Function Calling 实现「多语言排版检查」：函数定义与调用流程

「样式清理」Skill 常见问题解答

1. 「样式清理」技能和直接写提示词有什么区别？

样式清理 Skill 定制指南：改风格、改阈值、改输出格式

怎么评估「深色模式适配」Skill 好不好用：评分表与回归测试

页面性能优化 Skill 如何与其他技能协作：交接格式与顺序

界面微文案 Skill 实战演练：从请求到交付的全过程

背景（虚构）

图表组件 Skill 快速开始：最少步骤跑通一次

打包体积分析 Skill 故障排查：不触发、格式乱、结果不准

「状态管理重构」Skill 安全审查：权限、数据与提示注入

风险画像

用扣子（Coze）实现「图表组件」：人设、工作流与发布

多语言排版检查 Skill 的 SKILL.md 模板与写作要点

给「前端错误兜底」Skill 写测试用例：6 类输入与预期行为

用扣子（Coze）实现「深色模式适配」：人设、工作流与发布

用 Gemini CLI 做打包体积分析：命令文件与 GEMINI.md 配合

LangChain 工具实战：把页面结构说明变成可调用的智能体

Cline 规则实战：让智能体稳定完成状态管理重构

用 OpenAI Agents SDK 实现「前端组件测试」：工具与智能体代码

无障碍修复 通用提示词模板：任何对话助手都能直接用

用 Function Calling 实现「前端错误兜底」：函数定义与调用流程

接口调用层生成 Skill 如何与其他技能协作：交接格式与顺序

Cline 规则实战：让智能体稳定完成图表组件

Cline 规则实战：让智能体稳定完成邮件 HTML 模板

用扣子（Coze）实现「打包体积分析」：人设、工作流与发布

Cursor 项目规则实战：让 Agent 按流程做前端组件测试

Agents SDK 实战：几十行代码做一个图标规范整理智能体

「图标规范整理」Skill 组合用法：和相关技能串成流水线

Cursor 项目规则实战：让 Agent 按流程做响应式检查

用 GPTs 实现「页面元信息检查」：指令、知识与 Actions

用 Function Calling 实现「组件生成」：函数定义与调用流程

「页面性能优化」Skill 常见坑：8 个问题与改法

1. 描述写成口号

把「响应式检查」写成 MCP 服务：工具定义与客户端配置

GPTs 实战：做一个专门深色模式适配的定制助手

页面性能优化 Skill 介绍：让智能体按固定流程完成任务

一句话说明

「组件文档编写」Skill 常见问题解答

1. 「组件文档编写」技能和直接写提示词有什么区别？

Agents SDK 实战：几十行代码做一个浏览器兼容检查智能体

在 Claude 应用里启用「落地页搭建」Skill：打包、上传与使用

用 GPTs 实现「组件生成」：指令、知识与 Actions

Claude Code Skill 实战：浏览器兼容检查的目录结构与示例

关于 表单校验 Skill 的 8 个常见问题

1. 「表单校验」技能和直接写提示词有什么区别？

10 分钟上手「设计稿转代码」Skill：从零到第一次跑通

「接口调用层生成」Skill 不生效怎么办：症状、原因与排查步骤

Function Calling 实战：给无障碍修复设计 JSON Schema

关于落地页搭建 Skill 的 8 个常见问题

无障碍修复通用提示词模板：任何对话助手都能直接用

关于表单校验 Skill 的 8 个常见问题