lanhu-design-to-code

蓝湖设计转代码

把蓝湖 MCP 返回的内容作为设计证据，再结合目标仓库的规则完成实现。始终区分设计事实、产品行为和工程实现，不把静态设计稿中没有的信息当成确定需求。

确认任务范围

1. 修改代码前，先读取目标仓库的 AGENTS.md、贡献指南和目标模块约定。
2. 从用户请求和仓库上下文中确认目标平台、页面或组件路径、目标设计图、允许修改的范围和验收命令。
3. 新建结构前，先检查附近页面、公共组件、样式变量和资源管线能否复用。
4. 确认 lanhu-schema MCP 的工具可调用。工具未配置时，引导用户阅读 MCP 安装说明，不要让用户在对话中粘贴 Cookie。

不得输出、索取或持久化真实蓝湖 Cookie。未经用户明确确认可以公开，不得提交真实设计导出、项目标识、带签名的资源 URL 或私有设计截图。

获取设计证据

除非用户已经准确指定某张设计图，否则按以下顺序调用工具：

1. 使用蓝湖地址调用 lanhu_get_designs，取得稳定的设计图 id、名称和 index。
2. 选择用户要求的设计图。如果多张设计图都可能匹配，先给出简短候选列表，再开始实现。
3. 遇到大型设计稿或目标节点不明确时，先调用 lanhu_search_design_nodes，再通过 node_ids 获取目标子树。
4. 常规实现调用 lanhu_get_design_schema，使用 detail=full。只有 full 缺少 transform、origin、矢量路径或变量绑定等字段时，才使用 detail=exact。
5. 设计中存在图片或图标资源时，调用 lanhu_get_design_slices。
6. 调用 lanhu_get_design_preview 核对整体构图和切图内容。不得从预览图读取精确几何或颜色。

选择工具、解释字段或处理 warning 时，读取 references/design-ir.md。

准确解释设计数据

• 以 meta.canvas 作为设计画布尺寸的唯一权威来源，不得使用列表或预览图尺寸进行单位换算。
• 把 frame 视为旋转前的画布绝对逻辑几何，把 rel 视为相对父节点的关系证据；需要视觉占位、求交或对齐时使用 visualFrame ?? frame。根据节点关系和目标平台约定组织生产布局，不要把整个页面机械地改成绝对定位。
• 文本节点以 text.content 为准；混排文本没有顶层内容时，按顺序拼接 text.runs[].content。图层 name 只用于定位，不得覆盖实际文案。
• 把可选的 component 视为设计系统组件身份和状态线索；设计没有组件身份是合法情况，也不得假设代码库中一定存在同名组件。
• IR 中存在明确数据时，应保持文案、可见状态、字体、填充、边框、圆角、阴影和资源意图。
• 预览图只作为视觉证据；可量化的数值以 Design IR 和 slices 字段为准。
• 所有可能影响实现的 warning 都要处理或报告，不得静默忽略截断、缺失、非 Figma、隐藏、零尺寸或画布外信息。
• 不得从静态设计稿猜测循环、响应式规则、导航、异步行为、校验、埋点或动态数据。优先从需求和现有代码找证据；只有缺失选择会实质改变结果时才向用户确认。

按目标仓库实现

1. 复用已有布局组件、公共组件、设计变量、资源管线和命名约定。
2. 按目标仓库已有规则，把设计逻辑单位换算成目标平台单位。
3. 使用生产布局系统实现响应式和动态行为，不要照抄 Figma 坐标生成难以维护的结构。
4. 只有用户允许修改代码和资源时才下载或转换切图。使用 position + logical_size 直接放置已经应用旋转的资源，不得按节点 rotation 二次旋转；使用稳定文件名、保持宽高比，并区分逻辑尺寸和存储像素尺寸。
5. 同一资源 URL 被多个切图节点引用时，在下载、上传或缓存层复用文件；保留所有切图节点及其各自位置，不得为去重删除节点。
6. 把改动限制在选定设计和用户要求的行为内，避免顺手重构无关代码。
7. 保持仓库已有的无障碍、本地化、加载、错误和空状态约定。

验证结果

1. 运行范围最小且相关的格式化、类型检查、测试和构建命令。
2. 本地工具允许时，启动或渲染修改后的 UI。
3. 用预览图比较整体构图，用 Design IR 比较可量化数值。
4. 检查文案换行、滚动、安全区、响应式宽度、交互状态和导出资源。
5. 向用户报告设计 warning、未支持行为、所做假设、验证结果和仍存在的视觉差异。