import type { SolutionLocaleCopy } from './types';

export const ZH: SolutionLocaleCopy = {
  prototype: {
    title: '用 Open Design + Claude Code 做可交互原型',
    description:
      '一句话描述，就能在终端里生成可点击、多屏的原型。Open Design 把设计技能、模板和设计系统交给你的编码 agent，直接产出能在浏览器里打开的真实原型。',
    breadcrumb: '原型',
    label: '使用场景 · 原型',
    heading: '以一句话的速度做原型',
    lead: '把脑子里的流程描述出来，让 agent 拼出真实可点击的原型——多个屏幕、统一样式、可交互——直接渲染成 HTML，能打开、能分享、能交给工程。',
    heroImageAlt: '编辑风插画：一只手画出线框，线框变成可点击的多屏应用原型',
    tldrTitle: '一句话',
    tldrBody:
      'Open Design 是你正在用的编码 agent 的设计层。对原型来说，就是在一次对话里从一段想法走到可导航、有样式的原型——不用设计工具、不用导出、没有交接断层。',
    stepsTitle: '用 Open Design 做原型的流程',
    steps: [
      {
        title: '描述流程',
        body: '用大白话告诉 agent 你要做什么——"一个引导流程，含欢迎页、套餐选择页和确认页"。Open Design 会加载原型 skill，让 agent 知道要产出多个屏幕，而不是单页。',
        imageAlt: '插画：一个人在终端里用自然语言描述应用流程',
      },
      {
        title: '生成带样式的屏幕',
        body: 'agent 套用 Open Design 的设计系统和原型模板，每个屏幕共享字体、间距和组件，而不是看起来像草稿。你得到的是一套连贯的屏幕，不是互不相干的 mockup。',
        imageAlt: '插画：多个应用屏幕依次出现，全部共享同一套视觉风格',
      },
      {
        title: '接上交互',
        body: '按钮能跳转、标签页能切换、弹窗能打开。原型渲染成自包含的 HTML，在任何浏览器里都像真东西一样运行——查看它不需要任何原型工具账号。',
        imageAlt: '插画：光标在彼此链接的屏幕间点击，箭头标出页面之间的跳转',
      },
      {
        title: '迭代并交付',
        body: '靠跟 agent 对话来改——"把套餐选择页改成三列布局"。因为产物就在你的项目里，设计和最终代码共享同一份事实来源，弥合了设计到工程的交接断层。',
        imageAlt: '插画：原型被修改后交给工程师，设计与代码合并成同一个文件',
      },
    ],
    tableTitle: '用 Open Design 做原型 vs. 老办法',
    tableColCapability: '你需要什么',
    tableColWithOd: '用 Open Design',
    tableColWithout: '传统原型工具',
    tableRows: [
      {
        capability: '从想法到第一屏',
        withOd: '在你本来就开着的 agent 里一句话',
        without: '打开另一个工具、新建文件、手动拖框',
      },
      {
        capability: '多个相互链接的屏幕',
        withOd: '成套生成，共享样式、导航可用',
        without: '每一屏手动绘制并手动连线',
      },
      {
        capability: '一致的视觉系统',
        withOd: '从可复用的设计系统里取，由 agent 套用',
        without: '每个文件重做一遍，或纯靠手维护',
      },
      {
        capability: '可分享的成果',
        withOd: '自包含 HTML——任何浏览器都能打开，不需账号',
        without: '查看者要占一个席位或要厂商工具的分享链接',
      },
      {
        capability: '通往真实代码的路径',
        withOd: '产物在你的 repo 里，设计与代码同源',
        without: '一次交接之后从零重建',
      },
      {
        capability: '成本与锁定',
        withOd: '开源、自带密钥、本地运行',
        without: '按席位订阅、厂商托管、导出受限',
      },
    ],
    featuresTitle: '你能做出哪些原型',
    features: [
      { title: '多屏 Web 应用', body: '带共享导航的完整流程——引导、看板、设置——而不是单页。', thumb: 'example-web-prototype' },
      { title: '移动应用流程', body: '一屏接一屏的移动端旅程，转场和状态都有原生感。', thumb: 'example-mobile-app' },
      { title: '落地页', body: '能点击、能上线的营销页和 SaaS 落地页。', thumb: 'example-saas-landing' },
      { title: '任意视觉风格', body: '编辑风、柔和风、粗野主义——原型从头到尾保持一致风格。', thumb: 'example-web-prototype-taste-editorial' },
      { title: '等候名单与定价', body: '转化页——等候名单、定价表——接好线、贴合品牌。', thumb: 'example-waitlist-page' },
      { title: '游戏化与趣味', body: '交互密集的概念，动效和状态本身就是卖点。', thumb: 'example-gamified-app' },
    ],
    galleryTitle: '别人用 Open Design 做出来的原型',
    galleryLead:
      '下面每一个都是从一句 prompt 开始、渲染成可点击产物的。挑一个跟你想法接近的模板，描述你的改法，agent 帮你改。',
    gallery: [
      { thumb: "example-dating-web", caption: "交友 Web 应用——多屏流程" },
      { thumb: "example-hr-onboarding", caption: "HR 入职流程" },
      { thumb: "example-kami-landing", caption: "产品落地页" },
      { thumb: "example-web-prototype-taste-soft", caption: "柔和风 Web 原型" },
    ],
    exampleHref: '/plugins/templates/',
    exampleLinkLabel: '浏览原型模板',
    faqTitle: '原型常见问题',
    faq: [
      {
        q: '用 Open Design 做原型需要 Figma 这类设计工具吗？',
        a: '不需要。Open Design 在你的编码 agent 里运行，把原型渲染成 HTML。你用语言描述流程，agent 产出屏幕。没有额外的画布工具要学或要付费。',
      },
      {
        q: '产出的是可交互原型还是静态 mockup？',
        a: '可交互。导航、标签页、弹窗都能用，因为输出是真实的 HTML 和 CSS。你能在任何浏览器里像用户一样点击体验。',
      },
      {
        q: '可以用哪些 agent？',
        a: 'Open Design 支持 Claude Code、Codex、Cursor Agent、Gemini CLI 等十多个一方适配。你自带 provider 密钥，没有任何东西替你托管。',
      },
      {
        q: '原型能变成真正的产品吗？',
        a: '这正是重点。产物就在你的项目里，同一套设计系统和组件会带进生产代码，而不是交接后被丢弃。',
      },
    ],
    ctaTitle: '今晚就把下一个想法做成原型',
    ctaBody:
      '给 repo 点个 star、装上 Open Design，在你本来就用的 agent 里，把下一个"要是……"变成能点击的东西。',
  },
  dashboard: {
    title: '用 Open Design + Claude Code 生成数据看板',
    description:
      '描述你要盯的指标，让编码 agent 帮你做出有样式、响应式的看板——图表、KPI 卡片、表格，全部渲染成可随处托管的 HTML。不用 BI 工具席位，不用拖拽搭建。',
    breadcrumb: '看板',
    label: '使用场景 · 看板',
    heading: '看板靠描述生成，不靠拖拽搭建',
    lead: '告诉 agent 要展示什么、要什么感觉。Open Design 提供图表范式、布局系统和视觉语言，你拿到的是连贯、能拿得出手的看板，而不是一堆默认样式的控件。',
    heroImageAlt: '编辑风插画：左边的原始数字流向右边一个干净的图表 + KPI 卡片看板',
    tldrTitle: '一句话',
    tldrBody:
      'Open Design 把你对指标的大白话描述变成有样式的看板，由 agent 渲染成 HTML——在你的 repo 里版本化、随处可托管、无需按席位订阅 BI。',
    stepsTitle: '用 Open Design 做看板的流程',
    steps: [
      {
        title: '描述指标',
        body: '列出你关心的——"周活、按套餐分的收入、流失率、近 30 天趋势"。agent 加载看板 skill，知道要排布 KPI 卡片、图表和表格，而不是一段文字。',
        imageAlt: '插画：一个人列出自己关心的指标',
      },
      {
        title: '选择图表范式',
        body: 'Open Design 自带图表和布局模板，趋势变折线、占比变柱状、比例用对的图——全程字体和间距统一，而不是一堆不搭的默认样式。',
        imageAlt: '插画：多种图表类型排成一个连贯的网格',
      },
      {
        title: '接入数据',
        body: '把看板指向 CSV、JSON 接口，或粘贴示例行。它渲染成自包含 HTML，数据变它就变——任何浏览器能打开，任何静态托管能放。',
        imageAlt: '插画：一个数据文件接入实时更新的看板',
      },
      {
        title: '打磨并交付',
        body: '靠跟 agent 对话来调——"收入按地区分组、把 KPI 行挪到顶部"。产物在你的项目里，看板像任何代码一样可 review、可版本化。',
        imageAlt: '插画：看板被打磨后部署上线',
      },
    ],
    tableTitle: '用 Open Design 做看板 vs. 老办法',
    tableColCapability: '你需要什么',
    tableColWithOd: '用 Open Design',
    tableColWithout: 'BI 工具 / 纯手写',
    tableRows: [
      { capability: '从指标清单到布局', withOd: '一句话，agent 排布卡片、图表、表格', without: '一个个拖控件，或从零写图表代码' },
      { capability: '一致的视觉系统', withOd: '图表范式和间距来自可复用设计系统', without: '默认控件样式，或每张图手动调' },
      { capability: '接入数据', withOd: 'CSV / JSON / 粘贴行，渲染成实时 HTML', without: '厂商连接器或定制数据管道' },
      { capability: '托管与分享', withOd: '自包含 HTML 放任何静态托管，不要账号', without: '查看者要 BI 厂商的席位' },
      { capability: 'review 与版本化', withOd: '在 repo 里，像代码一样可 diff', without: '锁在厂商里，无法真正 diff' },
      { capability: '成本与锁定', withOd: '开源、自带密钥、本地运行', without: '按席位订阅、厂商托管' },
    ],
    featuresTitle: "你能做出哪些看板",
    features: [
      { title: "产品分析", body: "活跃、漏斗、留存——产品团队天天看的指标。", thumb: "example-dashboard" },
      { title: "仓库与研发指标", body: "Star、PR、CI 健康度——用你自己的数据做研发看板。", thumb: "example-github-dashboard" },
      { title: "财务报告", body: "收入、消耗、跑道，排成可分享的报告。", thumb: "example-finance-report" },
      { title: "实时运营", body: "随底层数据变动而刷新的实时指标。", thumb: "example-live-dashboard" },
      { title: "社交与营销", body: "渠道表现和投放追踪汇于一屏。", thumb: "example-social-media-dashboard" },
      { title: "领域报告", body: "任意领域的结构化报告——从临床到交易。", thumb: "example-clinical-case-report" },
    ],
    galleryTitle: '别人用 Open Design 做出来的看板',
    galleryLead: '下面是从 prompt + 数据源渲染出的真实看板。挑一个接近你的，描述你要盯的指标。',
    gallery: [
      { thumb: "example-data-report", caption: "数据报告" },
      { thumb: "example-flowai-live-dashboard-template", caption: "实时运营看板" },
      { thumb: "example-trading-analysis-dashboard-template", caption: "交易分析看板" },
      { thumb: "example-frame-data-chart-nyt", caption: "编辑风数据图表" },
    ],
    exampleHref: '/plugins/templates/',
    exampleLinkLabel: '浏览看板模板',
    faqTitle: '看板常见问题',
    faq: [
      { q: '需要 Tableau、Looker 这类 BI 工具吗？', a: '不需要。Open Design 在你的编码 agent 里把看板渲染成 HTML。你描述指标、指向数据，没有额外的 BI 平台要授权或学习。' },
      { q: '数据从哪来？', a: 'CSV、JSON 接口，或你粘贴的行。看板是纯 HTML + JavaScript，你完全控制它从哪读——不经任何托管服务中转。' },
      { q: '非技术同事能看吗？', a: '能。产出是自包含网页，任何人拿到链接或文件就能在浏览器打开——不要账号、不要席位。' },
      { q: '可以用哪些 agent？', a: 'Claude Code、Codex、Cursor Agent、Gemini CLI 等十多个一方适配，自带 provider 密钥。' },
    ],
    ctaTitle: '今晚就把看板做出来',
    ctaBody: '给 repo 点个 star、装上 Open Design，把你的指标变成一个随处可托管的看板——在你本来就用的 agent 里。',
  },
  slides: {
    title: '用 Open Design + Claude Code 生成演示文稿',
    description:
      '把大纲变成有设计感、符合品牌的幻灯片，不用打开任何演示软件。Open Design 给编码 agent 提供 deck 模板和视觉系统，把幻灯片渲染成可演示、可导出、可分享的 HTML。',
    breadcrumb: '幻灯片',
    label: '使用场景 · 幻灯片',
    heading: '看起来精心设计的 deck，由一句 prompt 写出来',
    lead: '把大纲和语气交给 agent。Open Design 套用 deck 模板和视觉系统，每一页都排好版、配好字、贴合品牌——不是空白底上的一串要点。',
    heroImageAlt: '编辑风插画：左边的大纲变成右边一连串有设计感的演示幻灯片',
    tldrTitle: '一句话',
    tldrBody:
      'Open Design 把大纲变成有设计感的 HTML deck，由 agent 一次生成——浏览器里全屏演示、导出 PDF 或 PPTX、源文件留在 repo。',
    stepsTitle: '用 Open Design 做 deck 的流程',
    steps: [
      { title: '给它大纲', body: '粘贴你的要点或粗略结构。agent 加载 deck skill，产出一连串排好版的幻灯片，而不是一篇长文档。', imageAlt: '插画：一份文字大纲被交给 agent' },
      { title: '选一个 deck 风格', body: 'Open Design 自带 deck 模板——编辑风、瑞士国际主义、深色技术风等。agent 套用其中一个，字体、网格、强调色在每页之间保持一致。', imageAlt: '插画：几种 deck 风格并排展示' },
      { title: '生成幻灯片', body: '每个要点变成一页有层次的幻灯片——标题、辅助视觉、数据高亮。渲染成 HTML，任何浏览器都能全屏演示。', imageAlt: '插画：一连串风格一致的成品幻灯片' },
      { title: '演示、导出、迭代', body: '从浏览器演示，或导出 PDF / PPTX 分享。靠跟 agent 对话来改——"收紧数据页、加一个结尾行动号召"。deck 源文件留在你的项目里。', imageAlt: '插画：一个 deck 被演示并导出成多种格式' },
    ],
    tableTitle: '用 Open Design 做 deck vs. 老办法',
    tableColCapability: '你需要什么',
    tableColWithOd: '用 Open Design',
    tableColWithout: 'PowerPoint / Keynote / AI 幻灯工具',
    tableRows: [
      { capability: '从大纲到幻灯片', withOd: '一句话，agent 排布每一页', without: '一页页手搭，或跟模板较劲' },
      { capability: '一致的设计', withOd: 'deck 模板带真实网格和字体系统', without: '主题跑偏、手动对齐、默认样式不贴品牌' },
      { capability: '数据与图示', withOd: '图表和高亮作为幻灯片的一部分渲染', without: '贴静态图，或每次重建图表' },
      { capability: '导出格式', withOd: 'HTML 演示，外加 PDF / PPTX 导出', without: '锁在某个软件的格式里' },
      { capability: 'review 与版本化', withOd: '源文件在 repo 里，可 diff', without: '二进制文件，无法有意义地 diff' },
      { capability: '成本与锁定', withOd: '开源、自带密钥、本地运行', without: '软件授权或按席位的 AI 附加费' },
    ],
    featuresTitle: "你能演示什么",
    features: [
      { title: "路演 deck", body: "投资和销售 deck，叙事有力、数据页干净。", thumb: "example-html-ppt-pitch-deck" },
      { title: "瑞士 / 编辑风", body: "网格驱动、排版讲究，看起来像艺术指导过。", thumb: "example-deck-swiss-international" },
      { title: "课程模块", body: "教学 deck，步骤清晰、有重点、有节奏。", thumb: "example-html-ppt-course-module" },
      { title: "数据图表 deck", body: "深色、图表为主，适合分析和复盘。", thumb: "example-html-ppt-graphify-dark-graph" },
      { title: "演示者模式", body: "reveal 风格 deck，专为浏览器现场演示而建。", thumb: "example-html-ppt-presenter-mode-reveal" },
      { title: "技术蓝图", body: "架构和知识 deck，把复杂系统讲清楚。", thumb: "example-html-ppt-knowledge-arch-blueprint" },
    ],
    galleryTitle: '别人用 Open Design 做出来的 deck',
    galleryLead: '下面是从大纲渲染出的真实 deck。挑一个接近你演讲风格的，描述内容。',
    gallery: [
      { thumb: "example-deck-guizang-editorial", caption: "编辑杂志风 deck" },
      { thumb: "example-guizang-ppt", caption: "插画风主题演讲" },
      { thumb: "example-deck-open-slide-canvas", caption: "Open slide canvas deck" },
      { thumb: "example-html-ppt-obsidian-claude-gradient", caption: "渐变主题 deck" },
    ],
    exampleHref: '/plugins/templates/',
    exampleLinkLabel: '浏览 deck 模板',
    faqTitle: '幻灯片常见问题',
    faq: [
      { q: '需要 PowerPoint 或 Keynote 吗？', a: '不需要。Open Design 在你的编码 agent 里把 deck 渲染成 HTML，还能导出 PDF 或 PPTX。你从浏览器演示或交付文件——做的时候不需要任何演示软件。' },
      { q: '这只是 AI 生成的要点吗？', a: '不是。agent 套用带网格、字号体系和视觉层次的真实 deck 模板，幻灯片看起来是设计出来的，而不是自动填的。' },
      { q: '能导出 PowerPoint 给客户吗？', a: '能。deck 除了用来演示的 HTML，还能导出 PPTX 和 PDF，适配观众的预期。' },
      { q: '可以用哪些 agent？', a: 'Claude Code、Codex、Cursor Agent、Gemini CLI 等一方适配，自带 provider 密钥。' },
    ],
    ctaTitle: '今晚就把下一个 deck 做出来',
    ctaBody: '给 repo 点个 star、装上 Open Design，把你的大纲变成有设计感的 deck——在你本来就用的 agent 里。',
  },
  image: {
    title: '用 Open Design + Claude Code 生成贴合品牌的图片',
    description:
      '从一句 prompt 产出社交卡片、文章封面、营销图——用真实排版和你的品牌系统排好版，渲染成可导出 PNG 的清晰 HTML。不用设计软件，不用订阅模板。',
    breadcrumb: '图片',
    label: '使用场景 · 图片',
    heading: '贴合品牌的图片，自动生成并排好版',
    lead: '描述你要的卡片或封面。Open Design 用真实字体、网格和你的品牌色把它组合出来，再渲染成可导出图片的 HTML——不用跟设计软件或通用模板较劲。',
    heroImageAlt: '编辑风插画：一句 prompt 变成一组排好版的社交卡片和文章封面',
    tldrTitle: '一句话',
    tldrBody:
      'Open Design 把 prompt 变成排好版、贴合品牌的图片，由 agent 渲染成 HTML 并导出 PNG——可复用、可版本化，没有按席位的设计工具。',
    stepsTitle: '用 Open Design 做图的流程',
    steps: [
      { title: '描述图片', body: '说清它是什么——"一张发布用的 Twitter 卡片，带标题和一句引用"。agent 加载对应 skill，组合出排好版的图片，而不是纯文字块。', imageAlt: '插画：一个人描述自己需要的社交卡片' },
      { title: '套用品牌系统', body: 'Open Design 从可复用设计系统里取你的颜色、字体和间距，每张卡片都跟品牌其余部分一致，而不是各做各的。', imageAlt: '插画：品牌色和字体被套用到卡片布局上' },
      { title: '渲染并导出', body: '图片按你要的精确尺寸渲染成 HTML——社交卡、封面、横幅——再导出 PNG。文字清晰、布局真实、不用手动微调。', imageAlt: '插画：一张图片渲染并导出成图片文件' },
      { title: '复用这套配方', body: '因为它是模板，下一张图只差一句 prompt——换标题、留布局。成系列的卡片完美一致。', imageAlt: '插画：一个卡片模板产出一致的系列图片' },
    ],
    tableTitle: '用 Open Design 做图 vs. 老办法',
    tableColCapability: '你需要什么',
    tableColWithOd: '用 Open Design',
    tableColWithout: '设计软件 / 通用模板',
    tableRows: [
      { capability: '从想法到排好版的图', withOd: '一句话，agent 组合字体和布局', without: '打开软件、手动摆每个元素' },
      { capability: '保持贴合品牌', withOd: '颜色和字体来自可复用设计系统', without: '每个文件重选品牌样式，或跑偏' },
      { capability: '一致的系列', withOd: '同模板、换文案——完美对齐的一组', without: '每个变体手动对齐' },
      { capability: '导出', withOd: 'HTML 按精确尺寸，导出 PNG', without: '手动调画布尺寸和导出设置' },
      { capability: '可复用', withOd: 'repo 里一套 prompt 驱动的配方', without: '每次重做的一次性文件' },
      { capability: '成本与锁定', withOd: '开源、自带密钥、本地运行', without: '按席位的设计工具或模板市场' },
    ],
    featuresTitle: "你能做出哪些图",
    features: [
      { title: "社交卡片", body: "用你的标题和品牌组合的 X / Twitter 卡片。", thumb: "example-card-twitter" },
      { title: "文章封面", body: "杂志编辑风的文章和 newsletter 封面。", thumb: "example-article-magazine" },
      { title: "小红书卡片", body: "为小红书 feed 调过的卡片样式。", thumb: "example-card-xiaohongshu" },
      { title: "Hero 主视觉", body: "液态、渐变的 hero 视觉，用于站点和发布。", thumb: "example-frame-liquid-bg-hero" },
      { title: "轮播图", body: "多图社交轮播，每帧之间保持一致。", thumb: "example-social-carousel" },
      { title: "UI 示意帧", body: "通知和设备外框，用于产品叙事。", thumb: "example-frame-macos-notification" },
    ],
    galleryTitle: '别人用 Open Design 做出来的图',
    galleryLead: '下面是从 prompt 渲染出的真实卡片和封面。挑一个接近你需要的，换上你的文案。',
    gallery: [
      { thumb: "example-html-ppt-xhs-pastel-card", caption: "粉彩社交卡片" },
      { thumb: "example-html-ppt-zhangzara-editorial-tri-tone", caption: "三色编辑风海报" },
      { thumb: "example-magazine-poster", caption: "杂志风海报" },
      { thumb: "example-html-ppt-zhangzara-biennale-yellow", caption: "醒目编辑风封面" },
    ],
    exampleHref: '/plugins/templates/',
    exampleLinkLabel: '浏览图片模板',
    faqTitle: '图片常见问题',
    faq: [
      { q: '这是 Midjourney 那种 AI 生图吗？', a: '不是。Open Design 用真实布局和排版组合图片——你的标题、你的品牌、精确尺寸——渲染成 HTML 再导出 PNG。是设计排版，不是像素生成。' },
      { q: '能做风格一致的系列卡片吗？', a: '能。因为每张图都是模板，保留布局换文案，整个系列就完美对齐、贴合品牌。' },
      { q: '能出哪些尺寸？', a: '任意——图片按你指定的精确尺寸渲染，从方形社交卡到宽幅横幅，再导出 PNG。' },
      { q: '可以用哪些 agent？', a: 'Claude Code、Codex、Cursor Agent、Gemini CLI 等一方适配，自带 provider 密钥。' },
    ],
    ctaTitle: '今晚就把下一张图做出来',
    ctaBody: '给 repo 点个 star、装上 Open Design，把一句 prompt 变成贴合品牌的图片——在你本来就用的 agent 里。',
  },
  video: {
    title: '用 Open Design + Claude Code 生成动态图形和短视频',
    description:
      '把脚本变成动画帧和短视频——标题卡、动态背景、片尾，用你的品牌系统组合并从 HTML 渲染。不用动态图形套件，不用在时间轴上拖拽。',
    breadcrumb: '视频',
    label: '使用场景 · 视频',
    heading: '动态图形靠脚本生成，不靠时间轴',
    lead: '描述你想要的那一刻——标题揭示、数据动画、logo 片尾。Open Design 用你的品牌系统组合动画帧并渲染成视频，不需要动态图形套件。',
    heroImageAlt: '编辑风插画：一份脚本变成一连串动画视频帧',
    tldrTitle: '一句话',
    tldrBody:
      'Open Design 把脚本变成贴合品牌的动画帧，由 agent 渲染成短视频——从 HTML 组合、在 repo 里版本化、不用学时间轴编辑器。',
    stepsTitle: '用 Open Design 做动效的流程',
    steps: [
      { title: '描述那一刻', body: '说清要发生什么——"一个故障感标题化解成我们的 logo，然后一张结尾卡"。agent 加载动效 skill，产出动画帧而不是静态图。', imageAlt: '插画：一个人描述一段动效序列' },
      { title: '套用品牌与动效风格', body: 'Open Design 提供帧模板——电影感漏光、故障标题、logo 片尾——并套用你的颜色和字体，让动效看起来是有意为之、贴合品牌。', imageAlt: '插画：品牌样式被套用到动画帧上' },
      { title: '把帧渲染成视频', body: '帧在 HTML 里组合并渲染成视频，时序和布局精确可复现——不用在时间轴上手动打关键帧。', imageAlt: '插画：HTML 帧渲染成一段视频' },
      { title: '迭代并导出', body: '靠跟 agent 对话来改——"放慢标题揭示、加一行字幕"。导出短视频用于社交或产品。源文件留在你的项目里。', imageAlt: '插画：一段视频被打磨并导出用于社交' },
    ],
    tableTitle: '用 Open Design 做动效 vs. 老办法',
    tableColCapability: '你需要什么',
    tableColWithOd: '用 Open Design',
    tableColWithout: 'After Effects / 动效套件',
    tableRows: [
      { capability: '从脚本到动画帧', withOd: '一句话，agent 组合整段序列', without: '在时间轴上一个个手打关键帧' },
      { capability: '保持贴合品牌', withOd: '帧模板 + 你的颜色和字体', without: '每个项目重建品牌样式' },
      { capability: '精确可复现的时序', withOd: '在 HTML 里组合、确定性渲染', without: '手动拖拽，难以复现' },
      { capability: '导出用于社交', withOd: '短视频渲染成片', without: '导出预设和编码格式折腾' },
      { capability: 'review 与版本化', withOd: '帧源文件在 repo 里，可 diff', without: '二进制工程文件，无法真正 diff' },
      { capability: '成本与锁定', withOd: '开源、自带密钥、本地运行', without: '昂贵套件、陡峭学习曲线' },
    ],
    featuresTitle: "你能做出哪些动效",
    features: [
      { title: "Hyperframes", body: "用 HTML 组合的逐帧动效序列。", thumb: "example-video-hyperframes" },
      { title: "短视频", body: "为社交 feed 做的竖版短片。", thumb: "example-video-shortform" },
      { title: "动效帧组", body: "可复用的动画帧，组合成一段片子。", thumb: "example-motion-frames" },
      { title: "电影感漏光", body: "电影质感的转场和氛围背景。", thumb: "example-frame-light-leak-cinema" },
      { title: "故障标题", body: "带动效和质感的标题揭示。", thumb: "example-frame-glitch-title" },
      { title: "logo 片尾", body: "任意片子都能用的品牌收尾动画。", thumb: "example-frame-logo-outro" },
    ],
    galleryTitle: '别人用 Open Design 做出来的动效',
    galleryLead: '下面是从 prompt 渲染出的真实动画帧和短片。挑一个接近你想法的，描述动效。',
    gallery: [
      { thumb: "example-hyperframes", caption: "Hyperframes 序列" },
      { thumb: "example-frame-liquid-bg-hero", caption: "液态动态背景" },
      { thumb: "example-frame-macos-notification", caption: "动态 UI 帧" },
      { thumb: "example-frame-data-chart-nyt", caption: "动态数据图表" },
    ],
    exampleHref: '/plugins/templates/',
    exampleLinkLabel: '浏览动效模板',
    faqTitle: '视频常见问题',
    faq: [
      { q: '需要 After Effects 或动效套件吗？', a: '不需要。Open Design 在你的编码 agent 里用 HTML 组合动画帧并渲染成视频。没有时间轴编辑器要学或要授权。' },
      { q: '这适合做什么视频？', a: '短视频动效——标题卡、数据动画、logo 片尾、社交短片。它为品牌和产品动效而生，不是做长片剪辑。' },
      { q: '时序可复现吗？', a: '可以。因为帧是用代码组合、确定性渲染的，每次结果一致，还能用一句 prompt 精确调整。' },
      { q: '可以用哪些 agent？', a: 'Claude Code、Codex、Cursor Agent、Gemini CLI 等一方适配，自带 provider 密钥。' },
    ],
    ctaTitle: '今晚就把下一个想法做成动效',
    ctaBody: '给 repo 点个 star、装上 Open Design，把一份脚本变成动效——在你本来就用的 agent 里。',
  },
  designSystem: {
    title: '用 Open Design + Claude Code 搭建并套用设计系统',
    description:
      '把你的品牌沉淀成一套可复用的设计系统，让编码 agent 套用到每一个产物——颜色、字体、组件、语气，全在一份 DESIGN.md 里。定义一次，每个原型、deck、看板都贴合品牌。',
    breadcrumb: '设计系统',
    label: '使用场景 · 设计系统',
    heading: '一套设计系统，套用到 agent 做的每一样东西',
    lead: '把你的品牌定义一次，Open Design 就把它带进每个产出——原型、deck、看板、图片。系统作为一份 DESIGN.md 留在你的 repo 里供 agent 读取，一致性是自动的，不靠手动维护。',
    heroImageAlt: '编辑风插画：一套设计系统向外辐射成众多贴合品牌的产物',
    tldrTitle: '一句话',
    tldrBody:
      'Open Design 把你的品牌沉淀成一套可移植的设计系统，agent 套用到每个产物——在 repo 里定义一次、处处强制执行，没有中心化设计工具把关。',
    stepsTitle: '用 Open Design 做设计系统的流程',
    steps: [
      { title: '沉淀系统', body: '描述你的品牌——颜色、字体、间距、语气——或让 agent 指向一个现有站点去提取。Open Design 把它写进一份留在你项目里的 DESIGN.md。', imageAlt: '插画：一个品牌被沉淀进一份设计系统文件' },
      { title: '从成熟基底起步', body: 'Open Design 自带 140+ 套参考设计系统——从 Apple、Linear 到编辑风、粗野主义。fork 一个接近你品牌的，而不是从白纸开始。', imageAlt: '插画：浏览一排参考设计系统' },
      { title: '处处套用', body: '其他每个 skill 都读同一套系统，所以原型、deck、看板共享一套视觉语言——你不用每次重新指定。', imageAlt: '插画：一套系统一致地套用到多种产物类型' },
      { title: '在一处演进', body: '改一处系统，下一次渲染处处生效。因为它是 repo 里的一个文件，设计决策像代码一样被 review 和版本化。', imageAlt: '插画：一套设计系统被更新并传播到所有产出' },
    ],
    tableTitle: '用 Open Design 做设计系统 vs. 老办法',
    tableColCapability: '你需要什么',
    tableColWithOd: '用 Open Design',
    tableColWithout: '设计工具组件库 / 风格指南',
    tableRows: [
      { capability: '定义系统', withOd: '一份 agent 读取的 DESIGN.md，从 140+ 参考 fork', without: '一份静态风格指南或锁在工具里的组件库' },
      { capability: '跨产物类型套用', withOd: '同一套系统喂给原型、deck、看板、图片', without: '每个工具、每个文件重做一遍' },
      { capability: '保持一致', withOd: '自动——每个 skill 读同一个源', without: '靠人工自律，时间一长就跑偏' },
      { capability: '演进品牌', withOd: '改一次，下次渲染处处更新', without: '跨文件跨工具查找替换' },
      { capability: 'review 与版本化', withOd: '在 repo 里，像代码一样可 diff', without: '埋在设计工具里，难以审计' },
      { capability: '成本与锁定', withOd: '开源、可移植、本地运行', without: '锁在设计工具订阅里' },
    ],
    featuresTitle: "可作为起点的系统",
    features: [
      { title: "Apple", body: "干净、克制、系统字体的美学。", thumb: "design-system-apple" },
      { title: "Linear", body: "利落的产品工具风，间距紧凑。", thumb: "design-system-linear-app" },
      { title: "Notion", body: "柔和、文档优先、亲和。", thumb: "design-system-notion" },
      { title: "Figma", body: "活泼、多彩、创意工具的能量。", thumb: "design-system-figma" },
      { title: "OpenAI", body: "极简、中性、研究级。", thumb: "design-system-openai" },
      { title: "GitHub", body: "密集、技术、开发者原生。", thumb: "design-system-github" },
    ],
    galleryTitle: 'Open Design 里的设计系统',
    galleryLead: '下面是 140+ 套参考系统里的几个，可作为起点 fork。挑一个接近你品牌的去改。',
    gallery: [
      { thumb: "design-system-airbnb", caption: "Airbnb 风格系统" },
      { thumb: "design-system-vercel", caption: "Vercel 风格系统" },
      { thumb: "design-system-stripe", caption: "Stripe 风格系统" },
      { thumb: "design-system-spotify", caption: "Spotify 风格系统" },
    ],
    exampleHref: '/plugins/systems/',
    exampleLinkLabel: '浏览设计系统',
    faqTitle: '设计系统常见问题',
    faq: [
      { q: '这里的设计系统具体是什么？', a: 'repo 里一份 DESIGN.md，沉淀颜色、字体、间距、组件和语气。每个 Open Design skill 都读它，所以 agent 产出的任何东西都自动套用你的品牌。' },
      { q: '必须从零开始吗？', a: '不必。Open Design 自带 140+ 套参考设计系统可 fork——从 Apple、Linear 到编辑风、粗野主义——再适配你的品牌。' },
      { q: '怎么在 deck、看板、原型之间保持一致？', a: '因为这些 skill 都读同一份 DESIGN.md。定义一次，一致性就是自动的，而不是靠手动盯着。' },
      { q: '可以用哪些 agent？', a: 'Claude Code、Codex、Cursor Agent、Gemini CLI 等一方适配，自带 provider 密钥。' },
    ],
    ctaTitle: '今晚就定义你的设计系统',
    ctaBody: '给 repo 点个 star、装上 Open Design，给你的 agent 一套处处套用的品牌——在你本来就用的 agent 里。',
  },
  roleSoloBuilder: {
    title: 'Open Design 给独立开发者 / 一人公司',
    description:
      '一个人也能像一支团队那样出活。Open Design 把你的编码 agent 变成创业的设计那一半——原型、落地页、看板、品牌视觉，全从一句 prompt 来、全贴合品牌、全在你的 repo 里。',
    breadcrumb: '独立开发者',
    label: '适用于 · 独立开发者',
    heading: '你的设计团队，就是你本来就在用的 agent',
    lead: '没有设计师、没有预算、没有交接。描述你要什么，agent 就渲染出来——上午一个落地页、下午一个看板、上线前几张社交卡——全部共用你定义过一次的设计系统。',
    heroImageAlt: '编辑风插画：一个人在桌前，四周环绕着同一套风格的落地页、应用、看板和社交卡',
    tldrTitle: '一句话',
    tldrBody:
      'Open Design 是独立创始人从没有过的设计部门：跨产品需要的每个界面，prompt 出产物，一套品牌、零交接、不用额外工具。',
    stepsTitle: '独立开发者怎么用 Open Design',
    steps: [
      { title: '先定义一次品牌', body: '把颜色、字体、语气写进一份 DESIGN.md（或从 140+ 参考系统 fork 一个）。之后你生成的每个产物都自动贴合品牌。', imageAlt: '插画：单一品牌定义文件' },
      { title: '接着要什么生成什么', body: '原型、落地页、看板、路演 deck、社交卡——同一个 agent、同一套品牌，每个一句 prompt。不用切工具或再买席位。', imageAlt: '插画：多种产物从一句 prompt 而来' },
      { title: '直接上线——它本就是真的', body: '一切渲染成你 repo 里的 HTML / 代码，原型变产品、落地页能上线。没有用完即弃的 mockup。', imageAlt: '插画：产物从 prompt 直接上线' },
    ],
    tableTitle: '用 Open Design 单干 vs. 硬扛',
    tableColCapability: '你需要什么',
    tableColWithOd: '用 Open Design',
    tableColWithout: '今天单干',
    tableRows: [
      { capability: '覆盖所有设计界面', withOd: '一个 agent 搞定原型、落地、看板、品牌', without: '拼凑五个 SaaS 工具和教程' },
      { capability: '保持贴合品牌', withOd: '一份 DESIGN.md 处处自动套用', without: '每个工具重做一遍、时间一长就跑偏' },
      { capability: '以单干的速度推进', withOd: '想法到产物一句 prompt', without: '学一个你没时间学的设计工具' },
      { capability: '上线而非 mock', withOd: 'repo 里的 HTML / 代码，可部署', without: '一个还得有人去搭的 mockup' },
      { capability: '成本', withOd: '开源、自带密钥、本机运行', without: '一堆按席位订阅' },
    ],
    featuresTitle: '独立开发者能做出什么',
    features: [
      { title: '落地页', body: '营销和 SaaS 落地页，能点击、能上线。', thumb: 'example-saas-landing' },
      { title: '产品原型', body: '多屏 Web 应用，验证想法。', thumb: 'example-web-prototype' },
      { title: '看板', body: '产品的指标和后台视图。', thumb: 'example-dashboard' },
      { title: '品牌图', body: '贴合品牌的封面和海报。', thumb: 'example-magazine-poster' },
      { title: '移动流程', body: '走出 Web 时的应用屏幕。', thumb: 'example-mobile-app' },
      { title: '社交卡', body: '各渠道的发布和更新卡片。', thumb: 'example-card-twitter' },
    ],
    galleryTitle: '别人用 Open Design 单干做出来的',
    galleryLead: '一人创业需要的每个界面，都从一句 prompt 来。挑一个接近你下一步的，描述它。',
    gallery: [
      { thumb: 'example-saas-landing', caption: 'SaaS 落地页' },
      { thumb: 'example-web-prototype', caption: '产品原型' },
      { thumb: 'example-dashboard', caption: '产品看板' },
      { thumb: 'example-card-twitter', caption: '发布社交卡' },
    ],
    exampleHref: '/plugins/templates/',
    exampleLinkLabel: '浏览模板',
    faqTitle: '独立开发者常见问题',
    faq: [
      { q: '我不是设计师，真的能用吗？', a: '能。你用大白话描述要什么，agent 套用设计系统渲染出来。本事在写 prompt，不在推像素。' },
      { q: '是全覆盖还是只做一件事？', a: '小产品需要的全覆盖——原型、落地页、看板、deck、图，全来自同一个 agent、同一套品牌。' },
      { q: '产出会变成什么？', a: 'repo 里真实的 HTML / 代码，原型能变产品、落地页能上线，而不是用完即弃的 mockup。' },
      { q: '可以用哪些 agent？', a: 'Claude Code、Codex、Cursor Agent、Gemini CLI 等一方适配，自带 provider 密钥。' },
    ],
    ctaTitle: '今晚就把整个东西做出来',
    ctaBody: '给 repo 点个 star、装上 Open Design，让一个 agent 当你的设计团队——在你本来就用的 agent 里。',
  },
  roleDesigner: {
    title: 'Open Design 给设计师',
    description:
      '把时间花在品味上，不是苦工上。Open Design 让 agent 处理重复的生产工作——变体、状态、整套设计系统——你来把控样子、保留最终决定权。',
    breadcrumb: '设计师',
    label: '适用于 · 设计师',
    heading: '你定方向——让 agent 干生产',
    lead: '你定系统和标准，agent 渲染屏幕、状态、变体、高保真稿。少推方块，多决定什么叫好。',
    heroImageAlt: '编辑风插画：设计师在指挥，agent 填充屏幕、变体和设计系统',
    tldrTitle: '一句话',
    tldrBody:
      'Open Design 是不会累的生产助手：你定义设计系统、把控品味；agent 生成其余的，贴合系统、就在你的 repo 里。',
    stepsTitle: '设计师怎么用 Open Design',
    steps: [
      { title: '把系统编码', body: '把品牌变成一份 DESIGN.md——字号体系、颜色、间距、组件、语气。这是 agent 遵守的事实来源。', imageAlt: '插画：设计系统被沉淀为文件' },
      { title: '生成长尾', body: '那些你本来要手搭的屏幕、状态、变体——agent 贴合系统渲染，无聊的 80% 几分钟搞定。', imageAlt: '插画：一次生成多个贴合系统的屏幕' },
      { title: '指挥并打磨', body: '用语言点评——「收紧间距、空状态做暖一点」。你保留最终决定权，agent 做迭代。', imageAlt: '插画：设计师给方向，设计随之更新' },
    ],
    tableTitle: '用 Open Design 做设计 vs. 纯手工',
    tableColCapability: '你需要什么',
    tableColWithOd: '用 Open Design',
    tableColWithout: '手工设计工具',
    tableRows: [
      { capability: '搭建设计系统', withOd: '一份 agent 处处套用的 DESIGN.md', without: '一个每个工具手维护的组件库' },
      { capability: '产出变体和状态', withOd: '从 prompt 贴合系统生成', without: '复制画板、逐个调' },
      { capability: '高保真稿', withOd: '渲染成真实 HTML，不是扁平 mockup', without: '工程还要重建一遍的像素活' },
      { capability: '保持一致', withOd: '一套系统、自动强制', without: '靠人工自律，时间一长就跑偏' },
      { capability: '交接', withOd: '产物即代码——没有翻译断层', without: '规格文档和标注' },
    ],
    featuresTitle: '设计师能指挥什么',
    features: [
      { title: '编辑风版面', body: '艺术指导过的、网格驱动的版式。', thumb: 'example-web-prototype-taste-editorial' },
      { title: '文章封面', body: '杂志风的封面和特写。', thumb: 'example-article-magazine' },
      { title: '海报', body: '贴合品牌的醒目排版海报。', thumb: 'example-magazine-poster' },
      { title: '社交套图', body: '一致的多帧轮播。', thumb: 'example-social-carousel' },
      { title: '应用屏幕', body: '高保真的移动和 Web 屏幕。', thumb: 'example-mobile-app' },
      { title: '看板', body: '尊重你系统的数据 UI。', thumb: 'example-dashboard' },
    ],
    galleryTitle: '别人用 Open Design 指挥出来的',
    galleryLead: 'agent 从指挥渲染出的高保真、贴合系统的作品。挑一个接近你风格的，打磨它。',
    gallery: [
      { thumb: 'example-web-prototype-taste-editorial', caption: '编辑风版面' },
      { thumb: 'example-article-magazine', caption: '杂志封面' },
      { thumb: 'example-social-carousel', caption: '社交轮播' },
      { thumb: 'example-magazine-poster', caption: '排版海报' },
    ],
    exampleHref: '/plugins/templates/',
    exampleLinkLabel: '浏览模板',
    faqTitle: '设计师常见问题',
    faq: [
      { q: '这会取代我吗？', a: '不会——它取代的是苦工。你定系统和品味，agent 干重复生产，你把时间花在只有你能做的决定上。' },
      { q: '我怎么把控样子？', a: '你的 DESIGN.md 就是契约。agent 在其中渲染，你用语言点评直到对为止。' },
      { q: '产出可编辑/真实吗？', a: '是真实的 HTML/CSS，不是扁平导出——直接带进生产，而不是被重建。' },
      { q: '可以用哪些 agent？', a: 'Claude Code、Codex、Cursor Agent、Gemini CLI 等一方适配，自带 provider 密钥。' },
    ],
    ctaTitle: '今晚就指挥你的下一个设计',
    ctaBody: '给 repo 点个 star、装上 Open Design，让 agent 干生产、你来把控品味——在你本来就用的 agent 里。',
  },
  roleEngineering: {
    title: 'Open Design 给工程师',
    description:
      '跳过设计交接。Open Design 把一份 DESIGN.md 变成你的编码 agent 直接写的真实前端——贴合系统的 UI、原型、看板，就在 repo 里，不用 Figma 往返。',
    breadcrumb: '工程',
    label: '适用于 · 工程',
    heading: '从规格到前端，中间没有交接',
    lead: '把 agent 指向一份 DESIGN.md 和一段描述，它就写出贴合系统的真实前端代码——组件、屏幕、看板——直接在你的项目里。没有标注、不用「等设计」。',
    heroImageAlt: '编辑风插画：一份 DESIGN.md 直接流向前端代码和渲染好的 UI，跳过了交接环节',
    tldrTitle: '一句话',
    tldrBody:
      'Open Design 把设计系统变成机器可读，弭平设计到工程的断层：写你代码的同一个 agent 套用系统、渲染出真实 UI。',
    stepsTitle: '工程师怎么用 Open Design',
    steps: [
      { title: '读系统，不读标注', body: 'DESIGN.md 就在 repo 里。agent 像读代码库其余部分一样读它——没有导出的规格要解读。', imageAlt: '插画：agent 在代码旁读一份 DESIGN.md' },
      { title: '生成贴合系统的 UI', body: '描述屏幕或组件，agent 写出已经匹配系统的前端。原型、后台看板、内部工具——几分钟搞定。', imageAlt: '插画：生成的 UI 代码匹配设计系统' },
      { title: '它本就是你的代码', body: '产出是 repo 里的 HTML / 框架代码，能在 PR 里 review。「设计」和「实现」之间没有翻译步骤。', imageAlt: '插画：生成的 UI 作为可 review 的 PR 落地' },
    ],
    tableTitle: '用 Open Design 做前端 vs. 交接式',
    tableColCapability: '你需要什么',
    tableColWithOd: '用 Open Design',
    tableColWithout: '设计到开发交接',
    tableRows: [
      { capability: '拿到可开工的设计', withOd: '一份 agent 直接读的 DESIGN.md', without: '一个你手动重新解读的 Figma 文件' },
      { capability: '匹配系统', withOd: '生成时自动强制', without: '对着规格肉眼比、慢慢跑偏' },
      { capability: '做内部工具 / 看板', withOd: 'prompt → repo 里贴合系统的前端', without: '等设计师，然后做两遍' },
      { capability: 'review', withOd: '它是代码——在 PR 里 diff', without: '对着 mockup 像素比对' },
      { capability: '成本与锁定', withOd: '开源、在你 repo 里、本机运行', without: '全团队都要授权的设计工具' },
    ],
    featuresTitle: '工程师能生成什么',
    features: [
      { title: 'Web 应用 UI', body: '从描述生成多屏前端。', thumb: 'example-web-prototype' },
      { title: '研发看板', body: '仓库、CI 和指标看板。', thumb: 'example-github-dashboard' },
      { title: '数据报告', body: '从你的数据出结构化报告。', thumb: 'example-data-report' },
      { title: '后台看板', body: '内部工具和后台视图。', thumb: 'example-dashboard' },
      { title: '落地页', body: '不等设计的营销页。', thumb: 'example-saas-landing' },
      { title: 'Kanban / 看板', body: '内部工作流 UI。', thumb: 'example-kanban-board' },
    ],
    galleryTitle: '别人用 Open Design 在工程里做出来的',
    galleryLead: '直接在 repo 里生成的、贴合系统的真实前端。挑一个接近你在做的，描述它。',
    gallery: [
      { thumb: 'example-web-prototype', caption: 'Web 应用 UI' },
      { thumb: 'example-github-dashboard', caption: '研发看板' },
      { thumb: 'example-data-report', caption: '数据报告' },
      { thumb: 'example-kanban-board', caption: '内部看板 UI' },
    ],
    exampleHref: '/plugins/templates/',
    exampleLinkLabel: '浏览模板',
    faqTitle: '工程常见问题',
    faq: [
      { q: '我还需要设计师吗？', a: '品牌和方向需要。但做贴合系统的 UI 和内部工具时，agent 读 DESIGN.md 直接写前端——不用交接往返。' },
      { q: '它产出什么？', a: 'repo 里真实的 HTML / 框架代码，在 PR 里可 review——不是你要重写一遍的 mockup。' },
      { q: '怎么保持贴合系统？', a: 'DESIGN.md 是事实来源；agent 在生成时套用，所以产出无需手动像素核对就匹配。' },
      { q: '可以用哪些 agent？', a: 'Claude Code、Codex、Cursor Agent、Gemini CLI 等一方适配，自带 provider 密钥。' },
    ],
    ctaTitle: '今晚就生成你的下一个 UI',
    ctaBody: '给 repo 点个 star、装上 Open Design，把一份 DESIGN.md 变成前端——在你本来就用的 agent 里。',
  },
  roleProductManagers: {
    title: 'Open Design 给产品经理',
    description:
      '别再为了讲清一个想法等设计排期。Open Design 让 PM 把一句 prompt 变成可点击的原型或线框——用来对齐干系人、给团队做 brief，不用开设计 ticket。',
    breadcrumb: '产品经理',
    label: '适用于 · 产品经理',
    heading: '在 kickoff 之前，先让想法能点击',
    lead: '描述流程，agent 渲染出真实可点击的原型，你今天就能摆到干系人面前——让评审讨论的是实物，而不是文档里的一段话。',
    heroImageAlt: '编辑风插画：PM 把一段文字想法变成可点击原型，展示给干系人',
    tldrTitle: '一句话',
    tldrBody:
      'Open Design 给 PM 一个不依赖设计的方式把想法做实：prompt 出原型用于对齐和 brief，不花团队的设计预算。',
    stepsTitle: '产品经理怎么用 Open Design',
    steps: [
      { title: '描述流程', body: '用大白话写用户旅程——屏幕、状态、happy path。不用线框工具。', imageAlt: '插画：PM 在描述一段用户流程' },
      { title: '拿到可点击原型', body: 'agent 渲染出能真点击的可导航屏幕——给干系人评审，比一张幻灯片或一篇文档清楚得多。', imageAlt: '插画：从描述产出可点击原型' },
      { title: '对齐并交接', body: '分享链接，对着实物收集反馈，再把原型交给设计/工程，作为精确、共享的起点。', imageAlt: '插画：原型用于对齐后交给团队' },
    ],
    tableTitle: 'PM 用 Open Design vs. 等设计',
    tableColCapability: '你需要什么',
    tableColWithOd: '用 Open Design',
    tableColWithout: '今天没有它',
    tableRows: [
      { capability: '把想法做实', withOd: '自己 prompt → 可点击原型', without: '开设计 ticket 等排期' },
      { capability: '对齐干系人', withOd: '他们点击真实流程', without: '他们读文档、各自脑补' },
      { capability: '给团队做 brief', withOd: '一个具体原型当规格', without: '一堵文字墙加反复来回' },
      { capability: '开发前迭代', withOd: '一句 prompt 改完、再分享', without: '又一轮设计排队' },
      { capability: '成本', withOd: '开源、在你本来就用的 agent 里', without: '设计工时花在用完即弃的概念上' },
    ],
    featuresTitle: 'PM 能摆到人前的东西',
    features: [
      { title: '移动流程', body: '端到端应用旅程，可点击。', thumb: 'example-mobile-app' },
      { title: '入职流程', body: '欢迎 → 设置 → 首次使用。', thumb: 'example-mobile-onboarding' },
      { title: '看板与工作流', body: '用于规格的 Kanban 和流程 UI。', thumb: 'example-kanban-board' },
      { title: '看板', body: '用来框定问题的指标视图。', thumb: 'example-dashboard' },
      { title: 'Web 原型', body: '可评审的多屏 Web 流程。', thumb: 'example-web-prototype' },
      { title: '趋势视图', body: '近 30 天和趋势快照做背景。', thumb: 'example-last30days' },
    ],
    galleryTitle: '别人用 Open Design 做 PM 原型',
    galleryLead: '从描述渲染出的可点击流程，可直接用于干系人评审。挑一个接近你想法的，描述它。',
    gallery: [
      { thumb: 'example-mobile-app', caption: '移动流程' },
      { thumb: 'example-mobile-onboarding', caption: '入职流程' },
      { thumb: 'example-kanban-board', caption: '工作流看板' },
      { thumb: 'example-web-prototype', caption: 'Web 原型' },
    ],
    exampleHref: '/plugins/templates/',
    exampleLinkLabel: '浏览模板',
    faqTitle: '产品经理常见问题',
    faq: [
      { q: '我不会设计，这适合我吗？', a: '适合。你用文字描述流程，agent 让它可点击。它是用来沟通和对齐的，不需要设计工具。' },
      { q: '是真原型还是 mockup？', a: '真实可点击——导航和状态都能用，干系人对着真实体验给反应。' },
      { q: '它取代设计吗？', a: '不——它给设计和工程一个精确、共享的起点，而不是文字规格，并把设计精力留给真正需要的地方。' },
      { q: '可以用哪些 agent？', a: 'Claude Code、Codex、Cursor Agent、Gemini CLI 等一方适配，自带 provider 密钥。' },
    ],
    ctaTitle: '今晚就让你的想法能点击',
    ctaBody: '给 repo 点个 star、装上 Open Design，把下一份规格变成人能点击的东西——在你本来就用的 agent 里。',
  },
  roleMarketing: {
    title: 'Open Design 给市场团队',
    description:
      '以内容的速度出 campaign。Open Design 让 agent 从一句 prompt 产出落地页、社交卡和 campaign 视觉——贴合品牌、随要随出，不用排设计队。',
    breadcrumb: '市场',
    label: '适用于 · 市场',
    heading: 'campaign 视觉，一句 prompt 的速度',
    lead: '落地页、社交卡、封面、公告图——用语言描述、贴合品牌渲染、当天就上。不用设计 ticket，不用跟模板较劲。',
    heroImageAlt: '编辑风插画：市场人员把一份 brief 变成落地页和一组贴合品牌的社交卡',
    tldrTitle: '一句话',
    tldrBody:
      'Open Design 是市场的常驻设计资源：prompt 出落地页和社交素材、贴合品牌，让 campaign 以你写文案的速度上线。',
    stepsTitle: '市场团队怎么用 Open Design',
    steps: [
      { title: '锁定品牌', body: '你的 DESIGN.md 持有颜色、字体和语气。agent 做的每个素材都自动贴合品牌——不用逐个重新调样式。', imageAlt: '插画：品牌系统套用到市场素材' },
      { title: '生成整个 campaign', body: '落地页、社交卡、封面、公告图——每个一句 prompt，跨渠道一致的一整套。', imageAlt: '插画：从 prompt 生成完整 campaign 套图' },
      { title: '上线并迭代', body: '落地页渲染成可部署的 HTML，图导出 PNG。换标题、重渲整套——不用等队列。', imageAlt: '插画：campaign 素材快速上线并迭代' },
    ],
    tableTitle: '市场用 Open Design vs. 平时的手忙脚乱',
    tableColCapability: '你需要什么',
    tableColWithOd: '用 Open Design',
    tableColWithout: '今天没有它',
    tableRows: [
      { capability: '上一个落地页', withOd: 'prompt → 贴合品牌、可部署的页', without: '给设计 brief 或跟建站工具较劲' },
      { capability: '一致的社交套图', withOd: '同模板、换文案、完美对齐', without: '每张卡手动对齐' },
      { capability: '保持贴合品牌', withOd: '一份 DESIGN.md 套用到每个素材', without: '指望每个素材碰巧符合规范' },
      { capability: '以 campaign 速度推进', withOd: '一句 prompt 出素材、当天', without: '排在设计 backlog 后面' },
      { capability: '成本', withOd: '开源、无按席位设计工具', without: '订阅费加设计工时' },
    ],
    featuresTitle: '市场团队能上的东西',
    features: [
      { title: '落地页', body: 'campaign 和产品落地页，可部署。', thumb: 'example-saas-landing' },
      { title: '社交卡', body: '贴合品牌的 X / Twitter 卡片。', thumb: 'example-card-twitter' },
      { title: '轮播', body: '一致的多图社交套图。', thumb: 'example-social-carousel' },
      { title: '海报', body: '公告和活动海报。', thumb: 'example-magazine-poster' },
      { title: '文章封面', body: '博客和 newsletter 封面。', thumb: 'example-article-magazine' },
      { title: 'Web 页面', body: '微站和 campaign 页。', thumb: 'example-web-prototype' },
    ],
    galleryTitle: '别人用 Open Design 做市场素材',
    galleryLead: '从 prompt 渲染出的贴合品牌 campaign 素材。挑一个接近你 campaign 的，换上你的文案。',
    gallery: [
      { thumb: 'example-saas-landing', caption: 'campaign 落地页' },
      { thumb: 'example-card-twitter', caption: '社交卡' },
      { thumb: 'example-social-carousel', caption: '社交轮播' },
      { thumb: 'example-magazine-poster', caption: '公告海报' },
    ],
    exampleHref: '/plugins/templates/',
    exampleLinkLabel: '浏览模板',
    faqTitle: '市场常见问题',
    faq: [
      { q: '每个素材都要设计师吗？', a: '不用。agent 从 prompt 渲染贴合品牌的落地页和社交素材，团队不用排设计队就能上常规 campaign 活。' },
      { q: '素材怎么保持贴合品牌？', a: '你的 DESIGN.md 自动套用到一切——颜色、字体、语气跨每个素材延续。' },
      { q: '落地页真能上线吗？', a: '能——渲染成可部署的 HTML，图导出 PNG。是可上线的素材，不是 mockup。' },
      { q: '可以用哪些 agent？', a: 'Claude Code、Codex、Cursor Agent、Gemini CLI 等一方适配，自带 provider 密钥。' },
    ],
    ctaTitle: '今晚就上你的下一个 campaign',
    ctaBody: '给 repo 点个 star、装上 Open Design，把 brief 变成贴合品牌的素材——在你本来就用的 agent 里。',
  },
};
