miniapp-design

Generating WXML, WXSS, and JS sources from an Obsidian design document requires structuring page updates in miniapp-pages-obsidian.md and triggering the design-to-code workflow to output code to designated mini-program paths.

Design tokens are style variables for colors, spacing, and fonts stored under apps/teamventure/design/tokens. They maintain mini-program UI consistency by providing standardized variables applied during automated WXML and WXSS code generation.

You can automate mini-program UI component development from markdown by writing structured design specifications in Obsidian. The workflow reads these documents and outputs component WXML, WXSS, and JS source files to the designated frontend pages directory.

The design-to-code workflow requires integration with an existing codebase. It outputs generated WXML, WXSS, and JS sources directly to the apps/teamventure/src/frontend/miniapp/pages/ directory, ensuring seamless integration with your current mini-program repository structure.

The best way to handle TeamVenture mini-program page iterations and style updates is modifying the Obsidian design document and running the workflow. It regenerates WXML, WXSS, and JS code using defined design tokens, reducing manual coding and communication overhead.

Limitations of using Obsidian and design tokens for mini-program code generation include dependency on strictly structured markdown input and predefined token paths. The workflow outputs skeleton WXML, WXSS, and JS code, meaning complex business logic still requires manual implementation.