# Opendesign Codegen > OpenDesign 代码直出指南。当设计师（尤其各社区体验/设计团队）让 AI 工具把需求/设计意图直接做成页面或组件时使用此 skill——AI 应**直接生成符合工程规范的 Vue 3 + OpenDesign 代码**（真实 O 组件 + --o- 设计 token + scoped SCSS + BEM + i18n），渲染出来即设计稿，无需"先出 HTML 再转代码"的中间步骤。提供四大约束（视觉 Token / 组件用法 / 布局响应式 / 工程落地）、合规 SFC 起手模板、组件选用速查、生成后自检清单。仅适用于 UI 库为 @opensig/opendesign 的目标仓——生成前先读目标仓根 AGENTS.md + rules/ 按其框架族/i18n/别名/SEO 约定适配。复用 opendesign-tokens 与 opendesign-components，不重复其内容。 - Skill: `finch-poi/opendesign-codegen` (Agent Skill, multi-file: 8 files) - Install (CLI): `npx skillmds@latest add finch-poi/opendesign-codegen` - Raw SKILL.md: https://api.skillmd.com/api/skills/finch-poi/opendesign-codegen/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Marketing & Growth - Author: finch-poi (https://skillmd.com/u/finch-poi) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/finch-poi/opendesign-codegen --- # OpenDesign 代码直出指南设计师用 AI 工具干活时，**AI 直接产出的就是符合工程规范的 Vue 3 + OpenDesign 代码**——渲染出来即设计稿，可直接进生产工程。 > ❌ 不要"先生成 HTML 再转成代码"。 > ✅ 一步到位：直接输出真实 `@opensig/opendesign` 组件 + `--o-` token 的 Vue SFC。 > 本 skill **不重复** Token 表与组件 API，按需链接： > - 全量 Token（六主题 / 响应式 / 24 栅格 / 色值反查）→ [`../opendesign-tokens/SKILL.md`](../opendesign-tokens/SKILL.md) > - 46 个组件的 Props/Events/Slots → [`../opendesign-components/SKILL.md`](../opendesign-components/SKILL.md) > - 想产 Pixso 设计稿而非代码 → [`../opendesign-design/SKILL.md`](../opendesign-design/SKILL.md) --- ## 适用前提：先确认目标仓用 OpenDesign 本 skill 产出的代码要落进各开源社区官网（portal）仓。**并非所有 portal 都用 OpenDesign**——确认前不要动手： 1. **读目标仓根 `AGENTS.md`**（遵循 [agents.md](https://agents.md) 标准，是所有 AI 工具进仓的唯一入口）的 §1 技术栈表，看 `UI 组件库` 行。 2. **是 `@opensig/opendesign`** → 继续用本 skill。 3. **不是**（如 hifloat 用 shadcn-vue + Tailwind、有的用 Element Plus）→ **停**，改用该仓 UI 库的写法，本 skill 不适用。 --- ## 🔴 硬规则红线（生成任何代码前必读，最高优先级）违反任意一条即视为不合规，必须重写： 1. **组件优先**：凡 OpenDesign 有对应控件（按钮 / 卡片 / 表单 / 表格 / 标签 / 分页等），必须用真实组件 `` / `` / `` …，**禁止用原生 `