[{"data":1,"prerenderedAt":1498},["ShallowReactive",2],{"navigation":3,"\u002Fguides\u002Fopen-design":686,"\u002Fguides\u002Fopen-design-surround":1493},[4,31,57,147,168,198,652],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":30},"快速入门","i-lucide-rocket","\u002Fgetting-started","01.getting-started",[10,14,18,22,26],{"title":11,"path":12,"stem":13},"简介","\u002Fgetting-started\u002Fintroduction","01.getting-started\u002F01.introduction",{"title":15,"path":16,"stem":17},"快速开始","\u002Fgetting-started\u002Fquickstart","01.getting-started\u002F02.quickstart",{"title":19,"path":20,"stem":21},"展示作品","\u002Fgetting-started\u002Fshowcase","01.getting-started\u002F03.showcase",{"title":23,"path":24,"stem":25},"示例","\u002Fgetting-started\u002Fexamples","01.getting-started\u002F04.examples",{"title":27,"path":28,"stem":29},"发布视频","\u002Fgetting-started\u002Flaunch-videos","01.getting-started\u002F05.launch-videos",false,{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":30},"核心概念","i-lucide-lightbulb","\u002Fconcepts","02.concepts",[37,41,45,49,53],{"title":38,"path":39,"stem":40},"合成","\u002Fconcepts\u002Fcompositions","02.concepts\u002F01.compositions",{"title":42,"path":43,"stem":44},"数据属性","\u002Fconcepts\u002Fdata-attributes","02.concepts\u002F02.data-attributes",{"title":46,"path":47,"stem":48},"变量","\u002Fconcepts\u002Fvariables","02.concepts\u002F03.variables",{"title":50,"path":51,"stem":52},"帧适配器","\u002Fconcepts\u002Fframe-adapters","02.concepts\u002F04.frame-adapters",{"title":54,"path":55,"stem":56},"确定性渲染","\u002Fconcepts\u002Fdeterminism","02.concepts\u002F05.determinism",{"title":58,"icon":59,"path":60,"stem":61,"children":62,"page":30},"使用指南","i-lucide-compass","\u002Fguides","03.guides",[63,67,71,75,79,83,87,91,95,99,103,107,111,115,119,123,127,131,135,139,143],{"title":64,"path":65,"stem":66},"工作流水线","\u002Fguides\u002Fpipeline","03.guides\u002F01.pipeline",{"title":68,"path":69,"stem":70},"HTML-in-Canvas","\u002Fguides\u002Fhtml-in-canvas","03.guides\u002F02.html-in-canvas",{"title":72,"path":73,"stem":74},"网站转视频","\u002Fguides\u002Fwebsite-to-video","03.guides\u002F03.website-to-video",{"title":76,"path":77,"stem":78},"Google Antigravity","\u002Fguides\u002Fantigravity","03.guides\u002F04.antigravity",{"title":80,"path":81,"stem":82},"GitHub Copilot CLI","\u002Fguides\u002Fcopilot-cli","03.guides\u002F05.copilot-cli",{"title":84,"path":85,"stem":86},"Claude Design","\u002Fguides\u002Fclaude-design","03.guides\u002F06.claude-design",{"title":88,"path":89,"stem":90},"Open Design","\u002Fguides\u002Fopen-design","03.guides\u002F07.open-design",{"title":92,"path":93,"stem":94},"提示词指南","\u002Fguides\u002Fprompting","03.guides\u002F08.prompting",{"title":96,"path":97,"stem":98},"Hyperframes vs Remotion","\u002Fguides\u002Fhyperframes-vs-remotion","03.guides\u002F09.hyperframes-vs-remotion",{"title":100,"path":101,"stem":102},"GSAP 动画","\u002Fguides\u002Fgsap-animation","03.guides\u002F10.gsap-animation",{"title":104,"path":105,"stem":106},"渲染","\u002Fguides\u002Frendering","03.guides\u002F11.rendering",{"title":108,"path":109,"stem":110},"去除背景（透明视频）","\u002Fguides\u002Fremove-background","03.guides\u002F12.remove-background",{"title":112,"path":113,"stem":114},"HDR 渲染","\u002Fguides\u002Fhdr","03.guides\u002F13.hdr",{"title":116,"path":117,"stem":118},"4K 渲染","\u002Fguides\u002F4k-rendering","03.guides\u002F14.4k-rendering",{"title":120,"path":121,"stem":122},"性能","\u002Fguides\u002Fperformance","03.guides\u002F15.performance",{"title":124,"path":125,"stem":126},"时间轴编辑","\u002Fguides\u002Ftimeline-editing","03.guides\u002F16.timeline-editing",{"title":128,"path":129,"stem":130},"视频编辑者速查表","\u002Fguides\u002Fvideo-editor-cheatsheet","03.guides\u002F17.video-editor-cheatsheet",{"title":132,"path":133,"stem":134},"常见错误","\u002Fguides\u002Fcommon-mistakes","03.guides\u002F18.common-mistakes",{"title":136,"path":137,"stem":138},"故障排除","\u002Fguides\u002Ftroubleshooting","03.guides\u002F19.troubleshooting",{"title":140,"path":141,"stem":142},"反馈收集","\u002Fguides\u002Ffeedback","03.guides\u002F20.feedback",{"title":144,"path":145,"stem":146},"HyperFrames MCP","\u002Fguides\u002Fmcp","03.guides\u002F21.mcp",{"title":148,"icon":149,"path":150,"stem":151,"children":152,"page":30},"部署","i-lucide-cloud","\u002Fdeploy","04.deploy",[153,156,160,164],{"title":148,"path":154,"stem":155},"\u002Fdeploy\u002Fdeploy","04.deploy\u002F01.deploy",{"title":157,"path":158,"stem":159},"AWS Lambda","\u002Fdeploy\u002Faws-lambda","04.deploy\u002F02.aws-lambda",{"title":161,"path":162,"stem":163},"Lambda 上的模板","\u002Fdeploy\u002Ftemplates-on-lambda","04.deploy\u002F03.templates-on-lambda",{"title":165,"path":166,"stem":167},"迁移到 HyperFrames Lambda","\u002Fdeploy\u002Fmigrating-to-hyperframes-lambda","04.deploy\u002F04.migrating-to-hyperframes-lambda",{"title":169,"icon":170,"path":171,"stem":172,"children":173,"page":30},"包","i-lucide-package","\u002Fpackages","05.packages",[174,178,182,186,190,194],{"title":175,"path":176,"stem":177},"@hyperframes\u002Fcore","\u002Fpackages\u002Fcore","05.packages\u002F01.core",{"title":179,"path":180,"stem":181},"@hyperframes\u002Fengine","\u002Fpackages\u002Fengine","05.packages\u002F02.engine",{"title":183,"path":184,"stem":185},"@hyperframes\u002Fplayer","\u002Fpackages\u002Fplayer","05.packages\u002F03.player",{"title":187,"path":188,"stem":189},"@hyperframes\u002Fproducer","\u002Fpackages\u002Fproducer","05.packages\u002F04.producer",{"title":191,"path":192,"stem":193},"@hyperframes\u002Fstudio","\u002Fpackages\u002Fstudio","05.packages\u002F05.studio",{"title":195,"path":196,"stem":197},"CLI","\u002Fpackages\u002Fcli","05.packages\u002F06.cli",{"title":199,"icon":200,"path":201,"stem":202,"children":203,"page":30},"组件目录","i-lucide-layout-grid","\u002Fcatalog","06.catalog",[204,270,324,358,420,478,512,546,584,598],{"title":205,"icon":206,"path":207,"stem":208,"children":209,"page":30},"字幕","i-lucide-captions","\u002Fcatalog\u002Fcaption","06.catalog\u002F01.caption",[210,214,218,222,226,230,234,238,242,246,250,254,258,262,266],{"title":211,"path":212,"stem":213},"裁剪擦除","\u002Fcatalog\u002Fcaption\u002Fcaption-clip-wipe","06.catalog\u002F01.caption\u002F01.caption-clip-wipe",{"title":215,"path":216,"stem":217},"编辑强调","\u002Fcatalog\u002Fcaption\u002Fcaption-editorial-emphasis","06.catalog\u002F01.caption\u002F02.caption-editorial-emphasis",{"title":219,"path":220,"stem":221},"Emoji 弹出","\u002Fcatalog\u002Fcaption\u002Fcaption-emoji-pop","06.catalog\u002F01.caption\u002F03.caption-emoji-pop",{"title":223,"path":224,"stem":225},"故障 RGB","\u002Fcatalog\u002Fcaption\u002Fcaption-glitch-rgb","06.catalog\u002F01.caption\u002F04.caption-glitch-rgb",{"title":227,"path":228,"stem":229},"渐变填充","\u002Fcatalog\u002Fcaption\u002Fcaption-gradient-fill","06.catalog\u002F01.caption\u002F05.caption-gradient-fill",{"title":231,"path":232,"stem":233},"高亮","\u002Fcatalog\u002Fcaption\u002Fcaption-highlight","06.catalog\u002F01.caption\u002F06.caption-highlight",{"title":235,"path":236,"stem":237},"动感冲击","\u002Fcatalog\u002Fcaption\u002Fcaption-kinetic-slam","06.catalog\u002F01.caption\u002F07.caption-kinetic-slam",{"title":239,"path":240,"stem":241},"矩阵解码","\u002Fcatalog\u002Fcaption\u002Fcaption-matrix-decode","06.catalog\u002F01.caption\u002F08.caption-matrix-decode",{"title":243,"path":244,"stem":245},"霓虹强调","\u002Fcatalog\u002Fcaption\u002Fcaption-neon-accent","06.catalog\u002F01.caption\u002F09.caption-neon-accent",{"title":247,"path":248,"stem":249},"霓虹发光","\u002Fcatalog\u002Fcaption\u002Fcaption-neon-glow","06.catalog\u002F01.caption\u002F10.caption-neon-glow",{"title":251,"path":252,"stem":253},"视差图层","\u002Fcatalog\u002Fcaption\u002Fcaption-parallax-layers","06.catalog\u002F01.caption\u002F11.caption-parallax-layers",{"title":255,"path":256,"stem":257},"粒子爆发","\u002Fcatalog\u002Fcaption\u002Fcaption-particle-burst","06.catalog\u002F01.caption\u002F12.caption-particle-burst",{"title":259,"path":260,"stem":261},"胶囊卡拉OK","\u002Fcatalog\u002Fcaption\u002Fcaption-pill-karaoke","06.catalog\u002F01.caption\u002F13.caption-pill-karaoke",{"title":263,"path":264,"stem":265},"纹理","\u002Fcatalog\u002Fcaption\u002Fcaption-texture","06.catalog\u002F01.caption\u002F14.caption-texture",{"title":267,"path":268,"stem":269},"字重切换","\u002Fcatalog\u002Fcaption\u002Fcaption-weight-shift","06.catalog\u002F01.caption\u002F15.caption-weight-shift",{"title":271,"icon":272,"path":273,"stem":274,"children":275,"page":30},"HTML 画布","i-lucide-layout-dashboard","\u002Fcatalog\u002Fhtml-canvas","06.catalog\u002F02.html-canvas",[276,280,284,288,292,296,300,304,308,312,316,320],{"title":277,"path":278,"stem":279},"iOS 26 Liquid Glass 主屏幕","\u002Fcatalog\u002Fhtml-canvas\u002Fios26-liquid-glass","06.catalog\u002F02.html-canvas\u002F01.ios26-liquid-glass",{"title":281,"path":282,"stem":283},"Liquid Glass 右键菜单","\u002Fcatalog\u002Fhtml-canvas\u002Fliquid-glass-context-menu","06.catalog\u002F02.html-canvas\u002F02.liquid-glass-context-menu",{"title":285,"path":286,"stem":287},"Liquid Glass 媒体控制","\u002Fcatalog\u002Fhtml-canvas\u002Fliquid-glass-media-controls","06.catalog\u002F02.html-canvas\u002F03.liquid-glass-media-controls",{"title":289,"path":290,"stem":291},"Liquid Glass 通知","\u002Fcatalog\u002Fhtml-canvas\u002Fliquid-glass-notification","06.catalog\u002F02.html-canvas\u002F04.liquid-glass-notification",{"title":293,"path":294,"stem":295},"Liquid Glass 小组件","\u002Fcatalog\u002Fhtml-canvas\u002Fliquid-glass-widgets","06.catalog\u002F02.html-canvas\u002F05.liquid-glass-widgets",{"title":297,"path":298,"stem":299},"macOS Tahoe Liquid Glass 桌面","\u002Fcatalog\u002Fhtml-canvas\u002Fmacos-tahoe-liquid-glass","06.catalog\u002F02.html-canvas\u002F06.macos-tahoe-liquid-glass",{"title":301,"path":302,"stem":303},"iPhone & MacBook 3D 展示","\u002Fcatalog\u002Fhtml-canvas\u002Fvfx-iphone-device","06.catalog\u002F02.html-canvas\u002F07.vfx-iphone-device",{"title":305,"path":306,"stem":307},"液态背景","\u002Fcatalog\u002Fhtml-canvas\u002Fvfx-liquid-background","06.catalog\u002F02.html-canvas\u002F08.vfx-liquid-background",{"title":309,"path":310,"stem":311},"磁力效果","\u002Fcatalog\u002Fhtml-canvas\u002Fvfx-magnetic","06.catalog\u002F02.html-canvas\u002F09.vfx-magnetic",{"title":313,"path":314,"stem":315},"传送门","\u002Fcatalog\u002Fhtml-canvas\u002Fvfx-portal","06.catalog\u002F02.html-canvas\u002F10.vfx-portal",{"title":317,"path":318,"stem":319},"碎裂效果","\u002Fcatalog\u002Fhtml-canvas\u002Fvfx-shatter","06.catalog\u002F02.html-canvas\u002F11.vfx-shatter",{"title":321,"path":322,"stem":323},"VFX 文字光标","\u002Fcatalog\u002Fhtml-canvas\u002Fvfx-text-cursor","06.catalog\u002F02.html-canvas\u002F12.vfx-text-cursor",{"title":325,"icon":326,"path":327,"stem":328,"children":329,"page":30},"社交叠加层","i-lucide-share-2","\u002Fcatalog\u002Fsocial-overlays","06.catalog\u002F03.social-overlays",[330,334,338,342,346,350,354],{"title":331,"path":332,"stem":333},"Instagram 关注","\u002Fcatalog\u002Fsocial-overlays\u002Finstagram-follow","06.catalog\u002F03.social-overlays\u002F01.instagram-follow",{"title":335,"path":336,"stem":337},"macOS 通知","\u002Fcatalog\u002Fsocial-overlays\u002Fmacos-notification","06.catalog\u002F03.social-overlays\u002F02.macos-notification",{"title":339,"path":340,"stem":341},"Reddit 帖子卡片","\u002Fcatalog\u002Fsocial-overlays\u002Freddit-post","06.catalog\u002F03.social-overlays\u002F03.reddit-post",{"title":343,"path":344,"stem":345},"Spotify 正在播放","\u002Fcatalog\u002Fsocial-overlays\u002Fspotify-card","06.catalog\u002F03.social-overlays\u002F04.spotify-card",{"title":347,"path":348,"stem":349},"TikTok 关注","\u002Fcatalog\u002Fsocial-overlays\u002Ftiktok-follow","06.catalog\u002F03.social-overlays\u002F05.tiktok-follow",{"title":351,"path":352,"stem":353},"X 帖子卡片","\u002Fcatalog\u002Fsocial-overlays\u002Fx-post","06.catalog\u002F03.social-overlays\u002F06.x-post",{"title":355,"path":356,"stem":357},"YouTube 下方三分之一","\u002Fcatalog\u002Fsocial-overlays\u002Fyt-lower-third","06.catalog\u002F03.social-overlays\u002F07.yt-lower-third",{"title":359,"icon":360,"path":361,"stem":362,"children":363,"page":30},"着色器过渡","i-lucide-wand-2","\u002Fcatalog\u002Fshader-transitions","06.catalog\u002F04.shader-transitions",[364,368,372,376,380,384,388,392,396,400,404,408,412,416],{"title":365,"path":366,"stem":367},"色散径向分裂","\u002Fcatalog\u002Fshader-transitions\u002Fchromatic-radial-split","06.catalog\u002F04.shader-transitions\u002F01.chromatic-radial-split",{"title":369,"path":370,"stem":371},"电影感变焦","\u002Fcatalog\u002Fshader-transitions\u002Fcinematic-zoom","06.catalog\u002F04.shader-transitions\u002F02.cinematic-zoom",{"title":373,"path":374,"stem":375},"交叉扭曲变形","\u002Fcatalog\u002Fshader-transitions\u002Fcross-warp-morph","06.catalog\u002F04.shader-transitions\u002F03.cross-warp-morph",{"title":377,"path":378,"stem":379},"域扭曲溶解","\u002Fcatalog\u002Fshader-transitions\u002Fdomain-warp-dissolve","06.catalog\u002F04.shader-transitions\u002F04.domain-warp-dissolve",{"title":381,"path":382,"stem":383},"白色闪光过渡","\u002Fcatalog\u002Fshader-transitions\u002Fflash-through-white","06.catalog\u002F04.shader-transitions\u002F05.flash-through-white",{"title":385,"path":386,"stem":387},"故障效果","\u002Fcatalog\u002Fshader-transitions\u002Fglitch","06.catalog\u002F04.shader-transitions\u002F06.glitch",{"title":389,"path":390,"stem":391},"引力透镜","\u002Fcatalog\u002Fshader-transitions\u002Fgravitational-lens","06.catalog\u002F04.shader-transitions\u002F07.gravitational-lens",{"title":393,"path":394,"stem":395},"光线泄漏","\u002Fcatalog\u002Fshader-transitions\u002Flight-leak","06.catalog\u002F04.shader-transitions\u002F08.light-leak",{"title":397,"path":398,"stem":399},"褶皱燃烧","\u002Fcatalog\u002Fshader-transitions\u002Fridged-burn","06.catalog\u002F04.shader-transitions\u002F09.ridged-burn",{"title":401,"path":402,"stem":403},"涟漪波纹","\u002Fcatalog\u002Fshader-transitions\u002Fripple-waves","06.catalog\u002F04.shader-transitions\u002F10.ripple-waves",{"title":405,"path":406,"stem":407},"SDF 光圈","\u002Fcatalog\u002Fshader-transitions\u002Fsdf-iris","06.catalog\u002F04.shader-transitions\u002F11.sdf-iris",{"title":409,"path":410,"stem":411},"漩涡涡流","\u002Fcatalog\u002Fshader-transitions\u002Fswirl-vortex","06.catalog\u002F04.shader-transitions\u002F12.swirl-vortex",{"title":413,"path":414,"stem":415},"热浪扭曲","\u002Fcatalog\u002Fshader-transitions\u002Fthermal-distortion","06.catalog\u002F04.shader-transitions\u002F13.thermal-distortion",{"title":417,"path":418,"stem":419},"快速摇摄","\u002Fcatalog\u002Fshader-transitions\u002Fwhip-pan","06.catalog\u002F04.shader-transitions\u002F14.whip-pan",{"title":421,"icon":422,"path":423,"stem":424,"children":425,"page":30},"CSS 过渡","i-lucide-repeat","\u002Fcatalog\u002Fcss-transitions","06.catalog\u002F05.css-transitions",[426,430,434,438,442,446,450,454,458,462,466,470,474],{"title":427,"path":428,"stem":429},"3D 过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-3d","06.catalog\u002F05.css-transitions\u002F01.transitions-3d",{"title":431,"path":432,"stem":433},"模糊过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-blur","06.catalog\u002F05.css-transitions\u002F02.transitions-blur",{"title":435,"path":436,"stem":437},"覆盖过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-cover","06.catalog\u002F05.css-transitions\u002F03.transitions-cover",{"title":439,"path":440,"stem":441},"破碎过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-destruction","06.catalog\u002F05.css-transitions\u002F04.transitions-destruction",{"title":443,"path":444,"stem":445},"溶解过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-dissolve","06.catalog\u002F05.css-transitions\u002F05.transitions-dissolve",{"title":447,"path":448,"stem":449},"扭曲过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-distortion","06.catalog\u002F05.css-transitions\u002F06.transitions-distortion",{"title":451,"path":452,"stem":453},"网格过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-grid","06.catalog\u002F05.css-transitions\u002F07.transitions-grid",{"title":455,"path":456,"stem":457},"光效过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-light","06.catalog\u002F05.css-transitions\u002F08.transitions-light",{"title":459,"path":460,"stem":461},"机械过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-mechanical","06.catalog\u002F05.css-transitions\u002F09.transitions-mechanical",{"title":463,"path":464,"stem":465},"其他过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-other","06.catalog\u002F05.css-transitions\u002F10.transitions-other",{"title":467,"path":468,"stem":469},"推移过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-push","06.catalog\u002F05.css-transitions\u002F11.transitions-push",{"title":471,"path":472,"stem":473},"径向过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-radial","06.catalog\u002F05.css-transitions\u002F12.transitions-radial",{"title":475,"path":476,"stem":477},"缩放过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-scale","06.catalog\u002F05.css-transitions\u002F13.transitions-scale",{"title":479,"icon":480,"path":481,"stem":482,"children":483,"page":30},"展示","i-lucide-monitor-play","\u002Fcatalog\u002Fshowcase","06.catalog\u002F06.showcase",[484,488,492,496,500,504,508],{"title":485,"path":486,"stem":487},"应用展示","\u002Fcatalog\u002Fshowcase\u002Fapp-showcase","06.catalog\u002F06.showcase\u002F01.app-showcase",{"title":489,"path":490,"stem":491},"Apple 金额计数器","\u002Fcatalog\u002Fshowcase\u002Fapple-money-count","06.catalog\u002F06.showcase\u002F02.apple-money-count",{"title":493,"path":494,"stem":495},"蓝色毛衣开场视频","\u002Fcatalog\u002Fshowcase\u002Fblue-sweater-intro-video","06.catalog\u002F06.showcase\u002F03.blue-sweater-intro-video",{"title":497,"path":498,"stem":499},"朝鲜封锁","\u002Fcatalog\u002Fshowcase\u002Fnorth-korea-locked-down","06.catalog\u002F06.showcase\u002F04.north-korea-locked-down",{"title":501,"path":502,"stem":503},"纽约巴黎航班","\u002Fcatalog\u002Fshowcase\u002Fnyc-paris-flight","06.catalog\u002F06.showcase\u002F05.nyc-paris-flight",{"title":505,"path":506,"stem":507},"3D UI 展示","\u002Fcatalog\u002Fshowcase\u002Fui-3d-reveal","06.catalog\u002F06.showcase\u002F06.ui-3d-reveal",{"title":509,"path":510,"stem":511},"VPN YouTube 广告片段","\u002Fcatalog\u002Fshowcase\u002Fvpn-youtube-spot","06.catalog\u002F06.showcase\u002F07.vpn-youtube-spot",{"title":513,"icon":514,"path":515,"stem":516,"children":517,"page":30},"数据","i-lucide-bar-chart-3","\u002Fcatalog\u002Fdata","06.catalog\u002F07.data",[518,522,526,530,534,538,542],{"title":519,"path":520,"stem":521},"数据图表","\u002Fcatalog\u002Fdata\u002Fdata-chart","06.catalog\u002F07.data\u002F01.data-chart",{"title":523,"path":524,"stem":525},"西班牙地图","\u002Fcatalog\u002Fdata\u002Fspain-map","06.catalog\u002F07.data\u002F02.spain-map",{"title":527,"path":528,"stem":529},"美国地图","\u002Fcatalog\u002Fdata\u002Fus-map","06.catalog\u002F07.data\u002F03.us-map",{"title":531,"path":532,"stem":533},"美国气泡地图","\u002Fcatalog\u002Fdata\u002Fus-map-bubble","06.catalog\u002F07.data\u002F04.us-map-bubble",{"title":535,"path":536,"stem":537},"美国流动地图","\u002Fcatalog\u002Fdata\u002Fus-map-flow","06.catalog\u002F07.data\u002F05.us-map-flow",{"title":539,"path":540,"stem":541},"美国六边形网格地图","\u002Fcatalog\u002Fdata\u002Fus-map-hex","06.catalog\u002F07.data\u002F06.us-map-hex",{"title":543,"path":544,"stem":545},"世界地图","\u002Fcatalog\u002Fdata\u002Fworld-map","06.catalog\u002F07.data\u002F07.world-map",{"title":547,"icon":548,"path":549,"stem":550,"children":551,"page":30},"效果","i-lucide-sparkles","\u002Fcatalog\u002Feffects","06.catalog\u002F08.effects",[552,556,560,564,568,572,576,580],{"title":553,"path":554,"stem":555},"差值混合","\u002Fcatalog\u002Feffects\u002Fcaption-blend-difference","06.catalog\u002F08.effects\u002F01.caption-blend-difference",{"title":557,"path":558,"stem":559},"胶片颗粒叠加","\u002Fcatalog\u002Feffects\u002Fgrain-overlay","06.catalog\u002F08.effects\u002F02.grain-overlay",{"title":561,"path":562,"stem":563},"网格像素化擦除","\u002Fcatalog\u002Feffects\u002Fgrid-pixelate-wipe","06.catalog\u002F08.effects\u002F03.grid-pixelate-wipe",{"title":565,"path":566,"stem":567},"视差缩小","\u002Fcatalog\u002Feffects\u002Fparallax-unzoom","06.catalog\u002F08.effects\u002F04.parallax-unzoom",{"title":569,"path":570,"stem":571},"视差放大","\u002Fcatalog\u002Feffects\u002Fparallax-zoom","06.catalog\u002F08.effects\u002F05.parallax-zoom",{"title":573,"path":574,"stem":575},"微光扫过","\u002Fcatalog\u002Feffects\u002Fshimmer-sweep","06.catalog\u002F08.effects\u002F06.shimmer-sweep",{"title":577,"path":578,"stem":579},"纹理遮罩文字","\u002Fcatalog\u002Feffects\u002Ftexture-mask-text","06.catalog\u002F08.effects\u002F07.texture-mask-text",{"title":581,"path":582,"stem":583},"暗角","\u002Fcatalog\u002Feffects\u002Fvignette","06.catalog\u002F08.effects\u002F08.vignette",{"title":585,"icon":586,"path":587,"stem":588,"children":589,"page":30},"区块","i-lucide-box","\u002Fcatalog\u002Fblocks","06.catalog\u002F09.blocks",[590,594],{"title":591,"path":592,"stem":593},"流程图","\u002Fcatalog\u002Fblocks\u002Fflowchart","06.catalog\u002F09.blocks\u002F01.flowchart",{"title":595,"path":596,"stem":597},"Logo 片尾","\u002Fcatalog\u002Fblocks\u002Flogo-outro","06.catalog\u002F09.blocks\u002F02.logo-outro",{"title":599,"icon":600,"path":601,"stem":602,"children":603,"page":30},"代码片段","i-lucide-code-2","\u002Fcatalog\u002Fcode-snippets","06.catalog\u002F10.code-snippets",[604,608,612,616,620,624,628,632,636,640,644,648],{"title":605,"path":606,"stem":607},"Dark 2026","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-dark-2026","06.catalog\u002F10.code-snippets\u002F01.code-snippet-dark-2026",{"title":609,"path":610,"stem":611},"Dark Modern","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-dark-modern","06.catalog\u002F10.code-snippets\u002F02.code-snippet-dark-modern",{"title":613,"path":614,"stem":615},"Dark+","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-dark-plus","06.catalog\u002F10.code-snippets\u002F03.code-snippet-dark-plus",{"title":617,"path":618,"stem":619},"High Contrast","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-high-contrast","06.catalog\u002F10.code-snippets\u002F04.code-snippet-high-contrast",{"title":621,"path":622,"stem":623},"High Contrast Light","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-high-contrast-light","06.catalog\u002F10.code-snippets\u002F05.code-snippet-high-contrast-light",{"title":625,"path":626,"stem":627},"Light 2026","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-light-2026","06.catalog\u002F10.code-snippets\u002F06.code-snippet-light-2026",{"title":629,"path":630,"stem":631},"Light Modern","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-light-modern","06.catalog\u002F10.code-snippets\u002F07.code-snippet-light-modern",{"title":633,"path":634,"stem":635},"Light+","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-light-plus","06.catalog\u002F10.code-snippets\u002F08.code-snippet-light-plus",{"title":637,"path":638,"stem":639},"Monokai","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-monokai","06.catalog\u002F10.code-snippets\u002F09.code-snippet-monokai",{"title":641,"path":642,"stem":643},"Solarized Light","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-solarized-light","06.catalog\u002F10.code-snippets\u002F10.code-snippet-solarized-light",{"title":645,"path":646,"stem":647},"Visual Studio Dark","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-visual-studio-dark","06.catalog\u002F10.code-snippets\u002F11.code-snippet-visual-studio-dark",{"title":649,"path":650,"stem":651},"Visual Studio Light","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-visual-studio-light","06.catalog\u002F10.code-snippets\u002F12.code-snippet-visual-studio-light",{"title":653,"icon":654,"path":655,"stem":656,"children":657,"page":30},"参考","i-lucide-book-marked","\u002Freference","07.reference",[658,662,666,670,674,678,682],{"title":659,"path":660,"stem":661},"HTML Schema 参考","\u002Freference\u002Fhtml-schema","07.reference\u002F01.html-schema",{"title":663,"path":664,"stem":665},"贡献指南","\u002Freference\u002Fcontributing","07.reference\u002F02.contributing",{"title":667,"path":668,"stem":669},"贡献到 Catalog","\u002Freference\u002Fcatalog","07.reference\u002F03.catalog",{"title":671,"path":672,"stem":673},"发布渠道","\u002Freference\u002Frelease-channels","07.reference\u002F04.release-channels",{"title":675,"path":676,"stem":677},"测试本地 CLI 变更","\u002Freference\u002Ftesting-local-changes","07.reference\u002F05.testing-local-changes",{"title":679,"path":680,"stem":681},"Studio 手动 DOM 编辑","\u002Freference\u002Fstudio-manual-dom-editing","07.reference\u002F06.studio-manual-dom-editing",{"title":683,"path":684,"stem":685},"采用者","\u002Freference\u002Fadopters","07.reference\u002F07.adopters",{"id":687,"title":88,"body":688,"description":1486,"extension":1487,"links":1488,"meta":1489,"navigation":1490,"path":89,"seo":1491,"stem":90,"__hash__":1492},"docs\u002F03.guides\u002F07.open-design.md",{"type":689,"value":690,"toc":1468},"minimark",[691,710,718,721,725,736,740,805,809,822,828,831,838,841,867,871,874,942,962,965,1039,1042,1049,1087,1096,1099,1143,1146,1153,1211,1214,1218,1332,1335,1338,1371,1374,1377,1427,1430,1444,1447,1464],[692,693,694,700,701,705,706,709],"p",{},[695,696,88],"a",{"href":697,"rel":698},"https:\u002F\u002Fgithub.com\u002Fnexu-io\u002Fopen-design",[699],"nofollow"," 是一个开源、本地优先的 Claude Design 替代方案。它通过 ",[702,703,704],"code",{},"pnpm tools-dev"," 在你的笔记本电脑上运行，将 Web 层部署到 Vercel，并委托给你 ",[702,707,708],{},"PATH"," 中已有的编程代理 CLI（Claude Code、Codex、Cursor Agent、Gemini CLI、OpenCode、Qwen、Copilot、Hermes、Kimi、Pi）——或任何兼容 OpenAI 的 BYOK 端点。",[692,711,712,713,717],{},"Open Design 生成 HyperFrames 合成的",[714,715,716],"strong",{},"有效初稿","——调色板、场景内容、GSAP 入场补间、场景中活动以及着色器过渡。然后你可以下载项目并在任意 AI 编程代理中进行精修，支持代码检查和实时预览。",[719,720,15],"h2",{"id":15},[722,723,724],"h3",{"id":724},"下载指令文件",[692,726,727,728,735],{},"在 GitHub 上打开 ",[695,729,732],{"href":730,"rel":731},"https:\u002F\u002Fgithub.com\u002Fheygen-com\u002Fhyperframes\u002Fblob\u002Fmain\u002Fdocs\u002Fguides\u002Fopen-design-hyperframes.md",[699],[702,733,734],{},"open-design-hyperframes.md","，点击下载按钮（↓）将其保存。",[722,737,739],{"id":738},"在本地运行-open-design","在本地运行 Open Design",[741,742,747],"pre",{"className":743,"code":744,"language":745,"meta":746,"style":746},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","git clone https:\u002F\u002Fgithub.com\u002Fnexu-io\u002Fopen-design.git\ncd open-design\npnpm install\npnpm tools-dev run web\n# open the web URL printed by tools-dev\n","bash","",[702,748,749,765,775,784,798],{"__ignoreMap":746},[750,751,754,758,762],"span",{"class":752,"line":753},"line",1,[750,755,757],{"class":756},"sBMFI","git",[750,759,761],{"class":760},"sfazB"," clone",[750,763,764],{"class":760}," https:\u002F\u002Fgithub.com\u002Fnexu-io\u002Fopen-design.git\n",[750,766,768,772],{"class":752,"line":767},2,[750,769,771],{"class":770},"s2Zo4","cd",[750,773,774],{"class":760}," open-design\n",[750,776,778,781],{"class":752,"line":777},3,[750,779,780],{"class":756},"pnpm",[750,782,783],{"class":760}," install\n",[750,785,787,789,792,795],{"class":752,"line":786},4,[750,788,780],{"class":756},[750,790,791],{"class":760}," tools-dev",[750,793,794],{"class":760}," run",[750,796,797],{"class":760}," web\n",[750,799,801],{"class":752,"line":800},5,[750,802,804],{"class":803},"sHwdD","# open the web URL printed by tools-dev\n",[722,806,808],{"id":807},"将文件放入-skill-中或附加到聊天中","将文件放入 skill 中，或附加到聊天中",[692,810,811,814,815,817,818,821],{},[714,812,813],{},"推荐做法："," 将 ",[702,816,734],{}," 复制到 Open Design 仓库中的 ",[702,819,820],{},"skills\u002Fhyperframes-handoff\u002FSKILL.md","。守护进程会在下次请求时自动发现它，并在选择器中将其暴露为 skill。",[692,823,824,827],{},[714,825,826],{},"或者："," 开始新的聊天并直接附加文件——Open Design 原生读取附件。",[722,829,830],{"id":830},"描述你的视频",[692,832,833,834,837],{},"选择 ",[702,835,836],{},"hyperframes-handoff"," skill（或你活跃的原型 skill），选择设计系统或视觉方向，然后输入简介。如果有截图、品牌素材或调色板，一并提供。",[722,839,840],{"id":840},"将项目保存到磁盘",[692,842,843,844,847,848,847,851,854,855,858,859,862,863,866],{},"Open Design 将 ",[702,845,846],{},"index.html","、",[702,849,850],{},"preview.html",[702,852,853],{},"README.md"," 和 ",[702,856,857],{},"DESIGN.md"," 快照写入 ",[702,860,861],{},".od\u002Fprojects\u002F\u003Cid>\u002F","。点击 ",[714,864,865],{},"Save to disk"," 或下载为项目 ZIP。",[722,868,870],{"id":869},"在任意-ai-编程代理中精修","在任意 AI 编程代理中精修",[692,872,873],{},"Open Design 项目文件夹本身就是一个真实的工作目录。将其交给 Claude Code、Cursor、Codex 或任何具有终端访问权限的代理：",[741,875,877],{"className":743,"code":876,"language":745,"meta":746,"style":746},"cd .od\u002Fprojects\u002F\u003Cyour-project-id>\nnpx skills add heygen-com\u002Fhyperframes   # one-time setup\nnpx hyperframes lint                     # verify structure\nnpx hyperframes preview                  # open the studio\n",[702,878,879,900,917,930],{"__ignoreMap":746},[750,880,881,883,886,890,893,897],{"class":752,"line":753},[750,882,771],{"class":770},[750,884,885],{"class":760}," .od\u002Fprojects\u002F",[750,887,889],{"class":888},"sMK4o","\u003C",[750,891,892],{"class":760},"your-project-i",[750,894,896],{"class":895},"sTEyZ","d",[750,898,899],{"class":888},">\n",[750,901,902,905,908,911,914],{"class":752,"line":767},[750,903,904],{"class":756},"npx",[750,906,907],{"class":760}," skills",[750,909,910],{"class":760}," add",[750,912,913],{"class":760}," heygen-com\u002Fhyperframes",[750,915,916],{"class":803},"   # one-time setup\n",[750,918,919,921,924,927],{"class":752,"line":777},[750,920,904],{"class":756},[750,922,923],{"class":760}," hyperframes",[750,925,926],{"class":760}," lint",[750,928,929],{"class":803},"                     # verify structure\n",[750,931,932,934,936,939],{"class":752,"line":786},[750,933,904],{"class":756},[750,935,923],{"class":760},[750,937,938],{"class":760}," preview",[750,940,941],{"class":803},"                  # open the studio\n",[943,944,945,951],"blockquote",{},[692,946,947,948],{},"💡 ",[714,949,950],{},"Tip",[692,952,953,954,957,958,961],{},"**放入 ",[702,955,956],{},"skills\u002F"," 目录，不要粘贴到聊天中。**Open Design 的守护进程在请求时读取 ",[702,959,960],{},"SKILL.md"," 文件，并自动注入附带文件（模板、参考文档）。粘贴 URL 或聊天附件也可以使用，但 skill 路径能提供完整的预检流程（模板注入 + 五维自我审查关卡）。",[719,963,964],{"id":964},"选择哪种设置",[966,967,968,981],"table",{},[969,970,971],"thead",{},[972,973,974,978],"tr",{},[975,976,977],"th",{},"场景",[975,979,980],{},"推荐设置",[982,983,984,1001,1015,1024],"tbody",{},[972,985,986,990],{},[987,988,989],"td",{},"Open Design（开源）",[987,991,992,993,998,999],{},"将 ",[695,994,996],{"href":730,"rel":995},[699],[702,997,734],{}," 放入 ",[702,1000,820],{},[972,1002,1003,1006],{},[987,1004,1005],{},"Claude Code",[987,1007,1008,1011,1012],{},[702,1009,1010],{},"npx skills add heygen-com\u002Fhyperframes","，然后使用 ",[702,1013,1014],{},"\u002Fhyperframes",[972,1016,1017,1020],{},[987,1018,1019],{},"Cursor \u002F Codex \u002F Gemini CLI",[987,1021,1022],{},[702,1023,1010],{},[972,1025,1026,1029],{},[987,1027,1028],{},"Claude Design（闭源）",[987,1030,992,1031,1038],{},[695,1032,1035],{"href":1033,"rel":1034},"https:\u002F\u002Fgithub.com\u002Fheygen-com\u002Fhyperframes\u002Fblob\u002Fmain\u002Fdocs\u002Fguides\u002Fclaude-design-hyperframes.md",[699],[702,1036,1037],{},"claude-design-hyperframes.md"," 附加到你的聊天中",[719,1040,1041],{"id":1041},"工作原理",[692,1043,1044,1045,1048],{},"指令文件为 Open Design 提供",[714,1046,1047],{},"预验证的 HTML 骨架","——结构规则（data 属性、时间轴注册、场景可见性、预览令牌转发）已经嵌入。Open Design 填充创意工作：",[1050,1051,1052,1065,1075,1081],"ol",{},[1053,1054,1055,1058,1059,1061,1062],"li",{},[714,1056,1057],{},"调色板 + 字体","——由当前活跃的 ",[702,1060,857],{}," 驱动（Open Design 内置 72 个设计系统，当未指定品牌时还有 5 种确定性视觉方向），绑定到 ",[702,1063,1064],{},":root",[1053,1066,1067,1070,1071,1074],{},[714,1068,1069],{},"场景内容","——",[702,1072,1073],{},".scene-content"," 包装器内的文本、图片、布局",[1053,1076,1077,1080],{},[714,1078,1079],{},"动画","——GSAP 入场补间和场景中活动",[1053,1082,1083,1086],{},[714,1084,1085],{},"过渡","——大多数场景使用硬切，2-3 个关键时刻使用着色器过渡",[692,1088,1089,1090,1095],{},"Open Design 的",[695,1091,1094],{"href":1092,"rel":1093},"https:\u002F\u002Fgithub.com\u002Fnexu-io\u002Fopen-design\u002Fblob\u002Fmain\u002Fapps\u002Fweb\u002Fsrc\u002Fprompts\u002Fdiscovery.ts",[699],"五维自我审查","在输出前运行，因此生成的产物通过代码检查，你的编程代理可以立即开始精修，无需结构性修复。",[719,1097,1098],{"id":1098},"示例提示词",[1100,1101,1102,1110,1118,1126],"ul",{},[1053,1103,1104,1107],{},[714,1105,1106],{},"功能公告",[702,1108,1109],{},"text Use the hyperframes-handoff skill. I just shipped dark mode for my app. Make me a 15-second Instagram reel announcing it.  - App name: Taskflow - Primary color: #6C5CE7 - The vibe is clean, minimal, dark - Key stat: \"47% of users requested this\" ",[1053,1111,1112,1115],{},[714,1113,1114],{},"创始人宣传（BYOK，使用你自己的 CLI）",[702,1116,1117],{},"text Use the hyperframes-handoff skill on Codex CLI. 25-second LinkedIn video.  Problem: Sales teams waste 3 hours\u002Fday on manual CRM updates. Solution: AutoCRM — AI that logs every call, email, and meeting. Traction: 200+ teams, $1.2M ARR, 18% MoM growth. CTA: autocrmhq.com  Use the Linear design system. Professional but not corporate. ",[1053,1119,1120,1123],{},[714,1121,1122],{},"品牌驱动（使用 72 个设计系统之一）",[702,1124,1125],{},"text Use the hyperframes-handoff skill. Design system: Stripe. 10-second reel. One big number: \"$4.2 billion processed in Q1 2026\"  Dark background, the number animates up from zero. Subtle, confident. End with logo placeholder and \"stripe.com\" ",[1053,1127,1128,1131,1134,1135,1138,1139,1142],{},[714,1129,1130],{},"简略简介（让它自己提问）",[702,1132,1133],{},"text Use the hyperframes-handoff skill. 30-second launch video for Orbit. ","  Open Design 的 ",[702,1136,1137],{},"RULE 1"," 总是在输出代码前先打开一个 ",[702,1140,1141],{},"\u003Cquestion-form>","，因此简略的简介会变成一个简短的表单（平台 · 受众 · 语调 · 品牌 · 规模），而不是 AI 自由发挥的渲染。",[719,1144,1145],{"id":1145},"提示词中应包含什么",[692,1147,1148,1149,1152],{},"Open Design 按以下优先级读取输入：",[714,1150,1151],{},"当前活跃的 DESIGN.md > 附件 > 粘贴内容 > 网页搜索 > URL","。",[966,1154,1155,1165],{},[969,1156,1157],{},[972,1158,1159,1162],{},[975,1160,1161],{},"输入类型",[975,1163,1164],{},"对 Open Design 的作用",[982,1166,1167,1175,1183,1191,1203],{},[972,1168,1169,1172],{},[987,1170,1171],{},"活跃设计系统（内置 72 个，可从选择器切换）",[987,1173,1174],{},"完整的 9 部分规格（颜色、字体、间距、布局、组件、动效、语调、品牌、反模式）——最强来源",[972,1176,1177,1180],{},[987,1178,1179],{},"截图 \u002F PDF \u002F 品牌指南",[987,1181,1182],{},"调色板、字体、UI 模式、语调——代理原生读取",[972,1184,1185,1188],{},[987,1186,1187],{},"粘贴的十六进制代码、字体、文案",[987,1189,1190],{},"对其涵盖的内容具有权威性",[972,1192,1193,1196],{},[987,1194,1195],{},"品牌名称（知名品牌）",[987,1197,1198,1199,1202],{},"Open Design 可以通过 ",[702,1200,1201],{},"WebFetch"," 获取博客、新闻、维基百科",[972,1204,1205,1208],{},[987,1206,1207],{},"SPA URL（React\u002FVue 首页）",[987,1209,1210],{},"返回近空壳——应改为博客\u002F新闻来源",[692,1212,1213],{},"提示词越具体，输出越好。先选择设计系统或视觉方向，然后描述内容。",[719,1215,1217],{"id":1216},"为什么选择-open-design-而非-claude-design","为什么选择 Open Design 而非 Claude Design",[966,1219,1220,1232],{},[969,1221,1222],{},[972,1223,1224,1226,1228],{},[975,1225],{},[975,1227,84],{},[975,1229,1230],{},[714,1231,88],{},[982,1233,1234,1245,1256,1267,1278,1292,1305],{},[972,1235,1236,1239,1242],{},[987,1237,1238],{},"许可证",[987,1240,1241],{},"闭源",[987,1243,1244],{},"Apache-2.0",[972,1246,1247,1250,1253],{},[987,1248,1249],{},"费用",[987,1251,1252],{},"Pro \u002F Max \u002F Team",[987,1254,1255],{},"BYOK（使用自己的 CLI \u002F API 密钥免费）",[972,1257,1258,1261,1264],{},[987,1259,1260],{},"形态",[987,1262,1263],{},"仅 Web（claude.ai）",[987,1265,1266],{},"Web 应用 + 本地守护进程（或部署到 Vercel）",[972,1268,1269,1272,1275],{},[987,1270,1271],{},"代理运行时",[987,1273,1274],{},"仅 Anthropic（Opus 4.7）",[987,1276,1277],{},"10 个 CLI 适配器 + 兼容 OpenAI 的 BYOK 代理",[972,1279,1280,1283,1286],{},[987,1281,1282],{},"Skills",[987,1284,1285],{},"专有",[987,1287,1288,1289,1291],{},"31 个基于文件的 ",[702,1290,960],{}," 包，可直接放入",[972,1293,1294,1297,1299],{},[987,1295,1296],{},"设计系统",[987,1298,1285],{},[987,1300,1301,1302,1304],{},"72 个内置 ",[702,1303,857],{}," 系统",[972,1306,1307,1310,1313],{},[987,1308,1309],{},"文件系统级工作区",[987,1311,1312],{},"❌",[987,1314,1315,1316,1319,1320,1323,1324,1323,1327,1323,1330],{},"✅ 真实的 ",[702,1317,1318],{},"cwd","，真实的 ",[702,1321,1322],{},"Read"," \u002F ",[702,1325,1326],{},"Write",[702,1328,1329],{},"Bash",[702,1331,1201],{},[692,1333,1334],{},"如果你想要 Claude Design 的工作流但不想被锁定，Open Design 采用相同的产物优先思维模型——开源、本地、BYOK。",[719,1336,1337],{"id":1337},"已知限制",[1100,1339,1340,1350,1359,1365],{},[1053,1341,1342,1345,1346,1349],{},[714,1343,1344],{},"渲染仍在本地进行","——Open Design 生成 HTML；",[702,1347,1348],{},"npx hyperframes render"," 和 HDR 编码仍需要你机器上的 FFmpeg + Node 22+。",[1053,1351,1352,1355,1356,1152],{},[714,1353,1354],{},"面板内预览是沙箱化的 iframe","——完整浏览器播放是可靠的；如需帧精确的拖动预览，请在交接后使用 ",[702,1357,1358],{},"npx hyperframes preview",[1053,1360,1361,1364],{},[714,1362,1363],{},"着色器透传需要 WebGL","——与 Claude Design 路径相同；Open Design 的 iframe 沙箱支持它。",[1053,1366,1367,1370],{},[714,1368,1369],{},"Skill 预检在守护进程端执行","——如果你跳过 skill 选择器直接在聊天中粘贴原始 HTML，会失去附带文件注入和五维审查关卡。请使用 skill。",[719,1372,1373],{"id":1373},"交接给你的编程代理",[692,1375,1376],{},"Open Design 的项目文件夹就是代理的工作目录。没有\"导出再重新导入\"的步骤——直接用 Claude Code、Cursor、Codex 或任何 AI 编程代理打开同一目录：",[741,1378,1379],{"className":743,"code":876,"language":745,"meta":746,"style":746},[702,1380,1381,1395,1407,1417],{"__ignoreMap":746},[750,1382,1383,1385,1387,1389,1391,1393],{"class":752,"line":753},[750,1384,771],{"class":770},[750,1386,885],{"class":760},[750,1388,889],{"class":888},[750,1390,892],{"class":760},[750,1392,896],{"class":895},[750,1394,899],{"class":888},[750,1396,1397,1399,1401,1403,1405],{"class":752,"line":767},[750,1398,904],{"class":756},[750,1400,907],{"class":760},[750,1402,910],{"class":760},[750,1404,913],{"class":760},[750,1406,916],{"class":803},[750,1408,1409,1411,1413,1415],{"class":752,"line":777},[750,1410,904],{"class":756},[750,1412,923],{"class":760},[750,1414,926],{"class":760},[750,1416,929],{"class":803},[750,1418,1419,1421,1423,1425],{"class":752,"line":786},[750,1420,904],{"class":756},[750,1422,923],{"class":760},[750,1424,938],{"class":760},[750,1426,941],{"class":803},[692,1428,1429],{},"然后以与 Claude Design 路径相同的方式迭代：",[1100,1431,1432,1435,1438,1441],{},[1053,1433,1434],{},"\"让场景 3 的入场更干脆\"",[1053,1436,1437],{},"\"给场景 5 的数据添加一个计数器动画\"",[1053,1439,1440],{},"\"收紧节奏——场景 4 和 6 感觉太长了\"",[1053,1442,1443],{},"\"把过渡 2 的着色器改成故障效果\"",[719,1445,1446],{"id":1446},"下一步",[1100,1448,1449,1457],{},[1053,1450,1451,1456],{},[714,1452,1453],{},[695,1454,1455],{"href":85},"Claude Design 指南","\n同一工作流的闭源版本——当你笔记本电脑上没有 CLI 时很有用。",[1053,1458,1459,1463],{},[714,1460,1461],{},[695,1462,92],{"href":93},"\n在 Claude Code、Claude Design、Open Design 和其他代理中使用 HyperFrames 的更多提示词模式。",[1465,1466,1467],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}",{"title":746,"searchDepth":753,"depth":767,"links":1469},[1470,1478,1479,1480,1481,1482,1483,1484,1485],{"id":15,"depth":767,"text":15,"children":1471},[1472,1473,1474,1475,1476,1477],{"id":724,"depth":777,"text":724},{"id":738,"depth":777,"text":739},{"id":807,"depth":777,"text":808},{"id":830,"depth":777,"text":830},{"id":840,"depth":777,"text":840},{"id":869,"depth":777,"text":870},{"id":964,"depth":767,"text":964},{"id":1041,"depth":767,"text":1041},{"id":1098,"depth":767,"text":1098},{"id":1145,"depth":767,"text":1145},{"id":1216,"depth":767,"text":1217},{"id":1337,"depth":767,"text":1337},{"id":1373,"depth":767,"text":1373},{"id":1446,"depth":767,"text":1446},"在 Open Design 中创建 HyperFrames 视频草稿——开源、自带 API 密钥的 Claude Design 替代方案——然后在任意 AI 编程代理中进行精修。","md",null,{},true,{"title":88,"description":1486},"FjdOQmARBoWB9MjmF4Wrw-_5TpEpCuUvdKCq-z_vBlI",[1494,1496],{"title":84,"path":85,"stem":86,"description":1495,"children":-1},"在 Claude Design 中创建 HyperFrames 视频草稿，然后在任何 AI 编程 agent 中优化。",{"title":92,"path":93,"stem":94,"description":1497,"children":-1},"如何提示 Claude Code、Cursor、Codex、Google Antigravity、GitHub Copilot CLI 和其他 AI 代理来编写 Hyperframes 合成——包含可直接复制粘贴的示例和词汇表。",1780322249813]