[yujiachen-y]

Page Designer (page-designer) 1.0.0

Describe a page and your own MiniMax Code Agent writes it as one self-contained HTML file. The page appears in a sandboxed live preview next to the chat, every version is kept, and you can copy or download the HTML. Pick any model MiniMax Code can use (and its thinking level) per page; start from one of six built-in styles or upload a design.md. English and Chinese interface, light and dark themes.

Source and credit

This is a port of fx0 by Vercel Labs (Apache-2.0, commit e584782). Thank you to the fx0 authors: the idea and several core pieces come from their work.

• Adapted from fx0: the design instructions (DESIGN_INSTRUCTIONS), the HTML validation rules, the preview CSP and sandbox bootstrap (lib/design-artifact.ts), the exact-replacement edits (lib/agent.ts), and the page-tool descriptions (lib/tools.ts). Each adapted file names its source and lists the changes at its top.
• The package is licensed Apache-2.0 (fx0's license) with a NOTICE that credits fx0. The README has a Credits section, and the app's About dialog links to fx0 and states that this is an independent community project, not affiliated with or endorsed by Vercel.
• Not included: fx0's ten brand-inspired design.md files (third-party brand style analyses). The six built-in styles, the Mini App runtime, the page and the icon were written for this package. No Vercel or fx0 marks are used in the name or icon.

Differences from fx0: the Agent is MiniMax Code's (no libfx, no AI Gateway, no sign-in or billing); pages live in context.dataDir instead of Redis/Neon; the Agent writes through MCP tools, so the preview updates per version rather than while HTML streams; no steering of a running turn and no image attachments.

Data & access

• State: one folder per page under context.dataDir: projects/<id>/project.json (title, transcript, run records, model and style, linked session id) and projects/<id>/v<n>.html. Nothing is read or written outside dataDir; the page keeps only the model choice and preview width in localStorage.
• Agent: agentAccess: ["session.run"], agentConcurrency: 4. Each page gets one hidden session from context.agent.create(); each message is one turn run from Node. The first turn carries the design brief (adapted from fx0), the style and the user's message; the brief asks the Agent to work only through Page Designer's MCP tools and allows web search/fetch for reference.
• Permissions: every permission.requested is shown as a card with Allow once / Deny / "Decide in conversation". The app never answers on its own: it relays exactly the user's click for that one request.
• MCP: an endpoint served by the Mini App at /mcp/page-designer (publish_design, edit_design, read_design, list_designs). Only HTML that passes fx0's validation (one complete document ≤ 512 KiB, inline scripts/styles, data: assets, no comments/forms/frames/external src, only #fragment or https:// links) becomes a version.
• Preview sandbox: <iframe sandbox="allow-scripts"> (opaque origin, no access to the Mini App, its storage or window.mcode) plus fx0's CSP, which blocks all network requests, forms, frames, workers and external assets; WebRTC is disabled before the page runs. The raw-HTML route is served with a sandbox CSP.
• Loopback only: every route, MCP included, requires a loopback Host and, when a browser sends one, an Origin equal to this listener (403 otherwise). Writes must be JSON (415) and not marked cross-site.
• No outbound network requests from Node, no child processes. Declares surface.window for pop-out.

Tested environment

• MiniMax Code 3.1.4-preview.4694 on macOS 27.0 (internal preview build with the 3.1.2 Mini App Agent API). Installed through the Host publish flow, opened in the right panel and by link (/studio?p=<id>).
• Real Agent runs with MiniMax-M3.1-Flash: a new page from a Chinese description with the "Soft & friendly" style (v1), two follow-up edits via edit_design (v2, v3; the preview switched by itself), a page from an English description, Stop during a run ("Stopped.", composer usable again). After the loopback fix: a rename and another edit_design turn (v3) repeated in the Host. No console errors or failed requests.
• In the real page: version chips and menu, preview widths, Copy HTML (clipboard held the raw v3 HTML), "Show conversation", a click on an https:// link in the preview reaching window.open.
• Headless Chrome 155 against the same Node entry with a scripted Agent: 420 px tab layout, 900 px drawer, light/dark, permission card, questionnaire form, About dialog, Download (file name + raw content), a page that navigates itself away (restored), a page that blocks 1.5 s while loading (loaded once, no reload loop).
• Bugs found while testing were reproduced first (baseline fails → fix passes): stop pressed before the turn reached the Host; an empty project left behind by a rejected publish_design; text before a tool call ordered after the version card; DNS-rebound hostnames reaching the API (baseline: 201 and an Agent turn started; now 403 on every route); a rename sending two PATCHes and Escape still saving.
• Not verified: a permission request or questionnaire raised by a real Agent run (scripted Agent only), the pop-out window, where MiniMax Code opens a link clicked in the preview, Download inside MiniMax Code, Windows.

Checks

• npm run check (Node 26.1.0 locally; CI runs Node 22): 69/69 tests pass, plugins/yujiachen-y/page-designer: OK (0 errors, 0 warnings).
• npm test in the package: 18/18 node:test cases (MCP tools and validation, approvals relaying only the user's decision, questionnaire continuation, lost session replaced once, Stop before/during a turn, loopback and same-origin JSON guards, persistence across restart).
• Root README.md and README.zh-CN.md each gain one row. Preview screenshot uses synthetic content.

---

^{Need help on this PR? Tag @codesmith-bot with what you need.}