组件库规范
多人协作的前端项目组件用法不统一时用这条：让它为当前项目定下设计 token，包括颜色、字体、间距、圆角，再生成二十个基础组件的接口文档、示例代码和 Storybook 配置。
适合做什么
- 在 Cursor / 同类 Agent 里挂载可复用技能
- 把重复检查或生成流程固化成一句话指令
- 团队共享「技能卡」减少口头约定
不太适合
- 当作完整安全审计或生产发布的唯一依据
- 无环境上下文时指望一次跑通复杂流水线
提示词正文
【技能名称】组件库规范
【技能目标】为当前项目定义完整组件规范：设计token（颜色/字体/间距/圆角）、基础组件API文档（20个）、示例代码、Storybook配置、tailwind.config.ts预设。
【使用方式】
1. 将上方目标作为 Agent Skill / 自定义指令的核心描述；
2. 补充你的项目路径、技术栈与验收标准；
3. 要求 Agent 先列出检查清单，再执行并给出可复核的输出（如 diff / 报告）；
4. 若涉及发布或删除，必须二次确认。
【运营向用法提示】
可用于内容站、工具站或增长落地页的自动化检查与批处理；输出请要求中文结论 + 可执行下一步。复制后粘贴到 AI 对话框，按填空补全即可。
使用步骤
- 整理项目技术栈与现有颜色字体清单
- 把技能目标粘进Agent技能卡并补项目路径
- 先要检查清单，再按token逐项复核输出
常见问题
项目里没有现成设计稿能用吗？
可以，但要让 Agent 先按你现有页面的主色、字号、间距反推一版 token，再据此生成组件 API 与示例代码。缺设计稿时规范偏通用，建议补上品牌色值与栅格尺寸。
生成的20个组件API怎么挑选？
先按项目实际用到的组件排序，把高频的按钮、输入框、弹窗留下，低频的折叠面板、时间轴可先只保留接口定义。让 Agent 标出每个 API 的必填项与默认值，再决定是否裁剪。
Tailwind 预设能直接上线用吗？
不适合直接上线。它给的是基于常见约定的预设，需要你对照项目里已有的主题扩展、插件和暗色模式改写。若项目用 CSS 变量或别的方案，只把间距与圆角部分搬过去更稳妥。
来源说明
整理自公开提示词站点素材，经 52运营 筛选与页面改写，便于运营场景检索。 原始参考：来源链接