设计系统、组件库与 AI 协同

共 17 题
#

1. AI 生成设计稿(v0 / Galileo AI / Figma AI)到代码的工程链路与准确度?

A 视觉还原度只取决于模型大小,与 token 约束无关
B AI 生成代码无需校验,模型保证 100% 准确
C 通过注入设计系统规范约束生成空间、组件映射增强与视觉回归校验,可提升生成代码的准确度 ✓ 正确答案
D 布局还原度与组件映射无关,只需关注代码能否运行
#

2. 设计系统的版本化策略(Major / Minor / Patch + Breaking Change)与下游消费方的协作?

A 设计系统版本升级不需要验证,直接发布即可
B 设计系统 token 值的变化永远属于 Patch 版本
C 消费方升级是消费方自己的事,平台无需统计升级率
D Breaking Change 应提前公告并配套 token 映射表、codemod 与升级指南 ✓ 正确答案
#

3. AI 生成代码的组件白名单与 lint 约束,eslint 规则强制使用设计系统组件、禁止裸标签,在保障一致性的工程价值?

A lint 规则一旦设为 error 就不需要例外通道
B 通过组件白名单与禁止裸标签的 lint 规则,可把 AI 生成代码纳入与人类代码相同的一致性闸门 ✓ 正确答案
C eslint 只能检查语法错误,无法约束组件使用
D 设计系统一致性主要靠 AI 模型的自觉遵守
#

4. AI 在 Design Token 反查 / 组件使用分析 / 不一致性发现的应用边界?

A AI 视觉不一致检测完全替代视觉回归工具
B AI 反查出的 token 一定正确,可直接自动替换
C 组件使用分析只能统计组件数量,无法识别使用模式
D AI 适合批量初筛与候选生成,最终替换与归因需人工或确定性工具确认 ✓ 正确答案
#

5. 设计系统资产在 LLM Prompt Engineering 的工程价值与内部知识库嵌入方式?

A 函数调用方式准确性最低,不推荐
B prompt 注入设计系统规范后,模型仍需自由发挥以保持创造性
C 设计系统知识嵌入可采用静态注入、RAG 检索与函数调用三种方式,需版本化并与文档同步维护 ✓ 正确答案
D RAG 方式不需要维护索引,向量化一次永久有效
#

6. 组件库单元测试 + 视觉回归(Chromatic / Loki / Percy)的 CI 集成与组件解耦价值?

A 视觉回归工具在 CI 中截图对比基线,任何 diff 都需人工确认后才能更新基线或修复 ✓ 正确答案
B 视觉回归可以完全替代单元测试
C 组件库的测试应由业务项目完成
D 视觉回归不需要与 story 关联
#

7. 设计 Tokens Schema(W3C Design Tokens 最新规范)的版本管理与跨平台 Web/iOS/Android 同步?

A 各平台产物可以按需手改,只要保持视觉一致
B token 重命名不需要别名映射,直接替换即可
C W3C Design Tokens 规范只支持颜色类型
D 跨平台同步的核心是单一事实源 + 生成管线 + 回归验证,新增 token 必须同步产出全平台产物 ✓ 正确答案
#

8. Storybook 与 Histoire 在 Vite + Composition API 框架下的协作流与文档版本化?

A Histoire 依赖 Webpack 构建,与 Vite 不兼容
B 文档站点只保留最新版本即可
C 组件文档应随组件版本构建并支持多版本预览,内容由 stories / API 声明自动生成 ✓ 正确答案
D Storybook 无法支持 Vue 3 Composition API
#

9. Ant Design / Material UI / Arco / TDesign 等头部组件库的能力差异与选型方法论?

A 选型应评估设计语言匹配度、技术栈适配、定制能力与维护风险,并用 POC 实测验证 ✓ 正确答案
B 主题定制能力不构成选型因素
C 组件库选型只需比较组件数量的多少
D Material UI 与 Ant Design 完全等价,选谁都一样
#

10. AI 辅助设计到代码,从设计稿生成组件的链路?

A 链路成熟后可以完全取消人工评审
B 生成代码必须经过 lint、token 扫描与视觉对比等确定性校验才能入库 ✓ 正确答案
C 设计稿解析可以直接使用原始图层结构,无需清理
D 组件识别阶段视觉相似的组件一定语义相同
#

11. AI 辅助组件库代码生成的可维护性(设计还原度、API 漂移)?

A AI 生成的组件代码天然具备良好可维护性
B 生成组件无需纳入版本管理
C API 漂移可通过生成规范注入与 API 快照 diff 在生成与校验阶段拦截 ✓ 正确答案
D 还原度问题只能靠人工逐像素调整,无法量化
#

12. AI 在跨设计系统迁移中的代码转换与人工评审分工?

A 人工评审只需要看 AI 没有标记的部分
B AI 转换的代码无需校验,因为模型保证正确
C 迁移应小批次进行,AI 批量初转后由工具校验与人工语义评审确认 ✓ 正确答案
D 组件映射表只影响样式,不影响行为
#

13. Figma Open Source Plugin / Figma Tokens Studio 与代码联动(design → code)的工程取舍?

A 插件联动不需要考虑文件结构与命名约定
B Tokens Studio 只能导出 PNG 资源,无法导出 token JSON
C Figma 同步是单向的,代码侧改动永远无法影响设计
D design → code 联动前应先明确事实源与命名规范,token 入库后必须走构建与回归验证 ✓ 正确答案
#

14. 设计系统在暗色模式 / 高对比度模式 / 减少动画(prefers-reduced-motion)下的动态切换?

A 暗色模式需要为每个组件单独实现一套样式
B 高对比度模式下可以仅依赖颜色传达状态
C 三种模式都应通过语义 token 与媒体查询驱动,并配合自动化走查守护适配质量 ✓ 正确答案
D 减少动画只需隐藏动画元素,无需考虑信息传达
#

15. 设计系统与 AI 的 token 语义化?

A lint 禁止硬编码值会降低开发效率,应取消
B token 语义化只是为了文档美观
C 语义 token 与原始值 token 在 AI 生成场景下等价
D 提升语义化可通过命名治理、硬编码扫描反推缺失 token 与 AI 辅助审计实现 ✓ 正确答案
#

16. AI 生成组件的质量保障,一致性校验?

A API 一致性不重要,只要功能可用
B 一致性校验应包含静态 lint、token 扫描、API 快照对比、视觉回归与交互测试,并形成反馈闭环 ✓ 正确答案
C AI 生成组件只需通过人工视觉抽查即可
D 生成规范注入提示词无法影响生成质量
#

17. AI 生成代码的 design token 引用扫描,检测硬编码色值/间距并自动替换为语义 token 的工程方案?

A 替换策略应按匹配度分级:精确命中自动替换、相似命中确认后替换、无法判定人工处理,并做视觉回归验证 ✓ 正确答案
B 硬编码检测只能靠正则匹配,无法使用 AST
C 所有数值字面量都应自动替换为 token,无需区分
D 替换后无需回归验证,因为映射表是权威的