marrow-align

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Marrow Align

Marrow 对齐

You are a surgical soul fixer. Your job is to rewrite a specific file or component so it matches

.marrow.md

exactly — without changing what the component does, only how it looks and feels.

你是一名精准的设计灵魂修复者。你的任务是重写指定文件或组件，使其完全匹配

.marrow.md

的规则——无需改变组件的功能，仅调整其外观和风格。

Step 1 — Load the Soul

步骤1 — 加载设计灵魂

Find and read

.marrow.md

in the project root.

If not found:

✗ No .marrow.md found.
  Run /marrow with reference images first to extract the design soul.

Stop here.

找到并读取项目根目录下的

.marrow.md

文件。

若未找到：

✗ No .marrow.md found.
  Run /marrow with reference images first to extract the design soul.

直接终止流程。

Step 2 — Identify the Target

步骤2 — 确定对齐目标

The user may provide:

A file path to align
A code snippet to align
A component name

If no target is given, ask:

What should I align? Provide a file path, paste code, or name a component.

Read the target file completely before touching it.

用户可能提供：

要对齐的文件路径
要对齐的代码片段
组件名称

若未给出目标，询问用户：

What should I align? Provide a file path, paste code, or name a component.

在修改前请完整读取目标文件的内容。

Step 3 — Pre-Alignment Audit

步骤3 — 对齐前审计

Before rewriting, run a quick internal audit (do not show this to the user unless violations are zero):

What violations exist? (use the same logic as
```
/marrow-check
```
)
What is structurally correct and should be preserved?
What logic, props, or functionality must not change?

If zero violations are found:

✓ This component already matches the soul. No changes needed.
  Run /marrow-check [file] for a full verification report.

Stop here.

重写前，先运行一次快速内部审计（除非违规数为0，否则无需向用户展示审计内容）：

存在哪些违规问题？（使用与
```
/marrow-check
```
相同的判断逻辑）
哪些内容结构正确，应当保留？
哪些逻辑、props或功能绝对不能修改？

若未发现任何违规：

✓ This component already matches the soul. No changes needed.
  Run /marrow-check [file] for a full verification report.

直接终止流程。

Step 4 — Surgical Alignment

步骤4 — 精准对齐

Rewrite the component fixing every violation found. Rules:

Preserve

All component logic, state, props, and event handlers
All accessibility attributes (aria-*, role, tabIndex)
All data attributes and test IDs
The component's API (what it accepts and returns)
Comments that explain logic (not style comments)

Fix

Colors → replace with values from
```
.marrow.md
```
Section 4
Spacing → align to the base unit and rhythm from Section 2
Typography → match the scale, weights, and tracking from Section 3
Border-radius → match documented values from Section 5
Shadows → if
```
.marrow.md
```
prohibits them, remove them; replace with documented alternatives
Easing and duration → match Section 7 exactly
Interactive states → match the feedback philosophy from Section 5
Any anti-pattern from Section 8 → remove and replace with the soul-correct equivalent

Do not

Add features or new UI elements not in the original
Remove functionality while "cleaning up"
Change the component's visual hierarchy or layout structure unless it violates Section 6
Add animations that weren't in the original unless the soul explicitly calls for entrance animation on this type of element

重写组件，修复所有发现的违规问题。规则如下：

必须保留

所有组件逻辑、state、props和事件处理程序
所有无障碍属性（aria-*, role, tabIndex）
所有数据属性和测试ID
组件的API（入参与返回值）
解释逻辑的注释（样式相关注释除外）

需要修复

颜色 → 替换为
```
.marrow.md
```
第4节中的取值
间距 → 对齐第2节中的基础单位和节奏规则
排版 → 匹配第3节中的字号层级、字重和字间距
圆角 → 匹配第5节中记录的取值
阴影 → 若
```
.marrow.md
```
禁止使用阴影则移除，替换为文档中指定的替代方案
缓动函数和动画时长 → 完全匹配第7节的规则
交互状态 → 匹配第5节中的反馈理念
第8节中列出的所有反模式 → 移除并替换为符合设计灵魂的等效实现

禁止操作

新增原代码中没有的功能或UI元素
「清理」代码的过程中移除原有功能
除非违反第6节规则，否则不得修改组件的视觉层级或布局结构
除非设计灵魂明确要求此类元素需要入场动画，否则不得添加原代码中没有的动画

Step 5 — Deliver with Diff Summary

步骤5 — 交付并附带差异汇总

Show the aligned component, then a compact diff summary:

undefined

展示对齐后的组件，然后提供精简的差异汇总：

undefined

Marrow Align — [filename]

[aligned code]

What changed ([N] fixes)

CRITICAL fixed · [what was broken → what it is now] MAJOR fixed · [what was broken → what it is now] MINOR fixed · [what was broken → what it is now]

What was preserved

[key logic/structure kept intact]

[key logic/structure kept intact]

Marrow Check

✓ Passes all [N] soul rules


If any violation could not be fixed without changing functionality, flag it:

⚠ Could not fix: [specific violation] Reason: [why fixing it would break the component's function] Recommendation: [what the developer should do manually]

---

✓ Passes all [N] soul rules


如果存在不修改功能就无法修复的违规问题，进行标记：

⚠ Could not fix: [specific violation] Reason: [why fixing it would break the component's function] Recommendation: [what the developer should do manually]

---

Rules for This Skill

本技能使用规则

Surgical precision only — change exactly what needs changing, nothing more
Never introduce new dependencies or imports not already in the file
Never change a component's name, export, or public interface
Never remove working functionality in the name of "simplification"
If the file is too large to align fully in one pass, state which sections were aligned and which remain

仅做精准修改——仅改动必须调整的内容，不多改任何代码
不得引入文件中原本没有的新依赖或导入语句
不得修改组件名称、导出方式或公共接口
不得以「简化」为名移除正常运行的功能
如果文件过大无法一次完成全部对齐，说明已对齐的部分和剩余未对齐的部分