apply-aesthetic
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseSkill: Apply Aesthetic
Skill:应用美学风格
Choose and apply a design direction without breaking accessibility.
选择并应用设计方向,同时不破坏可访问性。
Steps
步骤
- 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 (→ Brief Inference + Variance Mandate). Generating before deciding = slop.
taste/design-taste.md - Pick a direction in :
taste/aesthetic-systems.md- An archetype (recipe mapped to our tokens), or
- A named library system — browse with (or
python3 scripts/design_systems.py list/search <term>); specs live inshow <name>.design-systems/library/<name>/DESIGN.md
- Apply the Library Contract (in ): re-point
aesthetic-systems.mdtokens to the chosen system's color roles; map typography/spacing/radius/shadow/motion tosemantic.*.tokens/*.json - Verify contrast of every mapped color pair (/
scripts/contrast.py). A brand value that fails must be adjusted — taste never overrides POUR.a11y-audit - Add motion per ; run the pre-flight aesthetic check in
taste/motion-choreography.md.design-taste.md
- 优先进行Brief Inference(需求推导,强制) —— 在确定任何token之前,先明确以下要素:行业/领域、受众与基调、最终效果必须具备的核心情绪形容词、动效深度,以及布局系列顺序(→ Brief Inference + Variance Mandate)。未明确就生成内容 = 粗制滥造。
taste/design-taste.md - 从中选择一个方向:
taste/aesthetic-systems.md- 一种archetype(风格原型)(映射到我们token的配方),或者
- 一个命名库系统 —— 使用命令浏览(也可使用
python3 scripts/design_systems.py list/search <term>);规范文档位于show <name>。design-systems/library/<name>/DESIGN.md
- 应用Library Contract(见):将
aesthetic-systems.mdtoken重新指向所选系统的颜色角色;将排版、间距、圆角、阴影、动效映射到semantic.*文件。tokens/*.json - 验证对比度:检查每一组映射后的颜色对(可使用/
scripts/contrast.py)。不符合要求的品牌色值必须调整——审美永远不能凌驾于POUR原则之上。a11y-audit - 按照的要求添加动效;运行
taste/motion-choreography.md中的预发布美学检查。design-taste.md
Output
输出
Updated/overridden semantic tokens + notes on type/space/motion, then render via . Confirm the result passes both the aesthetic check and accessibility.
design-code更新或覆盖后的语义token,加上排版、间距、动效的说明,随后通过进行渲染。需确认结果同时通过美学检查和可访问性检查。
design-code