Back to Details

riff

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
Plan mode: If you are planning work, this entire skill is ONE plan step: "Invoke /vibes:riff". Do not decompose the steps below into separate plan tasks.
Display this ASCII art immediately when starting:
░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░▒▓███████▓▒░░▒▓████████▓▒░░▒▓███████▓▒░
░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░      ░▒▓█▓▒░
 ░▒▓█▓▒▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░      ░▒▓█▓▒░
 ░▒▓█▓▒▒▓█▓▒░░▒▓█▓▒░▒▓███████▓▒░░▒▓██████▓▒░  ░▒▓██████▓▒░
  ░▒▓█▓▓█▓▒░ ░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░             ░▒▓█▓▒░
  ░▒▓█▓▓█▓▒░ ░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░             ░▒▓█▓▒░
   ░▒▓██▓▒░  ░▒▓█▓▒░▒▓███████▓▒░░▒▓████████▓▒░▒▓███████▓▒░
计划模式：如果你正在规划工作，整个技能是一个计划步骤："Invoke /vibes:riff"。不要将以下步骤拆分为单独的计划任务。
开始时立即显示此ASCII艺术图案：
░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░▒▓███████▓▒░░▒▓████████▓▒░░▒▓███████▓▒░
░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░      ░▒▓█▓▒░
 ░▒▓█▓▒▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░      ░▒▓█▓▒░
 ░▒▓█▓▒▒▓█▓▒░░▒▓█▓▒░▒▓███████▓▒░░▒▓██████▓▒░  ░▒▓██████▓▒░
  ░▒▓█▓▓█▓▒░ ░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░             ░▒▓█▓▒░
  ░▒▓█▓▓█▓▒░ ░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░             ░▒▓█▓▒░
   ░▒▓██▓▒░  ░▒▓█▓▒░▒▓███████▓▒░░▒▓████████▓▒░▒▓███████▓▒░

Vibes Riff Generator

Vibes 变体生成器

Generate multiple app variations in parallel. Each riff is a different INTERPRETATION - different ideas, not just styling.
并行生成多个应用变体。每个变体是不同的诠释——不同的想法，而不仅仅是样式差异。

Workflow

工作流程

Step 1: Gather ALL Requirements Upfront

步骤1：提前收集所有需求

Use AskUserQuestion to collect all config at once.
Question 1: "What kind of app do you want to explore? (broad/loose is fine)"
Header: "Theme"
Options: User enters via "Other"

Question 2: "Describe the visual style - colors, mood, aesthetic"
Header: "Visual"
Options: ["Warm sunset tones", "Clean minimal white", "Neon cyberpunk", "Other (describe)"]

Question 3: "How many variations should I generate?"
Header: "Count"
Options: ["3 (recommended)", "5", "7", "10"]
After receiving all answers, proceed immediately to Step 2 - no more questions.
Note: If the 
frontend-design
skill is available, use it for enhanced visual design quality.
使用AskUserQuestion一次性收集所有配置信息。
问题1："你想要探索哪种类型的应用？（宽泛/模糊的描述也可以）"
标题："主题"
选项：用户通过"其他"输入

问题2："描述视觉风格——颜色、氛围、美学"
标题："视觉"
选项：["暖日落色调", "简洁极简白色", "霓虹赛博朋克", "其他（请描述）"]

问题3："我应该生成多少个变体？"
标题："数量"
选项：["3（推荐）", "5", "7", "10"]
收到所有答案后，立即进入步骤2——不再提问。
**注意：**如果
frontend-design
技能可用，使用它来提升视觉设计质量。

Step 2: Create Riff Directories

步骤2：创建变体目录

bash
mkdir -p riff-1 riff-2 riff-3 ...
bash
mkdir -p riff-1 riff-2 riff-3 ...

Step 3: Generate Riffs in Parallel

步骤3：并行生成变体

Use the bundled script to generate riffs in parallel. Each script instance calls 
claude -p
(uses subscription tokens) and writes directly to disk.
Generate riffs in parallel based on user's count:
bash
undefined
**使用捆绑脚本并行生成变体。**每个脚本实例调用
claude -p
（使用订阅令牌）并直接写入磁盘。
根据用户选择的数量并行生成变体：
bash
undefined

For each N from 1 to ${count}:

对于从1到${count}的每个N：

node "${CLAUDE_PLUGIN_ROOT}/scripts/generate-riff.js" "${prompt}" N riff-N/app.jsx "${visual}" &
node "${CLAUDE_PLUGIN_ROOT}/scripts/generate-riff.js" "${prompt}" N riff-N/app.jsx "${visual}" &

Then wait for all

然后等待所有任务完成

wait echo "All ${count} riffs generated!"

Example for count=3:
```bash
node "${CLAUDE_PLUGIN_ROOT}/scripts/generate-riff.js" "productivity apps" 1 riff-1/app.jsx "warm sunset oranges and soft creams" &
node "${CLAUDE_PLUGIN_ROOT}/scripts/generate-riff.js" "productivity apps" 2 riff-2/app.jsx "warm sunset oranges and soft creams" &
node "${CLAUDE_PLUGIN_ROOT}/scripts/generate-riff.js" "productivity apps" 3 riff-3/app.jsx "warm sunset oranges and soft creams" &
wait
Why this works:
  • Each script calls 
    claude -p "..."
    → uses subscription tokens
  • Script writes directly to disk → no tokens flow through main agent
  • Background processes (
    &
    ) run in parallel → true concurrency
  • Main agent only sees "✓ riff-N/app.jsx" output → minimal tokens
wait echo "所有${count}个变体已生成！"

数量为3的示例：
```bash
node "${CLAUDE_PLUGIN_ROOT}/scripts/generate-riff.js" "productivity apps" 1 riff-1/app.jsx "warm sunset oranges and soft creams" &
node "${CLAUDE_PLUGIN_ROOT}/scripts/generate-riff.js" "productivity apps" 2 riff-2/app.jsx "warm sunset oranges and soft creams" &
node "${CLAUDE_PLUGIN_ROOT}/scripts/generate-riff.js" "productivity apps" 3 riff-3/app.jsx "warm sunset oranges and soft creams" &
wait
工作原理：
  • 每个脚本调用
    claude -p "..."
    → 使用订阅令牌
  • 脚本直接写入磁盘 → 令牌不经过主Agent
  • 后台进程（
    &
    ）并行运行 → 真正的并发
  • 主Agent仅看到"✓ riff-N/app.jsx"输出 → 令牌消耗最小化

Step 4: Assemble HTML

步骤4：组装HTML

Convert each app.jsx to a complete index.html:
bash
node "${CLAUDE_PLUGIN_ROOT}/scripts/assemble-all.js" riff-1 riff-2 riff-3 ...
将每个app.jsx转换为完整的index.html：
bash
node "${CLAUDE_PLUGIN_ROOT}/scripts/assemble-all.js" riff-1 riff-2 riff-3 ...

Step 5: Evaluate & Rank

步骤5：评估与排名

Read the pitch.md files (NOT the full code) for fast evaluation:
bash
undefined
读取pitch.md文件（而非完整代码）以快速评估：
bash
undefined

Read pitch files - contains reasoning about theme, colors, functionality

读取pitch文件——包含关于主题、颜色、功能的推理

cat riff-*/pitch.md
cat riff-*/pitch.md

Also read BUSINESS comments for app names (just first 10 lines of each)

同时读取BUSINESS注释获取应用名称（仅每个文件的前10行）

head -10 riff-*/app.jsx

**pitch.md** contains the model's reasoning about theme, colors, and design choices.
**BUSINESS comment** (top of app.jsx) contains: name, pitch, customer, revenue.

Then create RANKINGS.md using this format:

```markdown
head -10 riff-*/app.jsx

**pitch.md**包含模型关于主题、颜色和设计选择的推理。
**BUSINESS注释**（app.jsx顶部）包含：名称、定位、客户群体、收入模式。

然后使用以下格式创建RANKINGS.md：

```markdown

Riff Rankings: [Theme]

变体排名：[主题]

Summary

摘要

RankApp NameScoreBest For
1[Name]XX/50[one-liner]
2[Name]XX/50[one-liner]
............
排名应用名称分数适用场景
1[名称]XX/50[一句话描述]
2[名称]XX/50[一句话描述]
............

Detailed Scores

详细分数

#1: [App Name] (riff-N)

#1: [应用名称] (riff-N)

CriterionScoreNotes
OriginalityX/10[Why unique or derivative]
Market PotentialX/10[Target audience size, demand]
FeasibilityX/10[Technical complexity, time to build]
MonetizationX/10[Revenue model viability]
Wow FactorX/10[First impression, engagement]
TotalXX/50
[Repeat for each riff]
评估维度分数备注
原创性X/10[为何独特或衍生]
市场潜力X/10[目标受众规模、需求]
可行性X/10[技术复杂度、开发时间]
变现能力X/10[收入模式可行性]
惊艳度X/10[第一印象、用户吸引力]
总分XX/50
[为每个变体重复上述格式]

Recommendations

推荐

  • Best for solo founder: [riff-N] - [reason]
  • Fastest to ship: [riff-N] - [reason]
  • Most innovative: [riff-N] - [reason]
  • Best monetization: [riff-N] - [reason]

**Scoring Guidelines:**
- 1-3: Poor - significant issues
- 4-5: Below average - notable weaknesses
- 6-7: Average - meets expectations
- 8-9: Good - stands out positively
- 10: Excellent - exceptional in this criterion
  • 适合独立创始人： [riff-N] - [理由]
  • 最快上线： [riff-N] - [理由]
  • 最具创新性： [riff-N] - [理由]
  • 最佳变现： [riff-N] - [理由]

**评分指南：**
- 1-3：差 - 存在重大问题
- 4-5：低于平均 - 有明显弱点
- 6-7：平均 - 符合预期
- 8-9：良好 - 有突出优势
- 10：优秀 - 在该维度表现卓越

Step 6: Generate Gallery

步骤6：生成画廊页面

Create index.html gallery page with:
  • Dark theme (#0a0a0f background)
  • Glass-morphism cards with purple/cyan accents
  • Each card: rank badge, app name, pitch, score bar, "Launch →" link
  • Responsive grid layout
  • Self-contained with inline styles
创建index.html画廊页面，包含：
  • 深色主题（#0a0a0f背景）
  • 带有紫色/青色点缀的玻璃态卡片
  • 每张卡片：排名徽章、应用名称、定位、分数条、"启动→"链接
  • 响应式网格布局
  • 内联样式的独立页面

Step 7: Present Results

步骤7：展示结果

Generated ${count} riffs for "${prompt}":
#1: riff-X - App Name (XX/50)
#2: riff-Y - App Name (XX/50)
...

Open index.html for gallery, or browse riff-1/, riff-2/, etc.
已为"${prompt}"生成${count}个变体：
#1: riff-X - 应用名称 (XX/50)
#2: riff-Y - 应用名称 (XX/50)
...

打开index.html查看画廊，或浏览riff-1/、riff-2/等目录。

Plugin Directory

插件目录

The plugin root is available via 
${CLAUDE_PLUGIN_ROOT}
which Claude Code resolves at runtime.
插件根目录可通过
${CLAUDE_PLUGIN_ROOT}
访问，Claude Code会在运行时解析该路径。

What's Next?

下一步

After presenting rankings, guide the user with AskUserQuestion:
Question: "You have ${count} variations ranked. What would you like to do?"
Header: "Next"
Options:
- Label: "Develop the #1 ranked app"
  Description: "Take the top-ranked variation and continue building it. I'll copy riff-1/app.jsx to your working directory so you can iterate with the full vibes feature set - add functionality, refine the design, make it yours."

- Label: "Let me pick a different one"
  Description: "The rankings are just my analysis - you might see something special in another variation. Tell me which riff number speaks to you and I'll set it up for development."

- Label: "Turn winner into SaaS (/sell)"
  Description: "Ready to monetize the best one? Sell adds Clerk authentication with passkeys, subscription billing, and multi-tenant database isolation. Each customer gets their own subdomain with their own data."

- Label: "Deploy a riff as demo (/exe)"
  Description: "Want to share one quickly? Deploy puts any variation live at yourapp.exe.xyz within minutes. Great for getting feedback before committing to further development."

- Label: "I'm done for now"
  Description: "Wrap up this session. All riffs are saved in riff-1/, riff-2/, etc. - browse them locally or come back later to continue."
After user responds:
  • "Develop #1" → Copy riff-1/app.jsx to ./app.jsx, confirm ready for vibes iteration
  • "Pick different" → Ask which riff number, then copy that one
  • "Turn into SaaS" → Copy riff-1/app.jsx, auto-invoke /vibes:sell skill
  • "Deploy demo" → Ask which riff, auto-invoke /vibes:exe skill with that riff's index.html
  • "I'm done" → Confirm riffs saved, provide directory listing
展示排名后，使用AskUserQuestion引导用户：
问题："你有${count}个已排名的变体。你想要做什么？"
标题："下一步"
选项：
- 标签："开发排名第一的应用"
  描述："选择排名最高的变体继续开发。我会将riff-1/app.jsx复制到你的工作目录，以便你使用完整的vibes功能集进行迭代——添加功能、优化设计、自定义应用。"

- 标签："让我选择另一个"
  描述："排名只是我的分析——你可能在其他变体中发现亮点。告诉我你喜欢哪个变体编号，我会为你设置开发环境。"

- 标签："将获胜者转为SaaS（/sell）"
  描述："准备好变现最佳变体了吗？Sell功能会添加Clerk密钥认证、订阅计费和多租户数据库隔离。每个客户将获得自己的子域名和独立数据。"

- 标签："部署变体作为演示（/exe）"
  描述："想要快速分享某个变体？部署功能可在几分钟内将任意变体上线到yourapp.exe.xyz。非常适合在投入进一步开发前获取反馈。"

- 标签："我现在结束"
  描述："结束本次会话。所有变体都保存在riff-1/、riff-2/等目录中——你可以本地浏览，或稍后回来继续。"
用户回应后：
  • "开发排名第一的应用" → 将riff-1/app.jsx复制到./app.jsx，确认已准备好进行vibes迭代
  • "选择另一个" → 询问变体编号，然后复制对应的文件
  • "转为SaaS" → 复制riff-1/app.jsx，自动调用/vibes:sell技能
  • "部署演示" → 询问变体编号，使用该变体的index.html自动调用/vibes:exe技能
  • "我现在结束" → 确认变体已保存，提供目录列表 ",