feat: polish solution ui and design docs

docs/frontend/design-system.md

@@ -2,9 +2,11 @@
 
 ## Principles
 
-- Build product screens from shared tokens and primitives.
+- Build product screens from shadcn/ui primitives and project-owned App components.
 - Keep operational pages dense, quiet, and optimized for repeated use.
 - Use semantic status colors for ticket state, priority, audit, AI, and system feedback.
+- User-facing frontend text must be Chinese-first. Internal TypeScript names and API field names may stay English.
+- Business pages must not create one-off table, filter, detail, status, or priority patterns.
 
 ## Tokens
 
@@ -19,18 +21,35 @@ Core tokens:
 
 ## Components
 
-Base UI primitives:
+shadcn/ui primitives live in `frontend/src/components/ui` and should remain close to generated shadcn APIs:
 
 - `Button`
 - `Badge`
-- `Card`, `CardHeader`, `CardContent`
+- `Card`, `CardHeader`, `CardContent`, `CardTitle`, `CardDescription`
+- `Input`, `Textarea`, `Select`
+- `Table`
+- `Dialog`, `Sheet`, `DropdownMenu`, `Tabs`, `Tooltip`, `Skeleton`, `Sonner`
 
-Product components:
+Product App components live in `frontend/src/components/app` and are the preferred page-level API:
 
+- `AppSidebar`
+- `AppTopbar`
 - `AppPageHeader`
+- `AppDataTable`
+- `AppFilterBar`
+- `AppDetailLayout`
+- `AppSection`
+- `AppEmptyState`
 - `AppStatusBadge`
 - `AppPriorityBadge`
 
+Business pages should use:
+
+- `AppDataTable` for repeated table/list surfaces.
+- `AppFilterBar` for search and filter controls.
+- `AppDetailLayout` for detail pages with main content and side panels.
+- `AppStatusBadge` and `AppPriorityBadge` for ticket lifecycle and priority presentation.
+
 Preview page:
 
 - `frontend/src/features/design-system/DesignSystemPreview.tsx`