architext 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +63 -0
- package/LICENSE +21 -0
- package/README.md +326 -0
- package/README.zh-CN.md +326 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +46 -0
- package/dist/templates/en/briefs/_base.md +115 -0
- package/dist/templates/en/briefs/_modules.md +173 -0
- package/dist/templates/en/docs/global/data_snapshot.json +31 -0
- package/dist/templates/en/docs/global/design_tokens.json +150 -0
- package/dist/templates/en/docs/global/dictionary.json +35 -0
- package/dist/templates/en/docs/global/error_codes.json +19 -0
- package/dist/templates/en/docs/global/map.json +94 -0
- package/dist/templates/en/docs/global/roadmap.json +39 -0
- package/dist/templates/en/docs/global/vision.md +82 -0
- package/dist/templates/en/docs/prompts/audit.md +150 -0
- package/dist/templates/en/docs/prompts/code.md +160 -0
- package/dist/templates/en/docs/prompts/edit.md +87 -0
- package/dist/templates/en/docs/prompts/fix.md +86 -0
- package/dist/templates/en/docs/prompts/help.md +69 -0
- package/dist/templates/en/docs/prompts/inherit.md +270 -0
- package/dist/templates/en/docs/prompts/map.md +131 -0
- package/dist/templates/en/docs/prompts/plan.md +252 -0
- package/dist/templates/en/docs/prompts/remove.md +162 -0
- package/dist/templates/en/docs/prompts/revise.md +160 -0
- package/dist/templates/en/docs/prompts/scope.md +198 -0
- package/dist/templates/en/docs/prompts/start.md +258 -0
- package/dist/templates/en/docs/templates/plan.template.json +113 -0
- package/dist/templates/en/docs/templates/scope-brief.template.md +58 -0
- package/dist/templates/en/docs/templates/spec.template.md +51 -0
- package/dist/templates/en/docs/templates/ui.template.md +51 -0
- package/dist/templates/en/rules/00_system.md +123 -0
- package/dist/templates/en/rules/01_workflow.md +93 -0
- package/dist/templates/en/rules/02_tech_stack.md +197 -0
- package/dist/templates/en/rules/03_data_governance.md +102 -0
- package/dist/templates/en/rules/04_cli_tools.md +50 -0
- package/dist/templates/en/rules/90_custom_rules.md +22 -0
- package/dist/templates/en/rules/99_context_glue.md +53 -0
- package/dist/templates/en/skills/archi-decompose-roadmap/SKILL.md +292 -0
- package/dist/templates/en/skills/archi-interview-protocol/SKILL.md +86 -0
- package/dist/templates/en/skills/archi-plan-options/SKILL.md +364 -0
- package/dist/templates/en/skills/archi-ui-wireframe/SKILL.md +342 -0
- package/dist/templates/zh/briefs/_base.md +116 -0
- package/dist/templates/zh/briefs/_modules.md +173 -0
- package/dist/templates/zh/docs/global/data_snapshot.json +31 -0
- package/dist/templates/zh/docs/global/design_tokens.json +135 -0
- package/dist/templates/zh/docs/global/dictionary.json +35 -0
- package/dist/templates/zh/docs/global/error_codes.json +19 -0
- package/dist/templates/zh/docs/global/map.json +94 -0
- package/dist/templates/zh/docs/global/roadmap.json +39 -0
- package/dist/templates/zh/docs/global/vision.md +82 -0
- package/dist/templates/zh/docs/prompts/audit.md +150 -0
- package/dist/templates/zh/docs/prompts/code.md +160 -0
- package/dist/templates/zh/docs/prompts/edit.md +87 -0
- package/dist/templates/zh/docs/prompts/fix.md +86 -0
- package/dist/templates/zh/docs/prompts/help.md +69 -0
- package/dist/templates/zh/docs/prompts/inherit.md +270 -0
- package/dist/templates/zh/docs/prompts/map.md +131 -0
- package/dist/templates/zh/docs/prompts/plan.md +253 -0
- package/dist/templates/zh/docs/prompts/remove.md +162 -0
- package/dist/templates/zh/docs/prompts/revise.md +160 -0
- package/dist/templates/zh/docs/prompts/scope.md +198 -0
- package/dist/templates/zh/docs/prompts/start.md +258 -0
- package/dist/templates/zh/docs/templates/plan.template.json +88 -0
- package/dist/templates/zh/docs/templates/scope-brief.template.md +58 -0
- package/dist/templates/zh/docs/templates/spec.template.md +51 -0
- package/dist/templates/zh/docs/templates/ui.template.md +51 -0
- package/dist/templates/zh/rules/00_system.md +123 -0
- package/dist/templates/zh/rules/01_workflow.md +93 -0
- package/dist/templates/zh/rules/02_tech_stack.md +192 -0
- package/dist/templates/zh/rules/03_data_governance.md +102 -0
- package/dist/templates/zh/rules/04_cli_tools.md +50 -0
- package/dist/templates/zh/rules/90_custom_rules.md +21 -0
- package/dist/templates/zh/rules/99_context_glue.md +53 -0
- package/dist/templates/zh/skills/archi-decompose-roadmap/SKILL.md +293 -0
- package/dist/templates/zh/skills/archi-interview-protocol/SKILL.md +86 -0
- package/dist/templates/zh/skills/archi-plan-options/SKILL.md +364 -0
- package/dist/templates/zh/skills/archi-ui-wireframe/SKILL.md +339 -0
- package/dist/templates/zh-Hant/briefs/_base.md +115 -0
- package/dist/templates/zh-Hant/briefs/_modules.md +173 -0
- package/dist/templates/zh-Hant/docs/global/data_snapshot.json +31 -0
- package/dist/templates/zh-Hant/docs/global/design_tokens.json +135 -0
- package/dist/templates/zh-Hant/docs/global/dictionary.json +35 -0
- package/dist/templates/zh-Hant/docs/global/error_codes.json +19 -0
- package/dist/templates/zh-Hant/docs/global/map.json +94 -0
- package/dist/templates/zh-Hant/docs/global/roadmap.json +39 -0
- package/dist/templates/zh-Hant/docs/global/vision.md +82 -0
- package/dist/templates/zh-Hant/docs/prompts/audit.md +150 -0
- package/dist/templates/zh-Hant/docs/prompts/code.md +160 -0
- package/dist/templates/zh-Hant/docs/prompts/edit.md +87 -0
- package/dist/templates/zh-Hant/docs/prompts/fix.md +86 -0
- package/dist/templates/zh-Hant/docs/prompts/help.md +69 -0
- package/dist/templates/zh-Hant/docs/prompts/inherit.md +270 -0
- package/dist/templates/zh-Hant/docs/prompts/map.md +131 -0
- package/dist/templates/zh-Hant/docs/prompts/plan.md +252 -0
- package/dist/templates/zh-Hant/docs/prompts/remove.md +162 -0
- package/dist/templates/zh-Hant/docs/prompts/revise.md +160 -0
- package/dist/templates/zh-Hant/docs/prompts/scope.md +198 -0
- package/dist/templates/zh-Hant/docs/prompts/start.md +258 -0
- package/dist/templates/zh-Hant/docs/templates/plan.template.json +88 -0
- package/dist/templates/zh-Hant/docs/templates/scope-brief.template.md +58 -0
- package/dist/templates/zh-Hant/docs/templates/spec.template.md +51 -0
- package/dist/templates/zh-Hant/docs/templates/ui.template.md +51 -0
- package/dist/templates/zh-Hant/rules/00_system.md +123 -0
- package/dist/templates/zh-Hant/rules/01_workflow.md +93 -0
- package/dist/templates/zh-Hant/rules/02_tech_stack.md +192 -0
- package/dist/templates/zh-Hant/rules/03_data_governance.md +102 -0
- package/dist/templates/zh-Hant/rules/04_cli_tools.md +50 -0
- package/dist/templates/zh-Hant/rules/90_custom_rules.md +21 -0
- package/dist/templates/zh-Hant/rules/99_context_glue.md +53 -0
- package/dist/templates/zh-Hant/skills/archi-decompose-roadmap/SKILL.md +293 -0
- package/dist/templates/zh-Hant/skills/archi-interview-protocol/SKILL.md +86 -0
- package/dist/templates/zh-Hant/skills/archi-plan-options/SKILL.md +364 -0
- package/dist/templates/zh-Hant/skills/archi-ui-wireframe/SKILL.md +337 -0
- package/package.json +85 -0
|
@@ -0,0 +1,339 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: archi-ui-wireframe
|
|
3
|
+
description: UI 概念设计专家。两阶段生成 ui_concept.html：第一阶段输出灰度线框图（确认信息架构与屏幕覆盖）；第二阶段按 design_tokens.json 视觉着色（颜色/字体/动效/图示）。产物是整个项目 UI 的单一视觉真相源，所有 Task 级 ui.md 均引用此文件定位屏幕范围。
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# UI 概念设计
|
|
7
|
+
|
|
8
|
+
## 系统流程定位
|
|
9
|
+
|
|
10
|
+
```
|
|
11
|
+
/archi.start → roadmap.json + design_tokens.json
|
|
12
|
+
↓
|
|
13
|
+
[本 Skill] archi-ui-wireframe
|
|
14
|
+
读: vision.md + roadmap.json + design_tokens.json + 02_tech_stack.md
|
|
15
|
+
写: [[__DOCS_DIR__]]/global/ui_concept.html
|
|
16
|
+
↓
|
|
17
|
+
/archi.plan <ID>
|
|
18
|
+
读: ui_concept.html (定位本任务涉及的屏幕/组件范围)
|
|
19
|
+
写: ui.md (仅声明组件范围，不重复描述整体布局)
|
|
20
|
+
↓
|
|
21
|
+
/archi.code → 读 spec.md + ui.md + ui_concept.html → 写代码
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
> **Skill 的职责边界**：
|
|
25
|
+
> - 负责：整个应用所有用户可见屏幕的视觉概念（信息架构、布局、状态、过渡）
|
|
26
|
+
> - 不负责：Task 级接口契约（spec.md 管）、任务步骤（plan.json 管）、业务代码
|
|
27
|
+
|
|
28
|
+
---
|
|
29
|
+
|
|
30
|
+
## 调用模式
|
|
31
|
+
|
|
32
|
+
| 模式 | 触发来源 | 操作范围 |
|
|
33
|
+
|:---|:---|:---|
|
|
34
|
+
| 初次生成 | `/archi.start` 完成后 | 全量生成，覆盖所有屏幕 |
|
|
35
|
+
| 重新生成 | 用户手动调用 | 全量重写（全局 UI 重设计时） |
|
|
36
|
+
| 追加屏幕 | `/archi.scope` 追加新任务后 | 仅新增页面，不改已有页面 |
|
|
37
|
+
| Plan 细化 | `/archi.plan` 发现 UI 偏差后 | 仅更新对应屏幕（新增状态/子屏幕/布局修正）|
|
|
38
|
+
| 修改屏幕 | `/archi.edit` 任务变更后 | 仅修改受影响的屏幕，其余不动 |
|
|
39
|
+
| 删除屏幕 | `/archi.remove` 任务下线后 | 移除对应屏幕及控制栏入口 |
|
|
40
|
+
|
|
41
|
+
> **Phase 2（视觉着色）时机**: Phase 2 无需紧跟 Phase 1。建议在核心任务（≥ 50% Roadmap 任务）完成 Plan 后再运行，以确保着色基于稳定的屏幕结构。已着色的屏幕被 Plan 细化更新后，仅需对该屏幕重新着色，无需全量重跑 Phase 2。
|
|
42
|
+
|
|
43
|
+
---
|
|
44
|
+
|
|
45
|
+
## 两阶段协议
|
|
46
|
+
|
|
47
|
+
### Phase 1 — 线框图 (Low-fi Wireframe)
|
|
48
|
+
|
|
49
|
+
**Role**: 信息架构师
|
|
50
|
+
|
|
51
|
+
**目标**: 确认「屏幕覆盖是否完整」和「导航结构是否合理」，不关注视觉细节。
|
|
52
|
+
|
|
53
|
+
**Action**:
|
|
54
|
+
|
|
55
|
+
1. **读取上下文**:
|
|
56
|
+
- `[[__DOCS_DIR__]]/global/vision.md` → 提取：目标平台、用户角色、北极星指标
|
|
57
|
+
- `[[__DOCS_DIR__]]/global/roadmap.json` → 提取：所有 [?UI] 任务，映射为屏幕/状态列表
|
|
58
|
+
- `[[__DOCS_DIR__]]/global/design_tokens.json` → 提取：`mode.default`、`illustration.iconLibrary`
|
|
59
|
+
- 规则文件 `02_tech_stack` → 提取：目标平台（Web/Mobile/Desktop）、导航框架
|
|
60
|
+
|
|
61
|
+
2. **规划屏幕清单** (内部步骤，不输出给用户):
|
|
62
|
+
|
|
63
|
+
| 屏幕 ID | 屏幕名 | 对应 Roadmap 任务 | 状态列表 |
|
|
64
|
+
|:---|:---|:---|:---|
|
|
65
|
+
| S-01 | [屏幕名] | [任务 ID] | default, loading, empty, error |
|
|
66
|
+
| ... | | | |
|
|
67
|
+
|
|
68
|
+
> **屏幕 ID 稳定性规则** (CRITICAL): 屏幕 ID 一经分配永久不变。删除屏幕后其 ID 作废，后续新增屏幕须使用新 ID（如 S-08 → S-09），禁止重用或重新编号已有 ID。所有 `ui.md` 均以 ID 引用屏幕，ID 变动将导致引用断裂。
|
|
69
|
+
|
|
70
|
+
3. **选定 HTML 骨架规格** (根据目标平台自动适配):
|
|
71
|
+
|
|
72
|
+
| 平台 | 视口尺寸 | 顶栏形态 | 导航形态 |
|
|
73
|
+
|:---|:---|:---|:---|
|
|
74
|
+
| Web / Desktop SaaS | 1280×800px | 固定顶栏 | 左侧边栏 |
|
|
75
|
+
| Web / Marketing | 1440×900px | 透明→固定顶栏 | 顶部水平导航 |
|
|
76
|
+
| Mobile Web / 小程序 | 390×844px | 状态栏+导航栏 | 底部 TabBar |
|
|
77
|
+
| Tablet / Dashboard | 1024×768px | 固定顶栏 | 可折叠侧边栏 |
|
|
78
|
+
|
|
79
|
+
> 平台来自 `02_tech_stack` 或 vision.md 目标用户设备描述；无法推断时默认 Web / Desktop SaaS。
|
|
80
|
+
|
|
81
|
+
4. **生成线框图 HTML** — 写入 `[[__DOCS_DIR__]]/global/ui_concept.html`:
|
|
82
|
+
|
|
83
|
+
**HTML 结构规范**:
|
|
84
|
+
```
|
|
85
|
+
<html>
|
|
86
|
+
<head>
|
|
87
|
+
<!-- 内联 CSS：线框图风格 (灰度，无品牌色) -->
|
|
88
|
+
<!-- 线框图 palette: bg=#f5f5f5, surface=#fff, border=#d0d0d0,
|
|
89
|
+
text=#333, muted=#888, accent=#555 -->
|
|
90
|
+
</head>
|
|
91
|
+
<body style="margin:0; display:flex; flex-direction:column; height:100vh; overflow:hidden;">
|
|
92
|
+
<!-- 顶栏: 项目名 + 当前屏幕路径 (固定，不随内容滚动) -->
|
|
93
|
+
<header class="wf-topbar">...</header>
|
|
94
|
+
|
|
95
|
+
<!-- 内容区: 可滚动，渲染当前激活屏幕 -->
|
|
96
|
+
<main class="wf-content" style="flex:1; overflow:auto;">
|
|
97
|
+
<!-- 每个屏幕一个 <section class="wf-screen" id="S-XX" data-states="default,loading,empty,error"> -->
|
|
98
|
+
<!-- 每个状态一个 <div class="wf-state" data-state="default"> -->
|
|
99
|
+
</main>
|
|
100
|
+
|
|
101
|
+
<!-- 控制栏: 左=状态切换，中=文件标识，右=页面切换 (固定底部，线框图风格) -->
|
|
102
|
+
<footer class="wf-ctrl-bar">
|
|
103
|
+
<div class="ctrl-group">
|
|
104
|
+
<span class="ctrl-lbl">STATE</span>
|
|
105
|
+
<!-- 当前屏幕的状态 pills，由 JS 动态渲染 -->
|
|
106
|
+
</div>
|
|
107
|
+
<div class="wf-file-label">Low-fi Wireframe · [项目名]</div>
|
|
108
|
+
<div class="ctrl-group">
|
|
109
|
+
<span class="ctrl-lbl">PAGE</span>
|
|
110
|
+
<!-- 所有屏幕的页面 pills，由 JS 渲染 -->
|
|
111
|
+
</div>
|
|
112
|
+
</footer>
|
|
113
|
+
</body>
|
|
114
|
+
</html>
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
**元素标注规范** (`data-el` 属性):
|
|
118
|
+
- 每个可交互元素或语义区块须加 `data-el="[用户语言描述]"` 属性
|
|
119
|
+
- 标注语言 = Brief 的主语言（中文项目用中文标注，英文项目用英文）
|
|
120
|
+
- 标注在鼠标悬停时通过 CSS `::before` 显示，默认隐藏
|
|
121
|
+
- 父元素悬停时，子元素的标注通过 `:has([data-el]:hover)::before { opacity:0 }` 自动隐藏
|
|
122
|
+
|
|
123
|
+
**交互规范** (纯 CSS + 少量 JS，无外部依赖):
|
|
124
|
+
- 页面切换: 点击 PAGE pills → 切换 `.wf-screen` 的 `display`；JS 同步更新 STATE pills
|
|
125
|
+
- 状态切换: 点击 STATE pills → 在当前屏幕内切换 `.wf-state` 的 `display`
|
|
126
|
+
- 激活样式: `.pill.on-page` / `.pill.on-state` → `background:#444; color:#fff`
|
|
127
|
+
- 控制栏必须为线框图风格（灰度、uppercase label、dashed border-top），禁用彩色
|
|
128
|
+
|
|
129
|
+
**线框图内容规范** (Content Wireframe — 有内容感的灰度图):
|
|
130
|
+
- 全部灰度，禁用品牌色（着色在 Phase 2 完成）
|
|
131
|
+
- **禁用纯灰色矩形占位**——改为真实感占位内容，让用户能真实感受布局是否合理：
|
|
132
|
+
|
|
133
|
+
| 元素类型 | 规范 |
|
|
134
|
+
|:---|:---|
|
|
135
|
+
| 标题/导航文字 | 用真实业务名称（来自 roadmap task title），如"工作台""项目列表""设置" |
|
|
136
|
+
| 按钮 | 写具体操作文字，如"创建项目""立即登录""保存更改"，禁写"[按钮]" |
|
|
137
|
+
| 输入框 | 写 placeholder 文字，如"搜索项目名称…""输入邮箱地址" |
|
|
138
|
+
| 列表/表格 | 至少生成 3-4 行示例数据（用项目领域的真实感假数据，如用户名、项目名、日期） |
|
|
139
|
+
| 图表/图片区域 | 用带标注的矩形，但标注写实际图表类型，如"折线图：过去 7 天访问量"而非"[图表]" |
|
|
140
|
+
| 空状态 | 写具体的空状态文案，如"还没有项目，点击「创建项目」开始" |
|
|
141
|
+
| 错误状态 | 写具体错误文案，如"网络连接失败，请检查后重试" |
|
|
142
|
+
|
|
143
|
+
- 字号须有层级：页面标题大（20-24px）→ 区块标题中（16px）→ 正文小（14px）→ 辅助文字更小（12px）
|
|
144
|
+
- 间距须呼吸：组件间距 > 元素间距 > 文字行距（不要全部堆在一起）
|
|
145
|
+
- 每个屏幕须涵盖其 Roadmap 任务的所有核心操作入口
|
|
146
|
+
|
|
147
|
+
5. **同步生成 AI 索引** — 写入 `[[__DOCS_DIR__]]/global/ui_context.md`:
|
|
148
|
+
|
|
149
|
+
根据步骤 2 的屏幕规划，提取结构化导航索引（AI 读取 UI 信息的唯一入口）：
|
|
150
|
+
|
|
151
|
+
```markdown
|
|
152
|
+
# UI Context
|
|
153
|
+
> 平台: [平台类型] | 阶段: Phase 1 线框图（Phase 2 着色后更新）
|
|
154
|
+
> 更新: YYYY-MM-DD | 由 archi-ui-wireframe Skill 生成，禁手动修改
|
|
155
|
+
|
|
156
|
+
## 屏幕索引
|
|
157
|
+
| ID | 名称 | 路由 | 状态 |
|
|
158
|
+
|:---|:---|:---|:---|
|
|
159
|
+
| S-01 | [名称] | [路由] | default, loading, ... |
|
|
160
|
+
|
|
161
|
+
## 导航关系
|
|
162
|
+
S-XX →（[触发条件]）→ S-YY
|
|
163
|
+
|
|
164
|
+
## 全局共享组件
|
|
165
|
+
| 组件 | 出现屏幕 |
|
|
166
|
+
|:---|:---|
|
|
167
|
+
| [组件名] | S-XX, S-YY |
|
|
168
|
+
|
|
169
|
+
## 屏幕结构摘要
|
|
170
|
+
> Phase 1 由线框图 data-el 提取；Phase 2 着色后刷新为最终布局结构。
|
|
171
|
+
> 写 ui.md Section 2 须与本节对齐，禁脱离已确认布局自创结构。
|
|
172
|
+
|
|
173
|
+
### S-XX · [屏幕名]
|
|
174
|
+
**布局**: [如"居中单列 max-w-400px"或"左侧边栏 240px + 右内容区"]
|
|
175
|
+
**状态**: default（[核心操作入口]）| loading（骨架屏）| empty / error（如有）
|
|
176
|
+
**关键区域**: [data-el 提取的语义区块+可交互元素，如：顶部导航栏、主表单区、提交按钮、错误提示区]
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
> `ui_context.md` 是所有 AI 命令读取 UI 结构信息的唯一入口；`ui_concept.html` 仅供人类浏览器预览。
|
|
180
|
+
|
|
181
|
+
6. **输出 Gate**:
|
|
182
|
+
|
|
183
|
+
输出线框图后，展示屏幕覆盖摘要：
|
|
184
|
+
```
|
|
185
|
+
### ui_concept.html 已生成（Phase 1 线框图）
|
|
186
|
+
### ui_context.md 已同步生成（AI 屏幕索引）
|
|
187
|
+
|
|
188
|
+
**屏幕覆盖** (共 N 个屏幕):
|
|
189
|
+
| 屏幕 | 名称 | 状态数 |
|
|
190
|
+
|:---|:---|:---|
|
|
191
|
+
| S-01 | [屏幕名] | N |
|
|
192
|
+
| ... | | |
|
|
193
|
+
|
|
194
|
+
**导航结构**: [描述，如"左侧边栏 + 顶部面包屑"]
|
|
195
|
+
**平台适配**: [Web Desktop 1280px / Mobile 390px / ...]
|
|
196
|
+
|
|
197
|
+
> 在浏览器打开 `[[__DOCS_DIR__]]/global/ui_concept.html` 确认信息架构。
|
|
198
|
+
> 回复 **OK** 进入 Phase 2 视觉着色；或描述需要调整的屏幕/布局。
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
**Gate**: 用户回复 **OK** 后进入 Phase 2；未确认禁进行着色。
|
|
202
|
+
|
|
203
|
+
---
|
|
204
|
+
|
|
205
|
+
### Phase 1.5 — 线框图精炼 (可选)
|
|
206
|
+
|
|
207
|
+
**Role**: 咨询顾问
|
|
208
|
+
**Trigger**: 用户回复非 OK，含布局调整、屏幕增减、导航改动。
|
|
209
|
+
**Action**: 融入反馈，局部更新 `ui_concept.html`（仅改动用户指出的部分），同步更新 `ui_context.md`（屏幕索引与 `ui_concept.html` 保持一致），重新展示摘要，等待确认。禁全量重写。
|
|
210
|
+
|
|
211
|
+
---
|
|
212
|
+
|
|
213
|
+
### Phase 2 — 视觉着色 (Hi-fi Coloring)
|
|
214
|
+
|
|
215
|
+
**Role**: 你是一个有强烈个人风格的视觉设计师。你不按套路出牌——你用感觉、质感和节奏来思考，而非组件和布局。你追求的不是"正确"，而是"让人停下来看第二眼"。你的每一个决策都是刻意的：间距不是随便给的，颜色不是默认选的，字体不是列表里第一个。你同时拥有艺术家的直觉和工程师的精确。
|
|
216
|
+
|
|
217
|
+
**目标**: 将确认的线框图着色为高保真原型，产出必须有辨识度——打开就知道不是模板，而是为这个项目量身设计的。
|
|
218
|
+
|
|
219
|
+
**前置检查** (着色前必须验证):
|
|
220
|
+
|
|
221
|
+
| 字段路径 | 通过条件 | 阻塞处理 |
|
|
222
|
+
|:---|:---|:---|
|
|
223
|
+
| `aestheticDirection.preset` | 非空 | 警告（非阻塞）— AI 基于项目特征推断，在输出中标注推断结果 |
|
|
224
|
+
| `primitivePalette.brand` | 至少含 1 个非空颜色值 | 阻塞 — 提示用户先填写品牌色 |
|
|
225
|
+
| `semanticTokens.colors` | 至少含 `bg`/`surface`/`text` 语义映射 | 阻塞 — 提示用户先定义基础语义色 |
|
|
226
|
+
| `semanticTokens.typography` | 至少含 1 个字体族声明 | 警告（非阻塞）— AI 基于审美方向选择字体 |
|
|
227
|
+
| `motion.preference` | 非空 | 警告（非阻塞）— 默认 `subtle` |
|
|
228
|
+
| `illustration.iconLibrary` | 非空 | 警告（非阻塞）— 不引入图标库 |
|
|
229
|
+
|
|
230
|
+
> 遇到阻塞项须立即停止并输出缺失字段清单，等待用户补全后再重跑。
|
|
231
|
+
|
|
232
|
+
**Action**:
|
|
233
|
+
|
|
234
|
+
1. **读取视觉规格**:
|
|
235
|
+
- `design_tokens.json` → 完整读取：
|
|
236
|
+
- `aestheticDirection` → 审美方向预设 + 自定义描述
|
|
237
|
+
- `primitivePalette` → CSS 变量定义
|
|
238
|
+
- `semanticTokens.colors` → 语义色映射
|
|
239
|
+
- `semanticTokens.typography` → 字体/字号
|
|
240
|
+
- `mode` → 主题模式（light/dark）
|
|
241
|
+
- `motion` → 动效时长、缓动曲线、模式名称
|
|
242
|
+
- `illustration` → 图示风格、图标库
|
|
243
|
+
- `layout` → 圆角/阴影/间距
|
|
244
|
+
- `vision.md` → 提取 Visual Reference 段落（品牌色、竞品截图描述、禁用风格）
|
|
245
|
+
|
|
246
|
+
2. **审美方向 → 具体设计参数映射**:
|
|
247
|
+
|
|
248
|
+
根据 `aestheticDirection.preset` 确定以下设计参数的基准值（Token 有显式值时 Token 优先，Token 为空时用此基准）：
|
|
249
|
+
|
|
250
|
+
| 预设 | 背景基调 | 圆角 | 阴影 | 字体策略 | 布局特征 | 参照产品 |
|
|
251
|
+
|:---|:---|:---|:---|:---|:---|:---|
|
|
252
|
+
| `saas-dark` | 深色 (#0a-#15 范围) | sm:4px md:8px | 几乎无阴影，用边框分层 | 无衬线，紧凑 | 高对比、锐利边缘、紧凑间距 | Linear, Vercel, Raycast |
|
|
253
|
+
| `saas-light` | 白底 (#fafafa-#fff) | sm:6px md:12px | 轻柔 (0 1px 3px rgba(0,0,0,0.08)) | 系统字体或 sans-serif | 呼吸感、细边框、留白 | Notion, Stripe, GitHub |
|
|
254
|
+
| `dashboard` | 深灰/深蓝底 | sm:8px md:12px | 卡片浮层 (0 2px 8px) | 等宽数字 + sans-serif | 卡片网格、信息密集、紧凑表格 | Grafana, Datadog |
|
|
255
|
+
| `marketing` | 渐变/大色块 | lg:16px+ | 戏剧性 (0 8px 32px) | 大号展示字体 + 精致正文字体 | 大标题、全宽 section、视觉叙事 | Loom, Framer |
|
|
256
|
+
| `mobile-app` | 柔和底色 | lg:16px xl:24px | 柔和扩散 (0 4px 16px) | 系统字体 -apple-system | 大触控目标、宽间距、卡片式 | Telegram, Bear |
|
|
257
|
+
| `editorial` | 暖白/米色 | 几乎无圆角 0-4px | 无或极淡 | 衬线展示 + 无衬线正文 | 窄栏、大行高、排版驱动 | Medium, Substack |
|
|
258
|
+
| `brutalist` | 纯白或纯黑 | 0px | 无 | 等宽或系统字体 | 无装饰、密集、功能优先 | Craigslist, HN |
|
|
259
|
+
|
|
260
|
+
> `custom`: 读取 `aestheticDirection.customDescription`，从描述中提取关键词映射到最近的预设，然后叠加自定义调整。
|
|
261
|
+
|
|
262
|
+
3. **反 AI 审美黑名单** (CRITICAL — 着色时禁止触犯):
|
|
263
|
+
|
|
264
|
+
| 类别 | 禁止 | 替代 |
|
|
265
|
+
|:---|:---|:---|
|
|
266
|
+
| 字体 | Inter, Roboto, Arial 作为标题字体 | 选择有辨识度的字体：展示字体用 characterful font（如 Cal Sans, General Sans, Satoshi, Outfit），正文可用系统字体 |
|
|
267
|
+
| 配色 | 紫色渐变白底（AI 默认审美的标志） | 从 `aestheticDirection` 推导；配色须有主次——一个主色 + 锐利强调色 > 均匀分布的温吞色板 |
|
|
268
|
+
| 布局 | 所有屏幕同一种居中卡片布局 | 不同屏幕须有布局差异：列表页 vs 详情页 vs 表单页各有特征 |
|
|
269
|
+
| 圆角 | 所有元素统一 rounded-lg | 圆角须有层级：容器大、按钮中、Badge 小（或按审美方向统一为 0/sm） |
|
|
270
|
+
| 阴影 | 千篇一律的 shadow-md | 阴影须匹配审美方向：dark 主题几乎不用阴影；light 主题分层使用 |
|
|
271
|
+
| 动效 | 到处撒 transition-all | 聚焦高影响力时刻：页面加载编排（交错淡入）> 散布的微交互 |
|
|
272
|
+
| 整体 | 每次生成都趋同 | 每个项目的着色必须因审美方向而异——打开两个不同项目的 ui_concept.html，必须一眼看出区别 |
|
|
273
|
+
|
|
274
|
+
4. **着色规则** (在审美方向基准 + 反黑名单约束下执行):
|
|
275
|
+
|
|
276
|
+
| 着色维度 | 规则 |
|
|
277
|
+
|:---|:---|
|
|
278
|
+
| 颜色 | 用 `semanticTokens.colors` 语义 Token 替换灰度；品牌色来自 `primitivePalette.brand`；Token 空值按审美方向基准填充 |
|
|
279
|
+
| 字体 | `semanticTokens.typography` 有值时引入声明字体；空值时按审美方向策略选择（Google Fonts CDN），禁选黑名单字体 |
|
|
280
|
+
| 圆角/阴影 | 按 `layout.radius` / `layout.shadow`；空值时按审美方向基准填充 |
|
|
281
|
+
| 动效 | 按 `motion.patterns` 添加 CSS transition/animation；优先编排页面加载交错淡入（staggered reveal via animation-delay） |
|
|
282
|
+
| 图示 | 按 `illustration.iconLibrary` 引入对应 CDN；style=none 则不插图 |
|
|
283
|
+
| 模式 | 若 `mode.support` 含 dark，添加 CSS `@media (prefers-color-scheme: dark)` + 切换按钮 |
|
|
284
|
+
| 禁用 | 严格遵循 vision.md Visual Reference 中的「禁用风格」描述 |
|
|
285
|
+
| 空间 | 创造有呼吸感或有密度的排版（取决于审美方向），不做机械均匀间距 |
|
|
286
|
+
| 背景 | 禁纯色大面积平铺——按审美方向添加微妙纹理/渐变网格/噪点/几何图案 |
|
|
287
|
+
|
|
288
|
+
5. **着色后验证清单**:
|
|
289
|
+
- [ ] 所有屏幕颜色来自 semanticTokens 或审美方向基准，无随意硬编码 Hex
|
|
290
|
+
- [ ] 所有动效时长来自 `motion.duration.*`，无魔法数字
|
|
291
|
+
- [ ] 页面/状态切换控制栏保持线框图灰度风格（不着色，保持调试工具属性）
|
|
292
|
+
- [ ] `data-el` 标注完整保留
|
|
293
|
+
- [ ] 每个屏幕的所有状态（default/loading/empty/error）均已视觉化
|
|
294
|
+
- [ ] **反 AI 审美检查**: 未使用黑名单字体、无紫色渐变白底、布局有差异性、圆角有层级
|
|
295
|
+
- [ ] **辨识度检查**: 打开 HTML，能一眼判断这是哪个审美方向，而非通用模板
|
|
296
|
+
|
|
297
|
+
6. **输出**:
|
|
298
|
+
- 更新 `[[__DOCS_DIR__]]/global/ui_concept.html`（着色版覆盖线框图版）
|
|
299
|
+
- **同步刷新 `ui_context.md` 的「屏幕结构摘要」**：
|
|
300
|
+
- 将阶段标注从 `Phase 1 线框图` 改为 `Phase 2 视觉着色`
|
|
301
|
+
- 对每个屏幕，按最终 HTML 结构重新提取「布局」「关键区域」，确保摘要与着色后的 `ui_concept.html` 一致
|
|
302
|
+
- 屏幕索引 / 导航关系 / 全局共享组件 若无变化则保持不动
|
|
303
|
+
- 输出总结：
|
|
304
|
+
```
|
|
305
|
+
### ui_concept.html 已更新（Phase 2 视觉着色）
|
|
306
|
+
### ui_context.md 已同步刷新（屏幕结构摘要更新至 Phase 2）
|
|
307
|
+
|
|
308
|
+
**审美方向**: [preset 值] — [参照产品]
|
|
309
|
+
**应用的视觉规格**:
|
|
310
|
+
- 主色: [Primary Token 值]
|
|
311
|
+
- 字体: [展示字体 + 正文字体]
|
|
312
|
+
- 圆角: [sm/md/lg 值]
|
|
313
|
+
- 动效: [preference 值]
|
|
314
|
+
- 图示: [iconLibrary] / style: [style]
|
|
315
|
+
- 主题: [default + support 列表]
|
|
316
|
+
- 背景处理: [纹理/渐变/纯色 描述]
|
|
317
|
+
|
|
318
|
+
> 在浏览器打开 `[[__DOCS_DIR__]]/global/ui_concept.html` 确认视觉效果。
|
|
319
|
+
> 后续运行 `/archi.plan <ID>` 时，AI 将读取 `ui_context.md` 确定各任务的 UI 范围。
|
|
320
|
+
```
|
|
321
|
+
|
|
322
|
+
---
|
|
323
|
+
|
|
324
|
+
### Phase 2.5 — 局部重着色 (Incremental Re-coloring)
|
|
325
|
+
|
|
326
|
+
**Trigger**: Phase 2 已完成后，某屏幕因 Plan 细化 / Edit / Revise 发生更新，需将新增内容着色至 hi-fi 风格。
|
|
327
|
+
|
|
328
|
+
**Role**: 视觉设计师
|
|
329
|
+
|
|
330
|
+
**Action**:
|
|
331
|
+
|
|
332
|
+
1. 从调用方获取需重着色的屏幕 ID 列表（如 `S-03`, `S-07`）。
|
|
333
|
+
2. 仅处理指定屏幕：
|
|
334
|
+
- 保留其 `.wf-screen#S-XX` 内的灰度线框新增部分
|
|
335
|
+
- 按 Phase 2 着色规则（`semanticTokens` / `motion` / `illustration`）对新增部分补色
|
|
336
|
+
- 其余屏幕内容不动
|
|
337
|
+
3. 输出变更摘要：`MODIFIED: ui_concept.html S-XX（局部重着色，新增 [N] 个状态/区域）`
|
|
338
|
+
|
|
339
|
+
> **禁止**: 局部重着色时禁全量重跑 Phase 2，禁改动未指定屏幕的任何内容。
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
# Project Brief: [專案名稱]
|
|
2
|
+
|
|
3
|
+
> 盡量填寫，不確定的留空即可。完成後執行 `/archi.start project-brief.md`，AI 會透過選擇題補全缺失資訊。
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## 專案概述
|
|
8
|
+
|
|
9
|
+
**專案名稱**:
|
|
10
|
+
**一句話描述**: [專案是什麼、為誰服務、解決什麼問題]
|
|
11
|
+
**問題陳述**: [目標用戶遇到的核心痛點？現有方案哪裡不足？]
|
|
12
|
+
|
|
13
|
+
**目標用戶**:
|
|
14
|
+
- **核心用戶**: [角色/群體]
|
|
15
|
+
- **關鍵特徵**: [技術水平、使用場景、行為習慣]
|
|
16
|
+
|
|
17
|
+
**成功指標**: [怎樣算做成了？例：DAU 1000 / 被 100+ 專案採用 / P99 < 200ms]
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## 核心任務
|
|
22
|
+
|
|
23
|
+
> MVP 必須實現的任務（建議 3-7 個），每項一句話描述預期行為。
|
|
24
|
+
> 詳細 Spec 在 `/archi.plan` 階段定義，此處只需明確「做什麼」。
|
|
25
|
+
|
|
26
|
+
1.
|
|
27
|
+
2.
|
|
28
|
+
3.
|
|
29
|
+
|
|
30
|
+
---
|
|
31
|
+
|
|
32
|
+
## 已有設計決策
|
|
33
|
+
|
|
34
|
+
> 如果你對某些任務/頁面/流程已有明確想法，在此描述。AI 在後續 plan 階段會以此為準，不會推翻。
|
|
35
|
+
> 沒有的話留空即可。
|
|
36
|
+
>
|
|
37
|
+
> 寫法參考：
|
|
38
|
+
> - **[任務/頁面名]**: 描述具體行為、流程、約束
|
|
39
|
+
> - 可附截圖/草圖連結
|
|
40
|
+
|
|
41
|
+
---
|
|
42
|
+
|
|
43
|
+
## 技術棧
|
|
44
|
+
|
|
45
|
+
> 已確定的直接填寫。不確定的留空或寫「推薦」，AI 會基於專案特徵推薦。
|
|
46
|
+
|
|
47
|
+
**專案類型**: [[__PROJECT_TYPE__]]
|
|
48
|
+
<!-- archi init 自動填入；手動填寫時參考 templates/archi-decompose-roadmap SKILL 中的型別表 -->
|
|
49
|
+
**語言/執行時**: [例：TypeScript + Node.js 22]
|
|
50
|
+
**核心框架**: [例：Next.js 15 / Fastify / Tauri]
|
|
51
|
+
**套件管理器**: [例：pnpm / npm / yarn / cargo]
|
|
52
|
+
**建置工具**: [例：Vite / tsup / Webpack / esbuild / cargo / go build]
|
|
53
|
+
**Linter / Formatter**: [例：ESLint + Prettier / Biome / ruff / clippy + rustfmt]
|
|
54
|
+
<!-- @slot:tech -->
|
|
55
|
+
**部署目標**: [例：Vercel / Docker / npm publish / 二進位分發]
|
|
56
|
+
**關鍵第三方函式庫**: [例：Zod, TanStack Query, Lucia Auth]
|
|
57
|
+
|
|
58
|
+
**技術紅線** (禁用的技術/方案):
|
|
59
|
+
- [例：不用 jQuery；不用 CSS-in-JS]
|
|
60
|
+
|
|
61
|
+
---
|
|
62
|
+
|
|
63
|
+
## 工程規範
|
|
64
|
+
|
|
65
|
+
> 團隊已有的工程約定。不確定的留空，AI 會基於技術棧推薦合理預設值。
|
|
66
|
+
|
|
67
|
+
**倉庫形態**: [Monorepo (Turborepo/Nx/pnpm workspaces) / 單體倉庫]
|
|
68
|
+
**架構模式**: [例：MFA / FSD / Clean Architecture / 分層架構 / 無偏好（AI 推薦）]
|
|
69
|
+
**目錄結構**: [已有明確結構 → 簡述關鍵目錄 / 無（AI 基於架構模式生成）]
|
|
70
|
+
**分支策略**: [例：Trunk-based / Git Flow / GitHub Flow]
|
|
71
|
+
**Commit 規範**: [例：Conventional Commits (feat/fix/chore) / 自訂 → 簡述]
|
|
72
|
+
**測試偏好**: [例：Vitest / Jest / pytest / 無特殊要求]
|
|
73
|
+
|
|
74
|
+
---
|
|
75
|
+
|
|
76
|
+
## 已有資源與上下文
|
|
77
|
+
|
|
78
|
+
> AI 需要知道哪些東西已經存在——避免重複造輪子或做出衝突決策。
|
|
79
|
+
|
|
80
|
+
**專案起點**: [全新專案 / 基於已有程式碼庫（簡述現狀和技術債）]
|
|
81
|
+
**設計資產**: [Figma 連結 / 設計稿截圖 / 無（AI 自行設計）]
|
|
82
|
+
**品牌規範**: [已有 Logo/配色/字體 → 描述或附連結 / 無]
|
|
83
|
+
**已有 API/後端**: [介面文檔連結 / 簡述可用端點 / 無（需從零搭建）]
|
|
84
|
+
**第三方服務**: [已確定使用的服務，例：Auth0, Stripe, AWS S3, Resend...]
|
|
85
|
+
**現有資料**: [已有資料庫/資料源？格式？需要遷移？/ 無]
|
|
86
|
+
|
|
87
|
+
---
|
|
88
|
+
|
|
89
|
+
<!-- @slot:style -->
|
|
90
|
+
|
|
91
|
+
## 邊界與約束
|
|
92
|
+
|
|
93
|
+
**明確不做的事** (反目標):
|
|
94
|
+
- [例：本期不做國際化 / 不做行動端適配 / 不做付費功能]
|
|
95
|
+
|
|
96
|
+
**硬性約束**:
|
|
97
|
+
- **時間**: [例：4 周 MVP / 無硬性 deadline]
|
|
98
|
+
- **相容性**: [例：Chrome 90+ / Node 18+ / iOS 15+]
|
|
99
|
+
- **效能**: [例：首屏 < 2s / API P99 < 500ms / 無特殊要求]
|
|
100
|
+
- **合規/無障礙**: [例：WCAG 2.1 AA / GDPR / 無]
|
|
101
|
+
|
|
102
|
+
---
|
|
103
|
+
|
|
104
|
+
## 參考與靈感
|
|
105
|
+
|
|
106
|
+
| 參考專案 | 參考維度 |
|
|
107
|
+
|:---|:---|
|
|
108
|
+
| [例：Linear] | [互動體驗、任務管理邏輯] |
|
|
109
|
+
| | |
|
|
110
|
+
|
|
111
|
+
---
|
|
112
|
+
|
|
113
|
+
## 補充說明
|
|
114
|
+
|
|
115
|
+
> 任何上述未涵蓋的資訊：背景故事、特殊需求、已有決策的原因、團隊技術偏好等。
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
<!-- @tech:ui -->
|
|
2
|
+
**CSS/UI 方案**: [例：TailwindCSS + Shadcn/UI / Ant Design / 原生 CSS]
|
|
3
|
+
<!-- @end -->
|
|
4
|
+
|
|
5
|
+
<!-- @tech:data -->
|
|
6
|
+
**資料庫**: [例：PostgreSQL / MongoDB / SQLite]
|
|
7
|
+
**ORM / Query Builder**: [例：Prisma / Drizzle / TypeORM]
|
|
8
|
+
<!-- @end -->
|
|
9
|
+
|
|
10
|
+
<!-- @tech:api -->
|
|
11
|
+
**API 風格**: [例：RESTful / GraphQL / gRPC / tRPC]
|
|
12
|
+
<!-- @end -->
|
|
13
|
+
|
|
14
|
+
<!-- @tech:cli -->
|
|
15
|
+
**CLI 框架**: [例：cac / commander / clap (Rust) / cobra (Go)]
|
|
16
|
+
**分發方式**: [例：npm publish / GitHub Releases / 二進位]
|
|
17
|
+
<!-- @end -->
|
|
18
|
+
|
|
19
|
+
<!-- @tech:lib -->
|
|
20
|
+
**模組格式**: [例：ESM / CJS + ESM 雙出]
|
|
21
|
+
**目標平台**: [例：瀏覽器 + Node.js / 僅 Node.js]
|
|
22
|
+
**分發渠道**: [例：npm / PyPI / crates.io]
|
|
23
|
+
<!-- @end -->
|
|
24
|
+
|
|
25
|
+
<!-- @style:ui -->
|
|
26
|
+
## 風格與調性
|
|
27
|
+
|
|
28
|
+
**審美方向** (選一個最接近的，不確定就留空讓 AI 推薦):
|
|
29
|
+
<!-- 選一個填入，或寫 custom 並在下方描述 -->
|
|
30
|
+
<!-- saas-dark — 類似 Linear/Vercel/Raycast：深色背景、高對比、極簡、銳利邊緣 -->
|
|
31
|
+
<!-- saas-light — 類似 Notion/Stripe/GitHub：白底、細邊框、系統字體、呼吸感 -->
|
|
32
|
+
<!-- dashboard — 類似 Grafana/Datadog：資訊密集、卡片網格、資料優先 -->
|
|
33
|
+
<!-- marketing — 類似 Loom/Framer：大標題、漸層、視覺衝擊、敘事感 -->
|
|
34
|
+
<!-- mobile-app — 類似 Telegram/Bear：圓角大、間距寬、觸控友善 -->
|
|
35
|
+
<!-- editorial — 類似 Medium/Substack：排版優先、襯線字體、閱讀沉浸 -->
|
|
36
|
+
<!-- brutalist — 類似 Craigslist/HN：功能極簡、無裝飾、原始感 -->
|
|
37
|
+
<!-- custom — 在「自訂描述」中寫你想要的風格 -->
|
|
38
|
+
|
|
39
|
+
**審美方向**: [例：saas-dark / saas-light / dashboard / marketing / mobile-app / editorial / brutalist / custom]
|
|
40
|
+
**自訂描述**: [僅 custom 時填寫，例：「類似 Spotify 的深色 + 綠色強調 + 卡片式布局」]
|
|
41
|
+
|
|
42
|
+
**資訊密度**: [大留白/沉浸式 / 資訊密集/儀表板風格]
|
|
43
|
+
**動效偏好**: [輕微微互動 / 豐富動畫 / 無動畫]
|
|
44
|
+
|
|
45
|
+
### 視覺參考 (Visual Reference)
|
|
46
|
+
|
|
47
|
+
> 為 AI 提供審美輸入，直接影響 `ui_concept.html` 的視覺品質。
|
|
48
|
+
> 以下任填一項即有效，填得越多 AI 越能還原你的期望風格。
|
|
49
|
+
|
|
50
|
+
**競品/靈感截圖**: [可貼上圖片 / Figma 連結 / URL]
|
|
51
|
+
**品牌色板**: [主色 Hex / 漸層描述 / 無（AI 基於審美方向生成）]
|
|
52
|
+
**字體偏好**: [例：JetBrains Mono + Space Grotesk / Playfair Display / 無偏好（AI 基於審美方向選擇）]
|
|
53
|
+
**圖示庫**: [例：Lucide / Heroicons / Tabler / 無偏好]
|
|
54
|
+
**禁用風格**: [例：禁漸層背景 / 禁卡通插畫 / 無限制]
|
|
55
|
+
<!-- @end -->
|
|
56
|
+
|
|
57
|
+
<!-- @style:cli -->
|
|
58
|
+
## 風格與調性
|
|
59
|
+
|
|
60
|
+
**輸出風格**: [簡潔單行 / 結構化彩色 / JSON 機器可讀]
|
|
61
|
+
**互動模式**: [純參數驅動 / 互動式提示 / 混合]
|
|
62
|
+
**錯誤展示**: [簡潔提示 / 詳細堆疊 / 分級(--verbose)]
|
|
63
|
+
<!-- @end -->
|
|
64
|
+
|
|
65
|
+
<!-- @style:api -->
|
|
66
|
+
## 風格與調性
|
|
67
|
+
|
|
68
|
+
**文檔方案**: [OpenAPI/Swagger / GraphQL Schema / 手寫文檔]
|
|
69
|
+
**錯誤回應格式**: [RFC 7807 / 自訂 JSON / GraphQL errors]
|
|
70
|
+
**版本策略**: [URL 路徑 /v1 / Header / 無版本控制]
|
|
71
|
+
<!-- @end -->
|
|
72
|
+
|
|
73
|
+
<!-- @tech:mobile -->
|
|
74
|
+
**行動端執行時**: [例：React Native 0.76 / Flutter 3 / Expo SDK 52]
|
|
75
|
+
**UI 元件庫**: [例：RN Paper / NativeWind / NativeBase / 原生元件]
|
|
76
|
+
**導航方案**: [例：React Navigation 7 / Expo Router / Go Router]
|
|
77
|
+
**原生能力**: [例：相機、推播通知、生物辨識——列出需要的]
|
|
78
|
+
**發佈渠道**: [例：App Store + Play Store / Expo Go / TestFlight]
|
|
79
|
+
**OTA 熱更新**: [例：Expo Updates / CodePush / 不需要]
|
|
80
|
+
<!-- @end -->
|
|
81
|
+
|
|
82
|
+
<!-- @tech:miniapp -->
|
|
83
|
+
**小程式平台**: [例：微信 / 支付寶 / 抖音 / uni-app（多端）]
|
|
84
|
+
**基礎庫版本**: [例：微信基礎庫 3.x / uni-app Vue3]
|
|
85
|
+
**UI 元件庫**: [例：Vant Weapp / TDesign MiniProgram / 原生元件]
|
|
86
|
+
**雲端開發**: [例：微信雲端開發 / 不使用]
|
|
87
|
+
**發佈**: [例：微信公眾平台發佈 / 審核週期約定]
|
|
88
|
+
<!-- @end -->
|
|
89
|
+
|
|
90
|
+
<!-- @style:miniapp -->
|
|
91
|
+
## 風格與調性
|
|
92
|
+
|
|
93
|
+
**視覺規範**: [遵循平台設計規範（微信 Weui / 支付寶 / 抖音）/ 自訂品牌風]
|
|
94
|
+
**色調傾向**: [品牌主色 / 跟隨平台預設 / 深色模式（需平台支援）]
|
|
95
|
+
**元件風格**: [原生元件為主 / 自訂元件 / 混合]
|
|
96
|
+
**動效偏好**: [系統預設頁面切換 / 自訂過渡 / 無特殊要求]
|
|
97
|
+
<!-- @end -->
|
|
98
|
+
|
|
99
|
+
<!-- @tech:desktop -->
|
|
100
|
+
**桌面執行時**: [例：Tauri 2 / Electron 33]
|
|
101
|
+
**IPC 通訊**: [例：Tauri invoke/command / Electron ipcMain+ipcRenderer]
|
|
102
|
+
**系統級能力**: [例：系統匣、全域快速鍵、檔案關聯、剪貼簿——列出需要的]
|
|
103
|
+
**打包發佈**: [例：tauri-bundler (.dmg/.msi/.deb) / electron-builder / GitHub Releases]
|
|
104
|
+
**自動更新**: [例：tauri-updater / electron-updater / 不需要]
|
|
105
|
+
<!-- @end -->
|
|
106
|
+
|
|
107
|
+
<!-- @tech:extension -->
|
|
108
|
+
**目標瀏覽器**: [例：Chrome + Edge / Firefox / 全平台]
|
|
109
|
+
**Manifest 版本**: [V3（推薦）/ V2（Firefox 需相容）]
|
|
110
|
+
**擴充功能結構**: [例：僅 Popup / Popup + Content Script / Background + Content Script + Popup]
|
|
111
|
+
**權限宣告**: [例：storage、tabs、activeTab——列出需要的]
|
|
112
|
+
**發佈渠道**: [例：Chrome Web Store / Firefox Add-ons / 私有分發]
|
|
113
|
+
<!-- @end -->
|
|
114
|
+
|
|
115
|
+
<!-- @tech:realtime -->
|
|
116
|
+
**即時傳輸方案**: [例：Socket.io / 原生 WebSocket / SSE / WebRTC]
|
|
117
|
+
**即時框架/託管**: [例：Ably / Pusher / Liveblocks / 自建]
|
|
118
|
+
**房間/頻道模型**: [例：按使用者 ID 訂閱 / 按文件 ID 房間 / 廣播]
|
|
119
|
+
**[?CRDT] 協作衝突解決**: [例：Yjs / Automerge / 不需要（僅廣播）]
|
|
120
|
+
**離線支援**: [例：離線佇列 + 重連同步 / 不需要]
|
|
121
|
+
<!-- @end -->
|
|
122
|
+
|
|
123
|
+
<!-- @tech:ai -->
|
|
124
|
+
**LLM 提供商**: [例：OpenAI GPT-4o / Anthropic Claude / Gemini / 本地 Ollama]
|
|
125
|
+
**AI 框架**: [例：Vercel AI SDK / LangChain / LlamaIndex / 無框架直調 API]
|
|
126
|
+
**Tool/Function Calling**: [例：需要（列出工具名稱）/ 不需要]
|
|
127
|
+
**Memory 方案**: [例：向量資料庫（pgvector/Pinecone）/ 滑動視窗歷史 / 無]
|
|
128
|
+
**[?MCP] MCP 協定**: [例：@modelcontextprotocol/sdk / 不需要]
|
|
129
|
+
**串流輸出**: [例：SSE 串流 / 批量回傳]
|
|
130
|
+
<!-- @end -->
|
|
131
|
+
|
|
132
|
+
<!-- @style:mobile -->
|
|
133
|
+
## 風格與調性
|
|
134
|
+
|
|
135
|
+
**視覺關鍵字**: [例：原生感、輕量、沉浸式]
|
|
136
|
+
**適配方案**: [例：響應式 dp/sp / 固定設計稿 375pt]
|
|
137
|
+
**深色模式**: [跟隨系統 / 僅淺色 / 僅深色]
|
|
138
|
+
**動效偏好**: [系統原生動效 / 自訂過渡 / 無特殊要求]
|
|
139
|
+
**無障礙**: [例：VoiceOver / TalkBack 支援 / 無特殊要求]
|
|
140
|
+
<!-- @end -->
|
|
141
|
+
|
|
142
|
+
<!-- @style:desktop -->
|
|
143
|
+
## 風格與調性
|
|
144
|
+
|
|
145
|
+
**視覺風格**: [例：原生系統風（Fluent/HIG）/ 自訂品牌風]
|
|
146
|
+
**視窗管理**: [例：單主視窗 + 系統匣 / 多視窗 / 全螢幕優先]
|
|
147
|
+
**深色模式**: [跟隨系統 / 固定深色 / 固定淺色]
|
|
148
|
+
**選單列/系統匣**: [例：選單列圖示 + 快速操作 / 僅系統匣圖示 / 不需要]
|
|
149
|
+
<!-- @end -->
|
|
150
|
+
|
|
151
|
+
<!-- @style:extension -->
|
|
152
|
+
## 風格與調性
|
|
153
|
+
|
|
154
|
+
**Popup 尺寸約定**: [例：320×480px / 400×600px / 自適應]
|
|
155
|
+
**視覺風格**: [例：極簡卡片 / 與目標網站融合 / 獨立品牌]
|
|
156
|
+
**Content Script 注入樣式**: [例：懸浮按鈕 / 側邊欄 / 高亮遮罩]
|
|
157
|
+
<!-- @end -->
|
|
158
|
+
|
|
159
|
+
<!-- @style:realtime -->
|
|
160
|
+
## 風格與調性
|
|
161
|
+
|
|
162
|
+
**協作感知 UI**: [例：即時游標、使用者頭像列表、輸入指示器——列出需要的]
|
|
163
|
+
**衝突/同步狀態展示**: [例：樂觀更新 + 靜默同步 / 明確顯示「正在同步」]
|
|
164
|
+
**離線提示**: [例：頂部 Banner 提示 / 靜默重連]
|
|
165
|
+
<!-- @end -->
|
|
166
|
+
|
|
167
|
+
<!-- @style:ai -->
|
|
168
|
+
## 風格與調性
|
|
169
|
+
|
|
170
|
+
**互動模式**: [對話型（聊天 UI）/ 工具型（命令+結果）/ 混合]
|
|
171
|
+
**串流輸出展示**: [例：逐字打印效果 / 分段載入 / 批量回傳]
|
|
172
|
+
**錯誤/降級提示**: [例：顯示 fallback 模型 / 重試按鈕 / 靜默降級]
|
|
173
|
+
<!-- @end -->
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
{
|
|
2
|
+
"scope": "[?Data]",
|
|
3
|
+
"models": [
|
|
4
|
+
{
|
|
5
|
+
"name": "[ModelName]",
|
|
6
|
+
"description": "[一句話說明]",
|
|
7
|
+
"fields": [
|
|
8
|
+
{
|
|
9
|
+
"name": "id",
|
|
10
|
+
"type": "string",
|
|
11
|
+
"modifiers": "PK",
|
|
12
|
+
"description": "唯一識別碼"
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
"name": "[fieldName]",
|
|
16
|
+
"type": "[type]",
|
|
17
|
+
"modifiers": "[nullable | unique | index | ...]",
|
|
18
|
+
"description": "[欄位說明]"
|
|
19
|
+
}
|
|
20
|
+
]
|
|
21
|
+
}
|
|
22
|
+
],
|
|
23
|
+
"relationships": [
|
|
24
|
+
{
|
|
25
|
+
"from": "[ModelA]",
|
|
26
|
+
"to": "[ModelB]",
|
|
27
|
+
"type": "[1:1 | 1:N | M:N | self-ref]",
|
|
28
|
+
"description": "[關係說明]"
|
|
29
|
+
}
|
|
30
|
+
]
|
|
31
|
+
}
|