universal-dev-standards 5.1.0-beta.6 → 5.1.0
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/README.md +6 -0
- package/bin/uds.js +14 -0
- package/bundled/ai/standards/agent-communication-protocol.ai.yaml +34 -0
- package/bundled/ai/standards/anti-sycophancy-prompting.ai.yaml +111 -0
- package/bundled/ai/standards/capability-declaration.ai.yaml +113 -0
- package/bundled/ai/standards/circuit-breaker.ai.yaml +93 -0
- package/bundled/ai/standards/developer-memory.ai.yaml +13 -0
- package/bundled/ai/standards/dual-phase-output.ai.yaml +108 -0
- package/bundled/ai/standards/failure-source-taxonomy.ai.yaml +115 -0
- package/bundled/ai/standards/frontend-design-standards.ai.yaml +305 -0
- package/bundled/ai/standards/health-check-standards.ai.yaml +140 -0
- package/bundled/ai/standards/immutability-first.ai.yaml +112 -0
- package/bundled/ai/standards/model-selection.ai.yaml +111 -3
- package/bundled/ai/standards/packaging-standards.ai.yaml +142 -0
- package/bundled/ai/standards/recovery-recipe-registry.ai.yaml +200 -0
- package/bundled/ai/standards/retry-standards.ai.yaml +134 -0
- package/bundled/ai/standards/security-decision.ai.yaml +87 -0
- package/bundled/ai/standards/skill-standard-alignment-check.ai.yaml +119 -0
- package/bundled/ai/standards/standard-admission-criteria.ai.yaml +107 -0
- package/bundled/ai/standards/standard-lifecycle-management.ai.yaml +144 -0
- package/bundled/ai/standards/timeout-standards.ai.yaml +104 -0
- package/bundled/ai/standards/token-budget.ai.yaml +108 -0
- package/bundled/ai/standards/translation-lifecycle-standards.ai.yaml +145 -0
- package/bundled/core/anti-sycophancy-prompting.md +184 -0
- package/bundled/core/capability-declaration.md +59 -0
- package/bundled/core/circuit-breaker.md +58 -0
- package/bundled/core/developer-memory.md +29 -1
- package/bundled/core/dual-phase-output.md +56 -0
- package/bundled/core/failure-source-taxonomy.md +72 -0
- package/bundled/core/frontend-design-standards.md +474 -0
- package/bundled/core/health-check-standards.md +72 -0
- package/bundled/core/immutability-first.md +105 -0
- package/bundled/core/model-selection.md +80 -0
- package/bundled/core/packaging-standards.md +216 -0
- package/bundled/core/recovery-recipe-registry.md +69 -0
- package/bundled/core/retry-standards.md +62 -0
- package/bundled/core/security-decision.md +65 -0
- package/bundled/core/skill-standard-alignment-check.md +79 -0
- package/bundled/core/standard-admission-criteria.md +84 -0
- package/bundled/core/standard-lifecycle-management.md +94 -0
- package/bundled/core/timeout-standards.md +63 -0
- package/bundled/core/token-budget.md +58 -0
- package/bundled/core/translation-lifecycle-standards.md +162 -0
- package/bundled/locales/zh-CN/CHANGELOG.md +51 -3
- package/bundled/locales/zh-CN/README.md +1 -1
- package/bundled/locales/zh-CN/core/anti-hallucination.md +22 -3
- package/bundled/locales/zh-CN/core/anti-sycophancy-prompting.md +192 -0
- package/bundled/locales/zh-CN/core/capability-declaration.md +123 -0
- package/bundled/locales/zh-CN/core/circuit-breaker.md +106 -0
- package/bundled/locales/zh-CN/core/dual-phase-output.md +103 -0
- package/bundled/locales/zh-CN/core/failure-source-taxonomy.md +99 -0
- package/bundled/locales/zh-CN/core/frontend-design-standards.md +289 -0
- package/bundled/locales/zh-CN/core/health-check-standards.md +144 -0
- package/bundled/locales/zh-CN/core/immutability-first.md +96 -0
- package/bundled/locales/zh-CN/core/packaging-standards.md +224 -0
- package/bundled/locales/zh-CN/core/recovery-recipe-registry.md +146 -0
- package/bundled/locales/zh-CN/core/retry-standards.md +131 -0
- package/bundled/locales/zh-CN/core/security-decision.md +104 -0
- package/bundled/locales/zh-CN/core/skill-standard-alignment-check.md +112 -0
- package/bundled/locales/zh-CN/core/standard-admission-criteria.md +104 -0
- package/bundled/locales/zh-CN/core/standard-lifecycle-management.md +116 -0
- package/bundled/locales/zh-CN/core/timeout-standards.md +117 -0
- package/bundled/locales/zh-CN/core/token-budget.md +108 -0
- package/bundled/locales/zh-CN/core/translation-lifecycle-standards.md +159 -0
- package/bundled/locales/zh-TW/CHANGELOG.md +51 -3
- package/bundled/locales/zh-TW/README.md +1 -1
- package/bundled/locales/zh-TW/core/anti-sycophancy-prompting.md +192 -0
- package/bundled/locales/zh-TW/core/capability-declaration.md +111 -0
- package/bundled/locales/zh-TW/core/circuit-breaker.md +111 -0
- package/bundled/locales/zh-TW/core/dual-phase-output.md +132 -0
- package/bundled/locales/zh-TW/core/failure-source-taxonomy.md +146 -0
- package/bundled/locales/zh-TW/core/frontend-design-standards.md +460 -0
- package/bundled/locales/zh-TW/core/health-check-standards.md +144 -0
- package/bundled/locales/zh-TW/core/immutability-first.md +159 -0
- package/bundled/locales/zh-TW/core/packaging-standards.md +224 -0
- package/bundled/locales/zh-TW/core/recovery-recipe-registry.md +146 -0
- package/bundled/locales/zh-TW/core/retry-standards.md +140 -0
- package/bundled/locales/zh-TW/core/security-decision.md +120 -0
- package/bundled/locales/zh-TW/core/skill-standard-alignment-check.md +112 -0
- package/bundled/locales/zh-TW/core/standard-admission-criteria.md +104 -0
- package/bundled/locales/zh-TW/core/standard-lifecycle-management.md +116 -0
- package/bundled/locales/zh-TW/core/timeout-standards.md +117 -0
- package/bundled/locales/zh-TW/core/token-budget.md +143 -0
- package/bundled/locales/zh-TW/core/translation-lifecycle-standards.md +159 -0
- package/bundled/skills/e2e-assistant/SKILL.md +19 -5
- package/bundled/skills/testing-guide/SKILL.md +5 -0
- package/bundled/skills/testing-guide/test-skeleton-templates.md +316 -0
- package/package.json +2 -1
- package/src/commands/check.js +6 -0
- package/src/commands/config.js +9 -0
- package/src/commands/init.js +97 -46
- package/src/commands/mcp.js +26 -0
- package/src/commands/run-intent.js +66 -0
- package/src/commands/update.js +41 -4
- package/src/core/command-router.js +85 -0
- package/src/core/project-config.js +91 -0
- package/src/flows/init-flow.js +6 -1
- package/src/i18n/messages.js +6 -6
- package/src/mcp/__tests__/server.test.js +251 -0
- package/src/mcp/server.js +352 -0
- package/src/prompts/init.js +157 -1
- package/src/reconciler/actual-state-scanner.js +24 -0
- package/src/uninstallers/hook-uninstaller.js +32 -1
- package/src/utils/detect-self-adoption.js +173 -0
- package/src/utils/e2e-analyzer.js +88 -5
- package/src/utils/e2e-detector.js +73 -1
- package/src/utils/integration-generator.js +22 -3
- package/standards-registry.json +203 -4
|
@@ -0,0 +1,474 @@
|
|
|
1
|
+
# Frontend Design Standards
|
|
2
|
+
|
|
3
|
+
> **Language**: English | [繁體中文](../locales/zh-TW/core/frontend-design-standards.md)
|
|
4
|
+
|
|
5
|
+
**Version**: 1.0.0
|
|
6
|
+
**Last Updated**: 2026-04-13
|
|
7
|
+
**Applicability**: All projects with frontend user interfaces
|
|
8
|
+
**Scope**: universal
|
|
9
|
+
**References**: [DEC-029](https://github.com/VoltAgent/awesome-design-md) (awesome-design-md, MIT), DEC-030 (OpenAI Frontend Guide)
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
## Purpose
|
|
14
|
+
|
|
15
|
+
This standard defines a machine-readable frontend design specification format (DESIGN.md) for AI-assisted development. It establishes the 9-section DESIGN.md structure, mandatory design token vocabulary, UI hard constraints, and anti-pattern rejection rules.
|
|
16
|
+
|
|
17
|
+
The goal is to ensure AI agents produce consistent, high-quality UI across different runs by providing structured design constraints — not free-form style descriptions.
|
|
18
|
+
|
|
19
|
+
**Key Principles**:
|
|
20
|
+
- DESIGN.md as the single source of truth for design specifications
|
|
21
|
+
- Semantic token naming (framework-agnostic)
|
|
22
|
+
- Constraint-based prompting: fewer degrees of freedom = better UI quality
|
|
23
|
+
- Version-controlled alongside source code
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
## Table of Contents
|
|
28
|
+
|
|
29
|
+
1. [DESIGN.md Structure](#designmd-structure)
|
|
30
|
+
2. [Section 1: Visual Theme & Mood](#section-1-visual-theme--mood)
|
|
31
|
+
3. [Section 2: Color Palette](#section-2-color-palette)
|
|
32
|
+
4. [Section 3: Typography](#section-3-typography)
|
|
33
|
+
5. [Section 4: Component Styling](#section-4-component-styling)
|
|
34
|
+
6. [Section 5: Layout & Spacing](#section-5-layout--spacing)
|
|
35
|
+
7. [Section 6: Depth & Shadow System](#section-6-depth--shadow-system)
|
|
36
|
+
8. [Section 7: Design Guidelines & Anti-patterns](#section-7-design-guidelines--anti-patterns)
|
|
37
|
+
9. [Section 8: Responsive Behavior](#section-8-responsive-behavior)
|
|
38
|
+
10. [Section 9: Agent Prompt References](#section-9-agent-prompt-references)
|
|
39
|
+
11. [Semantic Color Tokens](#semantic-color-tokens)
|
|
40
|
+
12. [Typography Roles](#typography-roles)
|
|
41
|
+
13. [Spacing Scale](#spacing-scale)
|
|
42
|
+
14. [UI Hard Constraints](#ui-hard-constraints)
|
|
43
|
+
15. [Anti-patterns](#anti-patterns)
|
|
44
|
+
16. [DESIGN.md File Placement](#designmd-file-placement)
|
|
45
|
+
17. [Validation Checklist](#validation-checklist)
|
|
46
|
+
|
|
47
|
+
---
|
|
48
|
+
|
|
49
|
+
## DESIGN.md Structure
|
|
50
|
+
|
|
51
|
+
DESIGN.md is a Markdown file placed at the project root, serving as a machine-readable design specification. It uses structured Markdown that both humans and AI agents can read.
|
|
52
|
+
|
|
53
|
+
```
|
|
54
|
+
傳統方式:Figma 設計稿 → 人類開發者 → 程式碼
|
|
55
|
+
新方式:DESIGN.md → AI Agent → 程式碼
|
|
56
|
+
|
|
57
|
+
DESIGN.md = 給 AI 讀的設計規格書
|
|
58
|
+
- 人類可讀(Markdown 格式)
|
|
59
|
+
- AI 可消費(結構化純文字)
|
|
60
|
+
- 版本控制友善(放在 repo 根目錄)
|
|
61
|
+
- 與程式碼同步演進
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### Required Sections
|
|
65
|
+
|
|
66
|
+
A complete DESIGN.md must contain all 9 sections in order:
|
|
67
|
+
|
|
68
|
+
| # | Section Key | Required | Description |
|
|
69
|
+
|---|-------------|----------|-------------|
|
|
70
|
+
| 1 | `visual-theme` | Yes | Overall style and mood definition |
|
|
71
|
+
| 2 | `color-palette` | Yes | Semantic color tokens with hex values |
|
|
72
|
+
| 3 | `typography` | Yes | Font families and typographic scale roles |
|
|
73
|
+
| 4 | `component-styling` | Yes | Visual rules for UI components |
|
|
74
|
+
| 5 | `layout-spacing` | Yes | Spacing scale and grid definition |
|
|
75
|
+
| 6 | `depth-shadow` | Yes | Elevation and shadow system |
|
|
76
|
+
| 7 | `design-guidelines` | Yes | Design rules and anti-pattern list |
|
|
77
|
+
| 8 | `responsive` | Yes | Breakpoints and responsive rules |
|
|
78
|
+
| 9 | `agent-prompt-refs` | Yes | AI-consumable design intent summary |
|
|
79
|
+
|
|
80
|
+
---
|
|
81
|
+
|
|
82
|
+
## Section 1: Visual Theme & Mood
|
|
83
|
+
|
|
84
|
+
**Purpose**: Defines the overall aesthetic intent of the product. AI agents use this as a high-level constraint when generating UI.
|
|
85
|
+
|
|
86
|
+
**Required Fields**:
|
|
87
|
+
- `theme`: One-line style descriptor (e.g., "Minimal, professional, data-dense")
|
|
88
|
+
- `mood`: Emotional quality (e.g., "Calm, focused, trustworthy")
|
|
89
|
+
- `inspiration`: Reference products or design movements (e.g., "Linear, Stripe dashboard")
|
|
90
|
+
- `dark-mode`: Whether dark mode is primary/secondary/unsupported
|
|
91
|
+
|
|
92
|
+
**Example**:
|
|
93
|
+
```markdown
|
|
94
|
+
## Visual Theme & Mood
|
|
95
|
+
|
|
96
|
+
- **Theme**: Minimal, professional, data-dense
|
|
97
|
+
- **Mood**: Calm, focused, trustworthy
|
|
98
|
+
- **Inspiration**: Linear app, Stripe dashboard
|
|
99
|
+
- **Dark Mode**: Primary (dark-first design)
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
---
|
|
103
|
+
|
|
104
|
+
## Section 2: Color Palette
|
|
105
|
+
|
|
106
|
+
**Purpose**: Defines the complete semantic color system. All colors are expressed as named semantic tokens — not raw hex values used directly in code.
|
|
107
|
+
|
|
108
|
+
**Required**: All 5 semantic tokens (see [Semantic Color Tokens](#semantic-color-tokens))
|
|
109
|
+
|
|
110
|
+
**Optional**: Extended tokens for states (error, warning, success, info), borders, overlays.
|
|
111
|
+
|
|
112
|
+
**Example**:
|
|
113
|
+
```markdown
|
|
114
|
+
## Color Palette
|
|
115
|
+
|
|
116
|
+
### Semantic Tokens (Required)
|
|
117
|
+
- **background**: `#0A0A0A` — Page background
|
|
118
|
+
- **surface**: `#1A1A1A` — Cards, panels, modals
|
|
119
|
+
- **primary-text**: `#F5F5F5` — Main body text
|
|
120
|
+
- **muted-text**: `#888888` — Secondary text, placeholders
|
|
121
|
+
- **accent**: `#6366F1` — CTA buttons, links, highlights
|
|
122
|
+
|
|
123
|
+
### Extended Tokens (Optional)
|
|
124
|
+
- **error**: `#EF4444`
|
|
125
|
+
- **warning**: `#F59E0B`
|
|
126
|
+
- **success**: `#10B981`
|
|
127
|
+
- **border**: `#2A2A2A`
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
---
|
|
131
|
+
|
|
132
|
+
## Section 3: Typography
|
|
133
|
+
|
|
134
|
+
**Purpose**: Defines font families and typographic role hierarchy. Constrains AI to use at most 2 font families.
|
|
135
|
+
|
|
136
|
+
**Required**: All 4 typographic role definitions (see [Typography Roles](#typography-roles))
|
|
137
|
+
|
|
138
|
+
**Constraint**: Maximum 2 font families (display + body). Using 3 or more is an anti-pattern.
|
|
139
|
+
|
|
140
|
+
**Example**:
|
|
141
|
+
```markdown
|
|
142
|
+
## Typography
|
|
143
|
+
|
|
144
|
+
### Font Families (max 2)
|
|
145
|
+
- **Display font**: Inter (headings, display text)
|
|
146
|
+
- **Body font**: Inter (same family, different weights acceptable)
|
|
147
|
+
|
|
148
|
+
### Typographic Scale
|
|
149
|
+
- **display**: 48px+, weight 700, line-height 1.1 — Hero titles
|
|
150
|
+
- **headline**: 24–32px, weight 600, line-height 1.3 — Section headings
|
|
151
|
+
- **body**: 16px, weight 400, line-height 1.6 — Main content
|
|
152
|
+
- **caption**: 12–14px, weight 400, line-height 1.4 — Labels, metadata
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
---
|
|
156
|
+
|
|
157
|
+
## Section 4: Component Styling
|
|
158
|
+
|
|
159
|
+
**Purpose**: Defines visual rules for common UI components (buttons, cards, inputs, badges).
|
|
160
|
+
|
|
161
|
+
**Required Fields**:
|
|
162
|
+
- Border radius scale
|
|
163
|
+
- Button variants (primary, secondary, ghost)
|
|
164
|
+
- Input field styling
|
|
165
|
+
- Card/surface styling
|
|
166
|
+
|
|
167
|
+
**Example**:
|
|
168
|
+
```markdown
|
|
169
|
+
## Component Styling
|
|
170
|
+
|
|
171
|
+
### Border Radius
|
|
172
|
+
- **sm**: 4px (small elements, badges)
|
|
173
|
+
- **md**: 8px (buttons, inputs)
|
|
174
|
+
- **lg**: 12px (cards, modals)
|
|
175
|
+
- **full**: 9999px (pill badges, avatars)
|
|
176
|
+
|
|
177
|
+
### Buttons
|
|
178
|
+
- **Primary**: `accent` background, `#FFFFFF` text, `md` radius
|
|
179
|
+
- **Secondary**: `surface` background, `primary-text` text, `md` radius, 1px border
|
|
180
|
+
- **Ghost**: Transparent background, `accent` text, no border
|
|
181
|
+
|
|
182
|
+
### Inputs
|
|
183
|
+
- Background: `surface`
|
|
184
|
+
- Border: 1px solid `border`
|
|
185
|
+
- Focus: 2px ring in `accent`
|
|
186
|
+
- Radius: `md`
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
---
|
|
190
|
+
|
|
191
|
+
## Section 5: Layout & Spacing
|
|
192
|
+
|
|
193
|
+
**Purpose**: Defines the spacing scale and grid system. Based on an 8px base grid with 7 defined step values.
|
|
194
|
+
|
|
195
|
+
**Required**: All 7 spacing steps from the standard scale (see [Spacing Scale](#spacing-scale))
|
|
196
|
+
|
|
197
|
+
**Example**:
|
|
198
|
+
```markdown
|
|
199
|
+
## Layout & Spacing
|
|
200
|
+
|
|
201
|
+
### Spacing Scale (8px base)
|
|
202
|
+
- **space-1**: 4px
|
|
203
|
+
- **space-2**: 8px
|
|
204
|
+
- **space-3**: 16px
|
|
205
|
+
- **space-4**: 24px
|
|
206
|
+
- **space-5**: 32px
|
|
207
|
+
- **space-6**: 48px
|
|
208
|
+
- **space-8**: 64px
|
|
209
|
+
|
|
210
|
+
### Grid
|
|
211
|
+
- **Columns**: 12-column grid
|
|
212
|
+
- **Gutter**: space-4 (24px)
|
|
213
|
+
- **Max content width**: 1280px
|
|
214
|
+
- **Page padding**: space-4 (24px) on mobile, space-6 (48px) on desktop
|
|
215
|
+
```
|
|
216
|
+
|
|
217
|
+
---
|
|
218
|
+
|
|
219
|
+
## Section 6: Depth & Shadow System
|
|
220
|
+
|
|
221
|
+
**Purpose**: Defines elevation layers using shadows. Creates visual hierarchy without color reliance.
|
|
222
|
+
|
|
223
|
+
**Required Fields**: At least 3 elevation levels.
|
|
224
|
+
|
|
225
|
+
**Example**:
|
|
226
|
+
```markdown
|
|
227
|
+
## Depth & Shadow System
|
|
228
|
+
|
|
229
|
+
- **elevation-0**: No shadow (flat, on-surface elements)
|
|
230
|
+
- **elevation-1**: `0 1px 2px rgba(0,0,0,0.4)` (subtle, cards at rest)
|
|
231
|
+
- **elevation-2**: `0 4px 8px rgba(0,0,0,0.3)` (dropdowns, tooltips)
|
|
232
|
+
- **elevation-3**: `0 8px 24px rgba(0,0,0,0.5)` (modals, dialogs)
|
|
233
|
+
- **elevation-4**: `0 16px 48px rgba(0,0,0,0.6)` (full-screen overlays)
|
|
234
|
+
```
|
|
235
|
+
|
|
236
|
+
---
|
|
237
|
+
|
|
238
|
+
## Section 7: Design Guidelines & Anti-patterns
|
|
239
|
+
|
|
240
|
+
**Purpose**: Explicit rules and forbidden UI patterns for AI agents. This section is the primary mechanism for constraint-based prompting.
|
|
241
|
+
|
|
242
|
+
**Required Sub-sections**:
|
|
243
|
+
1. UI hard constraints (≥4 rules)
|
|
244
|
+
2. Anti-pattern list (≥5 forbidden patterns)
|
|
245
|
+
|
|
246
|
+
See [UI Hard Constraints](#ui-hard-constraints) and [Anti-patterns](#anti-patterns) for standard lists.
|
|
247
|
+
|
|
248
|
+
**Example**:
|
|
249
|
+
```markdown
|
|
250
|
+
## Design Guidelines & Anti-patterns
|
|
251
|
+
|
|
252
|
+
### UI Hard Constraints
|
|
253
|
+
- Maximum 1 H1 per page
|
|
254
|
+
- Maximum 6 sections per page
|
|
255
|
+
- Maximum 2 font families
|
|
256
|
+
- Maximum 1 accent color (never mix multiple accent colors)
|
|
257
|
+
- Information hierarchy: Hero → Support → Detail → CTA
|
|
258
|
+
|
|
259
|
+
### Anti-patterns (Forbidden)
|
|
260
|
+
- No floating badges (浮動徽章)
|
|
261
|
+
- No generic card layout as primary content structure
|
|
262
|
+
- No dashboard grid as homepage
|
|
263
|
+
- No more than 3 levels of visual nesting
|
|
264
|
+
- No color-only differentiation (always pair with icon or label)
|
|
265
|
+
- No decorative illustrations that don't serve information
|
|
266
|
+
- No competing CTAs of equal visual weight on the same screen
|
|
267
|
+
```
|
|
268
|
+
|
|
269
|
+
---
|
|
270
|
+
|
|
271
|
+
## Section 8: Responsive Behavior
|
|
272
|
+
|
|
273
|
+
**Purpose**: Defines breakpoints and responsive rules. Mobile-first approach is required.
|
|
274
|
+
|
|
275
|
+
**Required Fields**: At least 3 breakpoints (mobile, tablet, desktop).
|
|
276
|
+
|
|
277
|
+
**Example**:
|
|
278
|
+
```markdown
|
|
279
|
+
## Responsive Behavior
|
|
280
|
+
|
|
281
|
+
### Breakpoints (Mobile-first)
|
|
282
|
+
- **xs**: < 480px (small phones)
|
|
283
|
+
- **sm**: ≥ 768px (tablets)
|
|
284
|
+
- **md**: ≥ 1024px (laptops)
|
|
285
|
+
- **lg**: ≥ 1280px (desktops)
|
|
286
|
+
- **xl**: ≥ 1536px (wide screens)
|
|
287
|
+
|
|
288
|
+
### Rules
|
|
289
|
+
- Mobile-first CSS (min-width media queries)
|
|
290
|
+
- Single column on xs/sm, multi-column on md+
|
|
291
|
+
- Touch targets ≥ 44×44px on mobile
|
|
292
|
+
- Navigation collapses to hamburger/bottom bar on sm and below
|
|
293
|
+
```
|
|
294
|
+
|
|
295
|
+
---
|
|
296
|
+
|
|
297
|
+
## Section 9: Agent Prompt References
|
|
298
|
+
|
|
299
|
+
**Purpose**: A concise, AI-optimized summary of the design intent. AI agents should read this section first as a quick orientation before consulting other sections.
|
|
300
|
+
|
|
301
|
+
**Required Fields**:
|
|
302
|
+
- `style-summary`: 1–2 sentence design intent
|
|
303
|
+
- `key-constraints`: Bullet list of the most critical rules
|
|
304
|
+
- `tone`: How the design should "feel" to users
|
|
305
|
+
|
|
306
|
+
**Example**:
|
|
307
|
+
```markdown
|
|
308
|
+
## Agent Prompt References
|
|
309
|
+
|
|
310
|
+
### Style Summary
|
|
311
|
+
Dark, minimal, data-focused interface. Professional aesthetic prioritizing clarity over decoration.
|
|
312
|
+
|
|
313
|
+
### Key Constraints for AI Generation
|
|
314
|
+
- Always use semantic token names (background, surface, accent) — never raw hex in components
|
|
315
|
+
- Every page has exactly 1 H1; sections ≤ 6
|
|
316
|
+
- accent (#6366F1) is the only allowed emphasis color
|
|
317
|
+
- Prefer text over decorative components; restraint over complexity
|
|
318
|
+
|
|
319
|
+
### Tone
|
|
320
|
+
Calm, confident, technical. Similar to Linear or Vercel's dashboard aesthetic.
|
|
321
|
+
```
|
|
322
|
+
|
|
323
|
+
---
|
|
324
|
+
|
|
325
|
+
## Semantic Color Tokens
|
|
326
|
+
|
|
327
|
+
The following 5 semantic color tokens are **mandatory** in every DESIGN.md. They are framework-agnostic and must use these exact names.
|
|
328
|
+
|
|
329
|
+
| Token | Role | Maps To (Example) |
|
|
330
|
+
|-------|------|-------------------|
|
|
331
|
+
| `background` | Page/app background | `#0A0A0A` (dark) / `#FFFFFF` (light) |
|
|
332
|
+
| `surface` | Cards, panels, modals | `#1A1A1A` (dark) / `#F9FAFB` (light) |
|
|
333
|
+
| `primary-text` | Main body text | `#F5F5F5` (dark) / `#111827` (light) |
|
|
334
|
+
| `muted-text` | Secondary text, placeholders | `#888888` (dark) / `#6B7280` (light) |
|
|
335
|
+
| `accent` | CTA buttons, links, highlights | `#6366F1` (indigo example) |
|
|
336
|
+
|
|
337
|
+
**Rules**:
|
|
338
|
+
- Token names are kebab-case and must match exactly
|
|
339
|
+
- Every token must have a hex value defined
|
|
340
|
+
- `accent` must be a single color — multiple accent colors are forbidden
|
|
341
|
+
- Extended tokens (error, warning, success) are optional but must follow the same naming pattern
|
|
342
|
+
|
|
343
|
+
---
|
|
344
|
+
|
|
345
|
+
## Typography Roles
|
|
346
|
+
|
|
347
|
+
The following 4 typographic roles are **mandatory** in every DESIGN.md:
|
|
348
|
+
|
|
349
|
+
| Role | Size | Weight | Line Height | Usage |
|
|
350
|
+
|------|------|--------|-------------|-------|
|
|
351
|
+
| `display` | 48px+ | 700 | 1.1 | Hero titles, splash text |
|
|
352
|
+
| `headline` | 24–32px | 600 | 1.3 | Section headings, card titles |
|
|
353
|
+
| `body` | 16px | 400 | 1.6 | Paragraphs, main content |
|
|
354
|
+
| `caption` | 12–14px | 400 | 1.4 | Labels, metadata, helper text |
|
|
355
|
+
|
|
356
|
+
**Rules**:
|
|
357
|
+
- Role names are lowercase and must match exactly
|
|
358
|
+
- Maximum 2 font families across all 4 roles
|
|
359
|
+
- Font sizes are minimum values; responsive scaling is permitted
|
|
360
|
+
- `display` and `headline` may share one font family; `body` and `caption` share another (or the same)
|
|
361
|
+
|
|
362
|
+
---
|
|
363
|
+
|
|
364
|
+
## Spacing Scale
|
|
365
|
+
|
|
366
|
+
The standard spacing scale uses an 8px base grid with 7 named steps:
|
|
367
|
+
|
|
368
|
+
| Token | Value | Usage |
|
|
369
|
+
|-------|-------|-------|
|
|
370
|
+
| `space-1` | 4px | Icon padding, tight elements |
|
|
371
|
+
| `space-2` | 8px | Default element padding |
|
|
372
|
+
| `space-3` | 16px | Component internal spacing |
|
|
373
|
+
| `space-4` | 24px | Section padding, gutters |
|
|
374
|
+
| `space-5` | 32px | Between components |
|
|
375
|
+
| `space-6` | 48px | Between major sections |
|
|
376
|
+
| `space-8` | 64px | Page-level separation |
|
|
377
|
+
|
|
378
|
+
**Rules**:
|
|
379
|
+
- All spacing in code must use these step tokens, not arbitrary pixel values
|
|
380
|
+
- `space-7` is intentionally skipped (jump to space-8 = 64px maintains visual rhythm)
|
|
381
|
+
- Responsive adjustments must still use scale steps (e.g., mobile uses space-4, desktop uses space-6)
|
|
382
|
+
|
|
383
|
+
---
|
|
384
|
+
|
|
385
|
+
## UI Hard Constraints
|
|
386
|
+
|
|
387
|
+
These constraints apply to every UI generated under this standard. They implement constraint-based prompting: limiting degrees of freedom produces higher-quality, more consistent UI.
|
|
388
|
+
|
|
389
|
+
| Constraint | Rule | Rationale |
|
|
390
|
+
|-----------|------|-----------|
|
|
391
|
+
| H1 count | Maximum 1 H1 per page | Clear content hierarchy |
|
|
392
|
+
| Section count | Maximum 6 sections per page | Prevents cognitive overload |
|
|
393
|
+
| Font families | Maximum 2 font families | Visual coherence |
|
|
394
|
+
| Accent colors | Maximum 1 accent color | Prevents visual noise |
|
|
395
|
+
| Nesting depth | Maximum 3 levels of visual nesting | Readability |
|
|
396
|
+
| Information hierarchy | Hero → Support → Detail → CTA | Narrative structure |
|
|
397
|
+
| Touch targets | Minimum 44×44px on mobile | Accessibility |
|
|
398
|
+
|
|
399
|
+
---
|
|
400
|
+
|
|
401
|
+
## Anti-patterns
|
|
402
|
+
|
|
403
|
+
The following UI patterns are **forbidden**. AI agents must reject these patterns when generating frontend code or design specifications.
|
|
404
|
+
|
|
405
|
+
| Anti-pattern | Description | Preferred Alternative |
|
|
406
|
+
|-------------|-------------|----------------------|
|
|
407
|
+
| `floating-badge` | Badges that float disconnected from content | Inline labels or status indicators |
|
|
408
|
+
| `generic-card-layout` | Identical cards with no differentiation stacked as primary content | Varied content structures with clear hierarchy |
|
|
409
|
+
| `dashboard-grid-as-homepage` | Marketing homepage that looks like a data dashboard | Narrative homepage with Hero → Support → CTA structure |
|
|
410
|
+
| `competing-ctas` | Multiple CTAs of equal visual weight on the same screen | One primary CTA, one or zero secondary CTAs |
|
|
411
|
+
| `color-only-differentiation` | Using only color to convey state or category | Pair color with icon, pattern, or text label |
|
|
412
|
+
| `decorative-overload` | Illustrations or animations that don't convey information | Remove decorative elements; prefer functional visuals |
|
|
413
|
+
| `triple-nesting` | Visual hierarchy deeper than 3 levels | Flatten structure; use whitespace for separation |
|
|
414
|
+
| `rainbow-accents` | Multiple accent/highlight colors (purple CTA, orange badge, green tag) | Single accent color system |
|
|
415
|
+
|
|
416
|
+
Minimum required: at least 5 anti-patterns must be explicitly listed in every DESIGN.md's Section 7.
|
|
417
|
+
|
|
418
|
+
---
|
|
419
|
+
|
|
420
|
+
## DESIGN.md File Placement
|
|
421
|
+
|
|
422
|
+
DESIGN.md must be placed at the **project root directory**, at the same level as README.md.
|
|
423
|
+
|
|
424
|
+
```
|
|
425
|
+
my-project/
|
|
426
|
+
├── README.md ← project overview (for humans)
|
|
427
|
+
├── DESIGN.md ← design specification (for humans + AI agents)
|
|
428
|
+
├── CLAUDE.md ← AI assistant config (if applicable)
|
|
429
|
+
├── src/
|
|
430
|
+
│ └── ...
|
|
431
|
+
└── package.json
|
|
432
|
+
```
|
|
433
|
+
|
|
434
|
+
**Rules**:
|
|
435
|
+
- File name: `DESIGN.md` (exact casing)
|
|
436
|
+
- Location: Project root only (not in `docs/`, `src/`, or subdirectories)
|
|
437
|
+
- Format: Markdown with section headers using `##` level
|
|
438
|
+
- Version: Include a version field in the document header
|
|
439
|
+
- Update policy: DESIGN.md must be updated when design tokens change; treat it as code, not documentation
|
|
440
|
+
|
|
441
|
+
---
|
|
442
|
+
|
|
443
|
+
## Validation Checklist
|
|
444
|
+
|
|
445
|
+
Use this checklist to verify a DESIGN.md is compliant with this standard:
|
|
446
|
+
|
|
447
|
+
### Structure
|
|
448
|
+
- [ ] All 9 sections present in correct order
|
|
449
|
+
- [ ] File located at project root (same level as README.md)
|
|
450
|
+
- [ ] File named exactly `DESIGN.md`
|
|
451
|
+
|
|
452
|
+
### Color Palette (Section 2)
|
|
453
|
+
- [ ] All 5 semantic tokens defined: `background`, `surface`, `primary-text`, `muted-text`, `accent`
|
|
454
|
+
- [ ] All tokens have hex values
|
|
455
|
+
- [ ] Exactly 1 accent color defined
|
|
456
|
+
|
|
457
|
+
### Typography (Section 3)
|
|
458
|
+
- [ ] All 4 roles defined: `display`, `headline`, `body`, `caption`
|
|
459
|
+
- [ ] Maximum 2 font families used
|
|
460
|
+
- [ ] Font sizes within specified ranges
|
|
461
|
+
|
|
462
|
+
### Spacing (Section 5)
|
|
463
|
+
- [ ] All 7 spacing steps defined: space-1 through space-8 (no space-7)
|
|
464
|
+
- [ ] Values match the 8px base scale
|
|
465
|
+
|
|
466
|
+
### Design Guidelines (Section 7)
|
|
467
|
+
- [ ] At least 4 UI hard constraints listed
|
|
468
|
+
- [ ] At least 5 anti-patterns listed
|
|
469
|
+
- [ ] `floating-badge`, `generic-card-layout`, `dashboard-grid-as-homepage` are explicitly forbidden
|
|
470
|
+
|
|
471
|
+
### Agent Prompt References (Section 9)
|
|
472
|
+
- [ ] Style summary present (1–2 sentences)
|
|
473
|
+
- [ ] Key constraints bullet list present
|
|
474
|
+
- [ ] Tone defined
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
# Health Check Standards
|
|
2
|
+
|
|
3
|
+
> **Source**: XSPEC-067 | **Driven by**: DEC-043 Wave 1 Reliability Pack | **Status**: Trial (2026-04-17 ~ 2026-10-17)
|
|
4
|
+
|
|
5
|
+
## Overview
|
|
6
|
+
|
|
7
|
+
健康檢查標準 — 業界常見錯誤是把 liveness 和 readiness 混用(健康檢查檢查外部依賴導致連鎖重啟)。本標準明確三種 probe 語意分離、定義深度 health check 的檢查範圍(僅關鍵依賴)、並規範結構化 JSON 回應以便下游自動化處理。與 observability 整合為 RED metric 的 Error 來源之一。
|
|
8
|
+
|
|
9
|
+
## Key Principles
|
|
10
|
+
|
|
11
|
+
- **Liveness 不碰外部依賴**:liveness 失敗會造成 pod 重啟;若依賴 DB,DB 故障時會造成所有 pod 連鎖重啟
|
|
12
|
+
- **Readiness 僅檢關鍵依賴**:非關鍵依賴不納入,避免邊緣故障造成服務被下線
|
|
13
|
+
- **慢啟動用 startup probe**:啟動完成後交棒給 liveness
|
|
14
|
+
- **結構化 JSON 回應**:含 `status` / `dependencies` / `timestamp` / `version`
|
|
15
|
+
- **作為 observability signal**:連續 fail 觸發 incident
|
|
16
|
+
|
|
17
|
+
## Probe Types
|
|
18
|
+
|
|
19
|
+
| Probe | Endpoint | Checks | On Fail | Threshold |
|
|
20
|
+
|-------|----------|--------|---------|-----------|
|
|
21
|
+
| **liveness** | `GET /health/live` | process 可回應 HTTP、內部 event loop | 重啟 pod | 3 failures |
|
|
22
|
+
| **readiness** | `GET /health/ready` | 自身 API、DB ping(若必要)、關鍵下游 | 移出負載均衡(不重啟)| 3 failures |
|
|
23
|
+
| **startup** | `GET /health/startup` | 啟動過程所需資源就緒 | 重啟 pod(啟動超時)| 30 failures |
|
|
24
|
+
|
|
25
|
+
### Liveness Forbidden Checks
|
|
26
|
+
|
|
27
|
+
- DB 連線(DB 壞時 liveness 失敗 → pod 重啟 → 啟動更多 client → DB 更壞)
|
|
28
|
+
- 下游 API(會造成連鎖重啟)
|
|
29
|
+
- 消息佇列
|
|
30
|
+
|
|
31
|
+
## Depth Rules
|
|
32
|
+
|
|
33
|
+
- **Shallow (liveness)**: process 是否可回應,不碰任何外部依賴
|
|
34
|
+
- **Deep (readiness)**: 自身 API 路由、DB ping、關鍵下游 API ping(關鍵 = 沒有它服務就完全無法提供核心功能)
|
|
35
|
+
|
|
36
|
+
## Response Format
|
|
37
|
+
|
|
38
|
+
```json
|
|
39
|
+
{
|
|
40
|
+
"status": "healthy | degraded | unhealthy",
|
|
41
|
+
"timestamp": "2026-04-17T10:00:00Z",
|
|
42
|
+
"uptime_seconds": 3600,
|
|
43
|
+
"dependencies": {
|
|
44
|
+
"database": {"status": "healthy", "latency_ms": 5, "last_check": "..."},
|
|
45
|
+
"upstream_api": {"status": "healthy", "latency_ms": 42, "last_check": "..."}
|
|
46
|
+
},
|
|
47
|
+
"version": "1.2.3"
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
- HTTP 200 → healthy
|
|
52
|
+
- HTTP 503 → unhealthy(至少一個關鍵依賴失敗)
|
|
53
|
+
|
|
54
|
+
## Usage Examples
|
|
55
|
+
|
|
56
|
+
- **Scenario 1 — Liveness 不檢 DB**:DB 連線池耗盡,liveness 仍回 200(liveness 不檢 DB),避免所有 pod 重啟
|
|
57
|
+
- **Scenario 2 — Readiness 失敗**:關鍵下游 API 不可達,readiness 回 503,pod 移出 LB;process 不重啟
|
|
58
|
+
- **Scenario 3 — Startup → Liveness 交棒**:服務需 60s 預熱快取,startup probe 前 60s 持續回 503,預熱完成改由 liveness 接手
|
|
59
|
+
|
|
60
|
+
## Error Codes
|
|
61
|
+
|
|
62
|
+
- `HC-001` — `HEALTH_CHECK_FAILED`(關鍵依賴失敗)
|
|
63
|
+
- `HC-002` — `HEALTH_CHECK_TIMEOUT`(probe 本身超時)
|
|
64
|
+
- `HC-003` — `INVALID_DEPENDENCY_SET`(readiness 檢查了非關鍵依賴,設計違規)
|
|
65
|
+
|
|
66
|
+
## References
|
|
67
|
+
|
|
68
|
+
- AI-optimized: [ai/standards/health-check-standards.ai.yaml](../ai/standards/health-check-standards.ai.yaml)
|
|
69
|
+
- XSPEC-067: DEC-043 Wave 1 Reliability Pack 跨專案規格
|
|
70
|
+
- DEC-043: UDS 覆蓋完整性路線圖(驅動來源)
|
|
71
|
+
- Related: `deployment-standards`, `circuit-breaker`, observability-standards (XSPEC-063 規劃中)
|
|
72
|
+
- Industry: Kubernetes probes, Microsoft eShop health checks, Google SRE Book Ch.6
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
# Immutability-First Architecture Standard
|
|
2
|
+
|
|
3
|
+
> **Source**: XSPEC-044 | **Applies to**: TypeScript, concurrent systems
|
|
4
|
+
|
|
5
|
+
## Overview
|
|
6
|
+
|
|
7
|
+
Immutability-First is a system-level design principle that prevents race conditions in concurrent Agent environments. All data-flow interfaces (DTOs / Value Objects) must use `readonly` field declarations, array fields must use `ReadonlyArray<T>`, and object mutations must be performed via spread syntax to create new objects rather than modifying in place.
|
|
8
|
+
|
|
9
|
+
Without this discipline, concurrent Agent orchestration (e.g., `Promise.all` batch execution) risks unintended state sharing where one Agent's mutation silently affects another Agent's view of the same object.
|
|
10
|
+
|
|
11
|
+
## Rules
|
|
12
|
+
|
|
13
|
+
| Rule | Severity | Description |
|
|
14
|
+
|------|----------|-------------|
|
|
15
|
+
| **IMM-001** | required | DTO/Value Object fields must be `readonly` |
|
|
16
|
+
| **IMM-002** | required | Array fields must use `ReadonlyArray<T>`, not `T[]` |
|
|
17
|
+
| **IMM-003** | required | Mutations use spread syntax to create new objects |
|
|
18
|
+
| **IMM-004** | required | Objects crossing concurrency boundaries must be deeply immutable |
|
|
19
|
+
| **IMM-005** | recommended | Nested object fields wrapped with `Readonly<T>` |
|
|
20
|
+
|
|
21
|
+
## Examples
|
|
22
|
+
|
|
23
|
+
### IMM-001: DTO Fields readonly
|
|
24
|
+
|
|
25
|
+
```typescript
|
|
26
|
+
// ❌ Bad
|
|
27
|
+
interface TaskResult {
|
|
28
|
+
status: TaskStatus
|
|
29
|
+
cost_usd?: number
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
// ✅ Good
|
|
33
|
+
interface TaskResult {
|
|
34
|
+
readonly status: TaskStatus
|
|
35
|
+
readonly cost_usd?: number
|
|
36
|
+
}
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### IMM-002: ReadonlyArray for Array Fields
|
|
40
|
+
|
|
41
|
+
```typescript
|
|
42
|
+
// ❌ Bad
|
|
43
|
+
interface MemoryContext {
|
|
44
|
+
recentHistory: IterationRecord[] // push/splice can corrupt shared state
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
// ✅ Good
|
|
48
|
+
interface MemoryContext {
|
|
49
|
+
readonly recentHistory: ReadonlyArray<IterationRecord>
|
|
50
|
+
}
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### IMM-003: Spread Syntax for Mutations
|
|
54
|
+
|
|
55
|
+
```typescript
|
|
56
|
+
// ❌ Bad
|
|
57
|
+
options.sessionId = forkId // other holders see the change
|
|
58
|
+
|
|
59
|
+
// ✅ Good
|
|
60
|
+
const taskOptions = { ...options, sessionId: forkId }
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
### IMM-004: Deep Immutability at Concurrency Boundary
|
|
64
|
+
|
|
65
|
+
```typescript
|
|
66
|
+
// ✅ Good — each parallel task holds its own options snapshot
|
|
67
|
+
const batchResults = await Promise.all(
|
|
68
|
+
batch.map(task => {
|
|
69
|
+
const taskOptions = { ...baseOptions, sessionId: forkId }
|
|
70
|
+
return executeOneTask(task, adapter, taskOptions, ...)
|
|
71
|
+
})
|
|
72
|
+
)
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
### IMM-005: Readonly<T> for Nested Objects
|
|
76
|
+
|
|
77
|
+
```typescript
|
|
78
|
+
// ❌ Bad — metadata.score can still be mutated
|
|
79
|
+
interface PipelineMemoryEntry {
|
|
80
|
+
readonly metadata: { score?: number }
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
// ✅ Good
|
|
84
|
+
interface PipelineMemoryEntry {
|
|
85
|
+
readonly metadata: Readonly<{ score?: number; severity?: string }>
|
|
86
|
+
}
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
## When to Apply
|
|
90
|
+
|
|
91
|
+
- Designing new DTO / Value Object / Config interfaces
|
|
92
|
+
- Passing objects across concurrency boundaries
|
|
93
|
+
- Designing shared state between Agents
|
|
94
|
+
- Code Review: check interfaces for missing `readonly`
|
|
95
|
+
|
|
96
|
+
## Exceptions
|
|
97
|
+
|
|
98
|
+
- Builder Pattern mutable builders (returns immutable result after `build()`)
|
|
99
|
+
- Test fixture mutable construction steps (treated as immutable after creation)
|
|
100
|
+
- Performance-critical hot paths (requires explicit benchmark evidence)
|
|
101
|
+
|
|
102
|
+
## References
|
|
103
|
+
|
|
104
|
+
- AI-optimized: [ai/standards/immutability-first.ai.yaml](../ai/standards/immutability-first.ai.yaml)
|
|
105
|
+
- XSPEC-044: Cross-project specification
|