Master engineer's guide to design systems architecture, typography engineering, color theory engines, theme generation, visual artifact production, UX strategy, asset management, font technology, and design-to-code pipelines. Use when constructing design tokens, engineering type scales, generating theme palettes, building visual design systems, creating SVG/Canvas artifacts, evaluating UX heuristics, managing font pipelines (OpenType/TrueType parsing, glyph modification, subsetting), or producing design artifacts (posters, slides, data visualizations). Strictly design-domain — frontend framework code (React, Vue, Tailwind configs) belongs in `frontend-dev`. Enforces mathematical precision in spacing, harmonious color relationships, and systematic visual hierarchy.
| Engine | Relation | Reference |
|---|---|---|
frontend-dev | UI Implementation & Themes | frontend-dev/SKILL.md |
rust-coding-engine | Font Engineering (Fontations) | rust-coding-engine/SKILL.md |
developer-tool | Image Processing & Assets | developer-tool/SKILL.md |
"Design is not decoration. Design is the structural skeleton that holds function upright." (设计不是装饰。设计是支撑功能直立的结构骨架。)
This engine governs the design infrastructure layer — the systems, tokens, algorithms, and asset pipelines that feed into visual output. It is explicitly separated from frontend-dev (which handles React/Vue/CSS framework implementation) and instead focuses on the source of truth for all design decisions: type scales, color math, theme generation, UX heuristics, font engineering, and visual artifact production.
As per the Global Integration Directive, the following skills have been absorbed into this engine: | 根据全球集成指令，以下技能已被吸收到此引擎中：
| Skill Name | Role | Research batch |
|---|---|---|
brand-naming-strategies | Memorability & phonetic patterns | Batch 11 |
brand-values-development | Core identity & value alignment | Batch 5 |
| # | Reference | Scope | 范围 |
|---|---|---|---|
| 1 | Typography Engineering | Type scales, font selection, weight/height ratios, Material Design 3 type system, readability math | 字体排版工程、字阶设计、可读性数学 |
| 2 | Color Theory & Theme Generation | HSL/OKLab color math, palette generation, dark mode algorithms, theme factories, glassmorphism | 色彩理论、主题生成、暗色模式算法 |
| 3 | Visual Design Systems | Design tokens, spacing grids (4pt/8pt), component anatomy, Apple HIG/Material Design patterns, Cupertino aesthetics | 设计系统、间距网格、组件解剖学 |
| 4 | UX Strategy & Research | Heuristic evaluation, user research methods, wireframing protocols, prototyping workflows, accessibility audits | UX策略、用户研究、原型工作流 |
| 5 | Visual Artifacts & Generative Art | Canvas/SVG generation, data visualization, chart selection, poster/slide production, algorithmic art, p5.js creative coding | 视觉产物、生成艺术、数据可视化 |
| 6 | Asset Management | Asset pipelines, image optimization, icon systems, design file organization, version control for design assets | 资产管理、图像优化、图标系统 |
| # | Reference | Scope | 范围 |
|---|---|---|---|
| 7 | Font Engineering Fundamentals | OpenType/TrueType table structure, glyph outlines (cubic/quadratic), font metrics, hinting, subsetting | 字体工程基础、OpenType表结构、字形轮廓 |
| 8 | Fontations Ecosystem (Rust) | Google's fontations crate family (read-fonts, write-fonts, skrifa, font-types), glyph parsing, font compilation, Chromium integration | Fontations Rust生态、字体解析与编译 |
| 9 | Font Modification & Pipeline | Glyph deformation, stroke manipulation, spur removal, ink trap flattening, CJK component assembly, parametric font generation | 字体修改管线、字形变形、CJK组件装配 |
visual-design-systems.md for token architecture, spacing grids, and component anatomy.typography-engineering.md for mathematical type scale generation and Material Design 3 integration.color-theme-engine.md for HSL/OKLab algorithms, contrast ratio validation, and theme factory patterns.visual-artifacts.md for chart selection heuristics, SVG generation, and generative art patterns.ux-strategy.md for heuristic evaluation frameworks and user research methodology.font-related-spec/fontations-rust.md for Rust font parsing, or font-engineering.md for OpenType fundamentals.font-related-spec/font-modification-pipeline.md for glyph manipulation and CJK component assembly.--spacing-md, --color-primary-500, --font-heading) before drawing a single pixel. Tokens are the API contract between design and code. (先定义设计令牌，再画像素。)fonttools or fontations tooling before any export. (字体工程要求精确。一个控制点坐标偏差就能损坏整个字体文件。)