# OPC Studio OS 完整版参考 Prompt

## 使用方法

1. 新建一个空文件夹。
2. 用能够读取并修改本地文件的 AI 编程工具打开该文件夹。
3. 将下方 Prompt 完整粘贴给工具。
4. 让工具先说明计划、技术栈和准备创建的文件，再开始实现。
5. 完成后按照工具给出的命令安装依赖、启动页面并亲自验收。

## 使用前说明

不同工具、模型版本和运行环境生成的结果可能不同。这份 Prompt 用来帮助你体验从需求到页面的过程，不保证一次生成与演示完全一致。不要直接提供真实账号、个人数据、密码或其他敏感凭据。

---

## 可复制给智能体的完整 Prompt

你是一名高级 UI/UX Designer、Product Designer 和 Senior Frontend Engineer。请在当前项目目录中制作一个完整的纯前端 Web Demo：**OPC Studio OS**，一人工作室经营管理系统。

### 1. 产品定位与边界

这是面向自由职业者、独立顾问、创意服务者和一人公司的经营工作台，不是企业 ERP、传统 CRM 或普通后台模板。它把客户、报价、订单、项目、任务、工时、回款和复盘集中到一个轻量、高效、每天都会使用的界面中。

只做前端：不需要后端、数据库、登录接口、真实支付、真实 API 或云同步。所有内容使用足够真实但完全虚构的 mock data。前端交互必须完整，不能用“Coming soon”或没有行为的假按钮代替功能。

先检查现有项目、依赖、脚本和入口，说明将要创建或修改的文件。不要覆盖未知文件、不要删除用户文件、不要把所有内容堆进一个巨大的 `App.tsx`。合理拆分 `components`、`pages`、`mock`、`hooks` 和 `utils`，保留可运行的基线。

### 2. 推荐技术栈

优先沿用项目已有技术；在确有用途时使用 React、TypeScript、Tailwind CSS、shadcn/ui、Lucide Icons、Motion/Framer Motion、Recharts 和 dnd-kit。安装任何新依赖前先解释用途并确认版本兼容性。

- Motion/Framer Motion：页面进入、抽屉、弹窗、布局和状态过渡。
- Lucide：统一的线性图标，禁止用 emoji 代替图标。
- Recharts：收入、来源和服务构成等图表。
- dnd-kit：项目看板拖拽；若不适合，使用现有轻量方案。
- Amicro（npm 包 `@subhanhq/amicro`）：只在确有帮助时选择少量按钮、卡片、下拉或状态微交互；不可用时用 CSS/Motion 降级。
- Morphicons：用于 Menu→Close、Play→Pause、Save→Loading→Check 等状态变化；不可用时实现等价的 CSS/SVG 过渡。
- React Bits：最多用于一处数字、文字或欢迎区效果，不复制整套组件集合。

不要从不明网站下载代码，不要复制未授权页面、组件、品牌 Logo、头像或版权图片。使用原创占位内容和虚构数据。依赖失效时，基本功能必须仍可用。

### 3. 视觉语言

方向是 Linear × Notion × Raycast × Stripe Dashboard × Modern Creative SaaS：克制、专业、安静、现代，信息密度高但留有呼吸。它应像一个已经完成大部分产品设计的真实创业产品，而不是课程作业。

建议令牌：背景 `#F7F7F5`，主表面 `#FFFFFF`，次表面 `#F1F1EE`，主文字 `#181817`，次文字 `#73736F`，边框为低透明度黑色，主品牌色只保留一个低饱和 accent（例如 `#6757E8`）。Success、Warning、Danger 使用低饱和状态色。

避免：蓝紫渐变侧栏、满屏紫蓝 AI 模板、大面积 Glow、玻璃拟态、霓虹、巨大圆角、每张卡片厚阴影、所有模块都卡片化、每个元素都动画、Bootstrap Admin 风格。渐变、毛玻璃或动画并非绝对禁止，只有在服务任务、层级或状态时才使用。

建立统一 Design Tokens：圆角 6/10/14px；间距 4/8/12/16/24/32/48；Typography 至少区分 Display、Heading、Subheading、Body、Caption、Label。不要把所有值散落在组件中。

### 4. 应用壳与导航

整体为左侧 Sidebar + 顶部 Header + 主内容区。Sidebar 支持 Expanded/Collapsed，包含 Overview、Clients、Orders、Projects、Tasks、Payments、Analytics、Templates，底部有 Settings、Profile，品牌标识为 OPC Studio OS。

桌面端侧栏收起要有自然过渡；移动端侧栏改为 Drawer，提供打开、关闭、遮罩和 Escape 行为。顶部包含搜索入口（显示 `⌘K` 或 `Ctrl K`）、Quick Create、通知和头像菜单。所有按钮使用真实 `button` 或链接，有清晰 hover、focus-visible、disabled 状态。

### 5. 页面与真实交互

实现以下十个可切换页面：Overview、Clients、Orders、Projects、Tasks、Payments、Analytics、Templates、Settings、Profile。可使用前端状态切换，不强制引入路由，但 Sidebar 点击必须真的改变内容。

**Overview**：欢迎区、收入、待收回款、进行中项目、计费工时四项指标；收入趋势图支持 7 days/30 days/3 months/12 months；Today 面板显示任务时间、客户和项目；Quick Create 能打开 New Client、New Order、New Project、New Task、Record Payment。

**Clients**：可搜索、按 All/Active/Lead/Past 筛选的数据表格。点击行打开 Drawer，显示公司、邮箱、电话、来源、标签、Lifetime Value、Projects、Outstanding Payment 和 Recent Activity。New Client 打开表单并在成功后给出 Toast。

**Orders**：All/Draft/Confirmed/Completed 筛选；显示 Order ID、Client、Service、Amount、Status、Payment、Created。详情 Drawer 提供 Duplicate、Save as Template、Convert to Project；转换前显示确认 Modal，确认后更新本地状态并新增项目。

**Projects**：BACKLOG、IN PROGRESS、REVIEW、DONE 四列 Kanban。卡片显示名称、客户、金额、截止日期、Progress、Priority；拖动时有 scale、阴影和 drop zone 反馈，放下后真实改变状态。点击卡片打开 Drawer，包含 Overview、Tasks、Time、Payments tabs。

**Tasks**：Today/This Week/All；任务可勾选完成，完成后 checkbox 变为 check、文字减弱。每项有 Play，点击后变为 Pause 并启动真实前端计时器；页面显示 Current Session 和 Stop。

**Payments**：Expected、Received、Outstanding、Overdue 指标，付款列表和细进度条。Record Payment 打开 Modal，包含 Client、Project、Amount、Date、Payment Method、Notes。保存状态必须经历 Save→Saving…→Saved，并更新 mock state。提供 Collect Remaining，自动填入剩余金额。

**Analytics**：Revenue、Expenses、Profit、Repeat Client Rate、Average Project Value、Billable Hours；包含 Monthly Revenue、Client Source、Service Mix、Repeat vs New Clients 等简洁图表，提供 tooltip 和可读图例。

**Templates**：Proposal、Project、Task、Workflow 模板列表。点击模板打开预览 Drawer，Use Template/ Duplicate/ Edit 按钮必须有行为；Use Template 打开预填充的 Create Project From Template 表单。

**Settings/Profile**：设置页包含通知等开关并有可见焦点；资料页可以编辑演示身份并显示保存反馈。所有联系方式和数据都使用虚构值。

### 6. 命令面板、通知和微交互

实现 `Cmd/Ctrl + K` 打开 Command Palette，支持上下键选择、Enter 打开、Escape 关闭，能够搜索 Clients、Projects、Orders、Tasks 和 Pages。顶部通知按钮打开 Dropdown，显示付款到账、项目临近截止和新咨询等虚构通知。

至少覆盖这些微交互：Sidebar expand/collapse、Menu→Close、按钮 hover、表格行 hover、Tabs 指示器、Checkbox complete、Play→Pause、Save→Loading→Success、Drawer、Modal、Toast、拖拽卡片、Command Palette、Count Up、Chart Tooltip。动画要有原因，不能为了数量堆叠；优先 ease-out 或适度 spring，避免过强 bounce。

参考时长：hover 150–200ms，Drawer 250–350ms，Modal 200–300ms，页面区块约 300ms。所有动画必须支持 `prefers-reduced-motion: reduce`，关闭非必要过渡后核心操作仍可完成。

### 7. 响应式与无障碍

优先验收 1440px，同时保证 1024px、768px、390px/375px。移动端侧栏为 Drawer；表格可转换为卡片或局部横向滚动；Kanban 可横向滚动。页面级不得出现横向溢出，局部滚动容器要有明确边界。

支持完整键盘导航、可见 focus 状态、语义按钮和链接、准确的 aria-label、Modal Escape 关闭、对话框焦点路径和 Command Palette 键盘控制。图片若存在必须有准确 alt，装饰图使用空 alt。

### 8. Mock data 与内容

创建多样、可信但虚构的客户、公司、项目、订单、任务和通知数据；不要使用真实姓名、邮箱、电话、账号、路径或凭据。不要使用真实品牌 Logo、头像或版权图片。数据应足以支撑列表、图表、筛选、详情、拖拽、表单和状态反馈。

### 9. 运行、自测与验收

完成实现后执行项目已有的安装、lint、test、build 和 start 命令，报告每条命令的真实结果。浏览器中逐一验证十个页面、导航、搜索、Quick Create、通知、Drawer、Modal、Toast、拖拽、表单保存、计时器和响应式布局。检查 1440px 与 390px、键盘、Escape、reduced motion、页面级横向溢出和 Console。

不要假装未实现功能已经完成；如果某项受环境限制，明确写入报告并给出最短复现步骤。修改前后查看 `git status` 和 `git diff`，一次只处理一组问题，保留可运行节点。不要执行危险的 Git、shell、文件删除或网络操作，不要删除 lockfile、关闭 audit、强制安装或隐藏漏洞。最终报告列出创建/修改的文件、已验证功能、未完成项、启动地址和下一步人工验收清单。