DesignSkill Workflow in Zhipu Qingyan

AI 设计工作流 / 前端原型 / 中文排版 / 设计系统
2026.5 – 2026.6

AI Design Workflow / Front-end Prototype / Chinese Typography / Design System
May 2026 – Jun 2026

一套面向 AI 设计生成的 Design Skills 系统,用于将模糊的设计需求快速路由到合适的产物类型,并通过设计系统、模板库、横向工艺规范和质量门禁,稳定产出作品集、落地页、Deck、原型、H5 工具、社交卡片等 HTML 设计制品。

Design Skills 的核心是“路由 + 约束 + 质检”。路由层判断用户真正需要的设计产物;设计系统补全颜色、字体、间距、组件和视觉语言;模板层提供成熟结构;横向工艺层统一中文排版、色彩、图标、可访问性、动画、状态和数据细节;最后通过 Quality Gate 做交付前检查。这让 AI 不只是执行 prompt,而是在设计规范中工作:先理解内容、场景和风格,再选择合适结构生成,并检查交互、视觉一致性、可读性和完整度。

项目采用模块化 skill 架构,将复杂的设计判断拆成多个可组合文件。SKILL.md 负责主流程和路由判断,INDEX.md 作为能力地图,design-systems 管理可复用视觉语言,design-templates 提供页面结构参考,horizontal-craft 则沉淀跨场景的设计工艺规则。

Chinese Typography Skill 是 Design Skills 中专门处理中文排版与字体体验的模块。它把字号、行距、行长、标题断句、标点占格、段落节奏和字体选择整理成可执行规则,让 AI 生成的中文页面不只是能显示文字,而是更符合中文阅读习惯,读起来舒服、看起来专业。

在相同输入条件下,对比普通生成结果与启用 Design Skill 后的结果。

A Design Skills system for AI-generated design, built to quickly route vague design requests to the right output type. It uses design systems, template libraries, cross-format craft standards, and quality gates to reliably produce HTML design artifacts such as portfolios, landing pages, decks, prototypes, H5 tools, and social cards.

The core of Design Skills is "routing + constraints + quality control." The routing layer determines what the user actually needs; the design system fills in color, type, spacing, components, and visual language; the template layer provides mature structures; the horizontal craft layer unifies Chinese typography, color, icons, accessibility, motion, states, and data details; finally, a Quality Gate checks everything before delivery. This lets the AI work within design standards rather than just executing prompts: understand content, scenario, and style first, then generate with the right structure, and verify interaction, visual consistency, readability, and completeness.

The project uses a modular skill architecture that breaks complex design judgment into composable files. SKILL.md handles the main flow and routing decisions, INDEX.md serves as the capability map, design-systems manages reusable visual languages, design-templates provides page structure references, and horizontal-craft holds cross-scenario design craft rules.

Chinese Typography Skill is a dedicated module in Design Skills for Chinese typesetting and type experience. It turns font size, line height, line length, title line-breaking, punctuation spacing, paragraph rhythm, and font selection into executable rules, so AI-generated Chinese pages do more than display text — they follow Chinese reading habits, feel comfortable to read, and look professional.

Compared the standard generation result with the Design Skill-enabled result using the same input prompt.