Prompt templates

Ready-to-use prompts for common Rho 生成场景。复制 → 替换 {{...}} 占位 → 喂给 LLM。

Template 1: 基础生成器（Universal）

用途：任何 Rho 文档生成的 baseline。

System prompt

You are a Rho format generator. Rho is markdown extended with these blocks:

# Callout
> [!INFO] | [!WARN] | [!ZEN]
> body content

# Layout grid
\```layout grid cols=N        (N: 1-6)
:::card accent=blue|red|green|yellow|purple|gray
content
:::
\```

# Tabs / Stepper / Modal / Timeline / Annotate
(see protocol)

# Interactive (most important)
\```interact
slider name min max initial step
input name "default"
select name "opt1" "opt2"
toggle name true
button name "label" value
computed varName = expression
timer t min max step loop|once|pingpong|pause
template stl:
  [label] -> [{varName}]
  [label2] -> [{(expr):.2f}]
template vega-lite:
  { ... vega-lite spec with {var} placeholders ... }
template svg:
  <svg viewBox="0 0 100 100">...{expr}...</svg>
\```

# Mini DSL (in {} placeholders)
+, -, *, /, %, **
==, !=, <, >, <=, >=, &&, ||, !, ?:
pow(a,b), sqrt(x), sin(x), cos(x), tan(x), pi, e
abs, min, max, floor, ceil, round
NOT JavaScript - no Math.X, no if/else, no functions

# Format spec
{value:.2f}  - 2 decimals
{value:.0f}  - integer
{value:%}    - percentage (auto ×100)

# Cross-block state sharing
\```interact namespace foo
slider rate ...
\```

\```interact namespace foo
template stl: [{rate}]    ← reuses rate
\```

# Plain-text fallback
All Rho DSL must be valid markdown so non-Rho readers see source as plain text.

Task: based on user request, generate clean Rho format markdown.
Be concise. Don't add unrelated content.

User prompt template

Generate a Rho format document for: {{topic}}

Requirements:
- {{requirement 1}}
- {{requirement 2}}

Make it interactive where it adds value.

Template 2: 计算器（Calculator）

用途：BMI / 复利 / 房贷 / 任何"输入参数 → 显示结果"工具。

Prompt

Generate a Rho calculator for: {{topic}}

Inputs (sliders):
- {{var1}}: range {{min1}} to {{max1}}, default {{default1}}, step {{step1}}
- {{var2}}: range {{min2}} to {{max2}}, default {{default2}}, step {{step2}}

Formula: {{formula expression}}

Output:
- Display the formula
- Show all input values + computed result
- Format result to {{N}} decimal places

Example: BMI calculator

User input:

Generate a Rho calculator for: BMI (Body Mass Index)

Inputs (sliders):
- weight: range 40 to 120, default 70, step 1
- height: range 1.4 to 2.1, default 1.7, step 0.01

Formula: BMI = weight / (height * height)

Output:
- Display the formula
- Show weight, height, BMI
- Format BMI to 1 decimal place
- Add a category label (underweight/normal/overweight/obese)

LLM output should look like:

# BMI Calculator

> [!INFO]
> **Formula**: BMI = weight (kg) / height² (m)

```interact
slider weight 40 120 70 1
slider height 1.4 2.1 1.7 0.01
computed bmi = weight / (height * height)
computed category = bmi < 18.5 ? "Underweight" : bmi < 24 ? "Normal" : bmi < 28 ? "Overweight" : "Obese"
template stl:
[Weight] -> [{weight} kg]
[Height] -> [{height:.2f} m]
[BMI] -> [{bmi:.1f}] ::mod(category="{category}")
```

Template 3: 数据可视化 + chart

用途：参数驱动的数学函数 / 概率分布 / 物理曲线。

Prompt

Generate a Rho document with a Vega-Lite chart for: {{topic}}

Parameters (sliders):
- {{param1}}: {{min1}} to {{max1}}, default {{default1}}
- {{param2}}: {{min2}} to {{max2}}, default {{default2}}

Plot: {{function description, e.g., "sin({param1} * x) over x in [0, 6.28]"}}

X axis: {{x label}}, range [{{xmin}}, {{xmax}}]
Y axis: {{y label}}, range [{{ymin}}, {{ymax}}]

Example: Sine wave with frequency / amplitude

User input:

Generate a Rho document with a Vega-Lite chart for: Sine wave

Parameters (sliders):
- frequency: 0.5 to 5, default 1
- amplitude: 0.1 to 2, default 1

Plot: amplitude * sin(frequency * x) over x in [0, 6.28]

X axis: time, range [0, 6.28]
Y axis: amplitude, range [-2, 2]

LLM should output:

# Sine Wave Explorer

```interact
slider frequency 0.5 5 1 0.1
slider amplitude 0.1 2 1 0.1
template vega-lite:
{
  "width": 500,
  "height": 200,
  "data": {"sequence": {"start": 0, "stop": 6.28, "step": 0.05, "as": "x"}},
  "transform": [
    {"calculate": "{amplitude} * sin({frequency} * datum.x)", "as": "y"}
  ],
  "mark": "line",
  "encoding": {
    "x": {"field": "x", "type": "quantitative", "title": "time"},
    "y": {"field": "y", "type": "quantitative", "title": "amplitude", "scale": {"domain": [-2, 2]}}
  }
}
```

Template 4: 教程（Step-by-step tutorial）

用途：安装步骤 / 教学 walkthrough / 配置向导。

Prompt

Generate a Rho stepper tutorial for: {{topic}}

Steps:
1. {{step 1 title}} - {{step 1 detail}}
2. {{step 2 title}} - {{step 2 detail}}
3. {{step 3 title}} - {{step 3 detail}}
...

Each step should have:
- Clear action
- Code block if applicable
- Brief explanation (< 50 words)

Example: install Rho

User input:

Generate a Rho stepper tutorial for: installing Rho desktop app

Steps:
1. Download - Get the binary for your platform from GitHub
2. Install - Standard install for macOS/Windows/Linux
3. First open - Launch and pick a .md file
4. Verify - Should see colored callouts and interactive sliders

LLM output:

# Install Rho Desktop App

```stepper
:::step title="Download"
Get the binary for your platform:

\```bash
# macOS
brew install rho

# Linux
curl -L https://github.com/scos-lab/markview/releases/latest/rho.AppImage -o rho.AppImage
chmod +x rho.AppImage
\```
:::

:::step title="Install"
Drag the `.dmg` to Applications (macOS), run the `.msi` (Windows), or place `.AppImage` somewhere on PATH (Linux).
:::

:::step title="First open"
Launch Rho. File → Open → select any `.md` file.
:::

:::step title="Verify"
The file should render with colored callouts and any interactive blocks should be working (sliders draggable).
:::
```

Template 5: 对比表（Comparison）

用途：方案 A vs B vs C / 套餐对比 / 工具横向比较。

Prompt

Generate a Rho layout grid comparing: {{N}} options/plans/tools

Options:
- {{name 1}}: {{key features}}
- {{name 2}}: {{key features}}
- {{name 3}}: {{key features}}

For each, include:
- Title (bold)
- Bulleted feature list (3-5 items)
- {{additional info, e.g., "price"}}

Example: 3-tier pricing

User input:

Generate a Rho layout grid comparing: 3 SaaS pricing tiers

Options:
- Free: 5 docs, community support, $0/mo
- Pro: unlimited docs, email support, private sharing, $10/mo
- Team: SSO, audit log, priority support, SLA, $50/mo

For each:
- Bold title
- Bulleted feature list
- Price at the bottom

LLM output:

# Pricing

```layout grid cols=3
:::card accent=gray
**Free**

- 5 documents
- Community support
- Public sharing only

$0/month
:::

:::card accent=blue
**Pro**

- Unlimited documents
- Email support
- Private sharing

$10/month
:::

:::card accent=purple
**Team**

- SSO + audit log
- Priority support
- 99.9% SLA

$50/month
:::
```

Template 6: 动画 demo（SVG + timer）

用途：物理仿真 / 算法可视化 / 旋转 / 振动。

Prompt

Generate a Rho SVG animation for: {{topic}}

Use a timer to drive: {{what changes over time}}
Use sliders for adjustable parameters: {{params}}

The animation:
- viewBox: {{viewbox dims}}
- Elements: {{describe shapes}}
- Position formula: {{describe how positions are computed from timer + params}}

Example: Pendulum

User input:

Generate a Rho SVG animation for: simple pendulum

Use a timer to drive: angle of swing
Use a slider: pendulum length (30 to 80, default 50)

The animation:
- viewBox 0 0 200 100
- Pivot at (100, 0), pendulum bob below
- Position: bob swings horizontally based on length * sin(2 * pi * t / 2)
- Bob: red circle radius 6

LLM output:

# Simple Pendulum

```interact
timer t 0 10 0.05 loop
slider length 30 80 50 1
template svg:
<svg viewBox="0 0 200 100" width="400" height="200">
  <circle cx="100" cy="0" r="2" fill="#888"/>
  <line x1="100" y1="0"
        x2="{100 + length * sin(2*pi*t/2):.2f}"
        y2="{length * cos(2*pi*t/2):.2f}"
        stroke="#888" stroke-width="1"/>
  <circle cx="{100 + length * sin(2*pi*t/2):.2f}"
          cy="{length * cos(2*pi*t/2):.2f}"
          r="6" fill="red"/>
</svg>
```

Template 7: 复合文档（multiple capabilities）

用途：完整教学文档 / 产品 doc / 数据探索报告。

Prompt

Generate a Rho document about: {{topic}}

Structure:
1. H1 title
2. Brief intro paragraph
3. A callout highlighting the key insight
4. An interactive section with {{controls}} that drives:
   - Numerical output (template stl)
   - A chart (template vega-lite)
5. A comparison layout showing {{N options}}
6. A summary callout

Use namespace to share state between the interactive blocks.

LLM 应输出完整多 block 文档（含 callout / interact / chart / layout / namespace 共享）。

通用 prompt tips

1. 给 mini DSL 强提示

LLM 默认认 JS 语法。显式说明：

IMPORTANT: Use Rho mini DSL — NOT JavaScript.
Available functions: pow, sqrt, sin, cos, tan, abs, min, max, floor, ceil, log, exp.
Constants: pi, e.
NO Math.sin, NO Math.PI, NO if/else statements (use ternary ?:).

2. 给 namespace 显式指令

When multiple interact blocks should share variables, use:
\```interact namespace finance
slider rate ...
\```

\```interact namespace finance
template stl: [{rate}]
\```

3. 给 plain-text fallback 提示

All output must be valid markdown — Rho DSL goes inside fenced code blocks (```) or directive containers (:::). Don't write raw HTML / JSX outside these blocks.

4. 给 chart range 限制

For Vega-Lite charts, keep data points < 5000 (use sequence step appropriately).
Numeric placeholders {var} go without quotes; string placeholders "{var}" with quotes.

5. 给 SVG 安全提示

For SVG templates, never use <script>, <foreignObject>, on* event attributes, or javascript: URLs. They will be stripped by the safety sanitizer.

See also

• Schema-aware generation — function calling / JSON mode
• Common LLM mistakes & repair — 怎么修常见错
• AINP 协议 — §21 单页速查表 — 完整协议（最严格的指令集）
• AINP 协议 — §16 给 LLM 作者
• Writer's Guide Examples gallery — 看正确的 Rho 文档样例