SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场design-system-generator

design-system-generator

设计与创作

查看项目

更新于 10-16 09:22

技能介绍

用途

Design System Generator 用于为任意业务或项目生成结构化的 DESIGN.md 文件，产出机器可读的设计系统规格，供构建流程在构建阶段消费。该输出被 website-rebuild、local-business-rebuild 和 azerbaijan-website-build 等流程用作所有视觉实现的唯一真实来源。

输入要求

在开始生成前需要收集以下信息：

输入 是否必需 说明
Business name 是 用于主题叙述和代理提示示例
Industry 是 驱动美学方向、色彩心理、组件模式
Brand personality keywords 是 3-5 个形容词（如 luxury、friendly、bold、minimal、industrial、warm）
Existing brand colors 否 从 logo 或品牌简报中提取的十六进制值。若提供，则围绕这些锚点推导完整调色板
Existing fonts 否 来自品牌简报的字体族。使用前需确认不在禁用列表中
Aesthetic inspiration target 否 可指向 00-design-references/references/by-aesthetic/ 中的参考文件
Multi-lingual requirements 否 若为三语（AZ/RU/EN），触发第 10 章节扩展

若可选输入缺失，则从行业和个性关键词推导合理默认值，不要求用户填写可选字段，除非结果会产生歧义。

生成流程

Step 1：选择美学方向

读取 00-design-references/design-md-index.md，查看按美学和行业组织的 DESIGN.md 参考文件目录，挑选 1-2 个与目标业务行业及个性关键词匹配的参考文件。仅将这些参考文件用于结构灵感，不复制其值，目标是理解细节层级和语气，然后为该特定业务生成原创值。若无参考文件匹配，则从个性关键词出发按第一性原理推进。

Step 2：Section 1 -- Visual Theme & Atmosphere

撰写 2-3 段叙述，描述设计的情绪、哲学和关键特征，读起来应像艺术指导简报，而非模板填空，要具体且有主见。叙述后附 6-8 条关键特征的项目符号列表。每句话都应植根于业务上下文，避免泛泛而谈。

Step 3：Section 2 -- Color Palette & Roles

若提供已有品牌色，则以它们为基础，围绕这些锚点扩展出完整调色板（primary、secondary、accent、neutrals、surfaces、borders、shadows）。若未提供，则从行业惯例和个性关键词推导调色板，研究该行业的视觉惯例，然后根据个性关键词选择对齐或刻意突破。调色板按以下分组组织：

  • Primary：Primary、Primary Dark、Primary Light
  • Accent：Accent、Accent Dark
  • Interactive States：Link Default、Link Hover、Link Visited、Focus Ring、Error、Success、Warning
  • Neutral Scale：Neutral 950、800、600、400、200、100、50
  • Surface & Borders：Surface Primary、Surface Secondary、Border Default、Border Subtle
  • Shadow Colors：Shadow Light、Shadow Medium、Shadow Heavy

对比度验证为强制要求：每个文字色/背景色组合必须通过 WCAG AA。正文文本（小于 18px 或小于 14px 粗体）最低 4.5:1；大号文本（18px+ 或 14px+ 粗体）最低 3:1。使用 05-website-rebuild/scripts/contrast-check.js 校验，如不可用则手动计算相对亮度并记录接近阈值的组合比值。

Step 4：Section 3 -- Typography Rules

从经验证的候选字体中选择。禁用字体（永不使用）：Inter、Roboto、Arial、Helvetica、Space Grotesk、Lato、Open Sans、Source Sans Pro，因为它们在 AI 生成网站中被过度使用，会立刻暴露“模板感”。定义完整类型层级，角色包括 Display Hero、Display Large、Section Heading、Sub-heading、Body Large、Body、Button、Small、Caption。每行所有列都必须填写，不得使用“inherit”或“default”，需给出精确值。

Step 5：Section 4 -- Component Stylings

定义所有交互组件及其完整状态矩阵。至少包含：主按钮（4 种状态：default、hover、focus、active）、次级按钮、深色/反色按钮、卡片、输入框和导航。

  • Buttons：定义 Background、Text Color、Font、Padding、Border Radius、Border、Shadow、Hover Background、Hover Shadow、Focus Ring、Active Background、Active Transform、Disabled Background、Disabled Text、Transition
  • Cards：Background、Border、Border Radius、Padding、Shadow、Hover Shadow、Transition
  • Inputs：Background、Border、Border Radius、Padding、Font、Placeholder Color、Focus Border、Focus Ring、Error Border、Disabled Background
  • Navigation：Background、Height、Link Color、Link Hover Color、Active Link Color、Active Indicator、Mobile Menu Background

Step 6：Section 5 -- Layout Principles

定义基础间距单位、间距刻度、网格（最大容器宽度、12 列、列间距、行间距）、区块间距、边框圆角刻度。基础间距单位基于 4px 或 8px，刻度应为几何级数或遵循一致节奏，并根据行业论证最大容器宽度（营销站点通常比编辑类站点使用更宽的容器）。

Step 7：Section 6 -- Depth & Elevation

定义 4-5 个层次，附精确 CSS box-shadow 值：Level 0 Flat、Level 1 Subtle、Level 2 Raised、Level 3 Elevated、Level 4 Floating。阴影 RGB 值应源自第 2 章节定义的阴影颜色，除非设计刻意追求生硬对比，否则不使用纯黑（0,0,0）。

Step 8：Section 7 -- Do's and Don'ts

生成针对该设计系统的规则，交叉引用 03-web-design-guidelines/design-rules.md 中的禁用项（禁用字体、禁用配色方案、禁用布局）。输出 8-12 条 Do's 和 8-12 条 Don'ts，并应用“AI Slop Test”：如果别人看到后被告知这是 AI 做的会相信吗？如果是，则重新设计。常见需避免的 AI 痕迹包括：居中文案配库存渐变的通用 hero 区、完全对称的三列功能网格、到处使用圆角、teal + coral 配色、“Welcome to [Business Name]”式标题、无目的的装饰性 SVG 色块。

Step 9：Section 8 -- Responsive Behavior

定义断点（Mobile 375px、Tablet 768px、Desktop 1024px、Large 1280px、XL 1536px）、触控目标（最小 44px x 44px，最小间距 8px）、排版缩放（给出 Mobile/Tablet/Desktop 各角色的字号）、折叠策略（导航、网格布局、hero 区、卡片、图片）。字体缩放应在移动端显著减小展示字号（通常为桌面值的 60-70%），同时正文文本在所有断点保持 1rem。

Step 10：Section 9 -- Agent Prompt Guide

为下游代理提供可直接复制粘贴的提示词，附精确值。内容包括快速颜色参考和示例组件提示（Hero Section、Service Card、Contact Form、Footer）。提示词中每个值都必须与前面章节定义的值一致，不得近似、不得用“similar to”，必须是精确的十六进制色值、像素值和字体规格。

Step 11（可选）：Section 10 -- Multi-Lingual Considerations

仅针对三语（AZ/RU/EN）站点生成此章节。包含：

  • 字体验证：所选字体必须能渲染测试字符串中的所有字符。阿塞拜疆语：Ə ə Ğ ğ İ ı Ö ö Ü ü Ç ç Ş ş；俄语：А Б В Г Д Е Ё Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я。在最终确定排版前，需在 Google Fonts 中验证主字体和次字体均支持 Latin Extended-A（阿塞拜疆语）和 Cyrillic（俄语）字符集。
  • 文本扩展适配：俄语文本比英语约长 30%。所有布局必须适配：导航标签允许 30% 额外宽度或使用截断加 tooltip；按钮使用基于内边距的尺寸而非固定宽度；标题用最长的俄语翻译测试以验证不溢出；卡片描述设置 min-height 而非固定高度。
  • 阿塞拜疆文化色彩考量：红色和绿色具有国旗意义（避免随意使用）；蓝色是国旗主色。

限制

资料中未说明该技能的具体平台形态、收费方式与价格。资料中未提供实际运行示例或输出样例文件。资料中未说明除上述流程外的额外功能。