craft
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
Chinese<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. -->
Context: this sub-skill is one lens of the broader skill. If the skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.
ui-craftui-craftLoad the skill. This command BUILDS — it ends with working code that passes the recipe's acceptance bar.
ui-craftRecipes available: → · → · (sign-in/sign-up) → . If names a surface with no recipe yet (settings, docs, e-commerce), say so and fall back to standard Build mode with the closest references — do not improvise a fake recipe.
dashboardreferences/recipe-dashboard.mdlandingreferences/recipe-landing.mdauthreferences/recipe-auth.md$ARGUMENTS<!-- HARNESS MIRROR — 请勿在此编辑。标准源文件位于:skills/ 或 commands/。编辑源文件后,请复制到 cli/assets/<harness>/ 以及仓库根目录的 harness 镜像文件中。 -->
**上下文:**此子技能是更广泛的技能的一个分支。如果同时安装了技能,请先阅读其SKILL.md中的“发现+防冗余+制作测试”部分,再应用以下特定分支的规则。
ui-craftui-craft加载技能。此命令用于构建——最终会生成符合配方验收标准的可运行代码。
ui-craft可用配方: → · → · (登录/注册)→ 。如果指定了一个尚无对应配方的界面(如设置页、文档页、电商页),请告知用户,并使用最接近的参考文档切换到标准构建模式——切勿虚构配方。
dashboardreferences/recipe-dashboard.mdlandingreferences/recipe-landing.mdauthreferences/recipe-auth.md$ARGUMENTSStep 0 — Load spec (if present)
步骤0 — 加载规格(若存在)
Before anything else: if exists and contains a section whose name matches , load that section now. Its chosen composition, component inventory, state lattice, and acceptance bar take precedence over the recipe defaults for all downstream steps. Note which acceptance bar items came from the spec vs. recipe defaults.
.ui-craft/spec.md## Surface: <name>$ARGUMENTS在开始任何操作之前:如果存在,且包含部分,且名称与匹配,请立即加载该部分。其中选定的布局组合、组件清单、状态网格以及验收标准将优先于配方默认值,适用于所有后续步骤。请记录哪些验收标准项来自规格,哪些来自配方默认值。
.ui-craft/spec.md## Surface: <name>$ARGUMENTSStep 1 — Inputs
步骤1 — 输入信息
Run Stack Detection + Discovery Step 1 (existing tokens, ).
.ui-craft/brief.mdLoad .
references/craft-intent.mdAsk the recipe's Step 0 questions in ONE compact prompt, pre-filling anything or the brief already answers. If the user declines, says "you decide", or has answered before in this session: apply the recipe defaults silently and say which were applied. Never ask twice; never block.
$ARGUMENTSSet DESIGN_VARIANCE from craft-intent defaults for this surface type unless the user or brief specifies otherwise.
运行堆栈检测 + 发现步骤1(现有令牌、)。
.ui-craft/brief.md加载。
references/craft-intent.md将配方的步骤0问题整合为一个简洁的提示进行询问,预先填充或brief中已有的答案。如果用户拒绝回答、表示“你来决定”,或在此会话中已回答过:则静默应用配方默认值,并告知用户应用了哪些默认值。切勿重复询问,切勿阻塞流程。
$ARGUMENTS除非用户或brief另有指定,否则根据craft-intent中针对该界面类型的默认值设置DESIGN_VARIANCE。
Step 2 — Craft Read + lock the plan
步骤2 — 制作方案读取并锁定计划
Output the Craft Read (one line, craft-intent §1) before any code. Include: surface kind, audience, product vs marketing language, theme/accent, variance, signature bet.
From the answers: composition + theme preset (or existing tokens) + density + variance + signature bet. If no brand direction, rotate one axis (craft-intent §6) and name it.
Landing surfaces — draw the fold, do not pick it. Call the MCP tool, passing every composition class already listed under in as . Commit to one of the three it returns, and state the sacrifice that class demands out loud, because that sacrifice is what will make this page look like itself.
fold_candidates## Fold classes used.ui-craft/brief.mdusedDo not average the candidates together, and do not fall back to a text-left/visual-right split because it fits everything. It fits everything because it commits to nothing: ten blind builds of this skill produced that fold ten times out of ten, across two unrelated products, while only 3 of 18 reference landing pages use it.
If the MCP server is not wired, say so and pick a class from that the brief has not spent yet — the point is the draw, not the tool.
scripts/fold/classes.mjsPrint a short plan (5–7 lines): Craft Read, composition class and its sacrifice, theme, signature bet, what's above the fold, what's deferred — then proceed unless the user objects.
在生成任何代码之前,输出制作方案读取结果(一行内容,对应craft-intent第1节)。内容包括:界面类型、受众、产品/营销语言风格、主题/强调色、差异化设置、核心特色。
根据回答确定:布局组合 + 主题预设(或现有令牌) + 密度 + 差异化设置 + 核心特色。如果没有品牌方向,则调整一个维度(craft-intent第6节)并命名。
**着陆页界面 — 选定折叠区类型,而非随意选择。**调用 MCP工具,将中下列出的所有布局组合类作为参数传入。从返回的三个选项中选定一个,并明确说明该类型所需做出的取舍——正是这种取舍让页面具有独特性。
fold_candidates.ui-craft/brief.md## Fold classes usedused切勿对候选选项进行折中,也不要因为通用而选择“文本左/视觉元素右”的拆分方式。它之所以通用,是因为没有任何特色:在两次无关产品的测试中,此技能的10次盲构建全部生成了这种折叠区,而18个参考着陆页中只有3个使用了这种方式。
如果MCP服务器未连接,请告知用户,并从中选择一个brief尚未使用过的类型——关键在于选定类型,而非依赖工具。
scripts/fold/classes.mjs打印简短计划(5-7行):制作方案读取结果、布局组合类型及其取舍、主题、核心特色、折叠区上方内容、延迟实现内容——然后继续执行,除非用户提出异议。
Step 3 — Build
步骤3 — 构建
Follow the recipe's Build order EXACTLY (tokens → shell → hero tier → primary region → remaining tiers → states → keyboard → finish). Load the references each step names plus patterns for this surface type. Build the signature bet in this pass — not later.
craft-intent.mdStates and keyboard are build steps, not polish — a surface without empty/loading/error states is not done.
严格按照配方的构建顺序执行(令牌 → 框架 → 核心层级 → 主区域 → 剩余层级 → 状态 → 键盘交互 → 完成)。加载每个步骤指定的参考文档以及针对该界面类型的模式。核心特色需在本次构建中实现——而非后续阶段。
craft-intent.md状态和键盘交互是构建步骤,而非优化环节——缺少空状态/加载状态/错误状态的界面不算完成。
Step 4 — Acceptance bar
步骤4 — 验收标准
Run the recipe's acceptance checklist against the built surface. Fix every unchecked item before reporting — the bar is the definition of done, not a suggestion.
Visual self-check (when a screenshot tool is reachable): if a Playwright/browser MCP or similar is available, capture the built surface at desktop width and look at it before reporting — a render exposes spacing collisions, hierarchy ties, and dead zones that code review can't. Run the similar-prompt self-test (craft-intent §1) against the screenshot: would this exact page pass for a different brand in the category? If yes, strengthen the signature before reporting. No tool available → skip silently, never block.
Landing surfaces — check the fold you actually built. Serve the page and call with the URL, the class you drew as , and the costly detail you committed to. It renders in a browser you already have and returns the screenshot alongside its reading. Two things there are worth acting on: drift, which means you drew one class and built another — usually the split, since that is the fold the model returns to unprompted — and a population reading that says the fold stands out nowhere, which is a prompt to look at the screenshot rather than a fault, since it also flags 7 of 18 reference landing pages.
check_foldexpected_classEverything else it returns is measurement without a verdict, and should be read that way. Only two of its invariants are judged, and neither is geometric.
Record what was spent: append the class you built to in , creating the section if it is missing. That list is what makes the next in this project draw something else. Without it the draw has no memory and the project converges again.
## Fold classes used.ui-craft/brief.md/craftReport to the user:
- The Craft Read (repeat)
- The composition class drawn, and the sacrifice it demanded
- Which signature bet was built
- Checklist results
- Any item the user explicitly waived
Lead with intent, not a findings dump. Use the Review Format table only for fixes made in this pass.
At CRAFT_LEVEL ≥ 8, finish with the full gate instead of the recipe's minimum passes.
/finalizeNext step: — run the pre-ship gate (rung 3). If this project has no brief yet, first (rung 2).
/finalize/brief针对已构建的界面运行配方的验收检查清单。在报告前修复所有未通过的项——验收标准是完成的定义,而非建议。
**视觉自检(当可使用截图工具时):**如果有Playwright/浏览器MCP或类似工具可用,请捕获桌面宽度下已构建界面的截图并查看——渲染结果能暴露代码审查无法发现的间距冲突、层级混淆和空白区域。针对截图运行类似提示的自检(craft-intent第1节):这个页面是否会被误认为是同品类中其他品牌的页面?如果是,请在报告前强化核心特色。若无可用工具,则静默跳过,切勿阻塞流程。
着陆页界面 — 检查实际构建的折叠区。启动页面并调用工具,传入URL、选定的类型作为,以及承诺实现的关键细节。工具会在已有的浏览器中渲染页面,并返回截图及分析结果。有两种情况需要处理:偏移,即选定的是一种类型,但构建的是另一种——通常是拆分类型,因为模型会默认返回这种折叠区;以及受众分析显示折叠区毫无特色,这提示你需要查看截图,而非工具的判定问题,因为它也会标记18个参考着陆页中的7个。
check_foldexpected_class工具返回的其他内容均为无结论的测量数据,仅作参考。只有两个不变量会被判定,且均非几何维度的判定。
**记录已使用的类型:**将构建所用的类型追加到的部分,若该部分不存在则创建。此列表确保同一项目中的下一次调用会选择不同的类型。若没有此记录,选定操作将无记忆,项目会再次趋同于通用设计。
.ui-craft/brief.md## Fold classes used/craft向用户报告:
- 重复制作方案读取结果
- 选定的布局组合类型及其所需的取舍
- 实现的核心特色
- 检查清单结果
- 用户明确豁免的任何项
以意图为开头,而非直接罗列结果。仅在本次构建中进行的修复使用“评审格式”表格呈现。
当CRAFT_LEVEL ≥ 8时,完成时使用完整的关卡,而非配方要求的最低通过标准。
/finalize下一步: — 运行预发布关卡(第3级)。如果项目尚无brief,请先执行(第2级)。
/finalize/brief