朋友问我,开发产品有哪些必备的 skill,我就结合我本地装的用的多的,做了个整理,涵盖原型设计、UI 设计、代码、测试、运营一整个流程的万星 star 项目
1. Stitch generate-design|从想法生成多版界面
能从文字或图片生成页面、修改已有页面、做设计变体。适合从零探索方向;需要配置 Stitch MCP。该仓库由 Google Labs 团队发布,但仓库声明它不是正式受支持的 Google 产品。
[
github.com]
2. space-image2proto|从截图做可交互原型
适合你已有竞品截图、线框图或工作系统界面,要快速得到单文件 HTML 并反复改。
[
github.com]
3. Figma figma-generate-design|产出可编辑设计稿
如果交付物必须进入 Figma,选它:会利用现有组件、变量和样式生成可编辑页面。需要 Figma MCP。
[
github.com](
github.com)
4. Impeccable|现有 UI 的系统打磨
包含设计指导、页面评审、浏览器迭代和规则检测,适合“功能已经有了,但看起来还不够好”。
[
github.com]
5. UI UX Pro Max|从需求建立设计系统
擅长查找适合行业的风格、色板、字体和 UX 规则,再形成具体设计方案。适合新产品定调。
[
github.com]
6. frontend-design|做有辨识度的视觉实现〔已装〕
适合直接让 Agent 改页面、组件、排版和视觉细节。你现在就能用。
[
github.com]
7. frontend-app-builder|从设计到可用前端
OpenAI 的前端构建工作流:先形成视觉方案,再实现页面,并在浏览器里反复核对效果。属于 Build Web Apps 插件。
[
github.com]
8. figma-implement-design|Figma 设计稿转代码
手上已有 Figma 文件时选它,目标是把布局、状态和响应式行为落实到现有代码库;需要 Figma MCP。
[
github.com]
9. react-best-practices|React / Next.js 代码质量
Vercel 的规则集,重点检查数据请求瀑布、包体积和渲染性能。适合作为写完代码后的专项检查。
[
github.com]
10. playwright-cli|真实浏览器测试,首推
Microsoft 的 Skill 和命令行工具,可跑交互流程、截图、调试测试并记录轨迹。适合验证注册、搜索、支付等关键路径。
[
github.com]
11. web-design-guidelines|UI 体验审查
Vercel 的界面规范审查,补上可访问性、表单、交互反馈和文案细节。你已装的 webapp-testing 可负责实际浏览器检查。
[
github.com]
12. Marketing Skills|增长环节首推这一套
这不是单个 Skill,而是一套能串起来的增长工作流:先写清产品与用户,再埋点、优化转化、做实验和 SEO。仓库当前 v2 已改名,建议看下面这些现行 Skill,别照旧教程装 page-cro、analytics-tracking。
总仓库:[
github.com]
- product-marketing:沉淀定位、目标用户和卖点,供后续 Skill 共用。
[
github.com/blob/main/skills/product-marketing/SKILL.md]
- analytics:规划或检查转化事件与数据追踪。
[
github.com/blob/main/skills/analytics/SKILL.md]
- cro:诊断落地页和表单的转化问题。
[
github.com/blob/main/skills/cro/SKILL.md]
- ab-testing:把改版建议变成可验证的实验。
[
github.com/blob/main/skills/ab-testing/SKILL.md]
- seo-audit:检查技术 SEO 和页面内容问题。
[
github.com/blob/main/skills/seo-audit/SKILL.md]