# OpenSpec Instructions These instructions are for AI assistants working in this project. Always open `@/openspec/AGENTS.md` when the request: - Mentions planning or proposals (words like proposal, spec, change, plan) - Introduces new capabilities, breaking changes, architecture shifts, or big performance/security work - Sounds ambiguous and you need the authoritative spec before coding Use `@/openspec/AGENTS.md` to learn: - How to create and apply change proposals - Spec format and conventions - Project structure and guidelines Keep this managed block so 'openspec update' can refresh the instructions. ## TrueGrowth UI Direction - `http://127.0.0.1:7200/image` / AI 图片生成 is the approved golden page for TrueGrowth UI. Treat it as the canonical reference for spacing, surfaces, form density, media/result feed behavior, hover actions, loading/failed states, dialogs, popovers, and light/dark polish. Detailed rules live in `docs/TRUEGROWTH_GOLDEN_IMAGE_PAGE_UI.md`. - Future TrueGrowth desktop UI should follow the provided Aurora-style AI creative workbench reference: wide left navigation, quiet white/near-black surfaces, thin borders, soft shadows, compact SaaS form grids, and orange as the only primary action accent. - Keep local TrueGrowth branding, routes, feature names, and assets. Do not copy external brand names from reference images. - Use the TrueGrowth logo orange (`#ff5b00`) for primary buttons, active navigation, selected chips, focus states, and important progress accents. - Every new or refactored UI surface must support both light and dark mode. Do not ship a visual treatment that only works in one theme; define surface, border, text, overlay, focus, and hover states for `:root[data-tg-theme='dark']` whenever custom CSS is added. - Navigation labels should be short and visually balanced, preferably four Chinese characters where practical. - Forms, inputs, selects, textareas, upload controls, and buttons should share one professional desktop system: 40-42px controls, 8-10px radius, visible labels, clear focus rings, no icon/text wrapping, and no raw technical/demo copy in customer-facing surfaces. - Search fields must use a single visual surface only: either the wrapper owns the background/border/focus ring and the inner input is transparent, or the input owns it directly. Do not nest white inputs inside bordered/white search wrappers. - New pages should preserve function first, then align layout to this product pattern: fixed left navigation plus a single content area, no global top search/utility bar, page-local actions only where they help the workflow, bordered white/near-black surfaces, structured sections, and dense but readable controls. - Global task status and light/dark theme switching belong in the lower-left navigation utility area. Do not reintroduce a fixed topbar for search, route title, theme switching, or task status. - Navigation-entered pages and dialogs must be browser-verified against the `/image` golden page standard before completion. Use real screenshots, console checks, and at least one primary interaction; do not rely on typecheck alone for visual UI work.