Skip to content

Quartz v5 framework overview prompt

Create a clean 16:9 editorial technical illustration for Quartz v5, a Markdown and Obsidian-compatible digital garden static-site generator. Use a restrained light background with dark charcoal text, muted green accents and a small amount of warm gold for data flow. Show the complete framework as one readable landscape, not a product screenshot.

On the left, show Markdown notes, wikilinks, images and Obsidian-style content entering alongside quartz.config.yaml, TypeScript overrides and community plugins from npm or Git. In the center, show the Node.js build system as connected but distinct stages: CLI and esbuild, configuration and plugin loader, Text → mdast → hast Transformer pipeline, ordered Filters, Page Type dispatcher with normal and virtual pages, Components plus Frames, and Preact static rendering. On the right, show generated HTML, hashed CSS/JavaScript, content index and assets flowing to a generic static hosting platform, then to a browser with SPA navigation, search, graph, backlinks and popover interactions.

Make arrows clearly distinguish build-time flow from browser-time events. Include small external-boundary markers for plugin repositories, optional Google Fonts, analytics/comments and static hosting. Avoid copied logos, invented UI screens, performance claims, code listings and decorative complexity. Labels should be concise Chinese with necessary identifiers such as mdast, hast, Page Type, Component, Frame and SPA retained in English. The final image should work as a whole-article architecture summary.

最后更新:

文章结论绑定 source commit;动态信息以核对日期为准。