代码生成选项

生成模式

Codia 提供多种代码生成模式以适应不同的使用场景：

标准模式

从你的设计生成完整组件，使用合理的默认值。适合大多数项目。

组件模式

将复杂设计拆分为可复用组件。每个组件都有独立的文件，包含正确的导入和导出。

页面模式

生成完整的页面布局，包括路由设置、元标签和响应式设计。适合落地页和营销网站。

配置选项

框架设置

配置目标框架及其特定选项：

typescript

interface CodeGenConfig {
  framework: 'react' | 'vue' | 'html' | 'flutter' | 'swiftui'
  styling: 'tailwind' | 'css-modules' | 'inline' | 'styled-components'
  responsive: boolean
  typescript: boolean
  accessibilityLevel: 'basic' | 'wcag-aa' | 'wcag-aaa'
}

响应式断点

自定义生成代码中使用的响应式断点：

断点	宽度	说明
`sm`	640px	小型设备
`md`	768px	平板电脑
`lg`	1024px	桌面端
`xl`	1280px	大屏幕
`2xl`	1536px	超大屏幕

Base Code 与 AI Code

Codia 提供两种代码生成级别以满足不同需求：

Base Code

Base Code 使用 DSL 识别模型快速生成代码。它确保与设计稿近乎 100% 的视觉保真度，生成速度快。但代码质量相对基础，尤其对于复杂的 Figma 布局。

AI Code

AI Code 生成的代码接近专业工程师的水准。它利用训练好的大语言模型、智能结构分析和视觉识别技术，交付高质量、可直接用于生产的代码，几乎不需要手动调整。

AI Code 架构

如何选择

Base Code — 当你优先考虑速度且只需要 UI 在视觉上与设计匹配时
AI Code — 当你需要可以在其基础上开发和维护的生产级代码时

AI 驱动能力

AI Code 拥有六大核心能力，使其区别于传统代码生成工具：

1. 智能布局识别

自动识别设计的真实 DOM 结构，实现精确的布局映射。AI 不依赖绝对定位，而是理解空间关系，使用 Flexbox 和 Grid 生成语义化布局。

智能布局识别

2. 智能命名

通过分析每个元素的内容和结构，生成有意义的变量和类名。AI 使用 NLP 技术生成如 userNameInput 或 primaryButton 这样的有意义名称。

智能命名

3. 智能图层合并

增强图片切割以匹配开发者意图，并应用智能自动图片压缩。AI 识别哪些图层应合并为单个资源，并为每个资源选择最优文件格式。

智能图层合并

4. 智能 UI 组件检测

检测常见 UI 模式——按钮、卡片、导航、表单——并生成合适的可复用组件。AI 确保不遗漏任何常用组件，即使在复杂布局中也是如此。

智能 UI 组件检测

5. 自动化 AutoLayout

自动实现 AutoLayout 和 FlexLayout，生成响应式的约束布局而非绝对定位。这对 iOS（SwiftUI）和跨平台（Flutter）输出尤为重要。

自动化 AutoLayout

6. 无用图层消除

识别并移除冗余、隐藏或仅用于装饰的图层，这些图层会影响代码质量。结果是更干净、更轻量、性能更好的代码。

无用图层消除

高级功能

智能组件检测

Codia AI 自动检测常见 UI 模式并生成相应组件：

导航栏和页头
卡片布局和网格
带验证的表单元素
模态对话框和遮罩
列表和表格视图

资源提取

图片、图标和其他资源会被自动：

从设计中提取
优化以适合 Web 分发
在生成的代码中使用正确的路径引用

无障碍

生成的代码默认包含无障碍特性：

语义化 HTML 元素（nav、main、article 等）
ARIA 标签和角色
键盘导航支持
颜色对比度合规

API 集成

公开 OpenAPI 规范主要覆盖视觉结构和媒体转换端点，而不是独立的代码生成端点。自动化工作流建议先将图片转换为结构化设计数据，再把该结构传入你自己的下游代码生成或设计导入流程。

bash

curl 'https://openapi.codia.ai/v2/open/image_to_design' \
  -X POST \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "image_url": "https://example.com/design.png"
  }'

图片转设计结构的详细说明请查看 Visual Struct API，完整端点列表请查看 API Reference。

故障排除

常见问题

缺少元素 — 确保所有图层可见且未被隐藏
层级不正确 — 检查设计工具中的图层分组
样式差异 — 自定义字体可能需要手动配置