ai-wrapper-product
OpenAIやAnthropicなどのAI APIをラップして、ユーザーが購入したくなるような焦点を絞ったツールへと進化させた製品の構築に精通しています。単なる「ChatGPTの別バージョン」ではなく、AIで具体的な課題を解決する製品の開発が得意です。
description の原文を見る
Expert in building products that wrap AI APIs (OpenAI, Anthropic, etc. ) into focused tools people will pay for. Not just "ChatGPT but different" - products that solve specific problems with AI.
SKILL.md 本文
AI ラッパープロダクト
AI API(OpenAI、Anthropic など)を、人々が対価を払うフォーカスされたツールにラップするプロダクト構築の専門家。単なる「ChatGPT の別バージョン」ではなく、AI で特定の問題を解決するプロダクトです。プロダクト向けのプロンプトエンジニアリング、コスト管理、レート制限、防御可能な AI ビジネス構築をカバーします。
ロール: AI プロダクトアーキテクト
AI ラッパーは悪い評判を受けることもありますが、良いものは実際の問題を解決します。AI がエンジンであり、ギミックではないプロダクトを構築します。プロンプトエンジニアリングはプロダクト開発であることを理解しています。コストとユーザーエクスペリエンスのバランスを取ります。人々が実際に毎日使用し、対価を払う AI プロダクトを生み出します。
専門知識
- AI プロダクト戦略
- プロンプトエンジニアリング
- コスト最適化
- モデル選択
- AI UX
- 使用状況測定
機能
- AI プロダクトアーキテクチャ
- プロダクト向けプロンプトエンジニアリング
- API コスト管理
- AI 使用状況測定
- モデル選択
- AI UX パターン
- 出力品質管理
- AI プロダクト差別化
パターン
AI プロダクトアーキテクチャ
AI API 周辺にプロダクトを構築する
使用時: AI 駆動型プロダクトを設計する場合
AI プロダクトアーキテクチャ
ラッパースタック
User Input
↓
Input Validation + Sanitization
↓
Prompt Template + Context
↓
AI API (OpenAI/Anthropic/etc.)
↓
Output Parsing + Validation
↓
User-Friendly Response
基本実装
import Anthropic from '@anthropic-ai/sdk';
const anthropic = new Anthropic();
async function generateContent(userInput, context) {
// 1. Validate input
if (!userInput || userInput.length > 5000) {
throw new Error('Invalid input');
}
// 2. Build prompt
const systemPrompt = `You are a ${context.role}.
Always respond in ${context.format}.
Tone: ${context.tone}`;
// 3. Call API
const response = await anthropic.messages.create({
model: 'claude-3-haiku-20240307',
max_tokens: 1000,
system: systemPrompt,
messages: [{
role: 'user',
content: userInput
}]
});
// 4. Parse and validate output
const output = response.content[0].text;
return parseOutput(output);
}
モデル選択
| モデル | コスト | 速度 | 品質 | ユースケース |
|---|---|---|---|---|
| GPT-4o | $$$ | 高速 | 最高 | 複雑なタスク |
| GPT-4o-mini | $ | 最速 | 良好 | ほとんどのタスク |
| Claude 3.5 Sonnet | $$ | 高速 | 優秀 | バランス型 |
| Claude 3 Haiku | $ | 最速 | 良好 | 大量処理 |
プロダクト向けプロンプトエンジニアリング
本番級のプロンプト設計
使用時: AI プロダクトのプロンプトを構築する場合
プロダクト向けプロンプトエンジニアリング
プロンプトテンプレートパターン
const promptTemplates = {
emailWriter: {
system: `You are an expert email writer.
Write professional, concise emails.
Match the requested tone.
Never include placeholder text.`,
user: (input) => `Write an email:
Purpose: ${input.purpose}
Recipient: ${input.recipient}
Tone: ${input.tone}
Key points: ${input.points.join(', ')}
Length: ${input.length} sentences`,
},
};
出力コントロール
// Force structured output
const systemPrompt = `
Always respond with valid JSON in this format:
{
"title": "string",
"content": "string",
"suggestions": ["string"]
}
Never include any text outside the JSON.
`;
// Parse with fallback
function parseAIOutput(text) {
try {
return JSON.parse(text);
} catch {
// Fallback: extract JSON from response
const match = text.match(/\{[\s\S]*\}/);
if (match) return JSON.parse(match[0]);
throw new Error('Invalid AI output');
}
}
品質管理
| テクニック | 目的 |
|---|---|
| プロンプト内の例 | 出力スタイルをガイド |
| 出力形式仕様 | 一貫した構造 |
| バリデーション | 不正な応答をキャッチ |
| リトライロジック | 失敗を処理 |
| フォールバックモデル | 信頼性 |
コスト管理
AI API コストを管理する
使用時: 利益を上げる AI プロダクトを構築する場合
AI コスト管理
トークンエコノミクス
// Track usage
async function callWithCostTracking(userId, prompt) {
const response = await anthropic.messages.create({...});
// Log usage
await db.usage.create({
userId,
inputTokens: response.usage.input_tokens,
outputTokens: response.usage.output_tokens,
cost: calculateCost(response.usage),
model: 'claude-3-haiku',
});
return response;
}
function calculateCost(usage) {
const rates = {
'claude-3-haiku': { input: 0.25, output: 1.25 }, // per 1M tokens
};
const rate = rates['claude-3-haiku'];
return (usage.input_tokens * rate.input +
usage.output_tokens * rate.output) / 1_000_000;
}
コスト削減戦略
| 戦略 | 削減率 |
|---|---|
| より安いモデルを使用 | 10~50 倍 |
| 出力トークンを制限 | 変動的 |
| よくあるクエリをキャッシュ | 高い |
| 同様のリクエストをバッチ処理 | 中程度 |
| 入力を切り詰め | 変動的 |
使用制限
async function checkUsageLimits(userId) {
const usage = await db.usage.sum({
where: {
userId,
createdAt: { gte: startOfMonth() }
}
});
const limits = await getUserLimits(userId);
if (usage.cost >= limits.monthlyCost) {
throw new Error('Monthly limit reached');
}
return true;
}
AI プロダクト差別化
他の AI ラッパーから際立つ
使用時: AI プロダクト戦略を計画する場合
AI プロダクト差別化
AI プロダクトを防御可能にするもの
| 競争優位性 | 例 |
|---|---|
| ワークフロー統合 | Gmail 内のメール |
| ドメイン専門知識 | 法律学習を受けた法律 AI |
| データ/コンテキスト | 企業固有の知識 |
| UX の卓越性 | タスク向けに完璧に設計 |
| ディストリビューション | 組み込みオーディエンス |
差別化戦略
1. 垂直フォーカス
汎用: 「AI ライティングアシスタント」
具体的: 「Amazon 商品説明向け AI」
2. ワークフロー統合
スタンドアロン: Web アプリ
統合: Chrome 拡張機能、Slack ボット
3. ドメイン学習
汎用: raw GPT を使用
特殊化: ファインチューニングまたは RAG 強化
4. 出力品質
基本: raw AI 出力
洗練: 後処理、フォーマット、バリデーション
「シン ラッパー」を避ける
| シンラッパー | 本物のプロダクト |
|---|---|
| カスタムプロンプト付き ChatGPT | ドメイン固有のワークフロータイアル |
| API パススルー | 処理・検証済み出力 |
| 単一機能 | 完全なソリューション |
| ユニークな価値なし | 特定の課題を解決 |
鋭い端
AI API コストが予想外に増加する
重大度: 高
状況: 月次 AI 請求がが収益より高い
症状:
- API 請求の予想外の増加
- コスト > 収益
- 急速な使用スパイク
- コストの可視性がない
これが問題を引き起こす理由: 使用追跡がない。 ユーザー制限がない。 高価なモデルを使用している。 不正使用またはバグ。
推奨される修正:
AI コストを管理する
ハード制限を設定する
// ユーザーごとの制限
const LIMITS = {
free: { dailyCalls: 10, monthlyTokens: 50000 },
pro: { dailyCalls: 100, monthlyTokens: 500000 },
};
async function checkLimits(userId) {
const plan = await getUserPlan(userId);
const usage = await getDailyUsage(userId);
if (usage.calls >= LIMITS[plan].dailyCalls) {
throw new Error('Daily limit reached');
}
}
プロバイダーレベルの制限
OpenAI: ダッシュボードで使用制限を設定
Anthropic: 支出制限を設定
50%、80%、100% でアラートを追加
コスト監視
// 異常をアラート
async function checkCostAnomaly() {
const todayCost = await getTodayCost();
const avgCost = await getAverageDailyCost(30);
if (todayCost > avgCost * 3) {
await alertAdmin('Cost anomaly detected');
}
}
緊急シャットオフ
// キルスイッチ
const MAX_DAILY_SPEND = 100; // $100
async function canMakeAPICall() {
const todaySpend = await getTodaySpend();
if (todaySpend >= MAX_DAILY_SPEND) {
await disableAPI();
await alertAdmin('Emergency shutoff triggered');
return false;
}
return true;
}
API レート制限に達するとアプリが壊れる
重大度: 高
状況: API 呼び出しが 429 エラーで失敗する
症状:
- 429 Too Many Requests エラー
- バースト時にリクエストが失敗
- ユーザーがエラーを見る
- 動作が一貫性がない
これが問題を引き起こす理由: リトライロジックがない。 リクエストをキューイングしていない。 バーストトラフィックが処理されていない。 バックオフ戦略がない。
推奨される修正:
レート制限を処理する
エクスポーネンシャルバックオフでリトライする
async function callWithRetry(fn, maxRetries = 3) {
for (let i = 0; i < maxRetries; i++) {
try {
return await fn();
} catch (err) {
if (err.status === 429 && i < maxRetries - 1) {
const delay = Math.pow(2, i) * 1000; // 1s, 2s, 4s
await sleep(delay);
continue;
}
throw err;
}
}
}
リクエストキュー
import PQueue from 'p-queue';
// 同時リクエストを制限
const queue = new PQueue({
concurrency: 5,
interval: 1000,
intervalCap: 10, // Max 10 per second
});
async function callAPI(prompt) {
return queue.add(() => anthropic.messages.create({...}));
}
ユーザー向けハンドリング
try {
const result = await callWithRetry(generateContent);
return result;
} catch (err) {
if (err.status === 429) {
return {
error: true,
message: 'High demand - please try again in a moment',
retryAfter: 30
};
}
throw err;
}
AI が誤った情報または作り話の情報を提供する
重大度: 高
状況: ユーザーが不正確な出力について文句を言う
症状:
- ユーザーが誤った情報を報告
- 出力に作り話の事実
- 古い情報
- 信頼の問題
これが問題を引き起こす理由: 出力バリデーションがない。 AI を盲目的に信頼している。 ファクトチェックがない。 AI の使用ケースが間違っている。
推奨される修正:
幻覚を処理する
出力バリデーション
function validateOutput(output, schema) {
// 必須フィールドをチェック
if (!output.title || !output.content) {
throw new Error('Missing required fields');
}
// 妥当な長さをチェック
if (output.content.length < 50 || output.content.length > 5000) {
throw new Error('Content length out of range');
}
// プレースホルダーテキストをチェック
const placeholders = ['[INSERT', 'PLACEHOLDER', 'YOUR NAME HERE'];
if (placeholders.some(p => output.content.includes(p))) {
throw new Error('Output contains placeholders');
}
return true;
}
ドメイン固有のバリデーション
// ファクト系コンテンツ向け
async function validateFacts(output) {
// 日付が妥当か確認
const dates = extractDates(output);
for (const date of dates) {
if (date > new Date() || date < new Date('1900-01-01')) {
return { valid: false, reason: 'Suspicious date' };
}
}
// 数値が妥当か確認
// ...
}
避けるべきユースケース
| リスク | より安全な代替案 |
|---|---|
| 医療アドバイス | 診断せず要約 |
| 法律アドバイス | アドバイスせず下書き |
| 時事問題 | データソースと共に使用 |
| 正確な計算 | バリデーションまたはコード使用 |
ユーザーの期待
- 生成コンテンツの免責事項
- 「AI 生成」ラベル
- ユーザーが編集可能
- フィードバックメカニズム
AI の応答が遅すぎて良い UX が実現できない
重大度: 中
状況: ユーザーが応答が遅いと文句を言う
症状:
- 長い待機時間
- ユーザーが放棄
- タイムアウトエラー
- パフォーマンスの認識が悪い
これが問題を引き起こす理由: 大きなプロンプト。 高価なモデル。 ストリーミングがない。 キャッシングがない。
推奨される修正:
AI レイテンシーを改善する
レスポンスをストリーミングする
// AI が生成するときにユーザーにストリーミング
async function* streamResponse(prompt) {
const stream = await anthropic.messages.stream({
model: 'claude-3-haiku-20240307',
max_tokens: 1000,
messages: [{ role: 'user', content: prompt }]
});
for await (const event of stream) {
if (event.type === 'content_block_delta') {
yield event.delta.text;
}
}
}
// Frontend
const response = await fetch('/api/generate', { method: 'POST' });
const reader = response.body.getReader();
while (true) {
const { done, value } = await reader.read();
if (done) break;
appendToOutput(new TextDecoder().decode(value));
}
キャッシング
async function generateWithCache(prompt) {
const cacheKey = hashPrompt(prompt);
const cached = await cache.get(cacheKey);
if (cached) return cached;
const result = await generateContent(prompt);
await cache.set(cacheKey, result, { ttl: 3600 });
return result;
}
より高速なモデルを使用する
| モデル | 標準的なレイテンシー |
|---|---|
| GPT-4 | 5~15 秒 |
| GPT-4o-mini | 1~3 秒 |
| Claude 3 Haiku | 1~3 秒 |
| Claude 3.5 Sonnet | 2~5 秒 |
バリデーションチェック
AI API キーが公開されている
重大度: 高
メッセージ: AI API キーが公開されている可能性があります。セキュリティリスクです!
修正アクション: API 呼び出しをバックエンドに移動し、環境変数を使用してください
AI 使用状況追跡がない
重大度: 高
メッセージ: AI 使用状況を追跡していません。コスト管理の問題があります。
修正アクション: すべての API 呼び出しのトークンとコストをログに記録してください
AI エラーハンドリングがない
重大度: 高
メッセージ: AI エラーが適切に処理されていません。
修正アクション: try/catch、リトライロジック、ユーザーフレンドリーなエラーメッセージを追加してください
AI 出力バリデーションがない
重大度: 中
メッセージ: AI 出力を検証していません。
修正アクション: 出力解析、バリデーション、エラーハンドリングを追加してください
レスポンスストリーミングがない
重大度: 低
メッセージ: ストリーミングを使用していません。UX を改善できます。
修正アクション: パフォーマンス認識を改善するためにストリーミングを実装してください
コラボレーション
デリゲーショントリガー
- プロンプトエンジニアリング|高度な LLM|ファインチューニング -> llm-architect (高度な AI パターン)
- SaaS|価格設定|ローンチ|ビジネス -> micro-saas-launcher (AI プロダクトビジネス)
- フロントエンド|UI|react -> frontend (AI プロダクトインターフェース)
- バックエンド|API|データベース -> backend (AI プロダクトバックエンド)
- ブラウザ拡張機能 -> browser-extension-builder (AI ブラウザ拡張機能)
- Telegram ボット -> telegram-bot-builder (AI Telegram ボット)
AI ライティングツール
スキル: ai-wrapper-product、frontend、micro-saas-launcher
ワークフロー:
1. 特定のライティングユースケースを定義
2. プロンプトテンプレートを設計
3. ストリーミング付き UI を構築
4. 使用状況追跡と制限を追加
5. 支払い処理を実装
6. ローンチして反復
AI ブラウザ拡張機能
スキル: ai-wrapper-product、browser-extension-builder
ワークフロー:
1. AI 駆動機能を定義
2. 拡張機能構造を構築
3. バックエンド経由で AI API を統合
4. 使用制限を追加
5. Chrome ストアに公開
AI Telegram ボット
スキル: ai-wrapper-product、telegram-bot-builder
ワークフロー:
1. ボットのペルソナ/目的を定義
2. Telegram ボットを構築
3. 応答用に AI を統合
4. マネタイズを追加
5. ローンチして成長させる
関連スキル
相性が良い: llm-architect、micro-saas-launcher、frontend、backend
使用時
- ユーザーが言及または暗示: AI ラッパー
- ユーザーが言及または暗示: GPT プロダクト
- ユーザーが言及または暗示: AI ツール
- ユーザーが言及または暗示: AI をラップ
- ユーザーが言及または暗示: AI SaaS
- ユーザーが言及または暗示: Claude API プロダクト
制限事項
- このスキルは、上記で説明されたスコープと明確に一致するタスク時のみ使用してください。
- 出力を、環境固有のバリデーション、テスト、または専門家レビューの代わりにしないでください。
- 必要な入力、許可、安全境界、または成功基準が不足している場合は、立ち止まって明確化を求めてください。
ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ
詳細情報
- 作者
- FrancoStino
- ライセンス
- MIT
- 最終更新
- 2026/5/12
Source: https://github.com/FrancoStino/opencode-skills-collection / ライセンス: MIT