全球设计风格生成器

解决 AI 生成产物的视觉空泛问题

大多数 AI 生成的前端页面或 PPT 常陷入同一套默认模板：相似的圆角卡片、平庸的渐变背景。当创建真实商业项目或文化品牌设计时，这种‘能用但不够看’的输出往往不可交付。

xdx-lab-design-style-skill 旨在改变这一点。它扮演资深设计师与前端工程师的角色，将模糊的创意需求转化为色彩、字体、间距和组件状态都经过严格校准的真实产物。

核心工作流：从需求到规范

该技能通过四个关键步骤确保设计质量：

• 需求解析与交互确认：优先明确产物类型（落地页、海报、App UI）与业务场景。它最多只提 2-3 个简短问题，绝不越界询问具体色值。
• 风格与大师路由：

指定风格：若提及“宋代水墨”或“Art Deco”，直接映射 references/styles/ 中的 DESIGN.md。
指定大师：若提及“Dieter Rams”或“Paula Scher”，提取方法论的核心原则（如 Rams 的功能克制），而非简单复制作品。
动态生成：若风格不在现有库中，则从 全球设计风格知识库 提取视觉依据，即时生成工作规范。
风格与大师叠加：当两者同时出现时（如“浮世绘 + Saul Bass 构图”），风格决定色彩材质，大师控制信息层级，冲突时以可读性优先。

• 落实 DESIGN.md 参数：实际操作中，严格遵循规范文件。Section 2 的 HEX 色值必须原样使用，禁止近似；字体加载 Google Fonts 指定的字库，保证视觉质感。

多维资产与产物路由

除了油漆和字体，该技能在视觉资产上也制定了严格的路由契约：

• 优先使用：用户自带的素材或免版权图库（Unsplash、Pexels）。
• 替代方案：若无法访问图库，必须转为生成式插图或自绘 SVG/纯 CSS 图案纹理，拒绝留下空白色块。
• 风格化处理：对放置的图片必须进行裁切、描边、双色调或蒙版处理，使其不脱离 DESIGN.md 的整体气质。
• 技术栈选择：

优先响应当前目录的项目技术栈（React、Vue、SwiftUI、Flutter）。
无现成项目时，交付自包含 HTML、.pptx 或 .docx。
海报与 Banner 必须优先考虑主视觉，没有主视觉时用强排版替代。
App UI 不能只做单张静态图，要体现组件状态和用户操作路径。

适用边界与验证

• 边界：技能执行使用边界严格。它明确声明绝不声称复刻任何受版权保护的具体作品，仅提取大师的方法论与视觉语法。
• 验证闭环：上线前必须进行视觉验证。若在浏览器生成 HTML，需截图检查桌面端与移动端首屏；若生成 PPT，需验证字体兼容性和板式模块。