apply-aesthetic

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Skill: Apply Aesthetic

Skill:应用美学风格

Choose and apply a design direction without breaking accessibility.
选择并应用设计方向,同时不破坏可访问性。

Steps

步骤

  1. Brief Inference first (mandatory) — before any tokens, name it: industry/domain, audience & tone, the one mood adjective the result must earn, motion depth, and the layout-family sequence (
    taste/design-taste.md
    → Brief Inference + Variance Mandate). Generating before deciding = slop.
  2. Pick a direction in
    taste/aesthetic-systems.md
    :
    • An archetype (recipe mapped to our tokens), or
    • A named library system — browse with
      python3 scripts/design_systems.py list
      (or
      search <term>
      /
      show <name>
      ); specs live in
      design-systems/library/<name>/DESIGN.md
      .
  3. Apply the Library Contract (in
    aesthetic-systems.md
    ): re-point
    semantic.*
    tokens to the chosen system's color roles; map typography/spacing/radius/shadow/motion to
    tokens/*.json
    .
  4. Verify contrast of every mapped color pair (
    scripts/contrast.py
    /
    a11y-audit
    ). A brand value that fails must be adjusted — taste never overrides POUR.
  5. Add motion per
    taste/motion-choreography.md
    ; run the pre-flight aesthetic check in
    design-taste.md
    .
  1. 优先进行Brief Inference(需求推导,强制) —— 在确定任何token之前,先明确以下要素:行业/领域、受众与基调、最终效果必须具备的核心情绪形容词、动效深度,以及布局系列顺序(
    taste/design-taste.md
    → Brief Inference + Variance Mandate)。未明确就生成内容 = 粗制滥造。
  2. 从
    taste/aesthetic-systems.md
    中选择一个方向:
    • 一种archetype(风格原型)(映射到我们token的配方),或者
    • 一个命名库系统 —— 使用
      python3 scripts/design_systems.py list
      命令浏览(也可使用
      search <term>
      /
      show <name>
      );规范文档位于
      design-systems/library/<name>/DESIGN.md
      。
  3. 应用Library Contract(见
    aesthetic-systems.md
    ):将
    semantic.*
    token重新指向所选系统的颜色角色;将排版、间距、圆角、阴影、动效映射到
    tokens/*.json
    文件。
  4. 验证对比度:检查每一组映射后的颜色对(可使用
    scripts/contrast.py
    /
    a11y-audit
    )。不符合要求的品牌色值必须调整——审美永远不能凌驾于POUR原则之上。
  5. 按照
    taste/motion-choreography.md
    的要求添加动效;运行
    design-taste.md
    中的预发布美学检查。

Output

输出

Updated/overridden semantic tokens + notes on type/space/motion, then render via
design-code
. Confirm the result passes both the aesthetic check and accessibility.
更新或覆盖后的语义token,加上排版、间距、动效的说明,随后通过
design-code
进行渲染。需确认结果同时通过美学检查和可访问性检查。