# Joplo · 用 Joplo 设计 Joplo Version: 36 · index · Expires: never Publisher-provided prototype data. Follow links to read more; steps describe changes, not a cumulative state or an implemented backend. Resource base: https://joplo.app/s/dn1MWCcnDW/ ## description Joplo 自身持续迭代的产品设计项目：保留真实功能的方案、场景、规则与取舍，回看设计如何形成，再继续设计下一次变化。历史原型与当前实现的差异在设计记录中说明。 ## plugins ```json { "ui": { "id": "ui", "title": "Standard UI", "version": "0.7.1", "components": { "AppShell": { "traits": { "layout": { "header": { "size": "height", "defaultSize": 60 }, "footer": { "size": "height", "defaultSize": 60 }, "navbar": { "size": "width", "defaultSize": 260, "breakpoint": true }, "aside": { "size": "width", "defaultSize": 300, "breakpoint": true } }, "text": [ "aria-label" ] } }, "AppShell.Header": { "traits": { "frame": true, "text": [ "aria-label" ] } }, "AppShell.Navbar": { "traits": { "frame": true, "region": "navbar", "text": [ "aria-label" ] } }, "AppShell.Main": { "traits": { "text": [ "aria-label" ] } }, "AppShell.Aside": { "traits": { "frame": true, "region": "aside", "text": [ "aria-label" ] } }, "AppShell.Footer": { "traits": { "frame": true, "text": [ "aria-label" ] } }, "Container": { "traits": { "text": [ "aria-label" ] } }, "Stack": { "traits": { "text": [ "aria-label" ] } }, "Group": { "traits": { "text": [ "aria-label" ] } }, "Flex": { "traits": { "text": [ "aria-label" ] } }, "Grid": { "traits": { "text": [ "aria-label" ] } }, "Grid.Col": { "traits": { "text": [ "aria-label" ] } }, "SimpleGrid": { "traits": { "text": [ "aria-label" ] } }, "Center": { "traits": { "text": [ "aria-label" ] } }, "Box": { "traits": { "text": [ "aria-label" ] } }, "Space": { "traits": { "text": [ "aria-label" ] } }, "Paper": { "traits": { "frame": true, "text": [ "aria-label" ] } }, "Card": { "traits": { "frame": true, "text": [ "aria-label" ] } }, "Card.Section": { "traits": { "text": [ "aria-label" ] } }, "Divider": { "traits": { "text": [ "aria-label", "label" ] } }, "ScrollArea": { "traits": { "text": [ "aria-label" ] } }, "Title": { "traits": { "text": [ "aria-label" ] } }, "Text": { "traits": { "text": [ "aria-label" ] } }, "Code": { "traits": { "text": [ "aria-label" ] } }, "Kbd": { "traits": { "text": [ "aria-label" ] } }, "Blockquote": { "traits": { "text": [ "aria-label", "cite" ] } }, "List": { "traits": { "text": [ "aria-label" ] } }, "List.Item": { "traits": { "text": [ "aria-label" ] } }, "Badge": { "traits": { "text": [ "aria-label" ] } }, "Avatar": { "traits": { "text": [ "aria-label", "name" ] } }, "Image": { "traits": { "text": [ "aria-label", "alt" ] } }, "ThemeIcon": { "traits": { "text": [ "aria-label" ] } }, "Indicator": { "traits": { "disabledPresentation": true, "text": [ "aria-label", "label" ] } }, "Timeline": { "traits": { "text": [ "aria-label" ] } }, "Timeline.Item": { "traits": { "text": [ "aria-label", "title" ] } }, "Table": { "traits": { "frame": true, "text": [ "aria-label", "data" ] } }, "Table.Thead": { "traits": { "text": [ "aria-label" ] } }, "Table.Tbody": { "traits": { "text": [ "aria-label" ] } }, "Table.Tr": { "traits": { "text": [ "aria-label" ] } }, "Table.Th": { "traits": { "text": [ "aria-label" ] } }, "Table.Td": { "traits": { "text": [ "aria-label" ] } }, "DataTable": { "traits": { "frame": true, "text": [ "aria-label", "records", "noRecordsText" ], "textPaths": [ [ "columns", "*", "title" ] ] } }, "Accordion": { "traits": { "native": { "action": "select", "prop": "value", "deselect": true }, "input": "single", "choices": { "descendants": [ "ui:Accordion.Item" ], "labelChild": "ui:Accordion.Control" }, "text": [ "aria-label", "label", "description", "placeholder", "error", "value" ] } }, "Accordion.Item": { "traits": { "frame": true, "text": [ "aria-label" ] } }, "Accordion.Panel": { "traits": { "selectionGate": { "owner": "ui:Accordion", "item": "ui:Accordion.Item", "value": "value" }, "text": [ "aria-label" ] } }, "Radio": { "traits": { "native": { "action": "toggle", "prop": "checked" }, "text": [ "aria-label", "label" ] } }, "Tabs.List": { "traits": { "text": [ "aria-label" ] } }, "Tabs.Panel": { "traits": { "selectionGate": { "owner": "ui:Tabs", "value": "value", "fallbackFirst": true }, "frame": true, "text": [ "aria-label" ] } }, "Breadcrumbs": { "traits": { "text": [ "aria-label" ] } }, "Stepper": { "traits": { "text": [ "aria-label" ] } }, "Stepper.Step": { "traits": { "text": [ "aria-label", "label", "description" ] } }, "Alert": { "traits": { "frame": true, "text": [ "aria-label", "title" ] } }, "Loader": { "traits": { "text": [ "aria-label" ] } }, "Progress": { "traits": { "text": [ "aria-label" ] } }, "RingProgress": { "traits": { "text": [ "aria-label", "label" ] } }, "Skeleton": { "traits": { "text": [ "aria-label" ] } }, "Notification": { "traits": { "frame": true, "text": [ "aria-label", "title" ] } }, "Modal": { "traits": { "frame": true, "gate": [ "opened" ], "selfEvident": true, "text": [ "aria-label", "title" ] } }, "Drawer": { "traits": { "frame": true, "gate": [ "opened" ], "selfEvident": true, "text": [ "aria-label", "title" ] } }, "ChatMessage": { "traits": { "frame": true, "text": [ "aria-label", "name" ] } }, "ToolCall": { "traits": { "text": [ "aria-label", "title" ] } }, "Thinking": { "traits": { "text": [ "aria-label", "title", "duration" ] } }, "Artifact": { "traits": { "frame": true, "text": [ "aria-label", "title" ] } }, "Email": { "traits": { "frame": true, "text": [ "aria-label", "from", "to", "subject", "time" ] } }, "DataCard": { "traits": { "frame": true, "selfEvident": true, "text": [ "aria-label", "title", "value" ], "textPaths": [ [ "fields", "*", "label" ] ] } }, "StateFlow": { "traits": { "frame": true, "selfEvident": true, "text": [ "aria-label", "labels" ] } }, "Terminal": { "traits": { "frame": true, "text": [ "aria-label", "title" ] } }, "Terminal.Command": { "traits": { "text": [ "aria-label" ] } }, "Terminal.Output": { "traits": { "text": [ "aria-label" ] } }, "Phone": { "traits": { "childWidth": { "value": 390, "when": { "prop": "landscape", "value": true, "width": 772 } }, "text": [ "aria-label" ] } }, "Avatar.Group": { "traits": { "text": [ "aria-label" ] } }, "Radio.Card": { "traits": { "text": [ "aria-label", "label", "description", "leftSection" ] } }, "EmptyState": { "traits": { "text": [ "aria-label", "title", "description" ] } }, "ListRow": { "traits": { "text": [ "aria-label", "title", "description", "avatar" ] } }, "Stat": { "traits": { "text": [ "aria-label", "label", "value", "diff", "description" ] } }, "KeyValue": { "traits": { "text": [ "aria-label", "items" ] } }, "BarChart": { "traits": { "text": [ "aria-label", "data", "unit" ], "textPaths": [ [ "series", "*", "label" ] ] } }, "LineChart": { "traits": { "text": [ "aria-label", "data", "unit" ], "textPaths": [ [ "series", "*", "label" ] ] } }, "Menu": { "traits": { "text": [ "aria-label" ] } }, "Menu.Target": { "traits": { "text": [ "aria-label" ] } }, "Menu.Dropdown": { "traits": { "gate": [ "opened" ], "selfEvident": true, "text": [ "aria-label" ] } }, "Menu.Label": { "traits": { "text": [ "aria-label" ] } }, "Menu.Divider": { "traits": { "text": [ "aria-label" ] } }, "div": { "traits": { "text": [ "aria-label" ] } }, "span": { "traits": { "text": [ "aria-label" ] } }, "p": { "traits": { "text": [ "aria-label" ] } }, "h1": { "traits": { "text": [ "aria-label" ] } }, "h2": { "traits": { "text": [ "aria-label" ] } }, "h3": { "traits": { "text": [ "aria-label" ] } }, "h4": { "traits": { "text": [ "aria-label" ] } }, "main": { "traits": { "text": [ "aria-label" ] } }, "section": { "traits": { "text": [ "aria-label" ] } }, "header": { "traits": { "text": [ "aria-label" ] } }, "footer": { "traits": { "text": [ "aria-label" ] } }, "nav": { "traits": { "text": [ "aria-label" ] } }, "aside": { "traits": { "text": [ "aria-label" ] } }, "ul": { "traits": { "text": [ "aria-label" ] } }, "ol": { "traits": { "text": [ "aria-label" ] } }, "li": { "traits": { "text": [ "aria-label" ] } }, "strong": { "traits": { "text": [ "aria-label" ] } }, "em": { "traits": { "text": [ "aria-label" ] } }, "small": { "traits": { "text": [ "aria-label" ] } }, "code": { "traits": { "text": [ "aria-label" ] } }, "Placeholder": { "traits": { "text": [ "aria-label", "label" ] } }, "Board": { "traits": { "selfEvident": true, "text": [ "aria-label" ] } }, "BrowserWindow": { "traits": { "frame": true, "text": [ "aria-label", "label", "url" ] } }, "Note": { "traits": { "text": [ "aria-label" ] } }, "Arrow": { "parent": "Board", "traits": { "selfEvident": true, "text": [ "aria-label", "label" ] } }, "Button": { "interactive": true, "traits": { "hover": true, "text": [ "aria-label", "leftSection", "rightSection" ] } }, "ActionIcon": { "interactive": true, "traits": { "hover": true, "text": [ "aria-label" ] } }, "CloseButton": { "interactive": true, "traits": { "hover": true, "text": [ "aria-label" ] } }, "Anchor": { "interactive": true, "traits": { "hover": true, "text": [ "aria-label" ] } }, "a": { "interactive": true, "traits": { "hover": true, "text": [ "aria-label" ] } }, "NavLink": { "interactive": true, "traits": { "hover": true, "text": [ "aria-label", "label", "description", "leftSection", "rightSection" ] } }, "Burger": { "interactive": true, "traits": { "hover": true, "text": [ "aria-label" ] } }, "TextInput": { "interactive": true, "traits": { "native": { "action": "type", "prop": "value" }, "hover": true, "input": "single", "text": [ "aria-label", "label", "description", "placeholder", "error", "value" ] } }, "PasswordInput": { "interactive": true, "traits": { "native": { "action": "type", "prop": "value" }, "hover": true, "input": "single", "text": [ "aria-label", "label", "description", "placeholder", "error", "value" ] } }, "NumberInput": { "interactive": true, "traits": { "native": { "action": "type", "prop": "value" }, "hover": true, "input": "single", "text": [ "aria-label", "label", "description", "placeholder", "error", "value" ] } }, "Textarea": { "interactive": true, "traits": { "native": { "action": "type", "prop": "value" }, "hover": true, "input": "single", "text": [ "aria-label", "label", "description", "placeholder", "error", "value" ] } }, "Select": { "interactive": true, "traits": { "native": { "action": "select", "prop": "value" }, "hover": true, "input": "single", "choices": { "prop": "data" }, "text": [ "aria-label", "label", "description", "placeholder", "error", "value", "data" ] } }, "MultiSelect": { "interactive": true, "traits": { "native": { "action": "select", "prop": "value" }, "hover": true, "input": "multiple", "choices": { "prop": "data" }, "text": [ "aria-label", "label", "description", "placeholder", "error", "value", "data" ] } }, "Checkbox": { "interactive": true, "traits": { "native": { "action": "toggle", "prop": "checked" }, "hover": true, "input": "single", "toggleCaption": "check", "text": [ "aria-label", "label", "description", "placeholder", "error", "value" ] } }, "Radio.Group": { "interactive": true, "traits": { "native": { "action": "select", "prop": "value" }, "hover": true, "input": "single", "choices": { "descendants": [ "ui:Radio", "ui:Radio.Card" ] }, "text": [ "aria-label", "label", "description", "value", "error", "label", "description", "placeholder", "error", "value" ] } }, "Switch": { "interactive": true, "traits": { "native": { "action": "toggle", "prop": "checked" }, "hover": true, "input": "single", "text": [ "aria-label", "label", "description", "placeholder", "error", "value" ] } }, "SegmentedControl": { "interactive": true, "traits": { "native": { "action": "select", "prop": "value" }, "hover": true, "input": "single", "choices": { "prop": "data" }, "text": [ "aria-label", "label", "description", "placeholder", "error", "value", "data" ] } }, "FileInput": { "interactive": true, "traits": { "hover": true, "input": "single", "text": [ "aria-label", "label", "description", "placeholder", "error", "value" ] } }, "Tabs": { "interactive": true, "traits": { "native": { "action": "select", "prop": "value" }, "hover": true, "input": "single", "choices": { "descendants": [ "ui:Tabs.Tab" ] }, "text": [ "aria-label", "label", "description", "placeholder", "error", "value" ] } }, "Tabs.Tab": { "interactive": true, "traits": { "hover": true, "text": [ "aria-label", "leftSection", "rightSection" ] } }, "Accordion.Control": { "interactive": true, "traits": { "hover": true, "text": [ "aria-label" ] } }, "Pagination": { "interactive": true, "traits": { "hover": true, "input": "single", "choices": { "range": "total" }, "text": [ "aria-label", "label", "description", "placeholder", "error", "value" ] } }, "PromptInput": { "interactive": true, "traits": { "native": { "action": "type", "prop": "value" }, "hover": true, "input": "single", "text": [ "aria-label", "label", "description", "placeholder", "error", "value" ] } }, "Terminal.Input": { "interactive": true, "traits": { "hover": true, "input": "single", "text": [ "aria-label", "prompt", "placeholder", "value", "label", "description", "placeholder", "error", "value" ] } }, "Artifact.Ref": { "interactive": true, "traits": { "hover": true, "text": [ "aria-label", "title" ] } }, "Menu.Item": { "interactive": true, "traits": { "hover": true, "text": [ "aria-label", "leftSection", "rightSection" ] } }, "TabBar": { "interactive": true, "traits": { "hover": true, "input": "single", "choices": { "prop": "data" }, "text": [ "aria-label", "label", "description", "placeholder", "error", "value", "data" ] } } } }, "diagram": { "data": { "node": { "text": [ [ "structure", "nodes", "*", "label" ], [ "structure", "nodes", "*", "description" ], [ "structure", "groups", "*", "label" ], [ "structure", "groups", "*", "description" ], [ "structure", "actors", "*", "label" ], [ "structure", "actors", "*", "description" ], [ "structure", "messages", "*", "label" ], [ "structure", "messages", "*", "description" ], [ "structure", "edges", "*", "label" ], [ "structure", "edges", "*", "description" ], [ "structure", "blocks", "*", "label" ], [ "structure", "blocks", "*", "description" ] ], "scope": [ { "path": [ "structure", "nodes" ], "kind": "items", "references": [ [ "id" ] ] }, { "path": [ "structure", "groups" ], "kind": "items", "references": [ [ "id" ] ] }, { "path": [ "structure", "actors" ], "kind": "items", "references": [ [ "id" ] ] }, { "path": [ "structure", "blocks" ], "kind": "items", "references": [ [ "id" ] ] }, { "path": [ "structure", "edges" ], "kind": "items", "references": [ [ "id" ], [ "from" ], [ "to" ] ] }, { "path": [ "structure", "messages" ], "kind": "items", "references": [ [ "id" ], [ "from" ], [ "to" ] ] }, { "path": [ "layout", "nodes" ], "kind": "map" }, { "path": [ "layout", "groups" ], "kind": "map" }, { "path": [ "layout", "titles" ], "kind": "map" }, { "path": [ "layout", "actors" ], "kind": "map" }, { "path": [ "layout", "lifelines" ], "kind": "map" }, { "path": [ "layout", "messages" ], "kind": "map" }, { "path": [ "layout", "blocks" ], "kind": "map" }, { "path": [ "layout", "blockTitles" ], "kind": "map" }, { "path": [ "layout", "starts" ], "kind": "map" }, { "path": [ "layout", "edges" ], "kind": "map", "prefix": "__start:" } ] }, "step": { "scope": [ { "path": [ "scenes" ], "kind": "map", "domain": "scene", "children": [ { "path": [ "states" ], "kind": "map" }, { "path": [ "now" ], "kind": "values" }, { "path": [ "machines" ], "kind": "map", "children": [ { "path": [ "states" ], "kind": "map" }, { "path": [ "current" ], "kind": "reference" } ] }, { "path": [ "traces" ], "kind": "items", "references": [ [ "nodes", "*" ], [ "edges", "*", "id" ], [ "groups", "*" ], [ "errorGroups", "*" ], [ "targets", "*" ] ] } ] } ] } }, "id": "diagram", "title": "Diagrams", "version": "0.7.1", "components": { "Diagram": { "selfEvident": true, "traits": { "text": [ "label", "description", "name", "value" ] } }, "Diagram.Group": { "selfEvident": true, "traits": { "text": [ "label", "description", "name", "value" ] } }, "Diagram.Node": { "needsId": true, "selfEvident": true, "traits": { "text": [ "label", "description", "name", "value" ] } }, "Diagram.Edge": { "selfEvident": true, "traits": { "text": [ "label", "description", "name", "value" ] } }, "StateMachine": { "selfEvident": true, "traits": { "text": [ "label", "description", "name", "value" ] } }, "StateMachine.Group": { "selfEvident": true, "traits": { "text": [ "label", "description", "name", "value" ] } }, "StateMachine.State": { "needsId": true, "selfEvident": true, "traits": { "text": [ "label", "description", "name", "value" ] } }, "StateMachine.Transition": { "selfEvident": true, "traits": { "text": [ "label", "description", "name", "value" ] } }, "Sequence": { "selfEvident": true, "traits": { "text": [ "label", "description", "name", "value" ] } }, "Sequence.Group": { "selfEvident": true, "traits": { "text": [ "label", "description", "name", "value" ] } }, "Sequence.Actor": { "needsId": true, "selfEvident": true, "traits": { "text": [ "label", "description", "name", "value" ] } }, "Sequence.Message": { "selfEvident": true, "traits": { "text": [ "label", "description", "name", "value" ] } }, "Sequence.Block": { "selfEvident": true, "traits": { "text": [ "label", "description", "name", "value" ] } } } }, "content": { "themes": { "studio": "/* 讲解类视频风格：深靛蓝舞台、暖白文字、一个琥珀色强调色、无手绘描边。 */\n:root {\n --jp-font: \"PingFang SC\", \"Noto Sans SC\", \"Inter\", \"Helvetica Neue\", system-ui, sans-serif;\n --jp-font-mono: \"JetBrains Mono\", \"SF Mono\", ui-monospace, monospace;\n --jp-ink: #f3f1ec;\n --jp-bg: #0d1020;\n --jp-surface: #161a30;\n --jp-subtle: #1c2140;\n --jp-muted: #9aa3c0;\n --jp-faint: #5c6485;\n --jp-line: #262c4d;\n --jp-line-strong: #3a4270;\n --jp-border: #2e355c;\n --jp-accent: #ffb020;\n --jp-select: #ffb020;\n --jp-info: #5b8cff;\n --jp-ok: #34d399;\n --jp-warn: #ffb020;\n --jp-danger: #ff6b6b;\n --jp-radius: 10px;\n --jp-shadow: 0 12px 32px rgba(0, 0, 0, .45);\n --jp-stroke: clean;\n}\n\n/* 出场动画（作者元素用 className 引用）：静态画面里 Joplo 会直接显示终态 */\n@keyframes x-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }\n@keyframes x-fade { from { opacity: 0; } to { opacity: 1; } }\n@keyframes x-flip { from { transform: perspective(600px) rotateY(90deg); } to { transform: none; } }\n@keyframes x-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }\n.x-pop { animation: x-pop 500ms cubic-bezier(.2, .8, .2, 1) both; }\n.x-fade { animation: x-fade 600ms ease both; }\n.x-flip { animation: x-flip 650ms cubic-bezier(.2, .8, .2, 1) both; }\n.x-rise { animation: x-rise 600ms cubic-bezier(.2, .8, .2, 1) both; }\n/* 逐字出现：每个字一个 x-type，animation-delay 按序号错开 */\n.x-type { animation: x-fade 80ms linear both; }\n" }, "properties": { "motion": { "type": "string", "attribute": "data-jp-content-motion", "nonempty": true }, "motionDelay": { "type": "number", "attribute": "data-jp-content-motion-delay", "min": 0, "max": 10000 }, "motionMs": { "type": "number", "attribute": "data-jp-content-motion-ms", "min": 0, "max": 10000 }, "screen": { "type": "boolean", "attribute": "data-jp-content-screen" }, "enter": { "type": "string", "attribute": "data-jp-content-enter", "values": [ "fade", "rise", "zoom", "shrink", "wipe", "iris", "grow", "growUp", "blur" ] }, "enterMs": { "type": "number", "attribute": "data-jp-content-enter-ms", "min": 0, "max": 10000 }, "enterDelay": { "type": "number", "attribute": "data-jp-content-enter-delay", "min": 0, "max": 10000 }, "exit": { "type": "string", "attribute": "data-jp-content-exit", "values": [ "fade", "rise", "zoom", "shrink", "wipe", "iris", "grow", "growUp", "blur" ] }, "exitMs": { "type": "number", "attribute": "data-jp-content-exit-ms", "min": 0, "max": 10000 }, "exitDelay": { "type": "number", "attribute": "data-jp-content-exit-delay", "min": 0, "max": 10000 }, "enterEase": { "type": "string", "attribute": "data-jp-content-enter-ease", "values": [ "smooth", "snappy", "spring", "bounce", "linear" ] }, "exitEase": { "type": "string", "attribute": "data-jp-content-exit-ease", "values": [ "smooth", "snappy", "spring", "bounce", "linear" ] }, "motionEase": { "type": "string", "attribute": "data-jp-content-motion-ease", "values": [ "smooth", "snappy", "spring", "bounce", "linear" ] }, "enterStagger": { "type": "number", "attribute": "data-jp-content-enter-stagger", "min": 0, "max": 2000 }, "exitStagger": { "type": "number", "attribute": "data-jp-content-exit-stagger", "min": 0, "max": 2000 } }, "data": { "step": { "scope": [ { "path": [ "scenes" ], "kind": "map", "domain": "scene", "children": [ { "path": [ "camera", "targets" ], "kind": "values", "domain": "element" }, { "path": [ "camera", "sequence", "*", "targets" ], "kind": "values", "domain": "element" } ] } ] } }, "id": "content", "title": "Visual explainers", "version": "0.7.1", "components": { "Canvas": { "selfEvident": true }, "Split": { "selfEvident": true, "traits": { "text": [ "text" ] } } } } } ``` ## entryIds workbench\_origin, authoring\_model, home, player, views, frames, npm, skill, voice, review, share\_scope, feature\_diff, mobile\_watch, content\_i18n, storage\_quota, cloud\_usage, share\_visibility, model\_assets, music, film\_form ## Items - **工作区减负：第一次用 Joplo 设计自己** (4 scenarios) — [Markdown](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=workbench_origin&version=36&format=markdown) · [JSON](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=workbench_origin&version=36&format=json) 回看 2026\-11\-05 的三种真实布局方案：让原型成为主角，同时保留情况、缺口与规则的入口 Roles: 正在设计功能的作者, 观看设计过程的人 - **创作模型：让想法成为可回放的功能** (4 scenarios) — [Markdown](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=authoring_model&version=36&format=markdown) · [JSON](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=authoring_model&version=36&format=json) 保留功能、方案、情况与行为之间的联系，让一次局部修改可追溯、成功与失败都能看见 Roles: 设计 Joplo 的我们, 查看设计过程的用户 - **首页：项目与功能** (6 scenarios) — [Markdown](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=home&version=36&format=markdown) · [JSON](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=home&version=36&format=json) 一个本地看板进程记住并列出打开过的所有项目；选中项目后看到它的功能，点「查看」进入演示 Roles: 作者（驱动 Agent 的用户）, 观众（打开发布站的人） - **演示页** (9 scenarios) — [Markdown](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=player&version=36&format=markdown) · [JSON](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=player&version=36&format=json) 打开一个功能后，画面占主要位置：顶栏只有面包屑，左栏放方案、场景和缺口，画面下方是播放控制和步骤条 Roles: 作者, 观众 - **视角（层级）与分镜** (3 scenarios) — [Markdown](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=views&version=36&format=markdown) · [JSON](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=views&version=36&format=json) 同一个场景、同一步，可以从不同层级去看（客户端视角、后端流转、全景）；每层有自己的镜头，可以切换层级，也可以只重放某一层 Roles: 作者, 观众 - **设备外框：终端与手机** (4 scenarios) — [Markdown](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=frames&version=36&format=markdown) · [JSON](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=frames&version=36&format=json) 写命令行和移动端原型时，作者直接用现成的终端组件和手机外框，不用自己拼 Roles: 作者 - **npm 包发布** (6 scenarios) — [Markdown](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=npm&version=36&format=markdown) · [JSON](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=npm&version=36&format=json) 仓库外的用户和他们的 Agent 用一条 npx 命令就能开始，不需要克隆 Joplo 仓库或链接本地包 Roles: 新用户, 作者的编码 Agent, Joplo 维护者 - **Agent 用法：npx joplo skill** (6 scenarios) — [Markdown](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=skill&version=36&format=markdown) · [JSON](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=skill&version=36&format=json) 编码 Agent 在任何 Joplo 项目里都能按需拿到正确的写法，只读需要的那一段，内容始终与项目安装的版本一致 Roles: 用户, 编码 Agent（Claude Code、Codex 等） - **导演模式朗读** (7 scenarios) — [Markdown](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=voice&version=36&format=markdown) · [JSON](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=voice&version=36&format=json) 作者自动播放演示时，Joplo 把每一步读出来，观众边看边听；默认不用配置，想要统一音色时在看板里接入供应商，分享时声音一起带上 Roles: 林舟, 小周 - **本地评审与 Agent 反馈** (6 scenarios) — [Markdown](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=review&version=36&format=markdown) · [JSON](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=review&version=36&format=json) 评审者直接在演示里反馈和确认，让等待中的 Agent 收到带页面上下文的结果 Roles: 本地评审者, 编码 Agent - **按场景保密分享** (6 scenarios) — [Markdown](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=share_scope&version=36&format=markdown) · [JSON](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=share_scope&version=36&format=json) 作者只把一个场景（或一个功能）分享给外部的人，对方看不到、也从源码里找不到项目里的其他功能 Roles: 林舟, 小周 - **功能差异：看见一次迭代改变了什么** (8 scenarios) — [Markdown](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=feature_diff&version=36&format=markdown) · [JSON](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=feature_diff&version=36&format=json) 从固定 PR 起点看累计演示变化，对齐有把握的步骤，明确不确定、失败与尚未发布的边界 Roles: 设计 Joplo 的我们, 评审功能变化的人 - **手机上像看视频一样看分享** (6 scenarios) — [Markdown](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=mobile_watch&version=36&format=markdown) · [JSON](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=mobile_watch&version=36&format=json) 观众在手机上打开分享链接，能像看一个分章节的视频那样从头看到尾：竖屏不变形，横过来铺满屏幕，一章播完自动接下一章 Roles: 小陈 - **作者内容多语言** (7 scenarios) — [Markdown](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=content_i18n&version=36&format=markdown) · [JSON](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=content_i18n&version=36&format=json) 作者用一种语言写原型，让 Agent 补上其他语言的译文和旁白；观众打开同一个分享链接，就看到、听到自己语言的版本 Roles: 林舟, 佐藤由纪, Lucas - **按容量发布：免费 100 MB，链接不过期** (7 scenarios) — [Markdown](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=storage_quota&version=36&format=markdown) · [JSON](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=storage_quota&version=36&format=json) 创作者发布前就知道自己用了多少空间、快满时提前知道，满了也知道怎么腾地方或升级；免费分享不再 7 天过期，已经发出去的链接永远不会因为容量被下线 Roles: 林舟, 阿杰 - **看板里的云端用量与 Joplo Cloud 朗读** (5 scenarios) — [Markdown](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=cloud_usage&version=36&format=markdown) · [JSON](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=cloud_usage&version=36&format=json) 创作者在本地看板里就能看到空间和朗读额度还剩多少，不用先去控制台；做朗读时直接用 Joplo Cloud 的声音，试听不花额度，额度用完演示照常播放 Roles: 林舟, 阿杰 - **发布前选择公开还是私密** (8 scenarios) — [Markdown](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=share_visibility&version=36&format=markdown) · [JSON](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=share_visibility&version=36&format=json) 每次发布都知道谁能看到作品，是否同时给评审者一条包含所有方案的私密链接；公开作品能被搜索和发现，保密范围不会意外公开 Roles: 创作者 - **3D 模型：生成一次，离线复用** (3 scenarios) — [Markdown](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=model_assets&version=36&format=markdown) · [JSON](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=model_assets&version=36&format=json) 作者明确知道何时花钱、产物在哪里，队友和观众不依赖作者的密钥或电脑 - **配乐：离线音色与章节起播** (3 scenarios) — [Markdown](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=music&version=36&format=markdown) · [JSON](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=music&version=36&format=json) 作者用曲式和章节 marker 对齐配乐；观众离线听到真实 GM 乐器与鼓组，检查失败时知道如何恢复 - **独立作品：像做视频一样创作** (9 scenarios) — [Markdown](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=film_form&version=36&format=markdown) · [JSON](https://joplo.app/s/dn1MWCcnDW/?read=feature&feature=film_form&version=36&format=json) 写一支影片只写作品、章节、步骤；看板、检查和发布站都按影片来呈现，功能演示保持原样 Roles: 让 Agent 做讲解片、产品片的作者, 在看板里审片的人, 发布站上的观众 Current: [Markdown](https://joplo.app/s/dn1MWCcnDW/?version=36&format=markdown) · [JSON](https://joplo.app/s/dn1MWCcnDW/?version=36&format=json) Index: [Markdown](https://joplo.app/s/dn1MWCcnDW/?version=36&format=markdown) · [JSON](https://joplo.app/s/dn1MWCcnDW/?version=36&format=json)