{"slug": "i-built-a-react-and-mdx-workspace-so-ai-agents-stop-generating-giant-html-files", "title": "I built a React and MDX workspace so AI agents stop generating giant HTML files", "summary": "OpenPress, an open-source framework for fixed-layout document creation, has been published on npm as `@open-press/cli` and `@open-press/core`. The framework separates creative decision-making from presentation, allowing AI agents and human users to generate consistently formatted PDFs and web readers for proposals, white papers, books, and other fixed-format documents without producing oversized HTML files.", "body_md": "固定版面應用層,讓創作型 Skill 不用自己實作 inline edit / dev server / comment marker / 渲染 / 匯出。Skill 負責創作決策(要做什麼),OpenPress 負責固定版面工作台(怎麼呈現)。Proposal、白皮書、講義、書、社群貼文、簡報 — 固定尺寸版面,PDF 輸出,網頁 reader。\n\nStatus: v1.0.Published on npm as[and]`@open-press/cli`\n\n[. Landing site at]`@open-press/core`\n\n[open-press.dev].\n\nUse open-press when **the content keeps changing but the output format must stay stable**.\n\nGood fits: proposals, business plans, whitepapers, research reports, product specs, books, handbooks, course notes, study guides, technical reports, editorial long-form, branded reports, and fixed-format outputs supplied by external creative skills.\n\nLess useful for: one-off chat answers, free-form image editing, and documents that need live responsive reflow instead of fixed page scaling.\n\nInstall [Node.js LTS](https://nodejs.org/en/download/) first if `node -v`\n\n, `npm -v`\n\n, or `npx -v`\n\nis not available. OpenPress requires Node.js 20 or newer.\n\n```\nnpx @open-press/cli init my-doc\ncd my-doc\nnpm run dev\n```\n\nThat's it: `npm install`\n\nand OpenPress skill setup happen automatically during init. Open the local URL printed by Vite (typically `http://127.0.0.1:5173/workspace`\n\n) to see the workbench once a skill has added a `press/`\n\nworkspace.\n\nThe CLI does not fetch starters. Use a skill when you want an opinionated starting point:\n\n```\nnpx -y skills@latest add quan0715/openpress-social-card-skill\n```\n\nFor social cards, use `quan0715/openpress-social-card-skill`\n\n; it targets 1080×1350 (4:5 portrait), not the removed bundled 1080×1080 square starter.\n\nThe skill owns intake, examples, starter files, and design rules. OpenPress owns the runtime, workbench, rendering, validation, and export. The starter-bearing skills in this repo are just skills; agents can read and use them like any external skill.\n\nTo hand off to your AI tool:\n\n```\nclaude\n```\n\nThen:\n\n我想寫一份 [提案 / 白皮書 / 講義 / 書]，幫我起手。\n\nClaude Code auto-loads `skills/openpress-init/SKILL.md`\n\nand walks you through intake.\n\n```\ncodex\n```\n\nSame opening prompt. Codex reads `AGENTS.md`\n\nat the repo root for the framework contract.\n\nOpen the folder in VS Code, then **paste the system prompt below** into Copilot Chat before your first message. Copilot does not auto-discover SKILL files; the prompt gives it the routing rules inline.\n\nAfter pasting, send the same opening message: 「我想寫一份 [...]，幫我起手。」\n\n```\nYou are helping me work in an open-press workspace — an AI-first fixed-layout document framework. Full routing rules live in `.claude/skills/openpress/SKILL.md` (or `.agents/skills/openpress/SKILL.md`); read it on demand.\n\nStarting from an EMPTY directory:\n- First run `node -v`, `npm -v`, and `npx -v`. If missing, stop and tell me to install Node.js LTS, reopen the terminal, then retry.\n- Ask for document type, audience, primary language, scope, and metadata (title / subtitle / organization / author). Do not run init before metadata is gathered.\n- Then run `npx @open-press/cli init .` with metadata flags. If the target isn't empty, ask me to clean it first (a lone `.git/` is fine).\n- If the user wants an opinionated format, install the relevant skill with `npx -y skills@latest add <owner/repo>`, read its `SKILL.md`, and copy or adapt that skill's starter/example files into the OpenPress workspace.\n- After adding a workspace source tree: run `npm run build` to verify it renders cleanly.\n\nWorking in an EXISTING open-press workspace (one that already has `press/` from a previous init):\n- Edit only files under `press/`, `.claude/skills/`, `.agents/skills/`, and root config files (` package.json` is where the `\"openpress\"` field lives).\n- Never hand-edit `public/openpress/`, `dist-react/`, `.deploy/`, or `.openpress/` — those are generated.\n- Framework code under `node_modules/@open-press/` is treated as read-only.\n\nWriting content:\n- Edit the MDX files registered by the workspace `<Workspace>` / `<Press sources>` tree.\n- Traditional Chinese content: apply `.claude/skills/chinese-ai-writing-polish/SKILL.md`.\n- Learner-facing content (講義 / 教材 / 課程): apply `.claude/skills/teaching-notes-writing/SKILL.md`.\n- Use `<TableCaption>...</TableCaption>` before captioned tables; do not hand-write figure or table numbers.\n\nVisual / structural:\n- Theme tokens, components, page rhythm → edit `press/theme/` or `press/<slug>/components/`.\n- Page chrome such as headers, footers, page numbers, and TOC frame layout belongs in the workspace React components (`Frame` / `Toc` / `Sections` page templates), not in the reader runtime.\n- H1/H2/H3/H4 hierarchy / TOC depth → see the \"Hierarchy\" section in `.agents/skills/openpress-writing/SKILL.md`.\n\nVerification before \"done\":\n- `npm run build` (validates + renders to `dist-react/`)\n- `npm run openpress:pdf` (PDF output)\n\nDeploy: never publish without my explicit confirmation naming the target Cloudflare Pages project. Always `npm run openpress:deploy:dry-run` first.\n\nNow ask me what document I want to write.\n```\n\n**Check environment and ask intake questions**: Node/npm availability, doc type, audience, language, scope, title / subtitle / organization / author.** Install or select a skill**when the job needs a specific format, such as social cards, teaching notes, or a proposal workflow.** Run init with metadata flags**:`npx @open-press/cli init . --title \"...\"`\n\n.**Let the skill add the source tree**: the skill reads its own starter/examples and writes the OpenPress workspace files.** Verify**:`npm run build`\n\n(validates + renders).**Hand off**: tells you which source files and skills own the next edits.\n\nFrom here, keep chatting. You write content; the agent handles tooling.\n\n**Fixed-layout pages**— A4, social square, slide 16:9, or your own preset. No surprise reflow between draft, reader, and PDF.** Press Tree rendering**—`press/index.tsx`\n\ncomposes`<Workspace>`\n\n+`<Press>`\n\n,`<Frame>`\n\n, manuscript helpers, and registered MDX sources. Operational settings live in`package.json`\n\nunder`\"openpress\"`\n\n.**Multi-Press workspaces**— one project, many output formats (paper + social + slides) under one`<Workspace>`\n\n, each at its own slug.**Live workbench** at`npm run dev`\n\n(`http://127.0.0.1:5173/workspace`\n\n), with a Figma-style gallery for multi-Press projects and per-Press previews at`/<press-slug>/preview`\n\n.**PDF export** at`npm run openpress:pdf`\n\nand per-page PNG export from the workbench toolbar.**Public deploy via Cloudflare Pages**— opt-in, never auto-deployed; gated on confirmation naming the target project.— leave feedback inline in the reader; the`@openpress-comment`\n\nmarkers`openpress-apply-comments`\n\nworkflow skill applies them as source edits.**Multi-tool agent skills** installed under`.claude/skills/`\n\nand`.agents/skills/`\n\n— works with Claude Code, Codex CLI, Cursor, Gemini CLI, Copilot, and 50+ other AI agents.\n\n→ See the [landing site](https://open-press.dev) for the agent-first walkthrough.\n\nInside this repository, `press/`\n\nis the tracked dogfood workspace. It hosts the OpenPress User Story Book at `/userstory`\n\nplus two minimal social/slide Press for verifying multi-Press routing — separate from the public landing site:\n\n```\npnpm run dev:workspace  # dogfood press / workbench (multi-Press gallery)\npnpm run dev:web        # open-press.dev landing site\n```\n\nThe dogfood uses the same CLI path as downstream workspaces:\n\n```\npnpm run build                    # render every Press into public/openpress/<slug>/\npnpm run openpress:pdf\npnpm run openpress:deploy:dry-run\n```\n\n| Want to | See |\n|---|---|\n| Run commands directly |\n`docs/cli.md` |\n\n`docs/press-tree.md`\n\n`docs/workbench.md`\n\n[or browse](/quan0715/open-press/blob/main/docs/skills.md)`docs/skills.md`\n\n`skills/<skill>/SKILL.md`\n\n`docs/release-and-deploy.md`\n\n[and](/quan0715/open-press/blob/main/CONTRIBUTING.md)`CONTRIBUTING.md`\n\n`AGENTS.md`\n\n`CHANGELOG.md`\n\n[GitHub Issues](https://github.com/quan0715/open-press/issues)MIT — see [LICENSE](/quan0715/open-press/blob/main/LICENSE).", "url": "https://wpnews.pro/news/i-built-a-react-and-mdx-workspace-so-ai-agents-stop-generating-giant-html-files", "canonical_source": "https://github.com/quan0715/open-press", "published_at": "2026-06-02 20:12:53+00:00", "updated_at": "2026-06-02 20:32:42.216142+00:00", "lang": "en", "topics": ["ai-tools", "ai-products", "ai-infrastructure", "ai-agents", "generative-ai"], "entities": ["OpenPress", "Node.js", "Vite", "npm", "MDX", "React", "quan0715/openpress-social-card-skill"], "alternates": {"html": "https://wpnews.pro/news/i-built-a-react-and-mdx-workspace-so-ai-agents-stop-generating-giant-html-files", "markdown": "https://wpnews.pro/news/i-built-a-react-and-mdx-workspace-so-ai-agents-stop-generating-giant-html-files.md", "text": "https://wpnews.pro/news/i-built-a-react-and-mdx-workspace-so-ai-agents-stop-generating-giant-html-files.txt", "jsonld": "https://wpnews.pro/news/i-built-a-react-and-mdx-workspace-so-ai-agents-stop-generating-giant-html-files.jsonld"}}