SmartForms Demo Center
SSOT: /demo/agent-workflow
Central demo Demo directory
Mental model

AI agent 不是只选一个 theme，它是在写一张体验配方。

配方里每一层职责不同：theme 决定长相，placement 决定位置，trigger 决定时机，traffic/UTM 决定人群和来源条件。最后 SDK 在浏览器里拿当前 URL、referrer、visit state 去判断该展示哪一个 experience。

1. 业务目标Agent 先确定要收集什么、给谁看、成功后进哪个 pipeline。
2. 基础表单字段、校验、提交、感谢页、邮件通知先稳定。
3. Branch答案条件、show_if、result tier 和 route 先能确定分岔。
4. Theme tokens用 visual_archetype + token 生成统一设计语言。
5. Placementembed、modal、sticky、slide、floating 等展示位置。
6. Triggerpage_load、click、scroll、exit、delay、revisit 等触发时机。
7. TargetingUTM、referrer、path、device、visit 等条件过滤。
8. Submit pipeline提交后进入 enrichment、connector、workflow 分支。
Feature acceptance map

每个能力都要能回答：看哪个 demo、进哪个 Admin、跑哪个 smoke。

这张表是给 operator 和 AI agent 的导航层。先用它定位功能，再进入对应 tab 或 Admin surface；不要把 trigger、traffic 和 connector pipeline 混在一起验。

LayerL1 Basic form字段、identity、submit、邮件边界。
DemoBasics tabForm elements
AdminExperiencesNew → Detail → Preview → Publish 已有 click QA。
Verifypnpm smoke:public-submit-browserpnpm smoke:demo-foundation
green
LayerL2 Branch答案条件、show_if、result tier、route。
DemoBranch tabBranch condition
AdminForm detailBranch section lives on the detail editor.
Verifypnpm smoke:branch-conditionpnpm smoke:contact-show-if
green
LayerL2 Design + Placementtoken theme、展示表面、跨 placement 一致性。
DemoThemes tabPlacement tab
AdminPlacement workbench保存后 runtime resolve 会吃到新配置。
Verifypnpm audit:theme-placement-visualpnpm smoke:targeting-selection
green
LayerL2 Trigger + Traffictrigger 管时机；traffic/UTM 管资格和上下文。
DemoTrigger tabTraffic case
AdminTrigger / Traffic workbenchJSON editor is the first safe operator control.
Verifypnpm smoke:demo-foundationruntime resolve evidence
green
LayerL4 Connector pipelineREAD / TRANSFORM / WAIT / WRITE / approval 编排。
DemoConnectors tabProduction report
AdminPipelinesConnector settings
Verifypnpm smoke:production-packpnpm smoke:admin-operator-surfaces
mostly green
Feature index

一项能力一个入口：Tab、Demo、Admin、Verify、Evidence。

这里是 Demo Center 的目录层。要看效果先点 Demo，要改配置进正确 Admin，要验收就跑 Verify；证据文件记录最近一次通过的结果。

FeatureBasic form普通表单渲染、校验、提交、结果和邮件边界。
Tab + DemoBasics tabForm elementsContact form
AdminFormsNew form
Verify + Evidencepnpm smoke:public-submit-browserpnpm smoke:demo-foundationEvidence: docs/discussions/wo-50-bottom-up-product-chain-current-pass-evidence.md
FeatureBranch / condition答案分岔、show_if、result tier、route fallback。
Tab + DemoBranch tabBranch conditionshow_if contact
AdminForm detailBranch section in editor.
Verify + Evidencepnpm smoke:branch-conditionpnpm smoke:contact-show-ifEvidence: docs/discussions/wo-50-branch-condition-smoke.json
FeatureTheme tokens同一 schema 换 token 后呈现不同但统一的视觉语言。
Tab + DemoThemes tabTheme parity labWarm theme
AdminDesign editorTheme pack and brand tokens.
Verify + Evidencepnpm audit:theme-placement-visualpnpm smoke:demo-foundationEvidence: docs/discussions/wo-50-theme-placement-visual-audit.json
FeaturePlacementembed、modal、sticky、slide、floating 等展示表面。
Tab + DemoPlacement tabEmbedButton modal
AdminPlacement workbenchSaved placement + draft controls.
Verify + Evidencepnpm smoke:demo-foundationpnpm audit:foundation-visualEvidence: docs/discussions/wo-50-foundation-visual-audit.json
FeatureTrigger什么时候打开 placement：click、scroll、delay、URL、API 等。
Tab + DemoTrigger tabClick triggerAPI trigger
AdminTrigger controlsControls and advanced JSON stay in sync.
Verify + Evidencepnpm smoke:trigger-interactionpnpm smoke:admin-workbench-draft-syncEvidence: docs/discussions/wo-51-admin-workbench-draft-sync-smoke-evidence.md
FeatureTraffic / UTM targeting谁符合展示条件，以及哪些 attribution 进 hidden fields。
Tab + DemoGoogle CPC caseLinkedIn case
AdminTraffic rule composerRule composer + JSON sync.
Verify + Evidencepnpm smoke:targeting-selectionpnpm smoke:admin-workbench-draft-syncEvidence: docs/discussions/wo-50-targeting-selection-smoke.json
FeatureConnector pipeline提交后的 READ / TRANSFORM / WAIT / WRITE / approval 流水线。
Tab + DemoConnectors tabProduction report
AdminPipelinesConnector settings
Verify + Evidencepnpm smoke:production-packpnpm smoke:admin-operator-surfacesEvidence: docs/discussions/wo-48y-production-pack-live-evidence.md
FeatureAdmin authoring正确后台里的创建、详情、预览、发布、workbench draft sync。
Tab + DemoOverview tabDemo directory
AdminNew formForm detail
Verify + Evidencepnpm smoke:admin-form-authoringpnpm smoke:admin-workbench-draft-syncEvidence: docs/discussions/wo-51-admin-workbench-draft-sync-smoke-evidence.md
Basic Form

先证明普通表格能展示、校验、提交、返回结果，并触发基础邮件/结果页。

steps + identity + routes
Branch / Condition

决定不同答案最后落到哪个 result tier 和 route；这是 connector 之前的基础分岔层。

flow.branch_rules
Theme

决定视觉语言。同一个 schema 换 token 后，按钮、选项、边框、节奏应该一起变化。

presentation.theme_pack
Placement

决定表单出现在哪个表面：页面内、弹窗、侧滑、顶部/底部条或浮动按钮。

placements[].mode
Trigger

决定什么时候打开 placement。它是时间点，不是流量来源。

placements[].trigger
Traffic / UTM

决定谁符合展示条件，同时作为 hidden field 进入提交上下文。

targeting + hidden_fields
Connector Pipeline

决定提交后跑哪些第三方读取、计算、写入、等待和报告生成步骤。

pipeline.pipeline_id
QA Contract

每个能力必须能说明用途、schema 位置、可见 demo 和发版检查项。

docs/DEMO-QA-RUNBOOK.md

Agent 最终写出的核心结构

这不是“一个按钮弹一个表单”那么简单，而是 experience schema 里的组合关系。

这层解决什么

Input自然语言业务目标、站点风格、投放场景、提交后动作。
Output完整 experience schema：视觉、placement、trigger、targeting、hidden fields、pipeline binding。
GuardAI 只在设计期生成配方；运行时由确定性 SDK 和 Workflow 执行。

QA 快速检查

  • 切换 tab 后 URL 带 `?tab=`，刷新仍能回到对应 tab。
  • 所有 iframe 都使用 same-origin demo，除最终报告证明外不打生产提交。
  • 页面能解释 UTM 是 targeting/context，不是 trigger。
{ "presentation": { "theme_pack": "fengtalk_warm", "visual_archetype": "editorial_warm" }, "placements": [ { "mode": "button_modal", "trigger": { "type": "click", "selector": "[data-smartform-cta]" }, "targeting": { "all": [ { "field": "traffic.source_type", "op": "eq", "value": "paid_search" }, { "field": "attribution.utm_campaign", "op": "contains", "value": "latam" } ] } } ], "hidden_fields": ["utm_source", "utm_campaign", "utm_term", "gclid", "traffic.source_type"] }

用人话讲：基础表单是地基，branch 是表单内分岔，theme/placement/trigger/traffic 决定用户看到什么，connector pipeline 才是提交后的业务流程。

相关 live demo

Open
Foundation layer

最基础的能力：表单能填、能提交、能返回结果、能发邮件。

这一层不谈 AI，也不谈 connector。先证明普通用户看到的表格是稳定的：字段渲染正确、校验可用、提交路径清楚，contact / qualification / pipeline 三种提交结果不会互相混淆。

基础表单验收顺序

Basic form 在配方里的位置

For定义用户要回答什么、怎么识别联系人、提交后看到什么。
Schemasteps[] + identity + routes + copy
BaselineContact 显示感谢页并排队邮件；qualification 返回 result tier；pipeline submit 才进入 enrichment。

验收

  • Contact demo 一屏表单能提交，且只 start 一次 attempt。
  • Qualification demo 能按答案显示对应结果 tier 和资源投递说明。
  • Pipeline-backed Fengtalk 表单提交后进入报告生成，不被误当普通 qualification。
  • 轻量 smoke 不真实发邮件；生产 provider receipt 由 heavier smoke pack 覆盖。
Contact form基础联系表单：姓名、邮箱、电话、地址、留言、同意。Open demo Element playground24 种 step type 的可视化样板，标清 implemented / partial。Open playground Fengtalk form当前生产 enrichment 入口，提交后进入 pipeline。Open live Styled sample同一 SDK shell 下查看主题化基础字段。Open demo Report resultpipeline 完成后的真实报告页证明。Open report
Foundation smoke covers: - contact submit path - qualification result path - pipeline submit path - same-origin /sdk.js - no console errors - no horizontal overflow

Basic form preview

Open demo
Decision layer

Branch 是表单内部的分岔，不是 connector 之后才发生的事。

AI agent 可以设置不同 condition：用户答案、分数、hidden field、traffic context 都能决定下一步、结果 tier 或 route。运行时按确定性规则判断，不临时让 AI 猜。

Branch / condition 验收顺序

Branch 在配方里的位置

For根据答案或上下文走不同路径：跳到下一步、显示字段、返回不同结果、进入不同 route。
Schemasteps[].next_step + flow.branch_rules + show_if
Field syntax运行时同时支持 budget 和 answers.budget，避免 agent 写法漂移。

验收

  • High / low / fallback 三条路径都能显示对应结果和 route id。
  • Contact `show_if` 能根据答案显示/隐藏相关字段。
  • 裸 answer id 与 `answers.` 两种写法都可命中。
  • 没有命中的 branch rule 会退回 score threshold，不会随机走。
Branch condition demo可见 high / low / mid route 结果。Open demo Contact show_if基础联系表单里的条件显隐。Open demo Traffic context来源上下文可进入 targeting/hidden fields。Open case Pipeline branch提交后 connector branch 属于更高一层。Open tab
Branch contract: flow.branch_rules[] -> deterministic evaluator show_if -> field visibility score thresholds -> fallback result tier pipeline branch -> after-submit workflow layer

用人话讲：Branch 先解决“这个用户在表单里该走哪条路”。Connector pipeline 后面的 branch 解决“第三方/报告结果回来后该做什么”。这两层不能混成一个概念。

Branch preview

Open demo
Design layer

Theme 是 token，不应该是硬编码皮肤。

同一个表单 schema 换 theme token，表单的材质、按钮、选项、边框、节奏应该整体变化；placement 变了，设计语言也应该保持一致。

推荐保留的主题

Theme 在配方里的位置

For让同一个表单在不同品牌/场景下呈现完全不同的体验。
Schemapresentation.theme_pack + brand_tokens + visual_archetype
Rule推荐主题是当前产品主线；旧 color-only themes 只保持兼容，不推荐 agent 使用。

验收

  • 每个主题都有独立页面，可切换不同 placement。
  • 同一主题在 embed、modal、sticky、slide、floating 里保持同一设计语言。
  • 废弃主题不出现在推荐列表里。
Fengtalk Warm丰谈主品牌，暖色、克制、咨询感。Open demo Editorial Light更像出版物和专业服务页面。Open demo Obsidian Gold深色高端咨询、报告和私域场景。Open demo Neo Brutal强边框、高对比，适合活动和工具页。Open demo Neon Tech偏产品、AI、工程感的暗色方案。Open demo Trust BlueSaaS、B2B、金融类更稳的默认感。Open demo

Theme parity preview

Open lab
Surface layer

Placement 只回答一个问题：表单出现在哪个表面。

同一个配方可以用 embed 做内容页内嵌，也可以用 modal 做 CTA，也可以用 sticky 或 slide 做轻提醒。它不决定“谁看”和“什么时候看”。

Placement demo 清单

Placement 在配方里的位置

For选择表单出现在页面里的哪个表面。
Schemaplacements[].mode
Not for不决定展示时机，不决定流量分群，也不决定提交后的 pipeline。

验收

  • 每个 placement 页面返回 200，并加载 same-origin `/sdk.js`。
  • 对应展示形态可见，且不会在页面加载时全部一起炸开。
  • 桌面和手机宽度无横向溢出。
Embed页面内容里的常驻表单。Open demo Button modal点击 CTA 后打开弹窗。Open demo Sticky top顶部常驻条，适合公告/轻转化。Open demo Sticky bottom底部条，移动端更明显。Open demo Slide right右侧滑出，适合阅读中提醒。Open demo Floating button浮动入口，用户主动打开。Open demo

Placement preview

Open lab
Timing layer

Trigger 只回答：什么时候启动这个 placement。

点击、滚动、延迟、退出意图、URL match、GTM event、API call、revisit、inactivity 都应该能单独验收。agent 生成配方时，要把 trigger 写进对应 placement。

Trigger cases

Trigger 在配方里的位置

For决定 placement 被打开或展示的时机。
Schemaplacements[].trigger
SeparateURL/UTM 可以参与 targeting；trigger 只处理“何时打开”。

验收

  • 每个 trigger case 都是 preview schema，不创建真实 lead。
  • 点击、滚动、延迟、URL match、API call 能按预期触发。
  • 退出意图、回访、冷却类逻辑要确认不会重复骚扰。
page_load页面加载后自动出现。Open demo click用户点击指定按钮后出现。Open demo scroll_depth滚动到指定深度触发。Open demo exit_intent离开意图触发，带冷却。Open demo url_matchURL 条件匹配后触发。Open demo api_call外部脚本主动调用触发。Open demo

Trigger lab preview

Open lab
Audience layer

UTM 和 traffic source 是分流条件，也是提交后的上下文。

它们可以决定“Google CPC 进来的人看报价表，LinkedIn 进来的人看白皮书表单”，也会作为 hidden field 进入提交记录和 pipeline。

当前 URL 解析结果

Traffic 在配方里的位置

For决定 visitor 属于哪个来源/人群，并把上下文带进提交记录。
Schematargeting + hidden_fields
Importantattribution.utm_source 和 traffic.source_type 是条件和上下文，不是 trigger 本身。

验收

  • Google CPC、LinkedIn paid、Email、Referral 示例能更新解析结果。
  • click id 如 `gclid=demo`、`li_fat_id=demo` 被归类到正确 source_type。
  • 说明文字明确 hidden fields 会进入提交和 pipeline。
sourcedirect
mediumnone
campaignnone
click idnone
source_typedirect
agent use默认 experience；也可以作为 hidden field 提交。
Google CPC LinkedIn paid Email Direct

上线实现里，traffic 判断进入 targeting/audience 层；表单提交时再把 attribution.utm_*、click id、referrer、landing page 写入 hidden fields，给 enrichment 和后续 connector 使用。

Traffic related demos

Open URL trigger
Execution layer

Connector pipeline 是提交后的真实业务流水线。

WO-35j 已证明：旧的 Fengtalk HS code + 公司背景调查表单，可以从 authoring template 创建成新表单，并通过 `trade_enrichment` connector pipeline 跑到报告页和邮件审计。

14/14template connector readiness 全部 runtime ready，missing config 为 0。
29KBDeepSeek report 写入 R2，并由 `/report/:jobId` 直接服务 HTML。
1Resend provider id 存在，`email_outcome_recorded` 成功落 D1。
0临时 smoke copy 已归档并取消发布，没有残留在线表单。

已验收的执行链路

Agent/Admin 不需要重写旧硬编码表单。它应该从 `tpl_fengtalk_trade_enrichment` 开始，先看 readiness，再创建 draft，发布后由 Workflow 执行 connectors。

Connectors 在配方里的位置

For把提交后的业务动作拆成可验证的读取、转换、写入、等待和报告步骤。
Schemapipeline.pipeline_id + pipeline.input_map
RuntimeCloudflare Workflow 执行确定性 JSON pipeline；AI 只在 TRANSFORM connector 内部或设计期使用。

验收

  • template readiness 是 runtime ready，缺配置为 0。
  • public submit 启动 Workflow-backed enrichment job。
  • 报告页服务最终 HTML，邮件 outcome guard 写入 D1。
  • 临时 smoke copy 归档且 unpublished。
Template12-field Fengtalk schema + `trade_enrichment` binding
Readiness14 connectors ready, no missing runtime config
Submitpublic attempt starts Workflow job
EnrichHS lookup, Comtrade, Perplexity
WebsiteTinyFish search/fetch plus fallback family
ReportDeepSeek HTML stored as R2 report ref
EmailResend sends report link and records outcome guard

编排关系：不是排一串 API，而是确定哪些能并跑、哪些要 fallback、哪些要分岔

parallel互不依赖，全部都有价值
comtradeHS code 市场数据，和情报/网站读取可并行。
perplexity市场叙事和竞争情报，结果进入报告上下文。
hscode_compare规则化比对，不靠 AI 临时算。
WRITE guardparallel/race 里的 WRITE 必须 `config.dry_run: true`。
fallback先便宜/快，失败再降级
tinyfish_fetch优先抓取官网内容。
cloudflare_browser_fetchJS 渲染页面或普通 fetch 不够时接上。
firecrawl_fetch深抓/备用来源，生产 fallback smoke 已通过。
screenshot_ref需要页面截图证据时存 R2 ref；生产 screenshot smoke 已通过。
branch + wait第三方结果进分岔
company_profile汇总网站/市场/表单答案，输出 confidence/tier 字段。
profile_branch按 catalog `branch_fields` 做确定性分岔。
wait_human_approval需要人工审批时暂停 Workflow，等事件再继续。
real WRITE邮件、CRM、短信、付款写动作放在 branch/approval 后。
  • Agent 先用 `smartform_list_connectors` 看 `required_inputs`、`branch_fields`、`side_effects` 和 `default_dry_run`。
  • API 会用 `pipeline_orchestration_not_safe` 拦住 parallel/race 里的非 dry-run WRITE。
  • 数学和格式转换用 `formula_compute` / `field_transform`；AI 只放进分类、抽取、评分或报告类 TRANSFORM。

Async WAIT：付款和预约不能从 WRITE 直接放行

Stripe 和 Cal.com 这类第三方结果不是马上返回。正确链路是 WRITE 发起动作，WAIT 暂停 Cloudflare Workflow，provider webhook 带 `job_id` 唤醒，然后 branch 决定后续。

Stripe付款完成后再分支
stripe_charge创建 test Checkout Session；这一步不代表已付款。
wait_stripe_paymentWorkflow 等 `Stripe-Signature` 验证后的 webhook。
route_payment只从 `steps.wait_payment.data.paid` 进入 paid 分支。
pendingStripe endpoint 16/16；需清 slot 后上线 `STRIPE_WEBHOOK_SECRET`。
Cal.com真实预约回调
calendar_book用 numeric `ACOS_CALCOM_EVENT_TYPE_ID` 创建真实测试预约。
wait_calendly_booking接受 Cal.com native `x-cal-signature-256`。
payload.metadata.job_id不用顶层 job_id 也能路由到正确 Workflow。
cleanup passed真实 Cal.com booking provider smoke 已进入 booked 分支，并自动取消测试预约。
  • 已通过生产 simulated/signed smoke：Stripe paid branch、Cal booked branch、Cal native signature、Cal metadata routing、Cal true provider booking + cleanup、Cloudflare Browser screenshot R2 ref、Firecrawl fallback。
  • 后续真实验收看 `docs/discussions/wo-44-wait-webhook-continuation-evidence.md`，不是看 checkout 或 booking 创建是否成功。
  • 所有 follow-up email/CRM/write 动作保持 `config.dry_run: true`，直到 operator 明确批准真实副作用。
{ "template_id": "tpl_fengtalk_trade_enrichment", "pipeline_id": "trade_enrichment", "connector_readiness": { "available": 14, "missing_config": 0, "runtime_ready": true }, "final_smoke": { "job_id": "enr_3b3951018bac49", "report_url": "https://form.fengtalk.ai/report/enr_3b3951018bac49", "email_outcome_recorded": true } }
Latest production reportOpen Connector demo tabHere Demo directoryOpen

Admin UI 现有 Forms 页已经展示 `Fengtalk draft` 和 connector readiness/setup actions。本轮没有改 admin repo，因为那里有既有未提交工作，避免混入无关 diff。

Connector pipeline proof

Open report
Production proof is available as a full report page.

Mobile uses a direct report link instead of an embedded report iframe, so the demo page stays readable while preserving the same production evidence.

Open final report