Skill Wiki v0.1.0

文档 / skills / frontend-design

本页目录

Prime · frontend-design

协议本身是领域无关的。frontend-design 是在协议之上演示一个视觉 / 美学领域的旗舰 Prime —— 颜色、字体、运动、间距、可访问性、组件 pattern。

domain.yaml

Prime 的 domain.yaml 声明了它的 axes 和 L5 validator。 运行时从 $PRIME_DIR 递归发现它;core 不需要改一行代码。

name: frontend-design
version: "1.0.0"
description: Design knowledge for AI agents — color, typography, motion, spacing,
             accessibility, and component patterns.

# 提示检索器主导的分类法。
hierarchy: visual-hierarchy

# Intent 命中时检索器加权的多轴 tag。
axes:
  - layout
  - typography
  - spacing
  - color
  - motion
  - accessibility

# 当 method 没显式 override 时应用的默认 contract 骨架。
contract:
  typography: atom-12-array
  color: atom-token-semantic

# L5 validator hook。
validators:
  - name: html-semantic
    checker: regex
    pattern: '^<([a-z][a-z0-9]*)\b[^>]*>'
  - name: color-token
    checker: ai-judge
    rubric: '@frontend-design/rubric-color-token'

用 persona 表征设计流派

persona kind 在这里被用来打包一组连贯的美学 —— 一种 "设计流派" 或品牌系。 一个 frontend-design 的 L1 产出 intent,例如 { axes: ["layout", "color"], persona: "@stripe-fintech", ... }; 对应的 persona 原子带着定义该流派的 voice + 伴生原子。

延伸阅读