scaffold-project

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Step 0 — is the kit here? This skill reads files from the kit. Check once:
ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING
On
KIT_MISSING
only the skill folders were installed, which is what
npx skills add
does. Say so plainly, point the user at
npx ux-ui-agent-skills init
or the plugin install, and stop. Do not guess the contents of a file you could not open.

Generate a new design-project skeleton from

${CLAUDE_SKILL_DIR}/../../../templates/product-design/

into a target directory the user names.

The layout to produce (exactly the reference structure):

<target>/
  # CONTEXT CLAUDE LOADS
  CLAUDE.md              the brief Claude reads every session
  CLAUDE.local.md        your personal prefs, gitignored
  .mcp.json              Figma, Notion, Drive connections

  # TEAM TOOLKIT
  .claude/
    rules/               conventions, loaded only when relevant
    skills/              repeatable workflows, off main context
    commands/            your custom slash commands
    settings.json        shared permissions, checked into git

  # YOUR PROJECT
  design-tokens.json     source of truth: color, type, spacing
  src/components/        the real UI Claude reads and edits
  public/images/         real images so prototypes don't break
  reference/             real screens Claude studies for context

The fast path, when the kit is installed or reachable via npx:

npx ux-ui-agent-skills new <target>

That does steps 2 and 3 below in one call (template copied,

CLAUDE.local.md

un-suffixed, engine areas installed without overwriting the lean brief). Then pick up at step 4. The manual steps are spelled out so the same result can be produced by hand from a clone.

Steps:

Ask for the target directory if not given. Create it if it does not exist.
Copy every file of
```
${CLAUDE_SKILL_DIR}/../../../templates/product-design/
```
into it, preserving the tree. Two rules on the copy:
- ```
CLAUDE.local.md.template
```
  lands as
```
CLAUDE.local.md
```
  (the suffix exists only so the kit's own gitignore cannot swallow the file).
- ```
.gitkeep
```
  stays in
```
.claude/skills/
```
  ,
```
.claude/commands/
```
  ,
```
src/components/
```
  ,
```
public/images/
```
  , and
```
reference/
```
  so the empty folders survive the first commit. The template already ships
```
.gitignore
```
  (which ignores
```
CLAUDE.local.md
```
  ),
```
.mcp.json
```
  ,
```
.claude/settings.json
```
  , and three rules files (
```
components.md
```
  ,
```
tokens.md
```
  ,
```
accessibility.md
```
  ).
Install the engine next to it so the gates the brief references actually run:
```
npx ux-ui-agent-skills add tokens components taste accessibility \
    workflows content frameworks design-systems scripts skills
```
Use
```
add
```
, not
```
init
```
:
```
init
```
also writes the full engine
```
CLAUDE.md
```
over the lean project brief. The project brief stays short by design, and the engine knowledge loads from the copied folders when a task needs it.
Install the render gates' one dependency in the target:
```
npm i -D playwright
```
. Skipping this is silent: every render gate prints
```
SKIPPED
```
and exits 0.
Fill in the placeholders in
```
CLAUDE.md
```
with the user: product, primary user, stack, icon set, vocabulary. Leave nothing in angle brackets behind.
Point
```
design-tokens.json
```
at the brand: replace the
```
primitive.brand
```
ramp, keep the semantic and component tiers, then prove it still passes:
```
python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_contrast.py
```
Remind the user to fill
```
reference/
```
with real screens and
```
public/images/
```
with real imagery, and to set the MCP env vars (
```
FIGMA_API_KEY
```
, ...) in their own shell. Never write a secret into
```
.mcp.json
```
.

Verify before handing over: the target tree matches the layout above, and

python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_template.py

passes against the source template.

步骤 0——工具包是否已就绪？ 此 skill 会从工具包中读取文件。请检查一次：
ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING
如果显示
KIT_MISSING
，说明只安装了 skill 文件夹，这正是
npx skills add
所执行的操作。明确告知用户，指引其运行
npx ux-ui-agent-skills init
或安装 plugin，然后停止。不要猜测无法打开的文件内容。

从

${CLAUDE_SKILL_DIR}/../../../templates/product-design/

生成一个新的设计项目骨架，并放入用户指定的目标目录。

需要生成以下布局（必须与参考结构完全一致）：

<target>/
  # CONTEXT CLAUDE LOADS
  CLAUDE.md              the brief Claude reads every session
  CLAUDE.local.md        your personal prefs, gitignored
  .mcp.json              Figma, Notion, Drive connections

  # TEAM TOOLKIT
  .claude/
    rules/               conventions, loaded only when relevant
    skills/              repeatable workflows, off main context
    commands/            your custom slash commands
    settings.json        shared permissions, checked into git

  # YOUR PROJECT
  design-tokens.json     source of truth: color, type, spacing
  src/components/        the real UI Claude reads and edits
  public/images/         real images so prototypes don't break
  reference/             real screens Claude studies for context

当工具包已安装或可通过 npx 访问时，使用快速路径：

npx ux-ui-agent-skills new <target>

该命令一次即可完成下面的步骤 2 和 3（复制模板、去除

CLAUDE.local.md

的后缀，并安装 engine 区域，但不会覆盖精简版 brief）。然后从步骤 4 继续。下面明确列出了手动步骤，以便从 clone 手动生成相同结果。

步骤：

如果未提供目标目录，请询问用户。如果目录不存在，则创建它。
将
```
${CLAUDE_SKILL_DIR}/../../../templates/product-design/
```
中的每个文件复制到目标目录，并保留目录树结构。复制时遵循两条规则：
- ```
CLAUDE.local.md.template
```
  最终应命名为
```
CLAUDE.local.md
```
  （添加该后缀只是为了避免工具包自身的 gitignore 忽略此文件）。
- ```
.gitkeep
```
  应保留在
```
.claude/skills/
```
  、
```
.claude/commands/
```
  、
```
src/components/
```
  、
```
public/images/
```
  和
```
reference/
```
  中，确保空目录能够保留到首次 commit。模板已经包含
```
.gitignore
```
  （其中会忽略
```
CLAUDE.local.md
```
  ）、
```
.mcp.json
```
  、
```
.claude/settings.json
```
  以及三个 rules 文件（
```
components.md
```
  、
```
tokens.md
```
  、
```
accessibility.md
```
  ）。
同时安装 engine，确保 brief 引用的各项 gates 确实能够运行：
```
npx ux-ui-agent-skills add tokens components taste accessibility \
    workflows content frameworks design-systems scripts skills
```
使用
```
add
```
，不要使用
```
init
```
：
```
init
```
还会使用完整的 engine
```
CLAUDE.md
```
覆盖精简版项目 brief。项目 brief 有意保持简短；当任务需要时，engine 知识会从复制过来的文件夹中加载。
在目标目录中安装 render gates 所需的唯一依赖：
```
npm i -D playwright
```
。如果跳过此步骤，不会收到任何提示：每个 render gate 都会打印
```
SKIPPED
```
并以状态码 0 退出。
根据用户提供的信息填写
```
CLAUDE.md
```
中的占位符：产品、主要用户、技术栈、图标集、词汇表。不要留下任何尖括号占位符。
让
```
design-tokens.json
```
指向品牌：替换
```
primitive.brand
```
色阶，保留 semantic 和 component 层级，然后验证其仍能通过检查：
```
python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_contrast.py
```
提醒用户使用真实界面填充
```
reference/
```
，使用真实图像填充
```
public/images/
```
，并在自己的 shell 中设置 MCP 环境变量（
```
FIGMA_API_KEY
```
等）。绝不要将 secret 写入
```
.mcp.json
```
。

交付前进行验证：目标目录树与上述布局一致，并且以下命令针对源模板验证通过：

python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_template.py