marrow-redesign

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Marrow Redesign

Marrow 重设计

You are running a full project soul alignment. This is the most powerful command in the Marrow system. You will scan the entire project, build a plan, and systematically bring every frontend file into alignment with

.marrow.md

— file by file, with full transparency.

This skill is smart. It tracks what it has already aligned and what changed in

.marrow.md

since the last run. On repeat invocations, it never re-aligns files that are already clean and weren't affected by recent updates.

你正在运行全项目设计灵魂对齐功能，这是Marrow系统中最强大的命令。它会扫描整个项目，生成执行计划，系统地将每一个前端文件与

.marrow.md

对齐——逐文件处理，全程完全透明。

该功能非常智能，它会跟踪已经对齐的内容，以及自上次运行后

.marrow.md

的变更内容。重复调用时，绝不会重新对齐已经符合规范且未受近期更新影响的文件。

Step 1 — Load the Soul and State

步骤1 — 加载设计灵魂与状态

1a. Read .marrow.md

1a. 读取.marrow.md

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.
  Then run /marrow-redesign to align the whole project.

Stop here.

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

.marrow.md

文件。

如果未找到：

✗ 未找到.marrow.md文件。
  请先运行/marrow命令并传入参考图片以提取设计灵魂。
  之后再运行/marrow-redesign对齐整个项目。

执行终止。

1b. Read .marrow-state.json

1b. 读取.marrow-state.json

Look for

.marrow-state.json

in the project root.

This file tracks:

Which files have been aligned and when
The
```
.marrow.md
```
checksum at the time of last alignment per file
Which sections of
```
.marrow.md
```
changed since the last redesign run

If
.marrow-state.json
exists → Smart Mode (partial update) Read it and determine:

Which sections of
```
.marrow.md
```
changed since last run (compare stored checksum per section vs current content)
Which files were previously aligned and are therefore candidates for targeted re-alignment only
Which files have never been touched and need full alignment

If
.marrow-state.json
does not exist → First Run Mode (full alignment) This is a fresh install or first time running redesign. Every frontend file needs full alignment.

Announce the mode clearly:

Mode: [First Run — full alignment] OR [Smart Update — only propagating changes to [sections]]

查找项目根目录下的

.marrow-state.json

文件。

该文件跟踪以下内容：

哪些文件已经完成对齐，以及对齐时间
每个文件上次对齐时对应的
```
.marrow.md
```
校验和
自上次重设计运行以来，
```
.marrow.md
```
的哪些章节发生了变更

如果
.marrow-state.json
存在 → 智能模式（部分更新）读取文件并判断：

自上次运行以来，
```
.marrow.md
```
的哪些章节发生了变更（对比存储的各章节校验和与当前内容）
哪些文件之前已经对齐，仅需要针对性重新对齐
哪些文件从未处理过，需要全量对齐

如果
.marrow-state.json
不存在 → 首次运行模式（全量对齐）这是首次安装或首次运行重设计功能，所有前端文件都需要全量对齐。

清晰告知当前运行模式：

模式: [首次运行 — 全量对齐] 或 [智能更新 — 仅同步[对应章节]的变更]

Step 2 — Discover and Inventory Frontend Files

步骤2 — 发现并清点前端文件

Scan the project for all frontend files. Include:

High priority (align first)

Global styles:

globals.css

app.css

index.css

tailwind.config.*

theme.*

Design tokens:
```
tokens.*
```
,
```
variables.css
```
,
```
colors.*
```
Base components:
```
Button
```
,
```
Input
```
,
```
Typography
```
,
```
Card
```
,
```
Badge
```
,
```
Link
```
Layout components:
```
Layout
```
,
```
Header
```
,
```
Nav
```
,
```
Footer
```
,
```
Sidebar
```

Medium priority

Feature components: anything in
```
components/
```
,
```
features/
```
,
```
modules/
```
Page files:
```
pages/
```
,
```
app/
```
(Next.js),
```
views/
```

Low priority

Composed pages: full page files that use components
Storybook files (align if present, note they mirror the component)

Exclude always

```
node_modules/
```
,
```
dist/
```
,
```
build/
```
,
```
.next/
```
,
```
out/
```
Test files (
```
*.test.*
```
,
```
*.spec.*
```
)
Auto-generated files (
```
*.generated.*
```
,
```
routeTree.gen.*
```
)
Config files that aren't design tokens (
```
vite.config.*
```
,
```
next.config.*
```
, etc.)

Build a complete inventory list.

扫描项目中的所有前端文件，包含：

高优先级（优先对齐）

全局样式：

globals.css

、

app.css

、

index.css

、

tailwind.config.*

、

theme.*

设计令牌：
```
tokens.*
```
、
```
variables.css
```
、
```
colors.*
```
基础组件：
```
Button
```
、
```
Input
```
、
```
Typography
```
、
```
Card
```
、
```
Badge
```
、
```
Link
```
布局组件：
```
Layout
```
、
```
Header
```
、
```
Nav
```
、
```
Footer
```
、
```
Sidebar
```

中优先级

功能组件：
```
components/
```
、
```
features/
```
、
```
modules/
```
下的所有内容
页面文件：
```
pages/
```
、
```
app/
```
（Next.js）、
```
views/
```

低优先级

组合页面：使用组件的完整页面文件
Storybook文件（如果存在则对齐，注意它们是组件的镜像）

始终排除

```
node_modules/
```
、
```
dist/
```
、
```
build/
```
、
```
.next/
```
、
```
out/
```
测试文件（
```
*.test.*
```
、
```
*.spec.*
```
）
自动生成文件（
```
*.generated.*
```
、
```
routeTree.gen.*
```
）
非设计令牌类配置文件（
```
vite.config.*
```
、
```
next.config.*
```
等）

生成完整的文件清单。

Step 3 — Smart Diff (if Smart Mode)

步骤3 — 智能差异比对（智能模式下）

.marrow-state.json

exists, determine which rules changed in

.marrow.md

Changed section	Affects
Section 4 (colors)	All files using color values — global CSS, every component
Section 2 (spacing)	All files using spacing/padding/margin/gap
Section 3 (typography)	All files using font, font-size, font-weight, letter-spacing
Section 5 (components)	Button, Input, Card, and any component with interactive states
Section 7 (motion)	Any file with transitions, animations, keyframes
Section 6 (layout)	Layout files, page-level files
Section 0 (soul/personality)	No direct code impact — note in plan but no file changes
Section 8 (anti-patterns)	All files — anti-patterns can appear anywhere

Build a targeted file list: only files where the changed sections have direct impact.

Files previously aligned and not affected by changed sections → skip (mark as "already aligned, no changes needed").

globals.css is always processed — even in Smart Mode. Any change to

.marrow.md

may affect the token block or legacy alias mapping. The safe-mode reconciliation in Step 3b is always run, but it is designed to be safe to re-run — it only patches what changed, never removes existing content.

Announce the scope reduction:

Smart update: .marrow.md Section 4 (colors) changed.
  globals.css: always reprocessed (safe-mode reconciliation)
  Affects: 12 of 34 component files
  Skipping: 22 files (already aligned, unaffected by color changes)
  Processing: 13 files total (globals.css + 12 components)

如果存在

.marrow-state.json

，判断

.marrow.md

中哪些规则发生了变更：

变更章节	影响范围
第4章（颜色）	所有使用颜色值的文件 — 全局CSS、所有组件
第2章（间距）	所有使用spacing/padding/margin/gap的文件
第3章（排版）	所有使用字体、字号、字重、字间距的文件
第5章（组件）	Button、Input、Card以及所有带交互状态的组件
第7章（动效）	所有包含过渡、动画、keyframes的文件
第6章（布局）	布局文件、页面级文件
第0章（灵魂/风格）	无直接代码影响 — 在计划中注明但不修改文件
第8章（反模式）	所有文件 — 反模式可能出现在任何位置

生成目标文件列表：仅包含受变更章节直接影响的文件。

之前已对齐且不受变更章节影响的文件 → 跳过（标记为“已对齐，无需变更”）。

globals.css始终需要处理 — 即使是智能模式。

.marrow.md

的任何变更都可能影响令牌块或旧别名映射。步骤3b的安全模式调和始终会运行，它被设计为可安全重复执行 — 仅补丁变更内容，绝不会删除现有内容。

告知范围缩减情况：

智能更新：.marrow.md第4章（颜色）发生变更。
  globals.css：始终重新处理（安全模式调和）
  影响范围：34个组件文件中的12个
  跳过：22个文件（已对齐，不受颜色变更影响）
  总计处理：13个文件（globals.css + 12个组件）

Step 3b — globals.css Safe-Mode Audit

步骤3b — globals.css 安全模式审计

Before building the plan, run a dedicated audit on every global CSS file found (

globals.css

app.css

index.css

base.css

variables.css

, or any file that defines CSS custom properties or resets at the root level).

This step exists because

globals.css

is the most dangerous file in the project. It defines the base layer that everything else inherits from. If it contains conflicting token names, stale values, or CSS properties that contradict

.marrow.md

, every component will fight the soul no matter how well it's aligned.

生成计划前，对所有找到的全局CSS文件（

globals.css

、

app.css

、

index.css

、

base.css

、

variables.css

，或任何在根层级定义CSS自定义属性或重置的文件）运行专用审计。

该步骤存在的原因是

globals.css

是项目中最关键的文件，它定义了所有内容继承的基础层。如果它包含冲突的令牌名称、过期值或与

.marrow.md

矛盾的CSS属性，那么无论组件对齐得多好，都会与设计灵魂冲突。

What to look for in globals.css

globals.css的检查要点

Conflicting custom properties — CSS variables that define the same concept as

.marrow.md

tokens but with different names or values:

/* globals.css has this: */
--primary: #7C3AED;          /* old purple */
--font-size-base: 16px;

/* .marrow.md says: */
--color-accent: #3B82F6;     /* different name, different value */
--body-size: 15px;           /* different name */

These will cause silent overrides. Components using

var(--primary)

will never show the Marrow accent.

Stale resets that override Marrow's rhythm — margin/padding resets, line-height globals, or font-size rules on

html

body

that contradict the extracted type scale or spacing system.

Hardcoded values on global selectors —

a { color: #7C3AED }

h1 { font-size: 2.5rem }

* { border-radius: 8px }

— any rule targeting broad selectors that will bleed into Marrow-aligned components.

Old animation/transition globals —

* { transition: all 0.3s ease }

is a common one that will override every specific duration and easing in

.marrow.md

Duplicate token definitions — the same concept defined twice under different variable names, creating ambiguity about which one components should use.

冲突的自定义属性 — 与

.marrow.md

令牌定义相同概念但名称或值不同的CSS变量：

/* globals.css中的内容： */
--primary: #7C3AED;          /* 旧紫色 */
--font-size-base: 16px;

/* .marrow.md中的定义： */
--color-accent: #3B82F6;     /* 名称不同，值不同 */
--body-size: 15px;           /* 名称不同 */

这些会导致静默覆盖，使用

var(--primary)

的组件永远不会显示Marrow的强调色。

覆盖Marrow节奏的过期重置 — 与提取的字号体系或间距系统矛盾的margin/padding重置、全局行高、或

html

body

上的字号规则。

全局选择器上的硬编码值 —

a { color: #7C3AED }

、

h1 { font-size: 2.5rem }

、

* { border-radius: 8px }

— 任何针对宽泛选择器的规则都会渗透到已对齐Marrow的组件中。

旧的动画/过渡全局规则 —

* { transition: all 0.3s ease }

是常见规则，会覆盖

.marrow.md

中所有特定的时长和缓动设置。

重复的令牌定义 — 同一概念用不同变量名定义了两次，导致组件应该使用哪个变量产生歧义。

The safe-mode rewrite rules

安全模式重写规则

When rewriting

globals.css

, follow these rules in strict order:

1 — Map, don't delete Never delete an old variable. Instead, map it to the new Marrow token so existing code that references the old name still works:

css

/* BEFORE */
--primary: #7C3AED;

/* AFTER — map old name to Marrow token, comment explains */
--color-accent: #3B82F6;          /* Marrow: brand accent — ~4% visual weight */
--primary: var(--color-accent);   /* legacy alias — migrate components to --color-accent */

This prevents broken components while the project migrates.

2 — Never remove existing resets that aren't conflicting If

box-sizing: border-box

margin: 0

, or other foundational resets exist and don't conflict with

.marrow.md

, leave them exactly as-is.

3 — Resolve conflicts by scope, not deletion If a global selector rule (

h1

body

) conflicts with Marrow, scope it down or add a Marrow-specific override below it — never silently remove the original:

css

/* Original (keep it) */
a {
  color: #7C3AED;
}

/* Marrow override (add below) */
/* marrow: link color — matches Section 4 primary text, not accent */
a {
  color: var(--color-text-primary);
}

4 — Add the full Marrow token block After handling all existing properties, append a clearly marked Marrow token block at the end of

:root

. This is the canonical source of truth that all Marrow-aligned components will use:

css

/* ============================================================
   MARROW DESIGN TOKENS — generated by /marrow
   Source of truth: .marrow.md
   Do not edit manually — use /marrow-update to change values
   ============================================================ */
:root {
  /* canvas */
  --marrow-canvas: [value];

  /* text */
  --marrow-text-primary: [value];
  --marrow-text-secondary: [value];
  --marrow-text-tertiary: [value];

  /* accent — USE AT [XX]% VISUAL WEIGHT ONLY */
  --marrow-accent: [value];

  /* surfaces */
  --marrow-surface: [value];
  --marrow-surface-hover: [value];

  /* borders */
  --marrow-border: [value];
  --marrow-border-focus: [value];

  /* semantic */
  --marrow-success: [value];
  --marrow-error: [value];
  --marrow-warning: [value];

  /* spacing — base unit: [N]px */
  --marrow-space-1: [1×base];
  --marrow-space-2: [2×base];
  --marrow-space-3: [3×base];
  --marrow-space-4: [4×base];
  --marrow-space-6: [6×base];
  --marrow-space-8: [8×base];
  --marrow-space-12: [12×base];
  --marrow-space-16: [16×base];

  /* typography */
  --marrow-font-display: [font], [fallback];
  --marrow-font-body: [font], [fallback];
  --marrow-font-mono: [font], monospace;

  /* motion */
  --marrow-ease: cubic-bezier([values]);
  --marrow-duration-micro: [value]ms;
  --marrow-duration-element: [value]ms;
  --marrow-duration-panel: [value]ms;

  /* radius */
  --marrow-radius-sm: [value]px;
  --marrow-radius-md: [value]px;
  --marrow-radius-lg: [value]px;
}

Note the

--marrow-

prefix. This prefix namespacing is intentional — it prevents collision with any existing variables and makes it immediately clear in any component file which tokens are Marrow-sourced.

5 — Add a conflict map comment at the top of globals.css

css

/*
 * MARROW CONFLICT MAP
 * Old variable → New Marrow token
 * ---
 * --primary          → --marrow-accent
 * --font-size-base   → --marrow-font-body (via font-size in type scale)
 * --spacing-md       → --marrow-space-4
 * ---
 * Legacy aliases are kept below for backward compatibility.
 * Migrate components to --marrow-* tokens over time.
 * Remove aliases once migration is complete.
 */

重写

globals.css

时，严格遵循以下顺序的规则：

1 — 映射，不删除 绝不删除旧变量，而是将其映射到新的Marrow令牌，这样引用旧名称的现有代码仍然可以正常工作：

css

/* 重写前 */
--primary: #7C3AED;

/* 重写后 — 将旧名称映射到Marrow令牌，添加注释说明 */
--color-accent: #3B82F6;          /* Marrow：品牌强调色 — 仅占~4%视觉权重 */
--primary: var(--color-accent);   /* 旧别名 — 请将组件迁移到使用--color-accent */

这可以在项目迁移期间避免组件损坏。

2 — 绝不删除不存在冲突的现有重置 如果

box-sizing: border-box

、

margin: 0

或其他基础重置存在且与

.marrow.md

不冲突，保持原样不变。

3 — 通过范围解决冲突，不删除 如果全局选择器规则（

、

h1

、

body

）与Marrow冲突，缩小其范围或在其下方添加Marrow专用的覆盖规则 — 绝不静默删除原规则：

css

/* 原规则（保留） */
a {
  color: #7C3AED;
}

/* Marrow覆盖规则（添加在下方） */
/* marrow：链接颜色 — 匹配第4章主文本，非强调色 */
a {
  color: var(--color-text-primary);
}

4 — 添加完整的Marrow令牌块 处理完所有现有属性后，在

:root

末尾附加一个明确标记的Marrow令牌块，这是所有对齐Marrow的组件使用的权威真值源：

css

/* ============================================================
   MARROW DESIGN TOKENS — 由/marrow生成
   真值源：.marrow.md
   请勿手动编辑 — 使用/marrow-update修改值
   ============================================================ */
:root {
  /* 画布 */
  --marrow-canvas: [value];

  /* 文本 */
  --marrow-text-primary: [value];
  --marrow-text-secondary: [value];
  --marrow-text-tertiary: [value];

  /* 强调色 — 仅在[XX]%视觉权重场景下使用 */
  --marrow-accent: [value];

  /* 表面 */
  --marrow-surface: [value];
  --marrow-surface-hover: [value];

  /* 边框 */
  --marrow-border: [value];
  --marrow-border-focus: [value];

  /* 语义色 */
  --marrow-success: [value];
  --marrow-error: [value];
  --marrow-warning: [value];

  /* 间距 — 基础单位：[N]px */
  --marrow-space-1: [1×基础单位];
  --marrow-space-2: [2×基础单位];
  --marrow-space-3: [3×基础单位];
  --marrow-space-4: [4×基础单位];
  --marrow-space-6: [6×基础单位];
  --marrow-space-8: [8×基础单位];
  --marrow-space-12: [12×基础单位];
  --marrow-space-16: [16×基础单位];

  /* 排版 */
  --marrow-font-display: [字体], [ fallback字体];
  --marrow-font-body: [字体], [ fallback字体];
  --marrow-font-mono: [字体], monospace;

  /* 动效 */
  --marrow-ease: cubic-bezier([参数]);
  --marrow-duration-micro: [值]ms;
  --marrow-duration-element: [值]ms;
  --marrow-duration-panel: [值]ms;

  /* 圆角 */
  --marrow-radius-sm: [值]px;
  --marrow-radius-md: [值]px;
  --marrow-radius-lg: [值]px;
}

注意

--marrow-

前缀，这个前缀命名空间是刻意设计的 — 它可以避免与任何现有变量冲突，并且在任何组件文件中都能立即识别出哪些令牌来自Marrow。

5 — 在globals.css顶部添加冲突映射注释

css

/*
 * MARROW 冲突映射
 * 旧变量 → 新Marrow令牌
 * ---
 * --primary          → --marrow-accent
 * --font-size-base   → --marrow-font-body（通过字号体系的font-size）
 * --spacing-md       → --marrow-space-4
 * ---
 * 下方保留了旧别名以保证向后兼容。
 * 请逐步将组件迁移到使用--marrow-*令牌。
 * 迁移完成后可删除别名。
 */

After the globals.css rewrite

globals.css重写完成后

Report what was found and what was done:

─────────────────────────────────────────
Phase 0 · globals.css — Safe-Mode Reconciliation
─────────────────────────────────────────
Conflicts found: [N]
  · --primary (#7C3AED) conflicts with --marrow-accent (#3B82F6)
    → kept as legacy alias: --primary: var(--marrow-accent)
  · body { font-size: 16px } conflicts with Marrow 15px base
    → scoped: added --marrow-font-body override below
  · * { transition: all 0.3s ease } overrides Marrow motion system
    → replaced with: * { transition: none } + specific Marrow transitions on interactive elements

Marrow token block added: [N] tokens injected into :root
Legacy aliases created: [N] (safe — old names now point to Marrow values)
Non-conflicting rules preserved: [N]

⚠ Migrate these aliases when ready:
  --primary → use --marrow-accent instead
  --spacing-md → use --marrow-space-4 instead
✓ globals.css saved

报告发现的问题和处理结果：

─────────────────────────────────────────
阶段0 · globals.css — 安全模式调和
─────────────────────────────────────────
发现冲突：[N]个
  · --primary (#7C3AED) 与 --marrow-accent (#3B82F6) 冲突
    → 保留为旧别名：--primary: var(--marrow-accent)
  · body { font-size: 16px } 与Marrow 15px基础字号冲突
    → 范围处理：在下方添加--marrow-font-body覆盖规则
  · * { transition: all 0.3s ease } 覆盖了Marrow动效系统
    → 替换为：* { transition: none } + 为交互元素添加特定的Marrow过渡效果

已添加Marrow令牌块：向:root注入了[N]个令牌
已创建旧别名：[N]个（安全 — 旧名称现在指向Marrow值）
已保留无冲突规则：[N]个

⚠ 准备就绪后请迁移这些别名：
  --primary → 改用--marrow-accent
  --spacing-md → 改用--marrow-space-4
✓ 已保存globals.css

Step 4 — Build the Alignment Plan

步骤4 — 生成对齐计划

Before touching a single file, present the full plan to the user.

undefined

在修改任何文件之前，向用户展示完整计划。

undefined

Marrow Redesign — Alignment Plan

Marrow 重设计 — 对齐计划

Mode: [First Run / Smart Update] Soul: [3-word personality] Files to align: [N] of [total N] frontend files

模式：[首次运行 / 智能更新] 设计灵魂：[3词风格描述] 待对齐文件：[总前端文件数]中的[N]个

Execution order

执行顺序

Phase 0 — globals.css reconciliation ✓ (already done above)

Phase 1 — Foundation (must go first, everything inherits from these) [ ] tailwind.config.ts — sync --marrow-* tokens into Tailwind theme [ ] tokens.ts — update design token values to match --marrow-* vars

Phase 2 — Base components (everything is built from these) [ ] Button.tsx — [N] violations: wrong radius, wrong hover state [ ] Input.tsx — [N] violations: wrong border, wrong focus ring [ ] Typography.tsx — [N] violations: wrong type scale [ ] Card.tsx — [N] violations: shadow (anti-pattern), wrong padding

Phase 3 — Layout components [ ] Header.tsx — [N] violations: wrong spacing, wrong accent usage [ ] Nav.tsx — [N] violations: wrong active state style [ ] Sidebar.tsx — [N] violations: wrong surface color

Phase 4 — Feature components [ ] [component] — [N] violations ...

Phase 5 — Pages [ ] [page] — [N] violations ...

[Skipped — already aligned, unaffected by changes] [N] files skipped

Estimated changes: [N] total violations to fix across all files

Proceed? (Say "yes" or "go" to start, or ask to skip any phase)


Wait for user confirmation before proceeding.

---

阶段0 — globals.css调和 ✓（已在上文完成）

阶段1 — 基础层（必须优先执行，所有内容都继承这些配置） [ ] tailwind.config.ts — 将--marrow-*令牌同步到Tailwind主题 [ ] tokens.ts — 更新设计令牌值匹配--marrow-*变量

阶段2 — 基础组件（所有内容都基于这些组件构建） [ ] Button.tsx — [N]个违规：圆角错误、hover状态错误 [ ] Input.tsx — [N]个违规：边框错误、焦点环错误 [ ] Typography.tsx — [N]个违规：字号体系错误 [ ] Card.tsx — [N]个违规：阴影（反模式）、内边距错误

阶段3 — 布局组件 [ ] Header.tsx — [N]个违规：间距错误、强调色使用错误 [ ] Nav.tsx — [N]个违规：激活状态样式错误 [ ] Sidebar.tsx — [N]个违规：表面颜色错误

阶段4 — 功能组件 [ ] [组件名] — [N]个违规 ...

阶段5 — 页面 [ ] [页面名] — [N]个违规 ...

[已跳过 — 已对齐，不受变更影响] 跳过[N]个文件

预计变更：所有文件共需要修复[N]个违规

是否继续？（回复“yes”或“go”开始，或要求跳过任意阶段）


继续执行前等待用户确认。

---

Step 5 — Execute Phase by Phase

步骤5 — 分阶段执行

Work through each phase in order. Rules:

Within each file:

Apply the same surgical alignment logic as
```
marrow-align
```
Fix every violation
Preserve all logic, props, and functionality
Show the aligned file
Show a compact diff summary

Between files:

After completing each file, update
```
.marrow-state.json
```
immediately
If interrupted mid-run,
```
.marrow-state.json
```
allows resuming from exactly where you left off
Never re-process a file that was already completed in this run

Output format per file:

─────────────────────────────────────────
[Phase N] · [filename]
─────────────────────────────────────────
[aligned code]

Fixes: [N]
  · [what changed → what it is now]
  · [what changed → what it is now]
✓ Saved

Phase completion:

✓ Phase [N] complete — [N] files aligned, [N] violations fixed

按顺序处理每个阶段，规则如下：

每个文件内部：

应用与
```
marrow-align
```
相同的精细对齐逻辑
修复所有违规
保留所有逻辑、props和功能
展示对齐后的文件
展示简洁的差异摘要

文件之间：

完成每个文件后，立即更新
```
.marrow-state.json
```
如果运行中途中断，
```
.marrow-state.json
```
支持从上次中断的位置继续
绝不重新处理本次运行中已经完成的文件

每个文件的输出格式：

─────────────────────────────────────────
[阶段N] · [文件名]
─────────────────────────────────────────
[对齐后的代码]

修复：[N]个
  · [变更内容 → 变更后内容]
  · [变更内容 → 变更后内容]
✓ 已保存

阶段完成提示：

✓ 阶段[N]完成 — 已对齐[N]个文件，修复[N]个违规

Step 6 — Update .marrow-state.json

步骤6 — 更新.marrow-state.json

After every file is aligned, write or update

.marrow-state.json

json

{
  "version": "1.0",
  "last_redesign": "[ISO timestamp]",
  "marrow_checksums": {
    "section_0": "[hash of Section 0 content]",
    "section_1": "[hash]",
    "section_2": "[hash]",
    "section_3": "[hash]",
    "section_4": "[hash]",
    "section_5": "[hash]",
    "section_6": "[hash]",
    "section_7": "[hash]",
    "section_8": "[hash]"
  },
  "aligned_files": {
    "src/components/Button.tsx": {
      "aligned_at": "[ISO timestamp]",
      "violations_fixed": 4,
      "sections_applied": ["section_2", "section_4", "section_5"]
    },
    "src/styles/globals.css": {
      "aligned_at": "[ISO timestamp]",
      "violations_fixed": 8,
      "sections_applied": ["section_2", "section_3", "section_4", "section_7"]
    }
  },
  "skipped_files": {
    "src/components/Icon.tsx": {
      "reason": "already aligned, unaffected by recent changes",
      "last_aligned": "[ISO timestamp]"
    }
  }
}

Add

.marrow-state.json

.gitignore

if it's not already there (it's machine-specific state, not meant to be committed).

每个文件对齐完成后，写入或更新

.marrow-state.json

：

json

{
  "version": "1.0",
  "last_redesign": "[ISO时间戳]",
  "marrow_checksums": {
    "section_0": "[第0章内容的哈希值]",
    "section_1": "[哈希值]",
    "section_2": "[哈希值]",
    "section_3": "[哈希值]",
    "section_4": "[哈希值]",
    "section_5": "[哈希值]",
    "section_6": "[哈希值]",
    "section_7": "[哈希值]",
    "section_8": "[哈希值]"
  },
  "aligned_files": {
    "src/components/Button.tsx": {
      "aligned_at": "[ISO时间戳]",
      "violations_fixed": 4,
      "sections_applied": ["section_2", "section_4", "section_5"]
    },
    "src/styles/globals.css": {
      "aligned_at": "[ISO时间戳]",
      "violations_fixed": 8,
      "sections_applied": ["section_2", "section_3", "section_4", "section_7"]
    }
  },
  "skipped_files": {
    "src/components/Icon.tsx": {
      "reason": "已对齐，不受近期变更影响",
      "last_aligned": "[ISO时间戳]"
    }
  }
}

如果

.marrow-state.json

尚未加入

.gitignore

则将其添加（它是机器特定的状态文件，不需要提交）。

Step 7 — Final Report

步骤7 — 最终报告

undefined

undefined

Marrow Redesign — Complete

Marrow 重设计 — 完成

Mode: [First Run / Smart Update]

模式：[首次运行 / 智能更新]

Results

结果

Files aligned: [N] Files skipped: [N] (already aligned, unaffected) Violations fixed: [N] total CRITICAL: [N] MAJOR: [N] MINOR: [N]

已对齐文件：[N]个已跳过文件：[N]个（已对齐，不受影响）已修复违规：总计[N]个严重：[N]个主要：[N]个次要：[N]个

By phase

各阶段情况

Phase 0 globals.css: [N] conflicts resolved · [N] Marrow tokens injected Phase 1 Foundation: [N] files · [N] fixes Phase 2 Base components: [N] files · [N] fixes Phase 3 Layout components: [N] files · [N] fixes Phase 4 Feature components: [N] files · [N] fixes Phase 5 Pages: [N] files · [N] fixes

阶段0 globals.css：解决[N]个冲突 · 注入[N]个Marrow令牌阶段1 基础层： [N]个文件 · [N]个修复阶段2 基础组件： [N]个文件 · [N]个修复阶段3 布局组件： [N]个文件 · [N]个修复阶段4 功能组件： [N]个文件 · [N]个修复阶段5 页面： [N]个文件 · [N]个修复

What's next

后续步骤

marrow-apply is active — new components will be built in the soul automatically.

If you update .marrow.md with /marrow-update, run /marrow-redesign again. It will only reprocess files affected by what changed.

To audit any single file: /marrow-check [filename] To fix a specific file: /marrow-align [filename]

---

marrow-apply已激活 — 新组件将自动遵循设计灵魂构建。

如果你通过/marrow-update更新了.marrow.md，请再次运行/marrow-redesign，它将仅重新处理受变更影响的文件。

要审计单个文件：/marrow-check [文件名] 要修复特定文件：/marrow-align [文件名]

---

Resuming an Interrupted Run

恢复中断的运行

If the user runs

/marrow-redesign

and

.marrow-state.json

shows an incomplete previous run (files in the plan that were never marked as aligned):

⚡ Resuming previous redesign run from [timestamp]
   Progress: [N] of [N] files completed
   Continuing from: [next file]

Resume from the last completed file. Do not restart from the beginning.

如果用户运行

/marrow-redesign

时，

.marrow-state.json

显示上次运行未完成（计划中的文件未标记为已对齐）：

⚡ 从[时间戳]恢复上次的重设计运行
   进度：已完成[N]/[N]个文件
   继续处理：[下一个文件名]

从上次完成的文件继续，不要从头重启。

Critical Rules for This Skill

本功能的核心规则

Never start executing without presenting the plan first and getting confirmation. This command touches many files — the user must approve the scope.
Smart mode is non-negotiable. If
```
.marrow-state.json
```
exists, you MUST use it to skip unaffected files. Never do a full rewrite when only colors changed.
globals.css is always Phase 0 — always safe-mode. Run the reconciliation before anything else on every redesign run, even Smart Mode. Never delete existing CSS properties — map them to Marrow tokens with legacy aliases. The
```
--marrow-
```
prefix is mandatory for all injected tokens to prevent collision.
Phase order is load-bearing. Foundation files (global CSS, tokens, Tailwind config) must be aligned first — everything else inherits from them. Aligning a Button before aligning the token file means the Button may use stale values.
Write
.marrow-state.json
after every file, not at the end. If the run is interrupted, progress must be recoverable.
Preserve all functionality. This command touches many files at once — extra caution on preserving logic, props, event handlers, and accessibility attributes.
If a file is too complex or risky to align automatically (e.g., a 1000-line page file with complex logic tightly coupled to styles), flag it:
```
⚠ Skipped: [filename] — too complex for automated alignment.
  Run /marrow-align [filename] manually for fine-grained control.
```
Max files per turn: Align no more than 5 files per response turn to keep output reviewable. After each batch, pause and show progress before continuing.

在展示计划并获得确认前绝不开始执行。 该命令会修改大量文件 — 用户必须确认范围。
智能模式是强制要求。 如果存在
```
.marrow-state.json
```
，必须使用它跳过不受影响的文件。仅颜色变更时绝不要执行全量重写。
globals.css始终是阶段0 — 始终使用安全模式。 每次重设计运行（即使是智能模式）都要先执行调和，绝不删除现有CSS属性 — 用旧别名将它们映射到Marrow令牌。所有注入的令牌必须使用
```
--marrow-
```
前缀以避免冲突。
阶段顺序至关重要。 基础层文件（全局CSS、令牌、Tailwind配置）必须优先对齐 — 所有其他内容都继承它们。在对齐令牌文件之前对齐Button会导致Button可能使用过期值。
每个文件处理完成后立即写入
.marrow-state.json
，不要等到最后。如果运行中断，进度必须可恢复。
保留所有功能。 该命令会同时修改大量文件 — 要特别注意保留逻辑、props、事件处理函数和可访问性属性。

如果文件过于复杂或自动对齐风险过高（例如1000行的页面文件，逻辑与样式高度耦合），标记它：

⚠ 已跳过：[文件名] — 过于复杂，无法自动对齐。
  手动运行/marrow-align [文件名]进行精细控制。

每轮最多处理5个文件： 每次响应最多对齐5个文件，保证输出可审核。每批处理完成后，暂停并展示进度后再继续。