文章

web-sveltekit 的 Skills 与 vibe coding

通过 repo skills 用自然语言驱动修改 apps/web-sveltekit，而不是从空白规格起步。

web-sveltekit 适合 prompt 驱动改造：先用自然语言描述产品改动，再映射到正确的文件与共享包。

推荐 skill 组合

需要仓库地图、或确认某功能属于哪一层时先用。

不想直接改模板，而是从 apps/web-sveltekit 复制独立前台时使用。

复制后做品牌/SEO，或改动主要是 manifest 配置时使用。

新产品面需要独立路由时使用。

用户控制台需要新功能页或激活区时使用。

  • $onboard
  • $create-app
  • $customize-brand
  • $add-page
  • $add-dashboard

原地改 vs 复制后改

当 apps/web-sveltekit 本身就是演示或平台工作前台时，可直接原地修改。

如果需要租户隔离、新包名，或独立发版节奏，先用 $create-app 复制，再对复制后的 app 使用其他 skills。

主要改动面

品牌信息、SEO、footer、analytics、dashboard feature 开关。

Hero、能力网格、工作流、FAQ、收尾 CTA。

定价布局与结账入口。

英/中用户文档。

公开页服务端代理（BFF）。

  • apps/web-sveltekit/zship.app.json
  • apps/web-sveltekit/src/lib/components/LandingPage.svelte
  • apps/web-sveltekit/src/routes/pricing/+page.svelte
  • apps/web-sveltekit/src/content/docs/*
  • apps/web-sveltekit/src/routes/api/*

若请求明显属于共享后端包或 Worker，应先说明边界，再决定是否把局部页面改动升级为平台改动。

示例 prompt

  • 把 web-sveltekit 落地页 hero 改成 waitlist 优先的 AI 视频工具上线页。
  • 简化 dashboard 首页，让主操作打开 AI Playground。
  • 新增一篇关于 API Key 的文档页，并挂到现有文档列表。
  • 定价只保留年付，并同步更新落地页 CTA 文案。
  • Use $create-app NAME=my-product to fork web-sveltekit, then use $customize-brand APP=apps/my-product to replace the default branding.

实用流程

1. 从仓库根目录开始。 2. 有 skill 时在 prompt 中明确调用。 3. 描述产品改动，而不是只报文件名。 4. 改动前先阅读现有实现。 5. 改完后在对应路由上验证（check + build）。

这样可以把 web-sveltekit 当作可修改的产品面，而不是冻结模板。

上一篇 下一篇