Design Studio
Design Studio 是 Elftia 内置的 AI 设计工作台。它把设计技能（Skill）、设计系统（Design System） 和 Craft 片段 三个抽象组合起来，让 AI 能基于一致的视觉语言生成网页、海报、Deck、社交图等可交付物，并支持原地预览、Lint 校验和导出。
入口：左侧导航 Design Studio（路由 /design-studio）。
三件套是什么
| 抽象 | 作用 | 来源 |
|---|---|---|
| Skill（设计技能） | 把"做什么"封装成可复用的 prompt + 输入 schema —— 例如"产品落地页"、"会议海报"、"播客封面"。 | 内置 70+ 个 + 用户自定义 |
| Design System（设计系统） | 把"长什么样"封装成 token + 组件参考 —— 配色、字体、间距、圆角、阴影、按钮样式等。 | 内置 140+ 个 + 用户自定义 |
| Craft（片段库） | 可拼接的 HTML / CSS / SVG 片段 —— 装饰元素、布局骨架、图表样板。 | 内置 7 类 + 用户自定义 |
启动一个新项目时，你选定 Mode + Skill + Design System 三个轴，AI 会基于这套上下文 + Craft 库生成产物。
四种模式（Mode）
新建项目时可选择以下任一模式，模式决定了 artifact 的产物类型与编辑流程：
| 模式 | 产物 | 特色 |
|---|---|---|
| Prototype | 单页 HTML 原型 | 默认模式，左 chat 右工作区，支持评论 / 局部编辑（surgical edit） |
| Deck | 多页幻灯片 | iframe + 上下页 + 全屏 + 速览 + 导出 PDF / PPTX |
| Template | 表单驱动的 HTML | EJS 子集占位符模板，自动生成表单，输入即时刷新右栏预览 |
| Design System | DESIGN.md + 示例页 | 双栏（左 DESIGN.md 源 + token swatch / 右示例 dashboard），保存到 <userData>/elftia/design-systems/<slug>/ |
主要界面
首页（/design-studio）
两个顶部 Tab，全宽布局（无侧边栏）：
| Tab | 内容 |
|---|---|
| Examples（示例） | 按 Skill 浏览预制的样例项目，可一键 Fork 出新会话。 |
| Design Systems（设计系统） | 浏览内置 + 自定义的设计系统，预览模板效果，切换默认值。 |
历史 Design 项目以 kind='design' 的会话出现在常规会话列表里 —— 和聊天会话同源，支持分支、重生、附件等。
新建项目
新建入口在新会话页的 DesignStudio persona：
- 在新会话页顶部 persona 选择器选 DesignStudio
- 选择 Skill（左侧）+ Design System（右侧）
- 描述需求，发送
- AI 输出产物 → 自动打开预览面板
详见 新会话与 persona。
产物预览
AI 生成产物（artifact，通常是 HTML 文档）后会触发"打开 workspace"动作，把右侧切换为预览面板：
- Preview — 实时渲染 HTML，支持视口宽度切换（mobile / tablet / desktop）
- Source — 查看产物源码（CodeMirror，可复制）
- Lint — 自动校验产物是否符合设计系统约束（颜色越界、字体不在 token 内等）
每条产生 artifact 的消息也会单独显示一个 Preview 按钮 —— 你可以回放历史版本而不必把 workspace 切回当前。
导出
预览面板顶部 Export 按钮：
| 类型 | 输出 |
|---|---|
| HTML | 单文件 HTML（内联资源） |
| PNG / JPG | 视口截图，可指定分辨率 |
| 多页 PDF（适合海报、Deck） | |
| Deck | Reveal.js 风格的多页幻灯片包 |
内置素材的来源
design-skills/、design-systems/、craft/ 三个目录在首次启动时被 materialize 到用户数据目录（<userData>/elftia/），不写在 elftia 安装目录里。
这意味着：
- 你直接编辑用户目录下的文件就能定制内置 Skill / DS / Craft
- 你的编辑不会被 elftia 升级覆盖（升级只新增文件，不动已存在的）
- 内置素材本身来自上游开源项目
nexu-io/open-design，按 commit pin 取快照
如果你想升级到上游最新版本（开发者操作），见开发者文档：内置资源同步流程。
与聊天系统的关系
Design 项目在底层是普通的 chat_sessions 行（kind='design'），所以：
- 支持同样的 LLM 配置、provider 切换、API Key Pool
- 支持消息分支、重生（每次重生 = 一个新 artifact 版本）
- 支持附件上传（参考图、品牌素材）
- 在历史侧边栏里和普通聊天会话混合显示，可加文件夹 / 标签
不同点：
- 必须绑定一个 Skill + Design System，session 创建时确定，中途不可换
- 引擎层走 Design 适配器（Adapter）—— 不是所有引擎都支持。
claude-sdk/tinyelf/chat等通过 Prompt Injection 注入策略可直接使用；cli（Claude Code、Codex CLI）走 FilePlaced 策略；纯apiengine 不支持，会显示 placeholder
0.1.7+ Always-on（无需 Experimental Flag）
0.1.7 起 Design Studio 已默认启用，无需在 设置 → 系统 → Experimental Features 里开开关。导航栏直接出现 🎨 Design Studio 入口。
启用门槛只剩一条：当前 LLM provider 的引擎要支持 Design 适配器。
支持矩阵：
| 引擎类型 | 是否支持 | 注入方式 |
|---|---|---|
claude-sdk | ✅ | 原生 skill 加载，支持 surgical-edit 评论 / 局部编辑 |
tinyelf | ✅ | Prompt Injection — SKILL.md + DESIGN.md inline 到 system prompt |
chat | ✅ | Prompt Injection（>16k tokens 会拒绝以避免溢出） |
cli（Claude Code、Codex） | ✅ | FilePlaced — 写入 .cursorrules / .aider.conf.yml 等 |
api | ❌ | 不支持，会显示 "Adapter unavailable" placeholder |
常见问题
| 问题 | 解决方案 |
|---|---|
| Design Studio 页面显示 "Adapter unavailable" | 当前 LLM provider 选了不支持 Design 适配器的引擎（多半是 api），换到 Claude SDK / TinyElf / Chat / 一个支持的 CLI backend |
| 自定义的 Design System 不显示 | 检查 <userData>/elftia/design-systems/<your-ds>/ 下是否有 manifest.json 且 schema 有效；可在 Design Systems 页签点「重新扫描」 |
| 升级 elftia 后内置 Skill / DS 没更新 | 这是设计行为 —— 已存在的文件不被覆盖（按 SHA-1 检测用户编辑）。如需重置某个文件，删除用户目录下对应文件，重启会重新 materialize |
| 产物预览里 Lint 报"颜色越界" | 产物里用了不在 design-tokens 里的颜色值；要么改产物用 token，要么扩展 design system 的 token 表 |
| Surgical-edit（评论 / Send to chat）不可用 | 仅 claude-sdk 引擎下启用。其它引擎打开 Comments 抽屉只能查看，不能 Send to chat |
相关链接
- Skill 系统 — Design Studio 的 Skill 复用了 Agent 系统的 Skill 抽象
- LLM 提供商 — 配置 Design Studio 使用的模型
- 开发者：Design Studio 架构
- 开发者：内置资源同步流程