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.
Files changed (115) hide show
  1. package/CHANGELOG.md +63 -0
  2. package/LICENSE +21 -0
  3. package/README.md +326 -0
  4. package/README.zh-CN.md +326 -0
  5. package/dist/index.d.ts +1 -0
  6. package/dist/index.js +46 -0
  7. package/dist/templates/en/briefs/_base.md +115 -0
  8. package/dist/templates/en/briefs/_modules.md +173 -0
  9. package/dist/templates/en/docs/global/data_snapshot.json +31 -0
  10. package/dist/templates/en/docs/global/design_tokens.json +150 -0
  11. package/dist/templates/en/docs/global/dictionary.json +35 -0
  12. package/dist/templates/en/docs/global/error_codes.json +19 -0
  13. package/dist/templates/en/docs/global/map.json +94 -0
  14. package/dist/templates/en/docs/global/roadmap.json +39 -0
  15. package/dist/templates/en/docs/global/vision.md +82 -0
  16. package/dist/templates/en/docs/prompts/audit.md +150 -0
  17. package/dist/templates/en/docs/prompts/code.md +160 -0
  18. package/dist/templates/en/docs/prompts/edit.md +87 -0
  19. package/dist/templates/en/docs/prompts/fix.md +86 -0
  20. package/dist/templates/en/docs/prompts/help.md +69 -0
  21. package/dist/templates/en/docs/prompts/inherit.md +270 -0
  22. package/dist/templates/en/docs/prompts/map.md +131 -0
  23. package/dist/templates/en/docs/prompts/plan.md +252 -0
  24. package/dist/templates/en/docs/prompts/remove.md +162 -0
  25. package/dist/templates/en/docs/prompts/revise.md +160 -0
  26. package/dist/templates/en/docs/prompts/scope.md +198 -0
  27. package/dist/templates/en/docs/prompts/start.md +258 -0
  28. package/dist/templates/en/docs/templates/plan.template.json +113 -0
  29. package/dist/templates/en/docs/templates/scope-brief.template.md +58 -0
  30. package/dist/templates/en/docs/templates/spec.template.md +51 -0
  31. package/dist/templates/en/docs/templates/ui.template.md +51 -0
  32. package/dist/templates/en/rules/00_system.md +123 -0
  33. package/dist/templates/en/rules/01_workflow.md +93 -0
  34. package/dist/templates/en/rules/02_tech_stack.md +197 -0
  35. package/dist/templates/en/rules/03_data_governance.md +102 -0
  36. package/dist/templates/en/rules/04_cli_tools.md +50 -0
  37. package/dist/templates/en/rules/90_custom_rules.md +22 -0
  38. package/dist/templates/en/rules/99_context_glue.md +53 -0
  39. package/dist/templates/en/skills/archi-decompose-roadmap/SKILL.md +292 -0
  40. package/dist/templates/en/skills/archi-interview-protocol/SKILL.md +86 -0
  41. package/dist/templates/en/skills/archi-plan-options/SKILL.md +364 -0
  42. package/dist/templates/en/skills/archi-ui-wireframe/SKILL.md +342 -0
  43. package/dist/templates/zh/briefs/_base.md +116 -0
  44. package/dist/templates/zh/briefs/_modules.md +173 -0
  45. package/dist/templates/zh/docs/global/data_snapshot.json +31 -0
  46. package/dist/templates/zh/docs/global/design_tokens.json +135 -0
  47. package/dist/templates/zh/docs/global/dictionary.json +35 -0
  48. package/dist/templates/zh/docs/global/error_codes.json +19 -0
  49. package/dist/templates/zh/docs/global/map.json +94 -0
  50. package/dist/templates/zh/docs/global/roadmap.json +39 -0
  51. package/dist/templates/zh/docs/global/vision.md +82 -0
  52. package/dist/templates/zh/docs/prompts/audit.md +150 -0
  53. package/dist/templates/zh/docs/prompts/code.md +160 -0
  54. package/dist/templates/zh/docs/prompts/edit.md +87 -0
  55. package/dist/templates/zh/docs/prompts/fix.md +86 -0
  56. package/dist/templates/zh/docs/prompts/help.md +69 -0
  57. package/dist/templates/zh/docs/prompts/inherit.md +270 -0
  58. package/dist/templates/zh/docs/prompts/map.md +131 -0
  59. package/dist/templates/zh/docs/prompts/plan.md +253 -0
  60. package/dist/templates/zh/docs/prompts/remove.md +162 -0
  61. package/dist/templates/zh/docs/prompts/revise.md +160 -0
  62. package/dist/templates/zh/docs/prompts/scope.md +198 -0
  63. package/dist/templates/zh/docs/prompts/start.md +258 -0
  64. package/dist/templates/zh/docs/templates/plan.template.json +88 -0
  65. package/dist/templates/zh/docs/templates/scope-brief.template.md +58 -0
  66. package/dist/templates/zh/docs/templates/spec.template.md +51 -0
  67. package/dist/templates/zh/docs/templates/ui.template.md +51 -0
  68. package/dist/templates/zh/rules/00_system.md +123 -0
  69. package/dist/templates/zh/rules/01_workflow.md +93 -0
  70. package/dist/templates/zh/rules/02_tech_stack.md +192 -0
  71. package/dist/templates/zh/rules/03_data_governance.md +102 -0
  72. package/dist/templates/zh/rules/04_cli_tools.md +50 -0
  73. package/dist/templates/zh/rules/90_custom_rules.md +21 -0
  74. package/dist/templates/zh/rules/99_context_glue.md +53 -0
  75. package/dist/templates/zh/skills/archi-decompose-roadmap/SKILL.md +293 -0
  76. package/dist/templates/zh/skills/archi-interview-protocol/SKILL.md +86 -0
  77. package/dist/templates/zh/skills/archi-plan-options/SKILL.md +364 -0
  78. package/dist/templates/zh/skills/archi-ui-wireframe/SKILL.md +339 -0
  79. package/dist/templates/zh-Hant/briefs/_base.md +115 -0
  80. package/dist/templates/zh-Hant/briefs/_modules.md +173 -0
  81. package/dist/templates/zh-Hant/docs/global/data_snapshot.json +31 -0
  82. package/dist/templates/zh-Hant/docs/global/design_tokens.json +135 -0
  83. package/dist/templates/zh-Hant/docs/global/dictionary.json +35 -0
  84. package/dist/templates/zh-Hant/docs/global/error_codes.json +19 -0
  85. package/dist/templates/zh-Hant/docs/global/map.json +94 -0
  86. package/dist/templates/zh-Hant/docs/global/roadmap.json +39 -0
  87. package/dist/templates/zh-Hant/docs/global/vision.md +82 -0
  88. package/dist/templates/zh-Hant/docs/prompts/audit.md +150 -0
  89. package/dist/templates/zh-Hant/docs/prompts/code.md +160 -0
  90. package/dist/templates/zh-Hant/docs/prompts/edit.md +87 -0
  91. package/dist/templates/zh-Hant/docs/prompts/fix.md +86 -0
  92. package/dist/templates/zh-Hant/docs/prompts/help.md +69 -0
  93. package/dist/templates/zh-Hant/docs/prompts/inherit.md +270 -0
  94. package/dist/templates/zh-Hant/docs/prompts/map.md +131 -0
  95. package/dist/templates/zh-Hant/docs/prompts/plan.md +252 -0
  96. package/dist/templates/zh-Hant/docs/prompts/remove.md +162 -0
  97. package/dist/templates/zh-Hant/docs/prompts/revise.md +160 -0
  98. package/dist/templates/zh-Hant/docs/prompts/scope.md +198 -0
  99. package/dist/templates/zh-Hant/docs/prompts/start.md +258 -0
  100. package/dist/templates/zh-Hant/docs/templates/plan.template.json +88 -0
  101. package/dist/templates/zh-Hant/docs/templates/scope-brief.template.md +58 -0
  102. package/dist/templates/zh-Hant/docs/templates/spec.template.md +51 -0
  103. package/dist/templates/zh-Hant/docs/templates/ui.template.md +51 -0
  104. package/dist/templates/zh-Hant/rules/00_system.md +123 -0
  105. package/dist/templates/zh-Hant/rules/01_workflow.md +93 -0
  106. package/dist/templates/zh-Hant/rules/02_tech_stack.md +192 -0
  107. package/dist/templates/zh-Hant/rules/03_data_governance.md +102 -0
  108. package/dist/templates/zh-Hant/rules/04_cli_tools.md +50 -0
  109. package/dist/templates/zh-Hant/rules/90_custom_rules.md +21 -0
  110. package/dist/templates/zh-Hant/rules/99_context_glue.md +53 -0
  111. package/dist/templates/zh-Hant/skills/archi-decompose-roadmap/SKILL.md +293 -0
  112. package/dist/templates/zh-Hant/skills/archi-interview-protocol/SKILL.md +86 -0
  113. package/dist/templates/zh-Hant/skills/archi-plan-options/SKILL.md +364 -0
  114. package/dist/templates/zh-Hant/skills/archi-ui-wireframe/SKILL.md +337 -0
  115. package/package.json +85 -0
@@ -0,0 +1,337 @@
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
+ <header class="wf-topbar">...</header>
93
+ <main class="wf-content" style="flex:1; overflow:auto;">
94
+ <!-- 每個畫面一個 <section class="wf-screen" id="S-XX" data-states="default,loading,empty,error"> -->
95
+ <!-- 每個狀態一個 <div class="wf-state" data-state="default"> -->
96
+ </main>
97
+ <footer class="wf-ctrl-bar">
98
+ <div class="ctrl-group">
99
+ <span class="ctrl-lbl">STATE</span>
100
+ </div>
101
+ <div class="wf-file-label">Low-fi Wireframe · [專案名]</div>
102
+ <div class="ctrl-group">
103
+ <span class="ctrl-lbl">PAGE</span>
104
+ </div>
105
+ </footer>
106
+ </body>
107
+ </html>
108
+ ```
109
+
110
+ **元素標注規範** (`data-el` 屬性):
111
+ - 每個可互動元素或語義區塊須加 `data-el="[使用者語言描述]"` 屬性
112
+ - 標注語言 = Brief 的主語言(繁中專案用繁中標注,英文專案用英文)
113
+ - 標注在滑鼠懸停時透過 CSS `::before` 顯示,預設隱藏
114
+ - 父元素懸停時,子元素標注透過 `:has([data-el]:hover)::before { opacity:0 }` 自動隱藏
115
+
116
+ **互動規範** (純 CSS + 少量 JS,無外部依賴):
117
+ - 頁面切換: 點擊 PAGE pills → 切換 `.wf-screen` 的 `display`;JS 同步更新 STATE pills
118
+ - 狀態切換: 點擊 STATE pills → 在當前畫面內切換 `.wf-state` 的 `display`
119
+ - 激活樣式: `.pill.on-page` / `.pill.on-state` → `background:#444; color:#fff`
120
+ - 控制列必須為線框圖風格(灰度、uppercase label、dashed border-top),禁用彩色
121
+
122
+ **線框圖內容規範** (Content Wireframe — 有內容感的灰度圖):
123
+ - 全部灰度,禁用品牌色(著色在 Phase 2 完成)
124
+ - **禁用純灰色矩形佔位**——改為真實感佔位內容,讓使用者能真實感受布局是否合理:
125
+
126
+ | 元素型別 | 規範 |
127
+ |:---|:---|
128
+ | 標題/導航文字 | 用真實業務名稱(來自 roadmap task title),如「工作台」「專案列表」「設定」 |
129
+ | 按鈕 | 寫具體操作文字,如「建立專案」「立即登入」「儲存變更」,禁寫「[按鈕]」 |
130
+ | 輸入框 | 寫 placeholder 文字,如「搜尋專案名稱…」「輸入電子郵件地址」 |
131
+ | 列表/表格 | 至少生成 3-4 行示例資料(用專案領域的真實感假資料,如使用者名稱、專案名、日期) |
132
+ | 圖表/圖片區域 | 用帶標注的矩形,但標注寫實際圖表類型,如「折線圖:過去 7 天訪問量」而非「[圖表]」 |
133
+ | 空狀態 | 寫具體的空狀態文案,如「還沒有專案,點擊「建立專案」開始」 |
134
+ | 錯誤狀態 | 寫具體錯誤文案,如「網路連線失敗,請檢查後重試」 |
135
+
136
+ - 字號須有層級:頁面標題大(20-24px)→ 區塊標題中(16px)→ 正文小(14px)→ 輔助文字更小(12px)
137
+ - 間距須呼吸:元件間距 > 元素間距 > 文字行距(不要全部堆在一起)
138
+ - 每個畫面須涵蓋其 Roadmap 任務的所有核心操作入口
139
+
140
+ 5. **輸出 Gate**:
141
+
142
+ 5. **同步生成 AI 索引** — 寫入 `[[__DOCS_DIR__]]/global/ui_context.md`:
143
+
144
+ 根據步驟 2 的畫面規劃,提取結構化導航索引(AI 讀取 UI 資訊的唯一入口):
145
+
146
+ ```markdown
147
+ # UI Context
148
+ > 平台: [平台類型] | 階段: Phase 1 線框圖(Phase 2 著色後更新)
149
+ > 更新: YYYY-MM-DD | 由 archi-ui-wireframe Skill 生成,禁手動修改
150
+
151
+ ## 畫面索引
152
+ | ID | 名稱 | 路由 | 狀態 |
153
+ |:---|:---|:---|:---|
154
+ | S-01 | [名稱] | [路由] | default, loading, ... |
155
+
156
+ ## 導航關係
157
+ S-XX →([觸發條件])→ S-YY
158
+
159
+ ## 全域共享元件
160
+ | 元件 | 出現畫面 |
161
+ |:---|:---|
162
+ | [元件名] | S-XX, S-YY |
163
+
164
+ ## 畫面結構摘要
165
+ > Phase 1 由線框圖 data-el 提取;Phase 2 著色後刷新為最終布局結構。
166
+ > 撰寫 ui.md Section 2 須與本節對齊,禁脫離已確認布局自創結構。
167
+
168
+ ### S-XX · [畫面名]
169
+ **布局**: [如「置中單欄 max-w-400px」或「左側邊欄 240px + 右內容區」]
170
+ **狀態**: default([核心操作入口])| loading(骨架畫面)| empty / error(如有)
171
+ **關鍵區域**: [data-el 提取的語義區塊+可互動元素,如:頂部導覽列、主表單區、送出按鈕、錯誤提示區]
172
+ ```
173
+
174
+ > `ui_context.md` 是所有 AI 命令讀取 UI 結構資訊的唯一入口;`ui_concept.html` 僅供人類瀏覽器預覽。
175
+
176
+ 6. **輸出 Gate**:
177
+
178
+ 輸出線框圖後,展示畫面覆蓋摘要:
179
+ ```
180
+ ### ui_concept.html 已生成(Phase 1 線框圖)
181
+ ### ui_context.md 已同步生成(AI 畫面索引)
182
+
183
+ **畫面覆蓋** (共 N 個畫面):
184
+ | 畫面 | 名稱 | 狀態數 |
185
+ |:---|:---|:---|
186
+ | S-01 | [畫面名] | N |
187
+ | ... | | |
188
+
189
+ **導航結構**: [描述]
190
+ **平台適配**: [Web Desktop 1280px / Mobile 390px / ...]
191
+
192
+ > 在瀏覽器開啟 `[[__DOCS_DIR__]]/global/ui_concept.html` 確認資訊架構。
193
+ > 回覆 **OK** 進入 Phase 2 視覺著色;或描述需要調整的畫面/布局。
194
+ ```
195
+
196
+ **Gate**: 使用者回覆 **OK** 後進入 Phase 2;未確認禁進行著色。
197
+
198
+ ---
199
+
200
+ ### Phase 1.5 — 線框圖精煉 (可選)
201
+
202
+ **Role**: 諮詢顧問
203
+ **Trigger**: 使用者回覆非 OK,含布局調整、畫面增減、導航改動。
204
+ **Action**: 融入回饋,局部更新 `ui_concept.html`(僅改動使用者指出的部分),同步更新 `ui_context.md`(畫面索引與 `ui_concept.html` 保持一致),重新展示摘要,等待確認。禁全量重寫。
205
+
206
+ ---
207
+
208
+ ### Phase 2 — 視覺著色 (Hi-fi Coloring)
209
+
210
+ **Role**: 你是一個有強烈個人風格的視覺設計師。你不按套路出牌——你用感覺、質感和節奏來思考,而非元件和布局。你追求的不是「正確」,而是「讓人停下來看第二眼」。你的每一個決策都是刻意的:間距不是隨便給的,顏色不是預設選的,字體不是列表裡第一個。你同時擁有藝術家的直覺和工程師的精確。
211
+
212
+ **目標**: 將確認的線框圖著色為高保真原型,產出必須有辨識度——開啟就知道不是範本,而是為這個專案量身設計的。
213
+
214
+ **前置檢查** (著色前必須驗證):
215
+
216
+ | 欄位路徑 | 通過條件 | 阻塞處理 |
217
+ |:---|:---|:---|
218
+ | `aestheticDirection.preset` | 非空 | 警告(非阻塞)— AI 基於專案特徵推斷,在輸出中標注推斷結果 |
219
+ | `primitivePalette.brand` | 至少含 1 個非空顏色值 | 阻塞 — 提示使用者先填寫品牌色 |
220
+ | `semanticTokens.colors` | 至少含 `bg`/`surface`/`text` 語義映射 | 阻塞 — 提示使用者先定義基礎語義色 |
221
+ | `semanticTokens.typography` | 至少含 1 個字型族聲明 | 警告(非阻塞)— AI 基於審美方向選擇字體 |
222
+ | `motion.preference` | 非空 | 警告(非阻塞)— 預設 `subtle` |
223
+ | `illustration.iconLibrary` | 非空 | 警告(非阻塞)— 不引入圖示庫 |
224
+
225
+ > 遇到阻塞項須立即停止並輸出缺失欄位清單,等待使用者補全後再重跑。
226
+
227
+ **Action**:
228
+
229
+ 1. **讀取視覺規格**:
230
+ - `design_tokens.json` → 完整讀取:
231
+ - `aestheticDirection` → 審美方向預設 + 自訂描述
232
+ - `primitivePalette` → CSS 變數定義
233
+ - `semanticTokens.colors` → 語義色映射
234
+ - `semanticTokens.typography` → 字體/字號
235
+ - `mode` → 主題模式(light/dark)
236
+ - `motion` → 動效時長、緩動曲線、模式名稱
237
+ - `illustration` → 圖示風格、圖示庫
238
+ - `layout` → 圓角/陰影/間距
239
+ - `vision.md` → 提取 Visual Reference 段落(品牌色、競品截圖描述、禁用風格)
240
+
241
+ 2. **審美方向 → 具體設計參數映射**:
242
+
243
+ 根據 `aestheticDirection.preset` 確定以下設計參數的基準值(Token 有顯式值時 Token 優先,Token 為空時用此基準):
244
+
245
+ | 預設 | 背景基調 | 圓角 | 陰影 | 字體策略 | 布局特徵 | 參照產品 |
246
+ |:---|:---|:---|:---|:---|:---|:---|
247
+ | `saas-dark` | 深色 (#0a-#15 範圍) | sm:4px md:8px | 幾乎無陰影,用邊框分層 | 無襯線,緊湊 | 高對比、銳利邊緣、緊湊間距 | Linear, Vercel, Raycast |
248
+ | `saas-light` | 白底 (#fafafa-#fff) | sm:6px md:12px | 輕柔 (0 1px 3px rgba(0,0,0,0.08)) | 系統字體或 sans-serif | 呼吸感、細邊框、留白 | Notion, Stripe, GitHub |
249
+ | `dashboard` | 深灰/深藍底 | sm:8px md:12px | 卡片浮層 (0 2px 8px) | 等寬數字 + sans-serif | 卡片網格、資訊密集、緊湊表格 | Grafana, Datadog |
250
+ | `marketing` | 漸層/大色塊 | lg:16px+ | 戲劇性 (0 8px 32px) | 大號展示字體 + 精緻正文字體 | 大標題、全寬 section、視覺敘事 | Loom, Framer |
251
+ | `mobile-app` | 柔和底色 | lg:16px xl:24px | 柔和擴散 (0 4px 16px) | 系統字體 -apple-system | 大觸控目標、寬間距、卡片式 | Telegram, Bear |
252
+ | `editorial` | 暖白/米色 | 幾乎無圓角 0-4px | 無或極淡 | 襯線展示 + 無襯線正文 | 窄欄、大行高、排版驅動 | Medium, Substack |
253
+ | `brutalist` | 純白或純黑 | 0px | 無 | 等寬或系統字體 | 無裝飾、密集、功能優先 | Craigslist, HN |
254
+
255
+ > `custom`: 讀取 `aestheticDirection.customDescription`,從描述中提取關鍵字映射到最近的預設,然後疊加自訂調整。
256
+
257
+ 3. **反 AI 審美黑名單** (CRITICAL — 著色時禁觸犯):
258
+
259
+ | 類別 | 禁止 | 替代 |
260
+ |:---|:---|:---|
261
+ | 字體 | Inter, Roboto, Arial 作為標題字體 | 選擇有辨識度的字體:展示字體用 characterful font(如 Cal Sans, General Sans, Satoshi, Outfit),正文可用系統字體 |
262
+ | 配色 | 紫色漸層白底(AI 預設審美的標誌) | 從 `aestheticDirection` 推導;配色須有主次——一個主色 + 銳利強調色 > 均勻分布的溫吞色板 |
263
+ | 布局 | 所有畫面同一種置中卡片布局 | 不同畫面須有布局差異:列表頁 vs 詳情頁 vs 表單頁各有特徵 |
264
+ | 圓角 | 所有元素統一 rounded-lg | 圓角須有層級:容器大、按鈕中、Badge 小(或按審美方向統一為 0/sm) |
265
+ | 陰影 | 千篇一律的 shadow-md | 陰影須匹配審美方向:dark 主題幾乎不用陰影;light 主題分層使用 |
266
+ | 動效 | 到處撒 transition-all | 聚焦高影響力時刻:頁面載入編排(交錯淡入)> 散佈的微互動 |
267
+ | 整體 | 每次生成都趨同 | 每個專案的著色必須因審美方向而異——開啟兩個不同專案的 ui_concept.html,必須一眼看出區別 |
268
+
269
+ 4. **著色規則** (在審美方向基準 + 反黑名單約束下執行):
270
+
271
+ | 著色維度 | 規則 |
272
+ |:---|:---|
273
+ | 顏色 | 用 `semanticTokens.colors` 語義 Token 替換灰度;品牌色來自 `primitivePalette.brand`;Token 空值按審美方向基準填充 |
274
+ | 字體 | `semanticTokens.typography` 有值時引入聲明字體;空值時按審美方向策略選擇(Google Fonts CDN),禁選黑名單字體 |
275
+ | 圓角/陰影 | 按 `layout.radius` / `layout.shadow`;空值時按審美方向基準填充 |
276
+ | 動效 | 按 `motion.patterns` 加 CSS transition/animation;優先編排頁面載入交錯淡入(staggered reveal via animation-delay) |
277
+ | 圖示 | 按 `illustration.iconLibrary` 引入對應 CDN;style=none 則不插圖 |
278
+ | 模式 | 若 `mode.support` 含 dark,添加 CSS `@media (prefers-color-scheme: dark)` + 切換按鈕 |
279
+ | 禁用 | 嚴格遵循 vision.md Visual Reference 中的「禁用風格」描述 |
280
+ | 空間 | 創造有呼吸感或有密度的排版(取決於審美方向),不做機械均勻間距 |
281
+ | 背景 | 禁純色大面積平鋪——按審美方向添加微妙紋理/漸層網格/噪點/幾何圖案 |
282
+
283
+ 5. **著色後驗證清單**:
284
+ - [ ] 所有畫面顏色來自 semanticTokens 或審美方向基準,無隨意硬編碼 Hex
285
+ - [ ] 所有動效時長來自 `motion.duration.*`,無魔法數字
286
+ - [ ] 頁面/狀態切換控制列保持線框圖灰度風格(不著色,保持偵錯工具屬性)
287
+ - [ ] `data-el` 標注完整保留
288
+ - [ ] 每個畫面的所有狀態(default/loading/empty/error)均已視覺化
289
+ - [ ] **反 AI 審美檢查**: 未使用黑名單字體、無紫色漸層白底、布局有差異性、圓角有層級
290
+ - [ ] **辨識度檢查**: 開啟 HTML,能一眼判斷這是哪個審美方向,而非通用範本
291
+
292
+ 6. **輸出**:
293
+ - 更新 `[[__DOCS_DIR__]]/global/ui_concept.html`(著色版覆蓋線框圖版)
294
+ - **同步刷新 `ui_context.md` 的「畫面結構摘要」**:
295
+ - 將階段標注從 `Phase 1 線框圖` 改為 `Phase 2 視覺著色`
296
+ - 對每個畫面,按最終 HTML 結構重新提取「布局」「關鍵區域」,確保摘要與著色後的 `ui_concept.html` 一致
297
+ - 畫面索引 / 導航關係 / 全域共享元件:若無變動則保持不動
298
+ - 輸出總結:
299
+ ```
300
+ ### ui_concept.html 已更新(Phase 2 視覺著色)
301
+ ### ui_context.md 已同步刷新(畫面結構摘要更新至 Phase 2)
302
+
303
+ **審美方向**: [preset 值] — [參照產品]
304
+ **應用的視覺規格**:
305
+ - 主色: [Primary Token 值]
306
+ - 字體: [展示字體 + 正文字體]
307
+ - 圓角: [sm/md/lg 值]
308
+ - 動效: [preference 值]
309
+ - 圖示: [iconLibrary] / style: [style]
310
+ - 主題: [default + support 列表]
311
+ - 背景處理: [紋理/漸層/純色 描述]
312
+
313
+ > 在瀏覽器開啟 `[[__DOCS_DIR__]]/global/ui_concept.html` 確認視覺效果。
314
+ > 後續執行 `/archi.plan <ID>` 時,AI 將讀取 `ui_context.md` 確定各任務的 UI 範圍。
315
+ ```
316
+
317
+ ---
318
+
319
+ ### Phase 2.5 — 局部重著色 (Incremental Re-coloring)
320
+
321
+ **Trigger**: Phase 2 已完成後,某畫面因 Plan 細化 / Edit / Revise 發生更新,需將新增內容著色至 hi-fi 風格。
322
+
323
+ **Role**: 視覺設計師
324
+
325
+ **Action**:
326
+
327
+ 1. 從呼叫方取得需重著色的畫面 ID 列表(如 `S-03`, `S-07`)。
328
+ 2. 僅處理指定畫面:
329
+ - 保留其 `.wf-screen#S-XX` 內的灰度線框新增部分
330
+ - 按 Phase 2 著色規則(`semanticTokens` / `motion` / `illustration`)對新增部分補色
331
+ - 其餘畫面內容不動
332
+ 3. [?新狀態] 若本次重著色包含新增狀態 → 同步更新 `ui_context.md` 對應畫面的狀態欄。
333
+ 4. 輸出變更摘要:
334
+ - `MODIFIED: ui_concept.html S-XX(局部重著色,新增 [N] 個狀態/區域)`
335
+ - `MODIFIED: ui_context.md S-XX(更新狀態列表)`(僅當有新增狀態時輸出)
336
+
337
+ > **禁止**: 局部重著色時禁全量重跑 Phase 2,禁改動未指定畫面的任何內容。
package/package.json ADDED
@@ -0,0 +1,85 @@
1
+ {
2
+ "name": "architext",
3
+ "version": "0.0.2",
4
+ "description": "The DDAD (Document-Driven AI Development) protocol and prompt scaffolder for AI-native engineering.",
5
+ "type": "module",
6
+ "scripts": {
7
+ "build": "tsup src/index.ts --format esm --dts",
8
+ "dev": "tsx src/index.ts",
9
+ "lint": "eslint . && prettier --check .",
10
+ "test": "vitest",
11
+ "test:ui": "vitest --ui",
12
+ "test:coverage": "vitest --coverage",
13
+ "test:run": "vitest run",
14
+ "prepublishOnly": "npm run build",
15
+ "prepare": "husky"
16
+ },
17
+ "lint-staged": {
18
+ "ignore": [
19
+ "website/.astro/**"
20
+ ],
21
+ "*.{js,ts,tsx,jsx}": [
22
+ "eslint --fix",
23
+ "prettier --write"
24
+ ],
25
+ "*.{json,md}": [
26
+ "prettier --write"
27
+ ]
28
+ },
29
+ "files": [
30
+ "dist",
31
+ "README.md",
32
+ "README.zh-CN.md",
33
+ "CHANGELOG.md",
34
+ "LICENSE"
35
+ ],
36
+ "bin": {
37
+ "architext": "./dist/index.js",
38
+ "archi": "./dist/index.js"
39
+ },
40
+ "keywords": [
41
+ "architext",
42
+ "ddad",
43
+ "document-driven",
44
+ "ai",
45
+ "llm",
46
+ "prompt-engineering",
47
+ "scaffold",
48
+ "cli",
49
+ "architecture",
50
+ "spec",
51
+ "template",
52
+ "code-generation"
53
+ ],
54
+ "author": "JiuNian3219 <qin0yu0lou@gmail.com>",
55
+ "license": "MIT",
56
+ "devDependencies": {
57
+ "@commitlint/cli": "^20.3.1",
58
+ "@commitlint/config-angular": "^20.3.1",
59
+ "@eslint/js": "^9.39.2",
60
+ "@types/fs-extra": "^11.0.4",
61
+ "@types/node": "^25.2.1",
62
+ "@vitest/coverage-v8": "^4.0.18",
63
+ "@vitest/ui": "^4.0.18",
64
+ "eslint": "^9.39.2",
65
+ "eslint-config-prettier": "^10.1.8",
66
+ "globals": "^17.1.0",
67
+ "husky": "^9.1.7",
68
+ "lint-staged": "^16.2.7",
69
+ "mock-fs": "^5.5.0",
70
+ "prettier": "^3.8.1",
71
+ "tsup": "^8.5.1",
72
+ "tsx": "^4.21.0",
73
+ "typescript": "^5.9.3",
74
+ "typescript-eslint": "^8.53.1",
75
+ "vitest": "^4.0.18"
76
+ },
77
+ "dependencies": {
78
+ "@clack/prompts": "^0.11.0",
79
+ "cac": "^6.7.14",
80
+ "chalk": "^5.6.2",
81
+ "fs-extra": "^11.3.3",
82
+ "picocolors": "^1.1.1",
83
+ "zod": "^4.3.6"
84
+ }
85
+ }