Meta tags:
description=✨ The agentic HTML editor — your local AI agent writes the HTML, you ship it. 🚀 75 Skills × 9 Surfaces (magazine · deck · poster · XHS / tweet · prototype · data report · Hyperframes) 🛡️ Sandboxed preview · 📤 1-click to WeChat / X / Zhihu / HTML / PNG 🔑 Zero API key — Claude Code / Cursor / Codex / Gemini / Copilot / OpenCode / Qwen / Aider. - nexu-io/html-anything;

Headings (most frequently used words):

skills, uh, oh, mode, navigation, the, saved, searches, html, anything, folders, files, history, export, contributing, contributors, license, footer, vfx, social, office, search, code, repositories, users, issues, pull, requests, provide, feedback, nexu, io, menu, use, to, filter, your, results, more, quickly, and, latest, commit, repository, showcase, why, this, exists, at, glance, demo, quickstart, workspace, supported, coding, agents, six, load, bearing, ideas, architecture, targets, roadmap, status, security, references, lineage, stay, in, loop, star, about, releases, packages, languages, web, prototypes, marketing, pages, prototype, decks, deck, 20, hyperframes, video, frames, device, mockups, frame, mockup, 12, share, cards, operations, doc, we, don, ship, an, agent, yours, is, good, enough, are, not, plugins, hard, constraints, stop, model, from, freestyling, streaming, render, watch, ai, draw, one, click, zero, second, pass, formatting, sandboxed, iframe, secure, isolated, topics, resources, stars, watchers, forks,

Text of the page (most frequently used words):
the (165), html (66), and (57), deck (53), next (46), skill (41), agent (39), for (34), frame (30), you (29), skills (28), #anything (27), data (26), open (25), one (24), design (23), #export (23), your (22), src (22), cli (22), page (21), hyperframes (21), claude (21), wechat (21), from (21), web (21), code (20), json (20), api (19), pnpm (19), github (18), markdown (18), png (18), cursor (18), lib (18), iframe (18), with (17), card (17), agents (16), local (16), magazine (16), editorial (16), social (15), this (14), zhihu (14), every (14), scripts (14), mode (14), into (14), app (14), license (13), click (13), are (13), picker (13), all (13), security (12), xiaohongshu (12), copilot (12), dev (12), image (12), single (12), text (12), bin (12), contributing (11), editor (11), poster (11), gemini (11), what (11), real (11), render (11), surface (11), browser (11), that (10), report (10), prototype (10), preview (10), templates (10), template (10), remotion (10), output (10), straight (10), vfx (10), doc (10), guizang (10), clis (10), line (10), same (10), format (10), download (10), dashboard (10), product (10), not (9), docs (9), coding (9), codex (9), opencode (9), css (9), detection (9), nexu (9), stream (9), sse (9), post (9), recommended (9), readme (8), zero (8), key (8), qwen (8), aider (8), each (8), has (8), team (8), swiss (8), modern (8), paste (8), protocol (8), grid (8), use (8), style (8), convert (8), file (8), e2e (8), host (8), video (8), session (8), finance (8), view (8), reload (7), ship (7), xhs (7), folder (7), repo (7), adapter (7), notes (7), 1080 (7), parchment (7), kami (7), ink (7), international (7), screenshot (7), juice (7), argv (7), bar (7), drop (7), stdout (7), pick (7), path (7), stable (7), allow (7), live (7), logo (7), hero (7), can (6), community (6), first (6), tweet (6), sandboxed (6), see (6), per (6), new (6), mp4 (6), mockup (6), canvas (6), slide (6), warm (6), end (6), hard (6), process (6), multica (6), don (6), add (6), auto (6), set (6), spec (6), device (6), top (6), any (6), hand (6), best (6), clipboarditem (6), platform (6), keynote (6), frames (6), outro (6), glitch (6), title (6), already (6), enterprise (6), time (5), personal (5), navigation (5), error (5), please (5), agentic (5), writes (5), surfaces (5), work (5), where (5), com (5), 1920 (5), system (5), ppt (5), high (5), dpi (5), inlined (5), formatting (5), anti (5), slop (5), brand (5), must (5), frontmatter (5), layer (5), constraints (5), stdin (5), spawn (5), scenario (5), example (5), issues (5), env (5), user (5), multi (5), streaming (5), srcdoc (5), sandbox (5), origin (5), white (5), source (5), operation (5), onboarding (5), office (5), notification (5), light (5), chart (5), marketing (5), layout (5), workspace (5), package (5), have (5), like (5), grade (5), search (5), there (4), was (4), while (4), loading (4), contributors (4), apache (4), its (4), original (4), authorship (4), inside (4), history (4), good (4), issue (4), requests (4), off (4), heygen (4), op7418 (4), art (4), résumé (4), mdnice (4), alchaincyf (4), huashu (4), discipline (4), contrast (4), baseline (4), architecture (4), spawns (4), wire (4), files (4), font (4), stack (4), after (4), copy (4), assets (4), targets (4), reads (4), middleware (4), node (4), build (4), test (4), proxy (4), default (4), another (4), progress (4), csv (4), state (4), but (4), looks (4), input (4), reports (4), more (4), anywhere (4), get (4), server (4), shows (4), pass (4), type (4), generation (4), soft (4), serif (4), directly (4), including (4), engineering (4), pull (4), cards (4), motion (4), macos (4), cinema (4), leak (4), sticky (4), flowchart (4), nyt (4), liquid (4), pastel (4), replit (4), hermes (4), cyber (4), column (4), long (4), form (4), sign (4), documentation (4), pricing (4), features (4), saas (4), landing (4), login (4), bob (4), signed (4), across (4), writing (4), yaml (4), actions (4), support (4), share (3), cookies (3), watching (3), stars (3), resources (3), topics (3), upstream (3), entry (3), target (3), out (3), run (3), loop (3), own (3), script (3), schema (3), native (3), convention (3), document (3), tw93 (3), gcui (3), resume (3), nice (3), proof (3), designer (3), runtime (3), privileged (3), gets (3), shape (3), references (3), full (3), update (3), both (3), cjk (3), most (3), module (3), menu (3), restart (3), edit (3), leverage (3), small (3), read (3), validation (3), loopback (3), still (3), case (3), machine (3), only (3), planned (3), marketplace (3), archive (3), compare (3), excel (3), sql (3), detect (3), early (3), composer (3), weibo (3), latex (3), eeimg (3), mjx (3), container (3), inlines (3), markers (3), standalone (3), compatible (3), tailwind (3), enter (3), reuses (3), always (3), renders (3), inspired (3), won (3), second (3), deltas (3), events (3), whole (3), pure (3), model (3), gui (3), launched (3), npm (3), global (3), opt (3), homebrew (3), bun (3), before (3), generic (3), invoice (3), exec (3), runbook (3), weekly (3), meeting (3), content (3), twitter (3), quote (3), reddit (3), spotify (3), note (3), minimal (3), safety (3), launch (3), decks (3), email (3), article (3), proto (3), blog (3), prototypes (3), auth (3), message (3), coder (3), root (3), logged (3), ships (3), they (3), piece (3), workflows (3), commit (3), name (3), insights (3), settings (3), tab (3), window (3), refresh (3), saved (3), feedback (3), solutions (3), explore (3), manage (2), status (2), footer (2), 2026 (2), releases (2), repository (2), forks (2), 751 (2), custom (2), bundled (2), retains (2), star (2), welcome (2), below (2), behind (2), thread (2), debugging (2), stay (2), reference (2), catalog (2), renderer (2), 1weiho (2), verbatim (2), preserved (2), junior (2), daemon (2), thin (2), mirror (2), role (2), project (2), external (2), take (2), walkthrough (2), accept (2), 简体中文 (2), english (2), translations (2), self (2), swap (2), better (2), palette (2), under (2), channels (2), douyin (2), captions (2), notion (2), linear (2), telegraph (2), binary (2), parser (2), exercised (2), design_system (2), usually (2), matches (2), want (2), request (2), inline (2), operator (2), playwright (2), public (2), hostname (2), now (2), without (2), lan (2), setup (2), port (2), insensitive (2), accepted (2), localhost (2), 127 (2), start (2), when (2), side (2), those (2), routes (2), deploy (2), install (2), version (2), diff (2), indexeddb (2), extension (2), select (2), generate (2), registry (2), runs (2), above (2), flow (2), four (2), roadmap (2), equations (2), upload (2), placeholder (2), tool (2), vercel (2), stays (2), papaparse (2), xlsx (2), scan (2), installed (2), pipe (2), existing (2), event (2), emitted (2), cdn (2), google (2), fonts (2), localstorage (2), opening (2), experience (2), secure (2), isolated (2), plus (2), placeholders (2), them (2), client (2), appends (2), terminal (2), artifact (2), interrupt (2), watch (2), prompt (2), focus (2), visual (2), rounded (2), corners (2), black (2), size (2), multiple (2), stop (2), following (2), folders (2), misses (2), whichever (2), borrowed (2), yours (2), six (2), clear (2), merge (2), workflow (2), plan (2), incident (2), eng (2), board (2), kanban (2), decision (2), log (2), okrs (2), operations (2), matrix (2), media (2), carousel (2), 900 (2), animation (2), horizontal (2), swipe (2), simple (2), alert (2), obsidian (2), dark (2), directional (2), nav (2), course (2), presenter (2), blueprint (2), pitch (2), tech (2), sharing (2), wireframe (2), center (2), digital (2), brutalist (2), display (2), left (2), dating (2), trio (2), gamified (2), mobile (2), waitlist (2), cta (2), used (2), group (2), two (2), required (2), ibm (2), yolo (2), skip (2), tools (2), trust (2), write (2), openai (2), startup (2), directories (2), normally (2), guard (2), typecheck (2), commands (2), does (2), cases (2), reuse (2), clone (2), manual (2), parsed (2), posters (2), plain (2), modes (2), fix (2), users (2), ready (2), actually (2), humans (2), reader (2), why (2), film (2), cyan (2), chromatic (2), leaks (2), transition (2), ground (2), printed (2), blue (2), accent (2), locked (2), layouts (2), showcase (2), era (2), lock (2), gitignore (2), commits (2), last (2), quality (2), projects (2), appearance (2), cancel (2), available (2), searches (2), repositories (2), business (2), advanced (2), developer (2), customer (2), services (2), devops (2), perform, action, information, contact, privacy, terms, inc, other, typescript, languages, packages, published, watchers, properties, activity, vibe, generative, byok, nextjs, about, attribution, inherits, curve, bends, signal, look, push, shipped, labels, point, help, wanted, thanks, everyone, who, filed, opened, added, contribution, counts, wall, easiest, way, say, loud, follow, release, occasional, scenes, shipping, demos, questions, bigger, conversations, happen, discord, channel, nexudotio, practical, collection, categorization, jimliu, baoyu, entire, family, hands, monochrome, integrated, variant, replicated, formatted, inspiration, pipeline, drives, compatibility, solvable, step, asset, rules, coded, here, borrows, lands, tree, lineage, merging, kept, parallel, strengthen, dimensional, critique, underrated, sharpen, button, rss, clipboard, covering, builder, optional, discovers, neighbour, prs, adapters, highest, contributions, area, big, slot, sized, var, whatever, environment, launcher, pinned, edge, which, would, silently, break, overrides, unit, tested, works, const, nodejs, reverse, caddy, nginx, cloudflare, tunnel, terminating, forwarding, responsible, policy, loudly, insecure, trusted, front, html_anything_allow_any_host, mdns, reaching, network, dials, non, comma, separated, html_anything_allowed_hosts, mirage, common, headers, everything, else, 403, allowed, vars, setting, maximally, permissive, flags, credentialed, config, disk, intended, prevent, malicious, dns, rebinding, posting, through, gated, header, allowlist, attacker, handoff, closed, against, listed, library, lives, metadata, daily, something, broken, were, using, bug, move, things, forward, fastest, contributed, prompts, examples, interop, shared, systems, candidates, brief, behavior, implementation, inlining, spreadsheet, parsing, xss, defense, dompurify, highlight, marked, processing, child_process, transport, router, turbopack, react, zustand, frontend, list, append, third, party, animations, execute, never, poisoned, devtools, dom, mechanically, contained, shareable, replaced, katex, math, styles, survive, delimited, pulls, emits, except, paying, draw, lifted, checklist, belong, lorem, ipsum, interactive, element, color, ification, shadow, spacing, height, han, chinese, latin, manrope, inter, noto, sans, hardcodes, freestyling, vendored, plugins, boot, calls, scans, dirs, finds, enough, load, bearing, ideas, similar, adding, takes, flowai, summary, snapshot, cadence, okr, scoresheet, ops, wrapped, 1600, conform, pixel, bit, sprite, toast, background, mockups, briefing, flavored, graphic, heavy, graphify, deep, browse, dir, speaker, aware, investor, neon, luxe, ideation, drawn, sketch, table, fallback, 210, 297mm, cover, lesson, spread, guide, eguide, shadows, edges, rail, kpis, day, matchmaking, quest, level, splash, value, iphone, pro, chrome, ios, android, technical, sidebar, dense, admin, analytics, console, tier, comparison, tables, access, 1440, desktop, pages, sale, presentations, formats, axes, uses, extended, done, strategy, hide, intermediary, pretty, yes, dangerously, permissions, print, force, invocation, missed, recognize, supported, tsx, owns, intentionally, truth, complete, subscriptions, detects, git, https, http, 3000, quickstart, conforming, helvetica, maximalism, navigate, slides, pdf, appended, going, wasted, will, produce, searchable, filterable, pane, middle, right, produces, magazines, demo, laptop, deployable, accepts, tsv, parse, tabular, nothing, uploaded, quarantined, over, sent, updates, waiting, automatically, incl, effect, via, subscription, marginal, cost, scanned, glance, maps, rule, pastes, cleanly, stand, shoulders, mean, picking, scales, snapping, doing, responsive, designers, bother, writers, patience, built, press, turns, raw, seconds, then, sends, finishes, audience, sees, touch, later, final, just, intermediate, during, conversion, flowed, newsletter, designed, ugly, screenshotted, limited, writer, anthropic, stopped, internal, argument, announced, exists, organized, assembles, glow, bloom, tagline, rises, appears, closing, reveal, opener, types, character, revealed, hot, pink, trail, magenta, offset, crt, scanlines, corrupted, subtitle, ascii, noise, cyberpunk, storyboard, sequential, hidden, duration, play, newsprint, sunday, paper, oversized, headline, body, numbered, sections, dot, pattern, cream, broadsheet, webpage, voice, noticeably, calmer, reading, than, essays, pagers, f5f4ed, saturated, klein, lemon, mint, orange, cold, rational, institutional, made, moment, opens, palettes, indigo, porcelain, forest, kraft, dune, zine, eight, sorted, their, rank, lower, higher, featured, anymore, should, wants, detected, driven, articles, résumés, videos, deliverable, composable, draft, overview, production, iterating, faster, focused, clicks, scale, 40k, 200, items, latest, date, tags, branches, main, additional, options, fork, change, notifications, dismiss, switched, accounts, resetting, create, qualifiers, our, query, filter, results, quickly, submit, include, address, contacted, very, seriously, provide, syntax, tips, jump, premium, ons, powered, collections, trending, program, accelerator, maintainer, lab, programs, fund, developers, sponsors, partners, forum, ebooks, webinars, stories, software, development, topic, industries, government, manufacturing, financial, healthcare, industry, devsecops, modernization, nonprofits, startups, medium, teams, enterprises, company, changelog, secret, protection, find, vulnerabilities, application, changes, review, track, instant, environments, codespaces, automate, integrate, mcp, direct, creation, toggle,

Text of the page (random words):
ere ship ready is the bar when generation finishes the artifact is what your audience actually sees no i ll touch it up later pass we stand on four open source shoulders nexu io open design the agent detection layer the design system model and the skill md protocol next src lib agents and next src lib templates skills mirror this architecture directly mdnice markdown nice proof that juice inlined css pastes cleanly into wechat and zhihu without per platform manual fix up gcui art markdown to image the iframe high dpi png export path alchaincyf huashu md html the anti ai slop discipline that maps into the hard constraints inside every skill md cjk first font stack 8 px baseline grid contrast 4 5 must use real data rule at a glance what you get coding agent clis 8 claude code cursor agent openai codex gemini cli github copilot cli opencode qwen coder aider scanned on startup across path including local bin bun bin opt homebrew bin npm global bin directories a gui launched node process normally misses swap from the top bar picker zero api key we reuse the session you already have logged in via claude login cursor login gemini auth your existing subscription does the work marginal cost is 0 75 skill templates prototype web saas landing dashboard data report deck 20 keynote skills incl swiss international guizang editorial xhs pastel hermes cyber replit magazine web frame 10 hyperframes video frames liquid hero nyt data chart sticky note flowchart glitch title cinema light leak macos notification logo outro social x xiaohongshu spotify reddit cards office pm spec eng runbook finance report hr onboarding invoice okrs weekly update meeting notes kanban doc kami warm parchment editorial mockup 3d device frame vfx text cursor effect 9 surface modes magazine article keynote deck résumé ️ poster xiaohongshu card tweet card ️ web prototype data report ️ hyperframes video each has multiple skills you can pick from one click export juice inlines css wechat paste with zero re formatting modern screenshot renders the iframe to a 2 png clipboarditem drop straight into the tweet composer mjx container data eeimg placeholder zhihu equations render automatically standalone html download high dpi png download streaming render post api convert over sse the agent s stdout json line stream is parsed for text deltas server sent events client appends iframe srcdoc updates live waiting for an ai generation looks like watching it type in real time sandboxed preview iframe sandbox allow scripts allow same origin user emitted html runs in an isolated origin tailwind cdn google fonts inline scripts work but cookies and localstorage are quarantined from the host format auto detect the editor accepts markdown csv tsv json sql plain text papaparse xlsx parse tabular data in the browser nothing is uploaded deployable to local pnpm f html anything next dev vercel for the web layer the agent always stays on your laptop license apache 2 0 demo entry view the top bar shows your installed clis the left pane is the editor the middle is the template design system picker the right is a live iframe preview the same surface produces magazines decks posters web prototypes and hyperframes frame scripts 75 templates searchable and filterable pick by mode prototype deck frame social office doc scenario design marketing engineering product personal every skill ships an example html you can open straight from the repo to see what the agent will produce sse streaming agent stdout json line is parsed for text deltas appended into the iframe srcdoc in real time you watch the page render line by line don t like where it s going interrupt and re prompt no wasted full generation one click export wechat juice inlined css x weibo xiaohongshu modern screenshot 2 png clipboarditem zhihu latex image placeholders download html download png paste straight in no second pass of manual formatting deck mode 20 keynote skills including swiss international helvetica grid maximalism guizang editorial magazine ink open slide canvas 1920 1080 agent native magazine web xhs pastel hermes cyber replit style to navigate slides presenter notes pdf export hyperframes frames 10 motion frame scripts liquid hero nyt data chart sticky note flowchart glitch title cinema light leak macos notification brand logo outro text cursor vfx 3d device mockup conforming to heygen com hyperframes hand off straight to remotion to render mp4 quickstart git clone https github com nexu io html anything cd html anything pnpm install pnpm f html anything next dev http localhost 3000 open the browser the top bar auto detects whichever coding agent cli you already have signed in pick a template paste content enter no api key required we reuse the session you already have logged in claude cursor codex gemini copilot subscriptions all work workspace this repo is a small pnpm workspace next is the complete next app html anything next e2e is the browser test package html anything e2e and the only source of truth for playwright cases root owns ci docs and scripts guard ts root package json intentionally does not proxy app or e2e commands run package commands from the repo root pnpm exec tsx scripts guard ts pnpm f html anything next dev pnpm f html anything next typecheck pnpm f html anything next test pnpm f html anything next build pnpm f html anything e2e typecheck pnpm f html anything e2e test supported coding agents on startup we scan path including local bin bun bin opt homebrew bin npm global bin directories normally missed by gui launched node and surface every cli we recognize agent detection binary invocation claude code claude claude p output format stream json openai codex codex codex exec json sandbox workspace write cursor agent cursor agent cursor agent print output format stream json force trust gemini cli gemini gemini output format stream json yolo github copilot cli copilot copilot allow all tools output format json opencode opencode cli opencode opencode run format json dangerously skip permissions qwen coder qwen qwen yolo aider aider aider no pretty no stream yes always message file ibm bob bob bob output format stream json hide intermediary output the detection strategy and per cli adapter shape are borrowed directly from nexu io open design and multica ai multica one privileged process spawns clis json line is the wire protocol every cli gets a thin adapter in next src lib agents argv ts if you ve already done claude login cursor login gemini auth in your terminal html anything reuses that session no second copy of the api key required skills 75 skills under next src lib templates skills each a folder following the claude code skill md convention plus an extended frontmatter mode scenario surface preview design_system the two axes the picker uses mode prototype web saas landing dashboard data report résumé doc deck 20 horizontal swipe presentations frame 10 hyperframes motion frames social 4 social card formats office pm engineering finance hr operations document surfaces scenario design marketing engineering product finance hr sale personal used to group skills in the picker web prototypes marketing pages prototype mode skill best for output prototype web generic web prototype default single page html 1440 900 desktop saas landing saas landing page hero features pricing cta waitlist page waitlist early access page minimal form social proof pricing page pricing page multi tier comparison tables dashboard admin analytics console sidebar dense data layout docs page technical documentation 3 column docs layout blog post long form blog post editorial layout mobile app ios android prototype iphone 15 pro chrome mobile onboarding app onboarding flow splash value sign in trio gamified app gamified app quest xp level trio dating web dating matchmaking dashboard left rail kpis 30 day chart magazine poster single page magazine poster 1080 1920 poster hero marketing poster single page display poster web proto editorial editorial style web serif display grid web proto brutalist brutalist web hard edges black white anti grid web proto soft soft warm web soft shadows rounded warm palette article magazine long form magazine article a4 long page digital eguide digital e guide cover lesson spread resume modern minimal résumé a4 210 297mm email marketing brand product launch email center single column table fallback wireframe sketch hand drawn wireframe early pass ideation decks deck mode 20 skills skill best for deck swiss international swiss international deck deck guizang editorial editorial ink deck from op7418 guizang ppt skill deck open slide canvas 1920 1080 agent native canvas from 1weiho open slide deck magazine web magazine style web deck deck hermes cyber hermes cyber neon luxe deck replit replit style product walkthrough deck xhs pastel xiaohongshu pastel deck deck xhs white xiaohongshu pure white deck deck xhs post xiaohongshu single post deck deck tech sharing tech sharing deck deck product launch product launch event deck deck pitch investor pitch deck blueprint blueprint roadmap deck presenter mode speaker notes aware deck course module course module deck deck dir key nav directional key nav deep browse deck graphify dark dark data graphic heavy deck deck obsidian claude obsidian claude flavored notes deck safety alert incident safety briefing deck simple minimal horizontal swipe deck hyperframes video frames vfx device mockups frame vfx mockup 12 skills skill best for frame liquid bg hero liquid background hero frame data chart nyt nyt style data chart frame flowchart sticky sticky note flowchart frame glitch title glitch title card frame light leak cinema cinema light leak frame macos notification macos notification toast frame logo outro brand logo outro motion frames generic motion design frame video hyperframes hyperframes frame script schema sprite animation pixel 8 bit animation vfx text cursor text cursor vfx mockup device 3d 3d device frame mockup frame scripts conform to the heygen com hyperframes spec and hand off straight to remotion dev remotion to render mp4 social share cards social mode skill best for social x post card x twitter quote card 1600 900 social spotify card spotify wrapped style card social reddit card reddit thread card social carousel 3 card 1080 1080 carousel card xiaohongshu xiaohongshu image with text card card twitter twitter pull quote card social media dashboard social ops dashboard social media matrix multi platform content matrix office operations office doc mode skill scenario best for doc kami parchment personal warm parchment editorial doc from tw93 kami pm spec product pm spec doc decision log team okrs product okr scoresheet meeting notes operation meeting decision log weekly update operation team weekly cadence kanban board operation board snapshot eng runbook engineering incident runbook finance report finance exec finance summary invoice finance single page invoice hr onboarding hr role onboarding plan data report finance product csv excel visual data report live dashboard operation live data dashboard flowai team dashboard operation team workflow dashboard ppt keynote personal generic keynote style deck adding a skill takes one folder copy a similar skill edit its skill md frontmatter restart pnpm f html anything next dev the picker shows it see contributing md for the bar a skill pr has to clear before we merge six load bearing ideas 1 we don t ship an agent yours is good enough on boot the browser calls api agents the server scans path including the dirs a gui launched node usually misses local bin bun bin opt homebrew bin npm global bin and surfaces whichever clis it finds each cli has one adapter argv stdin protocol stream parser in next src lib agents argv ts the whole detection model is borrowed directly from nexu io open design and multica ai multica one privileged process spawns clis json line is the wire protocol 2 skills are folders not plugins following claude code s skill md convention skill md assets references example html drop a folder into next src lib templates skills restart pnpm f html anything next dev the picker shows it deck guizang editorial is vendored directly from op7418 guizang ppt skill with original license and authorship preserved 3 hard constraints stop the model from freestyling every template hardcodes cjk first font stack noto sans serif sc source han for chinese inter manrope for latin 8 px baseline grid every spacing line height font size is a multiple of 8 rounded corners soft shadow no pure black pure white visual de slop ification color contrast 4 5 every interactive element has a real focus state must use the user s real data no lorem ipsum the discipline is lifted from alchaincyf huashu design s junior designer mode anti ai slop checklist constraints belong in the prompt every skill md writes them in 4 streaming render watch the ai draw post api convert is sse the agent s stdout is line delimited json the server pulls out the text deltas and re emits them as sse events the client appends to the iframe s srcdoc the whole experience is the same as watching the agent type in a terminal except the artifact is html not markdown interrupt at any time you re not paying for a whole generation you don t want 5 one click export zero second pass formatting wechat mp juice inlines css data tool markers paste into the editor styles survive end to end x weibo xiaohongshu modern screenshot renders the iframe to a 2 png clipboarditem drop straight into the composer zhihu same as above plus mjx container is replaced with data eeimg latex image placeholders zhihu won t render katex live math has to be an image download html download png self contained single file shareable anywhere mechanically inspired by mdnice markdown nice and gcui art markdown to image 6 sandboxed iframe secure isolated user emitted html always renders inside iframe sandbox allow scripts allow same origin third party scripts tailwind cdn google fonts custom animations still execute but cookies and localstorage stay in the iframe s own origin the host page is never poisoned opening devtools only shows the iframe s dom so the debugging experience matches a standalone html file architecture browser next js 16 editor upload top bar agent picker template picker iframe enter get api agents post api convert scan path list sse spawn cli installed clis pipe stdin stdout spawn stdin pipe your local coding agent cli claude codex cursor agent gemini copilot opencode qwen aider reuses your existing session stdout json line sse event iframe srcdoc append live c copy clipboarditem s download html png layer stack frontend next js 16 app router turbopack react 19 tailwind v4 zustand state server routes get api agents detection post api convert sse streaming spawn agent transport child_process spawn one stdin stdout adapter per cli next src lib agents argv ts browser side processing juice css inlining modern screenshot png export xlsx papaparse spreadsheet parsing marked hi...