用Emergent AI设计Web界面需先接入企业设计系统，再输入结构化提示词（明确交付类型、组件来源、视觉参数），最后验证代码一致性。未按此流程将导致样式错乱、品牌脱离、返工重做。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用Emergent AI设计Web应用用户界面，需绕开自由发挥陷阱，直接锚定已有设计规范与组件库，否则生成结果无法复用、颜色错乱、按钮样式漂移，最终仍要返工重做。
确认设计系统接入前提
打开Emergent平台后，先检查右上角账户设置中是否已上传企业设计系统文件（.sketch、.figma 或 JSON 规范包）。【未上传设计系统时，AI默认使用通用UI模板，所有生成页面将脱离品牌规范】
若团队已有Figma Design System链接，点击“连接设计资产”→粘贴Figma文件URL→授权访问→等待同步完成（通常需45秒）。这一步跳过，后续所有生成都将忽略间距、字体层级和组件状态逻辑。
输入结构化提示词
在主对话框中，按以下顺序组织描述，缺一不可：
① 明确交付类型：写清“生成Web应用前端代码（React + Tailwind CSS）”，不写则默认输出Figma设计稿；
② 锁定组件来源：声明“仅使用我司Design System中的Button、Card、Navbar组件，禁用任何外部图标或自定义阴影”；
③ 约束视觉参数：指定“主色为#2563EB（蓝-600），文字行高1.5，卡片圆角为0.5rem，所有交互态按钮必须包含hover:shadow-md和focus:ring-2”。
示例完整提示：“生成Web应用前端代码（React + Tailwind CSS），仅使用我司Design System中的Button、Card、Navbar组件，禁用任何外部图标或自定义阴影；主色为#2563EB，文字行高1.5，卡片圆角为0.5rem，所有交互态按钮必须包含hover:shadow-md和focus:ring-2；页面为电商后台仪表盘，含数据看板、订单列表、用户增长折线图三个区块。”
验证生成结果一致性
生成完成后，立即打开代码预览面板，逐行检查：
方法一：搜索“bg-”查看所有背景色——应仅出现bg-blue-600、bg-white、bg-gray-50三类，出现bg-indigo-500即说明AI擅自调用未授权色值；
方法二：定位Button组件渲染代码——必须包含data-component="Button"属性，且class中不得出现rounded-lg以外的圆角定义；
方法三：展开Navbar组件props——verifyMenuItems必须为数组格式，若出现字符串拼接的innerHTML则代表未走组件库路径，需重新生成。
