GIGA 从素材平台扩展到洞察、生产、AIGC、自动化和 Agent，模块增长速度超过原有设计系统承载能力。
GIGA Case Study 2026
GIGA-AIGC 创意素材 生成平台 AI 化迭代
从素材平台到 AI-ready 设计生产系统
GIGA 的问题不是缺一个更酷的 AI 界面，而是业务复杂度上升后，设计规则无法被稳定复用、工程消费和 AI 生成。 我负责将 GIGA 的视觉规范、组件资产和页面模板结构化，并沉淀为 AI Skill、Arco 主题包和生成验收机制。
- 7
- 类基础规范
- 14
- 类组件资产
- 8
- 类页面模板
30 Sec Read
30 秒看懂：我解决的是平台生产规则，而不是单次 UI 改版。
我将 GIGA 视觉语言结构化为 Token、组件、页面模板、AI Skill、Arco 主题包和三级验收机制。
落地 7 类基础规范、14 类组件资产、8 个核心页面模板，并通过 DSM、BNPM 和主题包进入工程与生成链路。
AI 输出开始被组件、暗色体系和验收标准约束，Bad Case 可被归因并反哺下一轮规则。
Context
业务复杂度上升后，设计系统开始失效。
GIGA 是 Paid Ads 团队的统一创意素材平台，承载素材洞察、素材生产、AIGC Lab、自动化供给和 Agent 协作等能力。 它原本服务“素材管理与洞察”，但随着生产链路和 AI 能力接入，逐渐变成一个覆盖创意生产全流程的平台。
平台能力越复杂，设计系统就越不能只是给人看的规范，而需要成为设计、研发和 AI 都能消费的生产规则。
Before / Intervention / After
业务复杂度 → 设计系统失效 → AI 放大问题 → 系统升级。
我把项目从“页面统一”重新定义为一套生产规则建设：先解决设计师和前端的复用问题，再让 AI 成为这套规则的新消费方。
- 不同模块风格、密度和状态规则不一致。
- AI 生成结果像通用后台 UI，缺少 GIGA 识别度。
- Token、组件、模板没有形成可调用的生产规则。
- 抽象颜色、间距、圆角、暗色层级和状态规则。
- 沉淀组件资产与页面模板，写入 Skill 上下文。
- 通过 Arco DSM、BNPM 和主题包接入工程侧。
- 生成结果能被 GIGA 组件和 Token 约束。
- 前端可消费主题包，减少设计到代码损耗。
- Bad Case 可归因，并反哺 Skill 与页面验收清单。
Reframing
将 GIGA 设计语言转成可生产的系统规则。
Operating Model
Design System for AI
把业务需求、设计资产、AI 生成和质量验证组织成同一套可循环的生产逻辑。
Demand需求抽象
把业务目标拆成页面类型、角色任务和素材生产条件。
Generate规则生成
用 Token、组件资产和 Skill 约束 AI 的视觉输出。
Verify质量反哺
把 Bad Case 归因回规则缺口，补齐下一轮输入。
把投放场景、素材类型、市场、角色任务和页面目标拆成 AI 可理解的输入条件。
用 Token、组件资产、页面模板和暗色层级明确哪些结构可复用、哪些状态必须遵守。
AI 优先调用既有组件、间距、圆角、表格、筛选、分页和状态规则，而不是自由发挥。
从视觉规范、组件映射、页面结构、状态完整性和可交付性判断通过、警告或不通过。
把失败样例归因到输入、Token、组件、模板或 Skill 缺口，并补回下一轮生成上下文。
Design Decision Priority
为什么按 Token → 组件 → 模板 → Skill → 验证的顺序推进。
我没有一开始就做完整页面，而是先处理最底层、最容易被设计师、前端和 AI 共同消费的规则语言。
颜色、圆角、间距、字号和暗色层级是设计、工程和 AI 共用的最小单位。
按钮、表格、筛选、卡片、状态点和分页决定生成结果是否像 GIGA。
AI 不能只懂局部组件，还要知道 Automation、Inspiration、Editor 页面如何组织信息。
把组件选择、页面结构、暗色层级和状态规则转成 AI 可执行的上下文。
没有通过、警告、不通过的验收机制，AI 结果只能靠主观判断，无法复用失败经验。
New Vision
平台能力从素材洞察扩展到创意生产。
新版方案强化了 GIGA 的平台心智：不再只是筛选素材，而是让用户在一个统一 Studio 中完成创意洞察、任务生成、自动化供给和 Agent 协作。
Design System
沉淀 7 类规范、14 类组件、8 类页面模板。
Theme Integration
让设计系统进入工程侧，而不是停在 Figma 里。
我将 GIGA 主题与 Arco DSM、BNPM 连接，形成可维护的主题与组件方案，避免 AI 或前端产出“通用行业 UI”，让平台识别度能够稳定复用。
整理视觉规范、组件和页面模板，形成设计侧唯一来源。
把颜色、边框、阴影、尺寸和组件状态转成可维护主题。
通过 `@arco-design/theme-giga` 进入包管理与版本管理。
让页面实现、AI 生成预览和组件复用共享同一套主题基础。
AI Workflow
我如何把 GIGA 规则写进 AI 生成上下文。
AI To Design
从 Vibe Code 结果到可交付页面。
补齐列表区、筛选区、分页和批量操作，避免只有视觉方向没有工作流。
按钮、表格、状态点、筛选器和导航回到平台组件边界内。
用间距、暗色层级、状态覆盖和数据密度判断是否能进入真实页面。
Core Pages
用 4 个核心页面验证系统可复用性。
我将规则带回真实页面，用 Inspiration、Automation、Production 等核心场景验证系统是否能支撑平台扩展。
Impact Signals
影响指标：AI 工作流效率、返工风险与验收稳定性。
这里不把 DNU 等业务增长归因到设计项目本身，而只呈现这次 AI-ready 设计基建能直接支撑的工作流信号。
通过 Token、组件和模板约束，减少通用后台样式、间距混乱和状态缺失问题。
Skill 提供可执行上下文后，AI 可以更快产出接近 GIGA 结构的初稿。
通过、警告、不通过三档标准，让生成结果从主观反馈进入可复盘判断。
将失败样例归因到输入、Token、组件映射和模板约束，反哺下一轮规则。
Validation
建立 AI 生成结果的三级验收机制。
我没有把 AI 生成结果视为一次性产物，而是按视觉规范、组件映射、页面结构、状态完整性和可交付性进行分级评估。 每个 Bad Case 都会被归因到输入不清、组件缺失、Token 不完整、模板约束不足或 Skill 描述不明确，并反哺下一轮规则。
颜色、圆角、字体方向与暗色层级已经能被 Skill 稳定约束。
文本框排布、组件映射、模块间距和复杂状态仍容易出现局部偏差。
把失败样例转成生成规则、组件选择约束和页面级验收清单。
Automation 页面生成后，表格密度不像 GIGA，筛选区间距混乱，状态点和分页仍是通用后台样式。
缺少表格组件映射、筛选区布局模板、分页状态规则，以及暗色 surface 层级说明。
增加表格、筛选器、分页、状态点的组件选择约束，并补充 Automation 页面结构模板。
融合版开始稳定使用 GIGA 表格、筛选、分页和状态组件，可进入人工 polish 与开发对齐。
整体结构清晰，视觉基本符合规范，关键状态与交互成立，可作为复用基础继续推进。
方向可用，但局部组件、间距、样式或状态覆盖有偏差，需要人工修正后再沉淀。
关键结构、组件映射或视觉规范问题明显，需要回到生成策略或输入条件重新优化。
Final Coding Demo
融合规则后的 GIGA-SHOTS Demo。
最后一轮不再停留在规范或静态稿，而是把 GIGA 设计规则、AI 工作流入口、暗色/亮色主题、Insights、AIGC Lab 与 Production 场景整合成可运行的 coding demo。
不只是截图展示，而是把系统规则推进到可打开、可浏览的 standalone demo。
Landing、Insights、AIGC Lab、Production、素材网格和流程列表都进入同一套体验语言。
同一套 GIGA 语言能够支撑暗色、亮色、卡片、表格、侧边导航和 AI 生产入口。
