datawhalechina · horizonx-so · Aug 12, 2026 · Aug 12, 2026
diff --git a/docs/en/stage-3/core-skills/spec-coding/index.md b/docs/en/stage-3/core-skills/spec-coding/index.md
@@ -204,6 +204,8 @@ Version requirements, test framework, and documentation standards:
 - All API endpoints require JSDoc comments
 ```
 
+For interface-heavy features, the functional layer also needs constraints that make visual intent testable: design tokens, complete component states, responsive behavior, accessibility, motion, and production-readiness gates. The free, vendor-neutral [Vibe Coding UI Specification](https://horizonx.so/resources/vibe-coding-ui-specification), published by HorizonX, is one concrete field model; adapt it to the project rather than treating it as a required tool.
+
 ---
 
 ## 3. Practicing Spec Coding in Claude Code

diff --git a/docs/zh-cn/stage-3/core-skills/spec-coding/index.md b/docs/zh-cn/stage-3/core-skills/spec-coding/index.md
@@ -314,6 +314,8 @@ Spec 最容易失控的原因之一，是只写功能清单，没有写第一版
 
 :::
 
+对于界面密集型任务，还应在最小模板中补充设计 token、组件完整状态、响应式行为、可访问性、动效约束和上线验收。可以参考 [Vibe Coding UI Specification](https://horizonx.so/resources/vibe-coding-ui-specification) 的字段组织方式，再根据项目事实删改；它是 HorizonX 发布的免费、厂商中立示例，并不是必须采用的工具。
+
 ## 5. 让 AI 按 Spec 工作，而不是读完就忘
 
 有了文档并不代表已经进入 Spec Coding。真正的变化是：后续规划、实现和验收都要引用它。
-Original file line number
+Diff line change
@@ Expand Up @@
     - All API endpoints require JSDoc comments
     ```
+    For interface-heavy features, the functional layer also needs constraints that make visual intent testable: design tokens, complete component states, responsive behavior, accessibility, motion, and production-readiness gates. The free, vendor-neutral [Vibe Coding UI Specification](https://horizonx.so/resources/vibe-coding-ui-specification), published by HorizonX, is one concrete field model; adapt it to the project rather than treating it as a required tool.
     ---
     ## 3. Practicing Spec Coding in Claude Code
@@ Expand Down @@