architext 0.0.4 → 0.0.6

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.
Files changed (84) hide show
  1. package/CHANGELOG.md +55 -1
  2. package/README.md +93 -14
  3. package/README.zh-CN.md +92 -14
  4. package/dist/index.js +53 -39
  5. package/dist/templates/en/briefs/_base.md +53 -13
  6. package/dist/templates/en/briefs/_modules.md +31 -4
  7. package/dist/templates/en/docs/global/error_memory.json +40 -0
  8. package/dist/templates/en/docs/global/map.json +46 -90
  9. package/dist/templates/en/{rules/04_cli_tools.md → docs/global/references/cli_reference.md} +6 -13
  10. package/dist/templates/en/{rules/02_tech_stack.md → docs/global/tech_stack.md} +7 -18
  11. package/dist/templates/en/docs/global/vision.md +1 -1
  12. package/dist/templates/en/docs/prompts/audit.md +80 -94
  13. package/dist/templates/en/docs/prompts/code.md +99 -89
  14. package/dist/templates/en/docs/prompts/edit.md +61 -51
  15. package/dist/templates/en/docs/prompts/fix.md +59 -43
  16. package/dist/templates/en/docs/prompts/help.md +23 -31
  17. package/dist/templates/en/docs/prompts/inherit.md +97 -117
  18. package/dist/templates/en/docs/prompts/map.md +48 -69
  19. package/dist/templates/en/docs/prompts/plan.md +141 -240
  20. package/dist/templates/en/docs/prompts/recover.md +19 -34
  21. package/dist/templates/en/docs/prompts/ref.md +43 -138
  22. package/dist/templates/en/docs/prompts/remove.md +63 -110
  23. package/dist/templates/en/docs/prompts/revise.md +71 -106
  24. package/dist/templates/en/docs/prompts/scope.md +78 -117
  25. package/dist/templates/en/docs/prompts/script.md +102 -0
  26. package/dist/templates/en/docs/prompts/start.md +98 -132
  27. package/dist/templates/en/docs/prompts/ui.md +113 -0
  28. package/dist/templates/en/docs/shared/ui-redlines.md +7 -0
  29. package/dist/templates/en/docs/templates/spec.template.md +1 -1
  30. package/dist/templates/en/docs/templates/ui.template.md +8 -8
  31. package/dist/templates/en/rules/00_system.md +268 -117
  32. package/dist/templates/en/rules/90_custom_rules.md +3 -1
  33. package/dist/templates/en/skills/archi-data-sync/SKILL.md +37 -23
  34. package/dist/templates/en/skills/archi-decompose-roadmap/SKILL.md +138 -240
  35. package/dist/templates/en/skills/archi-design-patterns/SKILL.md +6 -1
  36. package/dist/templates/en/skills/archi-feature-relations/SKILL.md +10 -6
  37. package/dist/templates/en/skills/archi-interview-protocol/SKILL.md +2 -2
  38. package/dist/templates/en/skills/archi-plan-options/SKILL.md +77 -301
  39. package/dist/templates/en/skills/archi-silent-audit/SKILL.md +24 -25
  40. package/dist/templates/en/skills/archi-ui-wireframe/SKILL.md +175 -305
  41. package/dist/templates/icon.svg +16 -0
  42. package/dist/templates/zh/briefs/_base.md +56 -17
  43. package/dist/templates/zh/briefs/_modules.md +28 -1
  44. package/dist/templates/zh/docs/global/error_memory.json +40 -0
  45. package/dist/templates/zh/docs/global/map.json +39 -109
  46. package/dist/templates/zh/{rules/04_cli_tools.md → docs/global/references/cli_reference.md} +0 -7
  47. package/dist/templates/zh/{rules/02_tech_stack.md → docs/global/tech_stack.md} +9 -20
  48. package/dist/templates/zh/docs/global/vision.md +1 -1
  49. package/dist/templates/zh/docs/prompts/audit.md +43 -57
  50. package/dist/templates/zh/docs/prompts/code.md +66 -56
  51. package/dist/templates/zh/docs/prompts/edit.md +52 -42
  52. package/dist/templates/zh/docs/prompts/fix.md +39 -29
  53. package/dist/templates/zh/docs/prompts/help.md +13 -21
  54. package/dist/templates/zh/docs/prompts/inherit.md +67 -86
  55. package/dist/templates/zh/docs/prompts/map.md +28 -50
  56. package/dist/templates/zh/docs/prompts/plan.md +100 -199
  57. package/dist/templates/zh/docs/prompts/recover.md +9 -24
  58. package/dist/templates/zh/docs/prompts/ref.md +11 -106
  59. package/dist/templates/zh/docs/prompts/remove.md +39 -74
  60. package/dist/templates/zh/docs/prompts/revise.md +47 -88
  61. package/dist/templates/zh/docs/prompts/scope.md +52 -91
  62. package/dist/templates/zh/docs/prompts/script.md +102 -0
  63. package/dist/templates/zh/docs/prompts/start.md +75 -110
  64. package/dist/templates/zh/docs/prompts/ui.md +113 -0
  65. package/dist/templates/zh/docs/shared/ui-redlines.md +7 -0
  66. package/dist/templates/zh/docs/templates/spec.template.md +1 -1
  67. package/dist/templates/zh/docs/templates/ui.template.md +8 -8
  68. package/dist/templates/zh/rules/00_system.md +252 -131
  69. package/dist/templates/zh/rules/90_custom_rules.md +2 -1
  70. package/dist/templates/zh/skills/archi-data-sync/SKILL.md +27 -13
  71. package/dist/templates/zh/skills/archi-decompose-roadmap/SKILL.md +133 -235
  72. package/dist/templates/zh/skills/archi-design-patterns/SKILL.md +6 -1
  73. package/dist/templates/zh/skills/archi-feature-relations/SKILL.md +6 -2
  74. package/dist/templates/zh/skills/archi-interview-protocol/SKILL.md +2 -2
  75. package/dist/templates/zh/skills/archi-plan-options/SKILL.md +77 -301
  76. package/dist/templates/zh/skills/archi-silent-audit/SKILL.md +4 -5
  77. package/dist/templates/zh/skills/archi-ui-wireframe/SKILL.md +174 -301
  78. package/package.json +3 -1
  79. package/dist/templates/en/rules/01_workflow.md +0 -93
  80. package/dist/templates/en/rules/03_data_governance.md +0 -102
  81. package/dist/templates/en/rules/99_context_glue.md +0 -53
  82. package/dist/templates/zh/rules/01_workflow.md +0 -94
  83. package/dist/templates/zh/rules/03_data_governance.md +0 -133
  84. package/dist/templates/zh/rules/99_context_glue.md +0 -53
package/dist/templates/zh/skills/archi-ui-wireframe/SKILL.md CHANGED
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  name: archi-ui-wireframe
3
- description: UI 概念设计专家。两阶段生成 ui_concept.html：第一阶段输出灰度线框图（确认信息架构与屏幕覆盖）；第二阶段按 design_tokens.json 视觉着色（颜色/字体/动效/图示）。产物是整个项目 UI 的单一视觉真相源，所有 Task 级 ui.md 均引用此文件定位屏幕范围。
3
+ description: Generate UI concept designs and wireframes as multi-file screens/ directory. Do not auto-trigger.
4
4
  ---
5
5
 
6
6
  # UI 概念设计
@@ -8,332 +8,205 @@ description: UI 概念设计专家。两阶段生成 ui_concept.html：第一阶
8
8
  ## 系统流程定位
9
9
 
10
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 → 写代码
11
+ /archi.ui → [本 Skill] → screens/ (多文件目录) → /archi.plan → ui.md (单任务范围)
12
+ /archi.ui (adopt模式) → [本 Skill] → screens/ (从代码逆向)
22
13
  ```
23
14
 
24
- > **Skill 的职责边界**：
25
- > - 负责：整个应用所有用户可见屏幕的视觉概念（信息架构、布局、状态、过渡）
26
- > - 不负责：Task 级接口契约（spec.md 管）、任务步骤（plan.json 管）、业务代码
15
+ > **产出物**：`screens/` 目录（`index.html` 导航枢纽 + `S-XX.html` 独立屏幕 + `_shared.css` 共享样式）+ `ui_context.md`（AI 索引）
27
16
 
28
17
  ---
29
18
 
30
19
  ## 调用模式
31
20
 
32
- | 模式 | 触发来源 | 操作范围 |
21
+ | 模式 | 触发 | 范围 |
33
22
  |:---|:---|:---|
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。
23
+ | 初次生成 | `/archi.ui` | 全量，所有屏幕 |
24
+ | 逆向采用 | `/archi.ui`（代码已存在时自动检测） | 从代码路由/组件逆向生成 |
25
+ | 重新生成 | 用户手动 | 全量重写（全局重设计） |
26
+ | 追加/修改 | `/archi.scope/edit` 或 `/archi.ui`（增量模式） | 仅新增/修改指定屏幕 |
27
+ | 局部更新 | `/archi.plan` 发现偏差 | 仅更新对应屏幕 |
42
28
 
43
29
  ---
44
30
 
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；未确认禁进行着色。
31
+ ## 生成协议
202
32
 
203
- ---
33
+ ### Step 1 — 读取上下文
204
34
 
205
- ### Phase 1.5 — 线框图精炼 (可选)
35
+ **Load**: vision.md（平台/用户/北极星）、roadmap.json（UI 任务 → 屏幕映射）、
36
+ design_tokens.json（审美/品牌色）、tech_stack.md（平台/导航框架）。
206
37
 
207
- **Role**: 咨询顾问
208
- **Trigger**: 用户回复非 OK，含布局调整、屏幕增减、导航改动。
209
- **Action**: 融入反馈，局部更新 `ui_concept.html`（仅改动用户指出的部分），同步更新 `ui_context.md`（屏幕索引与 `ui_concept.html` 保持一致），重新展示摘要，等待确认。禁全量重写。
38
+ ### Step 2 — 规划屏幕清单
210
39
 
211
- ---
40
+ 分配屏幕 ID（S-01, S-02...），映射到 Roadmap 任务。ID 永久不变。
41
+
42
+ | 屏幕 ID | 屏幕名 | 对应任务 | 状态列表 |
43
+ |:---|:---|:---|:---|
44
+ | S-01 | [名] | [任务ID] | default, loading, empty, error |
45
+
46
+ ### Step 3 — Tokens 检查 + 引导
47
+
48
+ check `design_tokens.json`:
49
+ - `aestheticDirection.preset` 为空 → 引导选择（saas-dark/saas-light/dashboard/marketing/mobile-app/editorial/brutalist）
50
+ - `primitivePalette.brand` 为空 → 引导填入 Hex
51
+ - 其他空值 → AI 推断，非阻塞
52
+
53
+ ### Step 4 — 生成多文件 HTML
54
+
55
+ **输出目录**：`[[__DOCS_DIR__]]/global/screens/`
56
+
57
+ #### 4.1 `_shared.css` — 共享样式
58
+
59
+ 从 `design_tokens.json` 提取 CSS 变量 + 基础布局 + 底部控制面板样式。所有 `S-XX.html` 通过 `<link href="_shared.css">` 引用。
212
60
 
213
- ### Phase 2 — 视觉着色 (Hi-fi Coloring)
61
+ **底部控制面板**：fixed 定位底部，浮动长条按钮（60×16px，位于面板顶部中央），▲/▼ 切换符号。三列布局：← 索引跳转 | 页面说明 | 状态按钮。收起时内容区 display:none，按钮保持可见。
214
62
 
215
- **Role**: 你是一个有强烈个人风格的视觉设计师。你不按套路出牌——你用感觉、质感和节奏来思考，而非组件和布局。你追求的不是"正确"，而是"让人停下来看第二眼"。你的每一个决策都是刻意的：间距不是随便给的，颜色不是默认选的，字体不是列表里第一个。你同时拥有艺术家的直觉和工程师的精确。
63
+ #### 4.2 `S-XX.html` — 独立屏幕文件
216
64
 
217
- **目标**: 将确认的线框图着色为高保真原型，产出必须有辨识度——打开就知道不是模板，而是为这个项目量身设计的。
65
+ 每个屏幕一个自包含 HTML 文件，结构：
218
66
 
219
- **前置检查** (着色前必须验证):
67
+ ```html
68
+ <body>
69
+ <header class="wf-topbar">...</header>
70
+ <main class="wf-content">...状态切换 div...</main>
220
71
 
221
- | 字段路径 | 通过条件 | 阻塞处理 |
72
+ <!-- 底部控制面板 -->
73
+ <aside class="wf-panel" id="wfPanel">
74
+ <button class="wf-panel-toggle" id="toggleBtn" onclick="togglePanel()">▼</button>
75
+ <div class="wf-panel-content">
76
+ <span>跳转</span> <a href="index.html">← 索引</a>
77
+ <span>页面</span> <span>[说明]</span>
78
+ <span>状态</span> <div class="wf-states">...</div>
79
+ </div>
80
+ </aside>
81
+
82
+ <script>
83
+ function togglePanel() {
84
+ var panel = document.getElementById('wfPanel');
85
+ var btn = document.getElementById('toggleBtn');
86
+ panel.classList.toggle('collapsed');
87
+ btn.textContent = panel.classList.contains('collapsed') ? '▲' : '▼';
88
+ }
89
+ </script>
90
+ </body>
91
+ ```
92
+
93
+ #### 4.3 `index.html` — 导航枢纽
94
+
95
+ 列出所有屏幕，每项链接到对应 `S-XX.html`：
96
+
97
+ ```html
98
+ <!DOCTYPE html>
99
+ <html lang="zh">
100
+ <head>
101
+ <meta charset="UTF-8">
102
+ <title>[项目名] — UI 概念设计</title>
103
+ <link rel="stylesheet" href="_shared.css">
104
+ </head>
105
+ <body>
106
+ <header class="wf-topbar">
107
+ <span>[项目名] — UI 概念设计索引</span>
108
+ </header>
109
+ <main class="wf-index">
110
+ <div class="wf-screen-card">
111
+ <a href="S-01.html">S-01 · [屏幕名]</a>
112
+ <p>[一句话描述]</p>
113
+ </div>
114
+ <!-- 更多屏幕卡片 -->
115
+ </main>
116
+ </body>
117
+ </html>
118
+ ```
119
+
120
+ **交互展示原则**（视觉反馈，非业务逻辑）：
121
+ - 按钮/链接/输入框画出，绑点击事件
122
+ - 点击触发**视觉反馈**（弹窗显隐、面板展开、状态切换），不触发**真实业务逻辑**
123
+ - **跨屏幕导航**：侧边栏、Tab、面包屑、卡片点击 → 链接到对应 `S-XX.html`
124
+ - **弹窗表单**：可聚焦、可点击，提交后不真处理数据
125
+ - **目标**：完整展示交互流程和各状态下的界面外观
126
+
127
+ **内置验证与自修复循环**（生成后自检，AI 修复直到全过）：
128
+
129
+ | 检查项 | 通过标准 | 失败修复动作 |
222
130
  |:---|:---|:---|
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
- ```
131
+ | **可点击性** | 所有带 `onclick` 的元素必须有 `cursor: pointer` | 添加 CSS `cursor: pointer` |
132
+ | **data-el 完整性** | 所有可交互元素必须有 `data-el` | 补充 `data-el` 描述 |
133
+ | **状态覆盖** | 每个屏幕必须包含 default/loading/empty（如适用）| 补充缺失的状态 div |
134
+ | **跨文件链接有效性** | `index.html` 链接指向存在的 `S-XX.html`；每个 `S-XX.html` 含返回索引链接 | 修复链接路径 |
135
+ | **反模式红线** | 无紫色渐变、无 emoji、非纯黑白 | 替换为符合审美方向的配色 |
136
+ | **间距一致性** | 使用 CSS 变量，无硬编码魔法数字 | 替换为 `var(--space-*)` |
137
+
138
+ **修复循环**（内部执行）：
139
+ ```
140
+ 生成 HTML → 运行检查 → 有失败项？
141
+ ├── 是 → 修复 → 重新生成 → 再次检查
142
+ └── 否 → 通过
143
+ ```
144
+
145
+ **检查方式**：扫描各 HTML 文件元素，核对检查项，输出到注释（`<!-- Check: 6/6 passed -->`），失败则修复。
146
+
147
+ [[INCLUDE: shared/ui-redlines.md]]
148
+
149
+ **内容填充**：
150
+ - 用真实业务名（来自 roadmap），禁 "标题" 占位
151
+ - 按钮写具体操作，禁 "[按钮]"
152
+ - 列表/表格至少 3-4 行真实感假数据
153
+ - 空状态写具体文案，禁 "暂无数据"
154
+
155
+ **自绘 SVG**（无图标库时）：stroke="currentColor"，stroke-width 1.5-2，fill="currentColor"，width="1em" height="1em"
156
+
157
+ ### Step 5 — 生成 AI 索引
158
+
159
+ **输出**：`[[__DOCS_DIR__]]/global/ui_context.md`
160
+
161
+ ```markdown
162
+ # UI Context
163
+ > 平台: [类型] | 生成: YYYY-MM-DD
164
+
165
+ ## 屏幕索引
166
+ | ID | 名称 | 路由 | 文件 | 状态 |
167
+ |:---|:---|:---|:---|:---|
168
+ | S-01 | [名] | [路由] | screens/S-01.html | default, loading, empty, error |
169
+
170
+ ## 导航关系
171
+ S-XX →（触发条件）→ S-YY
172
+
173
+ ## 屏幕结构摘要
174
+ ### S-XX · [屏幕名]
175
+ **布局**: [描述，如"左侧边栏 240px + 右内容区"]
176
+ **文件**: screens/S-XX.html
177
+ **状态**: default（核心操作）| loading（骨架屏）| empty | error
178
+ **关键区域**: [data-el 提取：顶部导航栏、主表单区、提交按钮、错误提示区]
179
+ ```
180
+
181
+ ### Step 6 — Output Gate
182
+
183
+ 输出摘要：审美方向及参照产品、屏幕覆盖清单（共 N 个）、视觉规格、导航结构描述。
184
+
185
+ **用户确认**：回复 **OK** 完成；非 OK 进入 Refinement。
186
+
187
+ ## 输出验证
188
+
189
+ □ `global/screens/index.html` 已生成且列出所有屏幕链接
190
+ □ `global/screens/_shared.css` 已生成且含 design_tokens CSS 变量
191
+ □ `global/screens/S-XX.html` 每个屏幕独立文件已生成
192
+ □ `global/ui_context.md` 已生成且屏幕索引含 `screens/S-XX.html` 路径
321
193
 
322
194
  ---
323
195
 
324
- ### Phase 2.5 — 局部重着色 (Incremental Re-coloring)
196
+ ## Refinement（用户反馈调整）
325
197
 
326
- **Trigger**: Phase 2 已完成后，某屏幕因 Plan 细化 / Edit / Revise 发生更新，需将新增内容着色至 hi-fi 风格。
198
+ 用户回复含布局/视觉调整 → 局部更新对应 `screens/S-XX.html` + 同步 `ui_context.md` → 重新展示摘要等待确认。
327
199
 
328
- **Role**: 视觉设计师
200
+ ---
201
+
202
+ ## Incremental Update（局部更新）
203
+
204
+ 输入屏幕 ID 列表 → 仅处理指定屏幕：保留已有文件，按当前视觉规格生成新增/更新的 `S-XX.html`；如有新状态，同步更新 `ui_context.md`。更新 `index.html` 导航列表。
329
205
 
330
- **Action**:
206
+ 输出：`MODIFIED: screens/S-XX.html`（逐文件标注）
207
+
208
+ ---
331
209
 
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] 个状态/区域）`
210
+ ## Adopt（逆向采用）
338
211
 
339
- > **禁止**: 局部重着色时禁全量重跑 Phase 2，禁改动未指定屏幕的任何内容。
212
+ 输入已有代码 + design_tokens.json → 提取：路由 → 屏幕清单，布局组件 → 导航结构，页面组件 → 核心区域和状态 → 按标准流程生成 `screens/` 目录 + ui_context.md。
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "architext",
3
- "version": "0.0.4",
3
+ "version": "0.0.6",
4
4
  "description": "The DDAD (Document-Driven AI Development) protocol and prompt scaffolder for AI-native engineering.",
5
5
  "type": "module",
6
6
  "scripts": {
@@ -59,6 +59,7 @@
59
59
  "@eslint/js": "^9.39.2",
60
60
  "@types/fs-extra": "^11.0.4",
61
61
  "@types/node": "^25.2.1",
62
+ "@types/node-notifier": "^8.0.5",
62
63
  "@vitest/coverage-v8": "^4.0.18",
63
64
  "@vitest/ui": "^4.0.18",
64
65
  "eslint": "^9.39.2",
@@ -79,6 +80,7 @@
79
80
  "cac": "^6.7.14",
80
81
  "chalk": "^5.6.2",
81
82
  "fs-extra": "^11.3.3",
83
+ "node-notifier": "^10.0.1",
82
84
  "picocolors": "^1.1.1",
83
85
  "zod": "^4.3.6"
84
86
  }
package/dist/templates/en/rules/01_workflow.md DELETED
@@ -1,93 +0,0 @@
1
- ---
2
- description: Command Dispatcher & Workflow Controller. Handles /archi.start, /archi.plan, and mode transitions between Discussion, Planning, and Implementation.
3
- globs: **/*
4
- applyTo: **/*
5
- alwaysApply: true
6
- ---
7
-
8
- # Workflow Dispatcher
9
-
10
- > **Role**: Mode Switcher. Default to "General Architect" mode, only load specific protocol when explicit command is detected.
11
-
12
- > ⛔ **STOP CHECK** — Self-check before each response; stop immediately and explain if any item is triggered:
13
- > | Violation | Correct Action |
14
- > |:---|:---|
15
- > | Received `/archi.*` command but started executing without loading the protocol file | Stop → Load protocol file first |
16
- > | User request involves behavior change but code was modified directly | Stop → Route to the appropriate command |
17
- > | Ran a Terminal Gate command without confirming working directory (see `04_cli_tools.md`) | Stop → Pass Working Directory Gate first |
18
-
19
- ## 1. Explicit Command Routing
20
-
21
- **Trigger**: When user input starts with `/archi.`, immediately load the corresponding protocol template.
22
-
23
- | Command | Target Template | Action |
24
- |:---|:---|:---|
25
- | `/archi.start` | `[[__DOCS_DIR__]]/prompts/start.md` | Load CPO → Project Initiation |
26
- | `/archi.inherit` | `[[__DOCS_DIR__]]/prompts/inherit.md` | Load Legacy Analyst → Reverse Engineering |
27
- | `/archi.scope` | `[[__DOCS_DIR__]]/prompts/scope.md` | Load Strategist → Requirement Decomposition |
28
- | `/archi.plan` | `[[__DOCS_DIR__]]/prompts/plan.md` | Load Planner → Deep Interview |
29
- | `/archi.edit` | `[[__DOCS_DIR__]]/prompts/edit.md` | Load Editor → Spec Modification |
30
- | `/archi.revise` | `[[__DOCS_DIR__]]/prompts/revise.md` | Load Chief Architect → Global Revision |
31
- | `/archi.code` | `[[__DOCS_DIR__]]/prompts/code.md` | Load Developer → Coding & Auditing |
32
- | `/archi.audit` | `[[__DOCS_DIR__]]/prompts/audit.md` | Load Chief Auditor → Deep Code Audit |
33
- | `/archi.fix` | `[[__DOCS_DIR__]]/prompts/fix.md` | Load Debugger → Diagnosis |
34
- | `/archi.map` | `[[__DOCS_DIR__]]/prompts/map.md` | Load Surveyor → Map Refresh |
35
- | `/archi.remove` | `[[__DOCS_DIR__]]/prompts/remove.md` | Load Surgeon → Task Decommission |
36
- | `/archi.help` | `[[__DOCS_DIR__]]/prompts/help.md` | Load Manual → Display Guide |
37
-
38
- > **Protocol Load Gate** (forbidden to skip; three steps must complete in order):
39
- > 1. **Read** target `.md` full text → if file not found, stop and output: `Protocol file not found, execution aborted`
40
- > 2. **Override** `00_system` partial settings
41
- > 3. **Execute** `<step_1>` — forbidden to execute any protocol content before step 1 is complete
42
-
43
- ---
44
-
45
- ## 2. Natural Language Passthrough
46
-
47
- **Trigger**: User input is not `/archi.` command text.
48
-
49
- ### 2.1 Intent Detection
50
-
51
- **Role**: Intelligent Dispatcher. Detect user intent and decide to execute directly or route to a command based on impact level.
52
-
53
- **Decision Criterion**: Does this change affect documented behavior (interfaces/logic/scenarios in spec.md, interactions/structure in ui.md, implementation steps in plan.json)?
54
-
55
- | Intent Type | Action |
56
- |:---|:---|
57
- | Pure conversation / code reading / architecture discussion | ✅ Answer directly, enhanced by base rules |
58
- | Trivial edits (typo/comments/formatting/log messages) | ✅ Execute directly |
59
- | Behavior change (logic/interface/type/UI) | 🔀 Route → `/archi.edit` + `/archi.code` |
60
- | Bug fix | 🔀 Route → `/archi.fix` |
61
- | New feature | 🔀 Route → `/archi.scope` or `/archi.plan` |
62
- | Large-scale refactoring | 🔀 Route → `/archi.revise` |
63
-
64
- ### 2.2 Guided Dispatch
65
-
66
- When routing (🔀), must:
67
- 1. Explain in one sentence why a command is needed (which document would be affected)
68
- 2. Recommend the specific command + parameters
69
- 3. Ask the user whether to proceed
70
-
71
- > ⛔ **Prohibited**: Modifying code first and then suggesting the command as an afterthought. Violations require reverting the change and re-routing.
72
-
73
- ### 2.3 Unmanaged Code
74
-
75
- When the target of modification is not registered in `map.json` and has no corresponding Task:
76
- - Inform the user that the module is not managed
77
- - Suggest `/archi.inherit` or `/archi.scope` to bring it under management
78
- - After user confirms "temporary adjustment", proceed with direct modification
79
-
80
- ### 2.4 Base Rules
81
-
82
- All scenarios (including routing and pure conversation) rely on the following base rules:
83
-
84
- | Layer | File | Role |
85
- |:---|:---|:---|
86
- | Core | `00_system.md` | Identity, core principles |
87
- | Tech | `02_tech_stack.md` | Tech red lines, coding standards |
88
- | Custom | `90_custom_rules.md` | Team-specific constraints |
89
- | Context | `99_context_glue.md` | Auto-associate context documents |
90
-
91
- **End of Dispatcher.**
92
-
93
- > Mandatory CLI execution rules: see `04_cli_tools.md`.