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

export const ZH_TW: 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: '產物在你的儲存庫裡，設計與程式碼同源',
        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:
      '給儲存庫點個 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——在你的儲存庫裡做版本控管、隨處可代管、無需按席位訂閱 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 列挪到頂部」。產物在你的專案裡，儀表板像任何程式碼一樣可審查、可版本控管。',
        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: '審查與版本控管', withOd: '在儲存庫裡，像程式碼一樣可 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: '給儲存庫點個 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、原始檔留在儲存庫。',
    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: '審查與版本控管', withOd: '原始檔在儲存庫裡，可 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: '給儲存庫點個 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: '儲存庫裡一套 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: '給儲存庫點個 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 組合、在儲存庫裡做版本控管、不用學時間軸編輯器。',
    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: '審查與版本控管', withOd: '幀原始檔在儲存庫裡，可 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: '給儲存庫點個 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 留在你的儲存庫裡供 agent 讀取，一致性是自動的，不靠手動維護。',
    heroImageAlt: '編輯風插畫：一套設計系統向外輻射成眾多貼合品牌的產物',
    tldrTitle: '一句話',
    tldrBody:
      'Open Design 把你的品牌沉澱成一套可攜帶的設計系統，agent 套用到每個產物——在儲存庫裡定義一次、處處強制執行，沒有中心化設計工具把關。',
    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: '改一處系統，下一次算繪處處生效。因為它是儲存庫裡的一個檔案，設計決策像程式碼一樣被審查和版本控管。', 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: '審查與版本控管', withOd: '在儲存庫裡，像程式碼一樣可 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: '儲存庫裡一份 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: '給儲存庫點個 star、裝上 Open Design，給你的 agent 一套處處套用的品牌——在你本來就用的 agent 裡。',
  },
  roleSoloBuilder: {
    title: 'Open Design 給獨立開發者 / 一人公司',
    description:
      '一個人也能像一支團隊那樣出活。Open Design 把你的編碼 agent 變成創業的設計那一半——原型、到達頁、儀表板、品牌視覺，全從一句 prompt 來、全貼合品牌、全在你的儲存庫裡。',
    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: '一切算繪成你儲存庫裡的 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: '儲存庫裡的 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: '儲存庫裡真實的 HTML / 程式碼，原型能變產品、到達頁能上線，而不是用完即棄的 mockup。' },
      { q: '可以用哪些 agent？', a: 'Claude Code、Codex、Cursor Agent、Gemini CLI 等一方轉接，自帶 provider 金鑰。' },
    ],
    ctaTitle: '今晚就把整個東西做出來',
    ctaBody: '給儲存庫點個 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 產生其餘的，貼合系統、就在你的儲存庫裡。',
    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: '給儲存庫點個 star、裝上 Open Design，讓 agent 幹生產、你來把控品味——在你本來就用的 agent 裡。',
  },
  roleEngineering: {
    title: 'Open Design 給工程師',
    description:
      '跳過設計交接。Open Design 把一份 DESIGN.md 變成你的編碼 agent 直接寫的真實前端——貼合系統的 UI、原型、儀表板，就在儲存庫裡，不用 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 就在儲存庫裡。agent 像讀程式碼庫其餘部分一樣讀它——沒有匯出的規格要解讀。', imageAlt: '插畫：agent 在程式碼旁讀一份 DESIGN.md' },
      { title: '產生貼合系統的 UI', body: '描述畫面或元件，agent 寫出已經符合系統的前端。原型、後台儀表板、內部工具——幾分鐘搞定。', imageAlt: '插畫：產生的 UI 程式碼符合設計系統' },
      { title: '它本就是你的程式碼', body: '產出是儲存庫裡的 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 → 儲存庫裡貼合系統的前端', without: '等設計師，然後做兩遍' },
      { capability: 'review', withOd: '它是程式碼——在 PR 裡 diff', without: '對著 mockup 像素比對' },
      { capability: '成本與鎖定', withOd: '開源、在你儲存庫裡、本機執行', 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: '直接在儲存庫裡產生的、貼合系統的真實前端。挑一個接近你在做的，描述它。',
    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: '儲存庫裡真實的 HTML / 框架程式碼，在 PR 裡可 review——不是你要重寫一遍的 mockup。' },
      { q: '怎麼保持貼合系統？', a: 'DESIGN.md 是事實來源；agent 在產生時套用，所以產出無需手動像素核對就符合。' },
      { q: '可以用哪些 agent？', a: 'Claude Code、Codex、Cursor Agent、Gemini CLI 等一方轉接，自帶 provider 金鑰。' },
    ],
    ctaTitle: '今晚就產生你的下一個 UI',
    ctaBody: '給儲存庫點個 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: '給儲存庫點個 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: '給儲存庫點個 star、裝上 Open Design，把 brief 變成貼合品牌的素材——在你本來就用的 agent 裡。',
  },
};
