用途：Capsem 前端设计系统技能，适用于构建 UI 组件、样式化视图、选择颜色，以及使用 Svelte 5 runes 和组件库。
技术栈：Astro 7 作为静态站点生成器，index.astro 仅作薄壳；Svelte 5 通过 client:only="svelte" 加载；Tailwind v4 经 Vite 插件使用，global.css 中含 @source 指令；src/styles/capsem-theme.css 拥有完整语义 token 契约（bg-primary、text-foreground 等）。生产代码不得安装、导入、扫描或执行 Preline 或其他组件库，历史组件引用仅可启发类名组合，结果须复制进 Capsem 自有代码。
加载进 capsem-app（Tauri）：tauri::generate_context!() 在 cargo 编译时把 web/app/dist/** 嵌入二进制。仅运行 pnpm run build 对运行中的 capsem-app 无效；改动 web/app/ 后需运行 just build（前端构建 + cargo build -p capsem-app）。just dev ui（cargo tauri dev）加载 localhost:5173 便于迭代，但生产路径走嵌入包。Toolbar 显示构建时间戳作校验。打包页面的 iframe src 必须以 index.html 结尾，否则 Tauri 自定义协议在 macOS 上会静默 404。
设计原则：简洁与正确优先；主题用 Capsem 语义 token，布局用 Tailwind 工具类；交互全部通过 Svelte 5 runes + TypeScript，不用 JS 插件、jQuery 或框架插件；global.css 的 @theme 定义领域颜色；每次 UI 改动须经 Chrome DevTools MCP 视觉验证；不得添加 Preline、DaisyUI 等组件库依赖。
颜色方案（固定）：蓝色为主/正向色（允许、运行、正常），紫色为负向色（拒绝、停止、错误），UI 中不用绿或红；图表色为蓝 oklch(0.7 0.15 250) 与紫 oklch(0.65 0.15 300)；终端模拟色（xterm #4ade80 绿）可用。不得在组件中硬编码颜色，主题选择通过 <html> 上的 data-theme。
终端主题对比度：全部 24 个终端主题须对前景文本及 6 个 ANSI 颜色满足 WCAG AA 4.5:1，由 theme-contrast.test.ts 强制；修改主题后运行 pnpm test。
组件模式：按钮、卡片、表单、导航、浮层、文本层级均使用语义 token 类，不用原始 Tailwind 颜色。设置区布局以 SettingsPage.svelte 的 Appearance 为参考。
Svelte 5 runes：仅用 $state、$derived、$derived.by、$effect、$props，不用旧式 $:；基于类的 store 用 .svelte.ts 单例模式；onMount/onDestroy 处理异步与清理。
视图路由：Chrome 浏览器外壳，标签即会话，工具栏即控件，按 tabStore.active.view 切换 new-tab、terminal、settings。
数据获取：前端经 capsem-gateway（TCP 到 UDS 反向代理，默认端口 19222）访问 capsem-service，需 Bearer token（启动时写入 ~/.capsem/run/gateway.token）。网关仅转发显式注册路由，未知路由返回 404。使用类型化路由，不得添加前端原始 SQL 辅助，旧 Inspector 与 /inspect 已废弃。Mock 须走相同类型化路由。
代码复用：新建组件、store 或辅助前先检查现有 stores、components、views、models、helpers。
限制：资料未提供具体收费、价格、平台支持范围或效果数据。