TrueGrowth/openspec/changes/refactor-truegrowth-ui-system/design.md

Context

The app is a React/Vite/Nx desktop-style AI workbench with a large legacy Drawnix/opentu surface. Existing UI uses global SCSS tokens, TDesign compatibility overrides, workbench-specific SCSS, Lucide icons, and old tdesign icons.

Goals

• Provide one local UI entry point that future app pages and Codex changes can reuse.
• Keep the implementation free for commercial use and locally controllable.
• Preserve light and dark mode, orange brand actions, and dense SaaS workbench ergonomics.
• Make /image AI 图片生成 the concrete golden page standard so future UI reviews compare against a real approved screen instead of vague style language.
• Avoid a second large UI framework replacing TDesign with another black-box dependency.

Non-Goals

• This first phase does not remove all TDesign usage from Drawnix internals.
• This first phase does not purchase or depend on Tailwind Plus/Catalyst.
• This first phase does not change generation, asset, task, or canvas business logic.

Decisions

• apps/web/src/ui is the only new app UI primitive entry point.
• Components are shadcn-style local React components with TrueGrowth CSS tokens.
• docs/TRUEGROWTH_GOLDEN_IMAGE_PAGE_UI.md is the canonical interpretation of the approved /image page and should be used before changing other navigation-entered pages.
• Radix primitives remain the intended future backing for complex menus/overlays when dependencies are installed.
• Lucide is the only icon set for new app UI.
• TDesign imports in new app code are blocked, while known legacy boundaries remain temporary exceptions.