fix: replace Vite ?raw imports with readFileSync for Node.js compatibility

README.md

@@ -37,7 +37,8 @@
 
 ## What's new
 
-- **v0.1.4** *(coming)* — 🎨 AI image generation · ChatGPT Plus/Codex subscription support · CLIProxyAPI one-click import · API config hardening
+- **v0.2.0** *(in preparation, expected in about a week)* — Agentic Design: workspace-backed design sessions · permissioned file/tool loop · lazy skills and scaffolds · `DESIGN.md` design systems
+- **v0.1.4** *(2026-04-23)* — AI image generation · ChatGPT Plus/Codex subscription support · CLIProxyAPI one-click import · API config hardening
 - **v0.1.3** *(2026-04-21)* — Gemini `models/` prefix fix · OpenAI-compatible relay "instructions required" fix · third-party relay SSE-truncation hint
 - **v0.1.2** *(2026-04-21)* — Release pipeline · Homebrew / winget / Scoop packaging manifests
 
@@ -226,6 +227,7 @@ Add a `SKILL.md` to any project to teach the model your own taste.
 - **Prompt → HTML or JSX/React component** prototype, rendered in a sandboxed iframe (vendored React 18 + Babel on-device)
 - **Fifteen built-in demos + twelve design skill modules** — ready-to-edit starting points for common design briefs
 - **Live agent panel** — watch tool calls stream in real time as the model edits files
+- **AI image generation** — opt-in bitmap assets for heroes, product shots, backgrounds, and illustrations
 - **AI-generated sliders** — the model emits the parameters worth tweaking (color, spacing, font)
 - **Comment mode** — click any element in the preview to drop a pin, leave a note, and let the model rewrite only that region
 - **Generation cancellation** — stop mid-stream without losing prior turns
@@ -247,20 +249,28 @@ Add a `SKILL.md` to any project to teach the model your own taste.
 
 ## Roadmap
 
-We're on v0.1.3 — shipping fast, priorities can shift. This is what's on the bench right now.
+Current release: v0.1.4. The next release theme is locked: **Agentic Design**.
 
-### Now — v0.1.x polish
+### Now — v0.1.4 shipped
 
-- **Provider & API config polish** — smoother one-click import, model picker reaching the last gaps (custom providers, timeouts), clearer connection diagnostics
-- **Structured logging + issue-report bundle** — better logs in the main/renderer processes and a one-click diagnostics export that makes bug reports actionable
+- **AI image generation** — opt-in bitmap assets through OpenAI image models or OpenRouter image models
+- **ChatGPT Plus / Codex subscription login** — one-click OAuth for users who do not want to paste an API key
+- **CLIProxyAPI one-click import** — auto-detect a running local proxy and bring it into Settings
+- **API config hardening** — clearer relay diagnostics for timeouts, SSE truncation, missing `/models`, and incompatible Messages APIs
 
-### Next — v0.2 (headline theme: filesystem & import)
+### Next — v0.2.0 (Agentic Design)
 
-- **Filesystem support** — read/write real project directories, not just in-app scratch space
-- **Broader import paths** — bring existing assets, prompts, and project context into a design session
+Expected in about a week. v0.2 turns Open CoDesign from a one-shot generator into a local design agent with a real workspace:
 
-### Later — v0.3 and beyond
+- **Design as session** — every design is a pi session with JSONL history and a workspace folder on disk
+- **Permissioned agent loop** — pi built-ins for read, write, edit, bash, grep, find, and ls, gated by Open CoDesign's permission UI
+- **Design tools on demand** — `ask`, `scaffold`, `skill`, `preview`, `gen_image`, `tweaks`, `todos`, and `done`
+- **`DESIGN.md` as shared memory** — brand tokens and design-system decisions become editable files, not model memory
+- **v0.1 migration path** — existing SQLite designs migrate into workspaces and session history
 
+### Later — v0.2.x and beyond
+
+- Renderer polish for the new `ask`, `preview`, tweaks, and process-management surfaces
 - Cost transparency — pre-generation estimate + weekly budget (per-generation token count already shipped)
 - Version snapshots + side-by-side diff
 - Three-style parallel exploration
@@ -289,7 +299,7 @@ Have a different priority in mind? [Open an issue](https://github.com/OpenCowork
 ## Built on
 
 - Electron + React 19 + Vite 6 + Tailwind v4
-- `@mariozechner/pi-ai` (multi-provider model abstraction)
+- `@mariozechner/pi-ai` and `pi-coding-agent` (model/provider and agent-loop primitives)
 - `better-sqlite3`, `electron-builder`
 
 ## Reporting issues
@@ -325,7 +335,7 @@ For Chinese-speaking users, we also keep a WeChat group for product updates, usa
   />
 </p>
 
-> ⚠️ The WeChat QR code rotates every 7 days and is currently valid until **April 28**.  
+> ⚠️ The WeChat QR code rotates every 7 days and is currently valid until **May 4**.
 > If the code has expired, please leave a message in [GitHub Issues](https://github.com/OpenCoworkAI/open-codesign/issues) and we will refresh the image in-repo.
 
 See also the Chinese README: [README.zh-CN.md#社群](./README.zh-CN.md#%E7%A4%BE%E7%BE%A4).

README.zh-CN.md

@@ -35,7 +35,8 @@
 
 ## 最近更新
 
-- **v0.1.4** *（即将发布）* — 🎨 AI 图像生成 · 支持 ChatGPT Plus / Codex 订阅登录 · CLIProxyAPI 一键导入 · API 配置稳定性优化
+- **v0.2.0** *（准备中，预计一周左右发布）* — Agentic Design：带真实工作区的设计会话 · 带权限的文件 / 工具循环 · 按需加载 skill 和 scaffold · `DESIGN.md` 设计系统
+- **v0.1.4** *（2026-04-23）* — AI 图像生成 · 支持 ChatGPT Plus / Codex 订阅登录 · CLIProxyAPI 一键导入 · API 配置稳定性优化
 - **v0.1.3** *（2026-04-21）* — 修复 Gemini `models/` 前缀 key · 修复 OpenAI 兼容中转 "instructions required" 报错 · 新增第三方中转 SSE 截断提示
 - **v0.1.2** *（2026-04-21）* — 发版流程 · Homebrew / winget / Scoop 打包清单
 
@@ -224,6 +225,7 @@ brew install --cask opencoworkai/tap/open-codesign
 - **提示词 → HTML 或 JSX/React 组件原型**，渲染在隔离的 sandbox iframe 中（本地 vendored React 18 + Babel）
 - **十五个内置 demo + 十二个设计技能模块**：给常见设计需求准备好的起点
 - **实时 Agent 面板**：模型编辑文件时，工具调用会实时流式展示
+- **AI 图像生成**：可选启用，为 hero、产品图、背景和插画生成位图素材
 - **AI 自动生成调节参数**：模型会主动暴露值得调的参数，比如颜色、间距和字体
 - **Comment mode**：点击预览中的任意元素，留下批注，模型只重写对应局部
 - **支持中途取消生成**：停止后也不会丢失之前的上下文和结果
@@ -245,20 +247,28 @@ brew install --cask opencoworkai/tap/open-codesign
 
 ## Roadmap
 
-当前版本 v0.1.3，处于快速迭代阶段，优先级随时会调整。下面是我们现在案头上的事。
+当前版本是 v0.1.4，v0.2.0 正在准备中。优先级仍可能调整，但下一版主题已经确定：**Agentic Design**。
 
-### Now — v0.1.x 打磨
+### Now — v0.1.4 已发布
 
-- **Provider / API 配置打磨**：一键导入体验更顺滑，model picker 补齐最后的缺口（自定义 provider、timeout），连接诊断给出更清晰的错误提示
-- **结构化日志 + 问题汇报包**：完善主进程 / 渲染进程的日志，一键导出诊断包，让 bug report 真正能被复现
+- **AI 图像生成**：通过 OpenAI 图像模型或 OpenRouter 图像模型生成位图素材，默认关闭，可在设置里启用
+- **ChatGPT Plus / Codex 订阅登录**：一键 OAuth，适合不想手动粘贴 API Key 的用户
+- **CLIProxyAPI 一键导入**：自动发现正在运行的本地代理，并带入 Settings
+- **API 配置稳定性优化**：对 timeout、SSE 截断、缺少 `/models`、Messages API 不兼容等中转问题给出更清楚的诊断
 
-### Next — v0.2（主题：文件系统与导入）
+### Next — v0.2.0（Agentic Design）
 
-- **文件系统支持**：直接读写真实的项目目录，而不只是 app 内的临时空间
-- **更丰富的导入能力**：把已有的素材、prompt、项目上下文带进设计会话
+预计一周左右发布。v0.2 会把 Open CoDesign 从一次性生成器升级成一个本地设计 agent，每个设计都有真实工作区：
 
-### Later — v0.3 及之后
+- **Design as session**：每个 design 都是一个 pi session，历史写入 JSONL，产物落在磁盘工作区
+- **带权限的 agent loop**：复用 pi 的 read、write、edit、bash、grep、find、ls，由 Open CoDesign 权限 UI 统一拦截
+- **按需调用设计工具**：`ask`、`scaffold`、`skill`、`preview`、`gen_image`、`tweaks`、`todos`、`done`
+- **`DESIGN.md` 作为设计系统源文件**：品牌 token 和设计决策写成可编辑文件，而不是存在模型记忆里
+- **v0.1 迁移路径**：旧 SQLite 设计会迁移到真实工作区和 session history
 
+### Later — v0.2.x 及之后
+
+- 继续打磨新版 `ask`、`preview`、tweaks 和进程管理界面
 - 成本透明化：生成前估算 + 每周预算控制（每轮 token 计数已上线）
 - 版本快照 + 并排 diff
 - 三种风格并行探索
@@ -279,7 +289,7 @@ brew install --cask opencoworkai/tap/open-codesign
 ## 基于这些技术构建
 
 - Electron + React 19 + Vite 6 + Tailwind v4
-- `@mariozechner/pi-ai`（多 provider 模型抽象）
+- `@mariozechner/pi-ai` 与 `pi-coding-agent`（模型 / provider 与 agent loop 基础能力）
 - `better-sqlite3`、`electron-builder`
 
 ## 社群
@@ -296,7 +306,7 @@ Open CoDesign 在 [LINUX DO](https://linux.do/) 社区首发，感谢佬友们
   <img src="https://raw.githubusercontent.com/OpenCoworkAI/open-codesign/main/website/public/community/wechat-group.jpg" alt="Open CoDesign 用户交流群微信二维码" width="260" />
 </p>
 
-> ⚠️ 微信群二维码每 7 天自动失效（当前截至 **4 月 28 日** 有效）。扫码失败请到 [GitHub Issues](https://github.com/OpenCoworkAI/open-codesign/issues) 留言，我们会更新这里的图片。
+> ⚠️ 微信群二维码每 7 天自动失效（当前截至 **5 月 4 日** 有效）。扫码失败请到 [GitHub Issues](https://github.com/OpenCoworkAI/open-codesign/issues) 留言，我们会更新这里的图片。
 
 英文或异步讨论：[GitHub Issues](https://github.com/OpenCoworkAI/open-codesign/issues) · 安全问题：[SECURITY.md](./SECURITY.md)。
 

package.json

@@ -2,6 +2,7 @@
   "name": "open-codesign",
   "version": "0.1.4",
   "private": true,
+  "type": "module",
   "description": "Open-source AI design tool — prompt to interactive prototype, slide deck, and marketing assets. Multi-model, BYOK, runs on your laptop.",
   "license": "MIT",
   "homepage": "https://github.com/OpenCoworkAI/open-codesign",

packages/core/src/design-skills/index.ts

@@ -7,18 +7,15 @@
  * skill (if any) applies before opening the file.
  */
 
-import calendarJsx from './calendar.jsx?raw';
-import chartSvgJsx from './chart-svg.jsx?raw';
-import chatUiJsx from './chat-ui.jsx?raw';
-import dashboardJsx from './dashboard.jsx?raw';
-import dataTableJsx from './data-table.jsx?raw';
-import editorialTypographyJsx from './editorial-typography.jsx?raw';
-import footersJsx from './footers.jsx?raw';
-import glassmorphismJsx from './glassmorphism.jsx?raw';
-import heroesJsx from './heroes.jsx?raw';
-import landingPageJsx from './landing-page.jsx?raw';
-import pricingJsx from './pricing.jsx?raw';
-import slideDeckJsx from './slide-deck.jsx?raw';
+import { readFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+function loadSkill(name: string): string {
+  return readFileSync(resolve(__dirname, name), 'utf-8');
+}
 
 const DESIGN_SKILL_FILES = [
   'slide-deck.jsx',
@@ -38,16 +35,16 @@ const DESIGN_SKILL_FILES = [
 export type DesignSkillName = (typeof DESIGN_SKILL_FILES)[number];
 
 export const DESIGN_SKILLS: ReadonlyArray<readonly [string, string]> = Object.freeze([
-  ['slide-deck.jsx', slideDeckJsx],
-  ['dashboard.jsx', dashboardJsx],
-  ['landing-page.jsx', landingPageJsx],
-  ['chart-svg.jsx', chartSvgJsx],
-  ['glassmorphism.jsx', glassmorphismJsx],
-  ['editorial-typography.jsx', editorialTypographyJsx],
-  ['heroes.jsx', heroesJsx],
-  ['pricing.jsx', pricingJsx],
-  ['footers.jsx', footersJsx],
-  ['chat-ui.jsx', chatUiJsx],
-  ['data-table.jsx', dataTableJsx],
-  ['calendar.jsx', calendarJsx],
+  ['slide-deck.jsx', loadSkill('slide-deck.jsx')],
+  ['dashboard.jsx', loadSkill('dashboard.jsx')],
+  ['landing-page.jsx', loadSkill('landing-page.jsx')],
+  ['chart-svg.jsx', loadSkill('chart-svg.jsx')],
+  ['glassmorphism.jsx', loadSkill('glassmorphism.jsx')],
+  ['editorial-typography.jsx', loadSkill('editorial-typography.jsx')],
+  ['heroes.jsx', loadSkill('heroes.jsx')],
+  ['pricing.jsx', loadSkill('pricing.jsx')],
+  ['footers.jsx', loadSkill('footers.jsx')],
+  ['chat-ui.jsx', loadSkill('chat-ui.jsx')],
+  ['data-table.jsx', loadSkill('data-table.jsx')],
+  ['calendar.jsx', loadSkill('calendar.jsx')],
 ] as const);

packages/core/src/frames/index.ts

@@ -9,11 +9,15 @@
  * EDITMODE block at the top so the host can render a tweak panel.
  */
 
-import androidJsx from './android.jsx?raw';
-import ipadJsx from './ipad.jsx?raw';
-import iphoneJsx from './iphone.jsx?raw';
-import macosSafariJsx from './macos-safari.jsx?raw';
-import watchJsx from './watch.jsx?raw';
+import { readFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+function loadFrame(name: string): string {
+  return readFileSync(resolve(__dirname, name), 'utf-8');
+}
 
 const FRAME_FILES = [
   'iphone.jsx',
@@ -26,9 +30,9 @@ const FRAME_FILES = [
 export type FrameName = (typeof FRAME_FILES)[number];
 
 export const FRAME_TEMPLATES: ReadonlyArray<readonly [string, string]> = Object.freeze([
-  ['iphone.jsx', iphoneJsx],
-  ['ipad.jsx', ipadJsx],
-  ['watch.jsx', watchJsx],
-  ['android.jsx', androidJsx],
-  ['macos-safari.jsx', macosSafariJsx],
+  ['iphone.jsx', loadFrame('iphone.jsx')],
+  ['ipad.jsx', loadFrame('ipad.jsx')],
+  ['watch.jsx', loadFrame('watch.jsx')],
+  ['android.jsx', loadFrame('android.jsx')],
+  ['macos-safari.jsx', loadFrame('macos-safari.jsx')],
 ] as const);

website/faq.md

@@ -63,7 +63,7 @@ Yes. Open CoDesign supports ChatGPT Plus / Codex OAuth subscription login as of
 
 ## Does Open CoDesign send my prompts or designs to any third party?
 
-No. All designs, prompts, snapshots, and codebase scans live on your machine — SQLite for design history, and a TOML config at `~/.config/open-codesign/config.toml` with file mode 0600 (matching Claude Code / Codex / gh CLI conventions). The only outbound network traffic is directly to the model provider you configure with your own API key. No telemetry by default.
+No. Designs, prompts, and scans live on your machine. v0.1 uses SQLite for design history plus a TOML config at `~/.config/open-codesign/config.toml` with file mode 0600; v0.2 migrates designs into JSONL sessions and workspace files. The only outbound network traffic is directly to the model provider you configure with your own API key. No telemetry by default.
 
 ## Which AI models does Open CoDesign support?
 
@@ -123,17 +123,17 @@ Yes, when used with a local model runtime like Ollama. All generation flows thro
 
 ## What's coming in v0.2?
 
-v0.2 is an architectural upgrade — the "Agentic Design Loop". Instead of a one-shot prompt-to-artifact generator, v0.2 gives you:
+v0.2 is the Agentic Design update, expected in about one week. It turns Open CoDesign from a one-shot prompt-to-artifact generator into a local design agent:
 
-- **Per-project workspace** — bind any folder on disk; all generated files live there, usable with git
-- **Agent reads your workspace** — `read_file`, `list_files`, `grep`, `find` tools so the agent understands context before generating
-- **Agent edits real files** — str-replace-style targeted edits plus full-file writes, with opt-in permission UX
-- **Point-and-prompt revision** — click any region in the preview, describe the change, the agent edits just that region
-- **Visual verification** — the agent can screenshot its own preview to verify what it built
-- **Progressive skill disclosure** — design skills become tool-invoked resources instead of always-injected prompt text
-- **Snapshot-per-turn rollback** — never lose a good iteration
+- **Workspace-backed designs** — every design is a pi session with JSONL history and real files on disk
+- **Permissioned local tools** — read, write, edit, bash, grep, find, and ls flow through Open CoDesign's permission UI
+- **Design-specific tools** — `ask`, `scaffold`, `skill`, `preview`, `gen_image`, `tweaks`, `todos`, and `done`
+- **Preview self-checks** — the agent can render artifacts, inspect console and asset errors, and use screenshots when the model supports vision
+- **Progressive skill disclosure** — design skills, scaffolds, and brand references lazy-load when the agent needs them
+- **`DESIGN.md` as design-system memory** — brand values and tokens stay in editable files, not model memory
+- **v0.1 migration** — existing SQLite designs migrate into workspaces and session history
 
-The full design doc is public and under community review. See the [roadmap](/roadmap) for the milestone plan.
+See the [roadmap](/roadmap) for the milestone plan.
 
 ## Is Open CoDesign secure?