第二步：实战开发

用一个真实例子，体验 Superpowers 的完整开发流程。

场景

写一个获取天气信息的小脚本。

Step 1：用 brainstorm 理清思路

输入：/superpowers:brainstorm 写个脚本获取天气信息

❯ /superpowers:brainstorm 写个脚本获取天气信息

● Got it - switching to a new idea. You want to build a script to fetch weather information.

  What programming language would you prefer?

  1. Python - Clean syntax, excellent HTTP libraries like requests
  2. JavaScript/Node.js - Good for web integration, async-friendly
  3. Bash/Shell - Lightweight, uses curl directly
  4. Other - Let me know what you have in mind

  Which would you like to use?

❯ 2

● Good choice - JavaScript/Node.js it is.

  How do you want to use this weather script?

  1. CLI tool - Run from terminal, get weather output in console
  2. Backend service/API - Expose weather data via HTTP endpoint
  3. Part of a web app - Integrate into a frontend application
  4. Scheduled task - Run periodically to collect/store weather data

  Which fits your use case?

❯ 3

● Integrating into a web app. That shapes things differently.

  What weather data do you need to display?

  1. Basic current weather - Temperature, conditions (sunny/rainy), location
  2. Detailed current weather - Add humidity, wind, feels-like, UV index
  3. Multi-day forecast - Current weather plus upcoming days
  4. Hourly forecast - Hour-by-hour breakdown for today/tomorrow

  Which level of detail are you looking for?

❯ 2

● Detailed current weather with humidity, wind, feels-like, and UV index.

  How should the user's location be determined?

  1. Browser geolocation - Auto-detect via GPS/IP (requires user permission)
  2. Manual city search - User types in a city name
  3. Both - Auto-detect with option to search/change manually

  Which approach do you prefer?

❯ 1

● Browser geolocation to auto-detect.

  Which weather API would you like to use?

  1. OpenWeatherMap - Popular, free tier (1000 calls/day), requires API key
  2. WeatherAPI.com - Generous free tier, easy to use, requires API key
  3. Open-Meteo - Completely free, no API key needed, open-source
  4. No preference - I'll recommend one

  Which one?

❯ 3

● Open-Meteo - excellent choice. No API key hassle and completely free.

  What frontend framework are you using for the web app?

  1. React - Component-based, widely used
  2. Vue - Approachable, reactive
  3. Vanilla JavaScript - No framework, plain HTML/CSS/JS
  4. Other - Let me know what you're working with

  Which one?

❯ 2

● Vue it is. I think I have enough to propose some approaches.

  Two approaches to consider:

  Option A: Vue Composable (Recommended)
  Create a reusable useWeather() composable that handles geolocation, API calls, and reactive state. Clean
  separation, easy to test, follows Vue 3 best practices. Can be dropped into any component.

  Option B: Pinia Store
  Centralize weather state in a Pinia store. Better if multiple components need the same weather data, or if you
  want to cache results across route changes. More setup, but more powerful for complex apps.

  My recommendation: Option A (Composable) - it's simpler, self-contained, and sufficient unless you have multiple
  components that need to share weather state. You can always refactor to Pinia later if needed.

  Does the composable approach sound right, or do you have a more complex app where Pinia makes sense?

❯ A

● Let me present the design in sections. I'll check with you after each part.

  ---
  Section 1: Composable Structure

  The useWeather() composable will be a single file that exports a function returning reactive state and methods.

  File: src/composables/useWeather.js

  Reactive State:
  - weather - The weather data object (null initially)
  - loading - Boolean, true while fetching
  - error - Error message string (null if no error)
  - location - Object with latitude and longitude

  Methods:
  - fetchWeather() - Gets location via browser geolocation, then fetches weather from Open-Meteo
  - refresh() - Re-fetches weather data for current location

  Data returned from Open-Meteo:
  - Temperature (°C)
  - Weather condition code (maps to sunny/cloudy/rainy etc.)
  - Humidity (%)
  - Wind speed (km/h)
  - Feels-like temperature (°C)
  - UV index

  Usage in a component:
  const { weather, loading, error, fetchWeather } = useWeather()
  onMounted(() => fetchWeather())

  ---
  Does this structure look right so far? Any state or methods you'd want to add or change?

AI 会引导你思考：

• 用什么编程语言 ？
• 输入方式？命令行参数还是交互式？
• 显示哪些信息？温度、湿度、天气描述？

通过几轮问答，需求就清晰了

Step 2：让 AI 写代码

需求明确后，AI 生成代码：

● Done. Project created at /mnt/d/test/weather-app/.

  Files created:
  - src/composables/useWeather.js - Main composable
  - src/utils/weatherCodes.js - Weather code mapping
  - src/components/WeatherCard.vue - Display component
  - src/App.vue - Updated to use WeatherCard

  To run:
  cd weather-app
  npm run dev

  The app will request location permission when loaded, then display current weather with temperature, feels-like,
  humidity, wind speed, and UV index.

运行效果：

小结

下一步

想知道 Superpowers 还有哪些能力？

→ 第三步：Skill 全览