stitchflow は何をしますか？
プロダクト概要をUIデザインの方向性、Tailwind対応HTML、スクリーンショットに変換し、フロントエンドデザイン作業を迅速化します。
概要
このスキルは、製品の簡単な説明（プロダクトブリーフ）を入力として受け取り、以下の成果物を生成します：
- UIデザインの方向性: レイアウト、配色、タイポグラフィなどの設計ガイドライン
- Tailwind CSS 対応HTML: 実際にブラウザで表示可能なコード
- スクリーンショット: 生成されたUIの視覚的なプレビュー
使い方
- プロダクトの概要を自然言語で記述します（例：「タスク管理アプリのログインページ」）
- スキルが自動的にデザインの方向性を提案します
- 生成されたHTMLコードとスクリーンショットを確認し、必要に応じて修正を加えます
対応プラットフォーム
- Claude Code
- Cursor
- Codex
- その他AIコーディングエージェント
動作環境
- Node.js 18以上
- npm または yarn
インストール方法
# リポジトリをクローン
git clone https://github.com/blox4859/stitchflow.git
cd stitchflow
# 依存関係をインストール
npm install
設定
環境変数または設定ファイルで以下のオプションを指定できます：
| 変数名 | 説明 | デフォルト値 |
|---|---|---|
STITCHFLOW_THEME | 使用するカラーテーマ | light |
STITCHFLOW_OUTPUT_DIR | 出力先ディレクトリ | ./output |
サポート
質問やバグ報告は GitHub Issues までお願いします。