mcpField
S
scaffold-project

scaffold-project

github.com/plugin87开发3.0k141 次安装1 天前更新
代码仓库

关于 scaffold-project

scaffold-project 是一项基于工具包模板创建产品设计项目骨架的技能，面向使用 Claude 技能的设计团队，并指导后续配置与验证。

主要功能

  1. 01复制模板目录结构
  2. 02使用 npx 安装引擎区域
  3. 03安装 Playwright 渲染门禁依赖
  4. 04指导填写项目简介和令牌
  5. 05验证项目模板

适用场景

  1. 01启动产品设计项目
  2. 02设置设计令牌和项目简介
  3. 03为项目配置渲染门禁

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/plugin87/ux-ui-agent-skills --skill scaffold-project

安装后在 Claude Code 中输入/scaffold-project确认已加载。

详细介绍

步骤 0 — 工具包在这里吗？ 此技能会读取工具包中的文件。检查一次： ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING 仅当出现 KIT_MISSING 时，才表示只安装了技能文件夹，这是 npx skills add 的操作结果。请明确说明这一点，指引用户运行 npx ux-ui-agent-skills init 或安装插件，然后停止。不要猜测你无法打开的文件内容。

从 ${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.template 去掉后缀命名为 CLAUDE.local.md，并安装引擎目录，同时不覆盖精简版项目说明）。然后继续执行步骤 4。下面列出了手动步骤，以便从克隆的仓库手动生成相同结果。

步骤：

  1. 如果用户未提供目标目录，请询问。若目录不存在，则创建该目录。

  2. 将 ${CLAUDE_SKILL_DIR}/../../../templates/product-design/ 中的所有文件复制到目标目录，并保留目录结构。 复制时遵循两条规则：

    • 将 CLAUDE.local.md.template 保存为 CLAUDE.local.md（保留后缀只是为了避免工具包自身的 gitignore 忽略此文件）。
    • 保留 .claude/skills/、.claude/commands/、 src/components/、public/images/ 和 reference/ 中的 .gitkeep，以确保这些空目录能保留在首次提交中。 模板已包含 .gitignore（其中会忽略 CLAUDE.local.md）、.mcp.json、.claude/settings.json 和三个规则文件 （components.md、tokens.md、accessibility.md）。

  3. 在项目旁安装引擎，让项目说明中引用的门禁检查能够实际运行：

    npx ux-ui-agent-skills add tokens components taste accessibility \
    workflows content frameworks design-systems scripts skills

    使用 add，不要使用 init：init 还会用完整的引擎 CLAUDE.md 覆盖精简版项目说明。项目说明有意保持简短；任务需要时，引擎知识会从复制的文件夹中加载。

  4. 在目标目录中安装渲染门禁所需的依赖：npm i -D playwright。如果跳过此步骤，不会发出提示：每个渲染门禁都会打印 SKIPPED 并以 0 退出。

  5. 与用户一起填写 CLAUDE.md 中的占位内容：产品、主要用户、技术栈、图标集、词汇表。不要留下任何尖括号占位内容。

  6. 将 design-tokens.json 指向品牌：替换 primitive.brand 色阶，保留语义层和组件层，然后验证仍能通过：

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

  7. 提醒用户在 reference/ 中填入真实界面截图，在 public/images/ 中放入真实图片，并在自己的 shell 中设置 MCP 环境变量（FIGMA_API_KEY 等）。切勿将密钥写入 .mcp.json。

交付前请验证：目标目录树与上述布局一致，并且

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

能够通过针对源模板的检查。

评论

支持 Markdown