用途:当用户明确点名真实品牌、产品或媒体站点的视觉语言,并希望先从 getdesign 拉取结构化设计规范,再据此生成或改造 UI 代码时使用。适用于“做成 Apple/Stripe/Notion 的感觉”“参考某品牌官网风格做页面”“把现有 React 组件改成 Vercel 风格”等场景。
主要能力:通过本地 helper 解析品牌并获取 DESIGN 规范,从中提取颜色、排版、间距、形状等 token,用于生成新页面原型或增量改造现有组件。支持最多两个品牌混搭:第一个负责布局、密度、组件结构,第二个负责强调色、排版气质等指定维度。
使用方式:先判断是新建原型还是改现有项目。改现有项目时先读当前框架与样式组织,输出该栈增量代码;无现成代码或框架时默认输出完整单文件 HTML。用 helper 解析品牌: node "$SKILL_DIR/scripts/getdesign-helper.mjs" list --json node "$SKILL_DIR/scripts/getdesign-helper.mjs" resolve --query "<user request>" node "$SKILL_DIR/scripts/getdesign-helper.mjs" fetch --slug <brand-slug> node "$SKILL_DIR/scripts/getdesign-helper.mjs" fetch --slug <brand-slug> --out <target-file> 解析结果 exact 时直接使用;fuzzy 且只有一个高置信命中可继续并说明假设;none 或不够稳时展示 helper 返回的建议。
交付要求:说明最终使用的品牌和 slug、是新建还是改造、直接复用的至少 4 类 token 来源,以及代码落点。混搭时须说明各 token 来自哪个品牌。仅在用户明确要求时才把 DESIGN 文件保存进项目目录。
限制:不适用于只说“现代一点”“高级一点”,以及 logo 设计、图片/海报生成、流程图、幻灯片主题替换、纯设计分析。超过两个品牌需先收敛;getdesign 不可用或 npx 失败时明确报错并建议检查 Node.js/npx;品牌未命中时展示 helper 前 3 个建议,不可编造。