35202b51e8
- 标准编辑器: freezed数据模型 + 5Tab工具栏 + 多图层管理 + 文字增强 + 背景系统 + 导出链路 - 迷你编辑器: 极简6项功能(文字/字号/颜色/背景/预览/导出) + 三种调用方式(全屏/半屏/内嵌) - 共享组件: GlassSlider/ColorPicker/FontPicker/TipsView - 服务层: ExportService/ImageImportService/FontService/XycardService - 设计系统: 统一主题令牌 + Liquid Glass风格
1.7 KiB
1.7 KiB
【设计系统】 必须遵循统一 design system：
- 颜色
- 字体
- 间距
- 圆角
- 阴影
- 按钮样式
所有页面必须使用统一设计系统变量， 禁止自定义颜色。 必须使用 CSS 变量或主题系统。
如果页面需要适配： 移动端 + 平板 + 桌面
必须使用响应式设计。
断点：
- 640px
- 768px
- 1024px
- 1280px
小屏幕：单列布局 中屏幕：双列布局 大屏幕：多列布局
- 先分析当前整个页面结构
- 输出完整布局结构图
- 制定整体重构方案
- 然后一次性修改所有相关区域
- 禁止只修改单个组件
🧩 七、强制布局骨架（最稳定方式）
App ├ Header ├ Sidebar ├ Main └ Footer
页面必须采用标准 App Layout 结构。 main 区域负责滚动。 header 和 sidebar 为固定结构。 🛑 八、禁止错误写法（必须写） 禁止：
- position: absolute 进行整体布局
- 固定 px 宽度
- overflow:hidden 用于解决布局问题
- 使用 margin 负值修复结构 🧱 九、AI 写页面的标准流程（最重要）
步骤：
- 分析当前布局
- 给出修改计划
- 等我确认
- 再修改代码
1️⃣ 先写 Design System 2️⃣ 再写 Layout System 3️⃣ 再写 Component Library 4️⃣ 最后写 Pages
要求：
- 优先设计整体布局结构
- 使用 flex/grid
- 响应式设计
- 使用统一设计系统
- 不允许固定宽度
- 不允许 horizontal overflow
- 修改布局时必须整体重构
- 不允许只改局部组件
- 输出清晰结构
- 代码必须可维护 🎯 最后总结
Layout First Design System First Plan Before Code
只要做到这三点：
不会溢出
不会错位
不会风格混乱
不会局部修改失控