القائمة
Convert Lanhu HTML/CSS output into project frontend code for Vue, React, or the detected stack, with component reuse and design token mapping.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Extract Lanhu design HTML, CSS, and assets through Lanhu MCP for Claude Code design-to-code workflows. Called by design-to-code.
Scan frontend src directories and generate docs/components.md so Claude Code can reuse existing Vue/React components during design-to-code generation.
Lanhu to Code workflow for Claude Code. Convert Lanhu design URLs into Vue/React frontend code with component reuse, design token mapping, TODO-safe business logic, and optional code review.
| name | code-format |
| description | Convert Lanhu HTML/CSS output into project frontend code for Vue, React, or the detected stack, with component reuse and design token mapping. |
| model | sonnet |
核心原则：优先复用，禁止猜测。禁止省略代码。
调用方（design-to-code）会传入意图参数，根据意图选择模式：
| 意图参数 | 模式 |
|---|---|
新建 | 模式 A：生成新文件 |
改造:src/pages/xxx/index.vue | 模式 B：修改现有文件 |
按以下优先级查找每类文档，找到第一个即用：
| 用途 | 优先 | 兜底顺序 |
|---|---|---|
| 技术栈 | README.md | → CLAUDE.md → package.json |
| 组件文档 | docs/components.md | → docs/ 下含 "Props"/"组件" 的 .md |
| 编码规范 | docs/dev-spec.md | → docs/ 下含 "命名规范"/"开发规范" 的 .md → 扫描 src/ 推断 |
| 交互逻辑 | docs/tech-spec.md | → 无则全部标 TODO |
调用方（design-to-code）会传入 CONTEXT_FILES，直接使用传入路径，不必自己查找。
文件缺失时的降级策略见 → fallback-guide.md
读取 .claude/lanhu-output/<页面名称>/index.html，列出主要 UI 元素（不写代码）。
对每个 UI 元素查组件文档：
常见映射失败案例见 → failure-patterns.md
从 docs/tech-spec.md 取：API 路径、状态处理、格式化规则。
找不到的用 // TODO: 待确认 标记，不自行发明。
按步骤 1-4 读取上下文后，生成完整新文件。
输出目录：src/pages/<页面名>/ 或 src/views/<页面名>/（以 dev-spec 为准）。
硬性约束：
// ... rest of component 等占位assets/ 中的实际文件路径按步骤 1-4 读取上下文后：
额外步骤 B1：读取现有文件
读取调用方传入的现有文件路径（如 src/pages/home/index.vue），完整理解现有代码。
额外步骤 B2：列出变更范围
对比设计稿与现有代码，明确列出（不写代码）：
变更项：
- [新增] 顶部渐变背景区域
- [修改] 余额显示区域：字号从 24px 改为 32px，颜色从 #333 改为 #fff
- [删除] 右上角设置入口
- [保留] 底部 TabBar（现有代码不动）
- [保留] 所有 API 调用逻辑（不动）
等用户确认变更范围后再写代码。
额外步骤 B3：定向修改
只修改变更项，保留：
每处修改标注原因，格式：// [design-to-code] 按设计稿更新：xxx
✓ 生成/修改文件：[列表]
✓ 复用组件：[列表]
⚠ 新增组件：[列表]（需 review）
⚠ TODO 项：[列表]