OpenDesign 代码直出指南是一个 AI 技能，用于在设计师让 AI 工具把需求或设计意图直接做成页面或组件时，让 AI 直接生成符合工程规范的 Vue 3 + OpenDesign 代码。核心理念是「渲染出来即设计稿，可直接进生产工程」，明确不采用「先生成 HTML 再转成代码」的中间步骤，而是一步到位输出真实 @opensig/opendesign 组件与 --o- token 的 Vue SFC。
【用途】 该技能面向各社区体验/设计团队，帮助把设计意图直接映射为可落地的工程代码。它会指引 AI 使用真实的 OpenDesign 组件、设计 token、scoped SCSS 与 BEM 命名，并遵守目标仓库的约定。
【适用前提】 本技能产出的代码要落进各开源社区官网（portal）仓库，但并非所有 portal 都使用 OpenDesign。确认前不要动手：需读取目标仓库根目录 AGENTS.md 的 §1 技术栈表，查看 UI 组件库一行。若为 @opensig/opendesign，则继续使用本技能；若不是（例如使用 shadcn-vue + Tailwind 或 Element Plus），应停止并改用该仓库 UI 库的写法。
【硬规则红线】 生成任何代码前必须遵守，违反任意一条即视为不合规，必须重写：
- 组件优先：凡 OpenDesign 有对应控件（按钮、卡片、表单、表格、标签、分页等），必须使用真实组件 <OButton>、<OCard>、<OTable> 等，禁止用原生 <button>/<select>/手写 div 替代。
- 只用 Token 变量：颜色、间距、字号、行高、圆角、阴影一律使用 var(--o-) 或 var(--o-r-)，禁止硬编码 hex、rgb、px 字号、px 间距。颜色必须使用语义 token（--o-color-），严禁直接使用色板变量（如 --o-kleinblue-、--o-grey-、--o-brand-）。
- 使用 <script setup lang="ts"> + TypeScript：props 用 defineProps<T>() 泛型，不用字符串数组式。
- 无内联 style="..."（动态值等极特殊情况除外并注释）；无 !important。
- BEM 命名 + <style lang="scss" scoped>，嵌套不超过 3 层。
- 不穿透改组件内部：视觉差异通过组件 props 与主题 token 表达，不用 :deep() 重写 OpenDesign 组件内部结构。
- 文案走 i18n：不写死面向用户的文字，使用目标工程的 i18n 方案（如 t('module.key')）。
【起手方式与参考文件】 建议从合规 SFC 模板开始，不要白手起稿：复制 references/starter-page.vue，它已示范 <script setup> 区块顺序、@opensig/opendesign 组件导入、--o-/--o-r- token、scoped SCSS、响应式、i18n 占位。参考文件还包括：references/component-cheatsheet.md（设计意图到 OpenDesign 组件速查）、references/engineering-rules.md（工程落地约束）、references/checklist.md（生成后自检清单）、references/examples/feature-section.vue（楼层 + 卡片栅格示例）、references/examples/list-filter-page.vue（带筛选的列表页示例）。
【主题机制】 主题由消费工程在初始化时选定并通过根节点设置，组件与 token 自动适配，生成的页面代码无需关心，例如 <html data-o-theme="e.light">。社区主题码包括：openEuler 为 e、Ascend 为 a、Kunpeng 为 k、Mindspore 为 m、openGauss 为 g、openUBMC 为 u。颜色全用语义 token 后，切换主题或明暗时自动适配，无需为暗色另写样式。
【四大约束总纲】 ① 视觉 Token：颜色必须用语义 token，例如背景 --o-color-fill1/2/3，文字 --o-color-info1~info4，主色 --o-color-primary1，功能色 --o-color-success/warning/danger1，边框 --o-color-control1，链接 --o-color-link1。语义色自带 rgb 包裹，直接 var(--o-color-fill2)。严禁直接用色板变量。页面级字号/行高/间距优先响应式 token：--o-r-font_size-* 加配套 --o-r-line_height-、--o-r-gap-。圆角 --o-radius-、阴影 --o-shadow-1/2/3、动效 --o-duration-+--o-easing-*。 ② 组件用法：设计意图直接映射到 OpenDesign 组件，例如按钮用 OButton、链接用 OLink、卡片用 OCard、标签用 OTag、输入/下拉用 OInput / OSelect+OOption、表格用 OTable、分页用 OPagination、标签页用 OTab+OTabPane、对话框用 ODialog、图标用 OIcon。 ③ 布局与响应式：页面级布局用 24 栅格（--o-r-grid-N + 水槽 --o-r-grid-column-gutter），并排块列数之和等于断点总列数。断点为 Phone ≤840、Pad 841–1200、Laptop 1201–1680、Desktop >1680，响应式 token 自动适配；确需断点时用 @media 或目标工程的 respond-to mixin。 ④ 工程落地：保证代码可直接进生产工程，核心即硬规则红线。
【社区差异与工作流】 路径别名（如 ~@/）、i18n 写法、排版 mixin（@include h3）、Vue API 是否自动导入、SSR/SSG 安全写法等因目标仓库而异。技能给出 OpenDesign 通用合规骨架；落地前先读目标仓库根 AGENTS.md 与 rules/ 适配。工作流包括：进仓核实目标工程（读 AGENTS.md 并确认 UI 库为 @opensig/opendesign）；按需读取最新同级技能（token 值、组件 API、CLI 命令、设计稿规范）；复制 references/starter-page.vue 起手；直接写代码；对照 references/checklist.md 自检。
【限制】 本技能适用于目标仓库确实使用 OpenDesign 的场景，若仓库使用其他 UI 库则不适用。技能强调不凭记忆写 token 值或组件 API，需按需读取同级技能的最新版本；具体 token 表与组件 API 不在此重复。各 portal 仓库的约定差异需按目标仓库文档适配。资料中未提供收费、价格、平台、效果等方面的信息。