用途:对已有站点或应用做重设计,而不是当作全新项目重做。核心思路是先审计现状,再决定保留什么,因为重设计的价值多在于刻意保留的部分。
主要能力与流程:
- 审计现状:对源码运行 npx ui-craft-detect <path>,或对线上页面运行 npx ui-craft-detect <url>,记录发现;盘点页面/路由、区块顺序、标题层级(h1–h3)、导航结构、转化路径(CTA 及其去向)、表单、图片资源、字体与实际使用的颜色值;若存在 .ui-craft/brief.md 需读取,既有约束仍然有效。
- 分类保留项:品牌资产(logo、名称、已投入使用的配色)、信息架构与 SEO(URL/路由、页面集合、标题语义、title/meta、alt 文本、结构化数据)、内容与语气、转化路径。除非用户明确要求,否则不应更改这些。
- 选择范围并说明:Refresh 只改 token(字号比例、间距节奏、圆角、阴影、颜色微调);Reskin 改视觉层与组件样式,布局骨架和区块顺序不变;Rebuild 连布局与构图一起改,内容、信息架构和品牌延续。默认选能解决所述问题的最小范围;Rebuild 需先打印前后区块对照图并获确认再写代码。
- 声明 Craft Read:按 references/craft-intent.md 说明界面类型、受众、主题、DESIGN_VARIANCE、signature bet;重设计默认方差 4–5。
- 按顺序现代化:排版(比例与搭配)→ 间距节奏 → 颜色 token → 图像处理 → 动效(仅在焦点处做入场/悬停),并修复第 1 步的所有检测发现。
限制:不得在已有品牌配色上另造新配色,不得删除路由或页面,不得为外观压平标题语义,不得未经要求改写文案语气,也不得让重设计后的检测问题多于原版。输出方式为直接改代码(refresh/reskin)或先给区块对照图(rebuild),并打印 Review Format 表格、检测前后计数,最后以 Craft Read 行结束。下一步可运行 /critique 检查。