Receber por email
← Voltar para o catálogo

code-format

Convert Lanhu HTML/CSS output into project frontend code for Vue, React, or the detected stack, with component reuse and design token mapping.

12estrelas
Atualizado há 5 meses

Ver no GitHub ↗

Como adicionar

/plugin marketplace add ursazoo/lanhu-to-code

O comando exato pode variar conforme o repositório. Confira o README no GitHub.

Para o autor da skill

Cole no README do seu repo

Mostra que sua skill está catalogada na Skillteca, gera backlink e tráfego rastreável.

[![Skillteca](https://www.skillteca.com.br/api/badge/code-format/svg)](https://www.skillteca.com.br/skills/code-format)

Alerta por categoria

Receba novas skills de Design e Frontend toda segunda

1 email curto, só com as skills novas de Design e Frontend. 4 minutos de leitura, sem spam, cancela com 1 clique.

Você confirma o email no primeiro envio. Sem spam. Cancela com 1 clique.

Ler descrição completa

code-format

核心原则:优先复用,禁止猜测。禁止省略代码。

模式判断

调用方(design-to-code)会传入意图参数,根据意图选择模式:

| 意图参数 | 模式 | |---------|------| | 新建 | 模式 A:生成新文件 | | 改造:src/pages/xxx/index.vue | 模式 B:修改现有文件 |

执行步骤

1. 读取上下文(动代码前必须全部读完)

按以下优先级查找每类文档,找到第一个即用:

| 用途 | 优先 | 兜底顺序 | |------|------|---------| | 技术栈 | 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

2. 分析蓝湖产物

读取 .claude/lanhu-output/<页面名称>/index.html,列出主要 UI 元素(不写代码)。

3. 组件映射

对每个 UI 元素查组件文档:

  • 有完全匹配 → 直接用,传正确 props
  • 有近似组件 → 用现有组件 + 自定义 class
  • 确认没有 → 按 dev-spec 新建,标记为"新增组件"

常见映射失败案例见 → failure-patterns.md

4. 补全交互逻辑

从 docs/tech-spec.md 取:API 路径、状态处理、格式化规则。 找不到的用 // TODO: 待确认 标记,不自行发明。

模式 A:新建页面

按步骤 1-4 读取上下文后,生成完整新文件。

输出目录:src/pages/<页面名>/ 或 src/views/<页面名>/(以 dev-spec 为准)。

硬性约束:

  • 写完整代码,不允许 // ... rest of component 等占位
  • 颜色/间距/字号精确匹配蓝湖数据
  • 图片用 assets/ 中的实际文件路径

模式 B:改造现有页面

按步骤 1-4 读取上下文后:

额外步骤 B1:读取现有文件

读取调用方传入的现有文件路径(如 src/pages/home/index.vue),完整理解现有代码。

额外步骤 B2:列出变更范围

对比设计稿与现有代码,明确列出(不写代码):

变更项:
- [新增] 顶部渐变背景区域
- [修改] 余额显示区域:字号从 24px 改为 32px,颜色从 #333 改为 #fff
- [删除] 右上角设置入口
- [保留] 底部 TabBar(现有代码不动)
- [保留] 所有 API 调用逻辑(不动)

等用户确认变更范围后再写代码。

额外步骤 B3:定向修改

只修改变更项,保留:

  • 现有业务逻辑(API 调用、事件处理、状态管理)
  • 现有注释和 TODO
  • 未变更的 UI 区域

每处修改标注原因,格式:// [design-to-code] 按设计稿更新:xxx

5. 输出摘要

✓ 生成/修改文件:[列表]
✓ 复用组件:[列表]
⚠ 新增组件:[列表](需 review)
⚠ TODO 项:[列表]
Compartilhar X LinkedIn