ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-01 19:42:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(cli): improve FTUX to guide users toward AI agent workflow

Browse Source 
- Init "next steps" now leads with opening in an AI agent as step 1,
  followed by dev preview and render as steps 2 and 3
- Interactive init shows a tip about AI agent workflow after scaffolding
- Dev command output hints that compositions can be edited with an
  AI agent and changes reload automatically in the studio
This commit is contained in:
James
2026-03-27 22:44:42 +00:00
parent 3594374a84
commit f96d357c9a
2 changed files with 21 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/cli/src/commands/dev.ts
+5
View File
@@ -306,6 +306,11 @@ async function runEmbeddedMode(dir: string, startPort: number): Promise<void> {
console.log(` ${c.dim("Project")} ${c.accent(projectName)}`);
console.log(` ${c.dim("Studio")} ${c.accent(url)}`);
console.log();
console.log(
` ${c.dim("Edit compositions with your AI agent — it has HyperFrames skills installed.")}`,
);
console.log(` ${c.dim("Changes reload automatically in the studio.")}`);
console.log();
console.log(` ${c.dim("Press Ctrl+C to stop")}`);
console.log();
import("open").then((mod) => mod.default(`${url}#project/${projectName}`)).catch(() => {});
packages/cli/src/commands/init.ts
+16 -12
View File
@@ -646,23 +646,22 @@ Examples:
console.log(` ${c.accent(f)}`);
}
console.log();
console.log("Next steps:");
console.log("Get started:");
console.log();
console.log(` ${c.accent("1.")} Open this project in your AI coding agent:`);
console.log(
` ${c.accent(`cd ${name}`)} && ${c.accent("npx hyperframes dev")} ${c.dim("# preview in studio")}`,
` ${c.accent(`cd ${name}`)} then start ${c.accent("Claude Code")}, ${c.accent("Cursor")}, or your preferred agent`,
);
console.log(
` ${c.accent(`cd ${name}`)} && ${c.accent("npx hyperframes render")} ${c.dim("# render to MP4")}`,
);
console.log(
` ${c.accent("npx hyperframes docs")} ${c.dim("<topic>")} ${c.dim("# learn composition syntax")}`,
);
console.log(
` ${c.dim("topics: data-attributes, gsap, compositions, rendering, templates, troubleshooting")}`,
` ${c.dim("AI skills are installed — your agent knows how to create and edit compositions.")}`,
);
console.log();
console.log(
` ${c.dim("AI skills installed — open this folder in your AI coding agent to get started.")}`,
);
console.log(` ${c.accent("2.")} Preview in the browser:`);
console.log(` ${c.accent(`cd ${name}`)} && ${c.accent("npx hyperframes dev")}`);
console.log();
console.log(` ${c.accent("3.")} Render to MP4 when ready:`);
console.log(` ${c.accent(`cd ${name}`)} && ${c.accent("npx hyperframes render")}`);
console.log();
console.log(` ${c.dim("Full docs: hyperframes.heygen.com")}`);
return;
}
@@ -860,6 +859,11 @@ Examples:
const files = readdirSync(destDir);
clack.note(files.map((f) => c.accent(f)).join("\n"), c.success(`Created ${name}/`));
clack.log.message(
`${c.dim("Tip:")} Open this project in ${c.accent("Claude Code")}, ${c.accent("Cursor")}, or your preferred AI agent.\n` +
`${c.dim(" AI skills are installed — your agent knows how to create and edit compositions.")}`,
);
await nextStepLoop(destDir);
},
});