人工智能AI 应用桌面应用【免费下载链接】open-codesignOpen-source Claude Design alternative. One-click import your Claude Code / Codex API key. Prompt → prototype / slides / PDF. Multi-model (Claude, GPT, Gemini, Kimi, GLM, Ollama). BYOK, local-first, MIT.项目地址https://gitcode.com/gh_mirrors/op/open-codesign点击查看免费下载本篇技术指南围绕 Open CoDesign 内置的responsive-layout设计技能apps/desktop/resources/templates/skills/responsive-layout.md展开讲解其在 Prompt 生成原型、幻灯片、PDF 等产物时的响应式布局规范从布局契约、CSS 响应式规则、断点体系、固定尺寸产物处理到交付前的防重叠检查。读完本文你将掌握一套可直接套用的跨 mobile / tablet / desktop / 固定格式预览的布局方法论并理解该技能在 Open CoDesign 技能系统中的加载、注入与校验链路。技能定位一份写代码前必须加载的布局方法规则responsive-layout是 Open CoDesign 内置的 17 个设计技能之一同目录还有form-layout、empty-states、loading-skeleton、surface-elevation、cjk-typography、app-shell-navigation、mobile-mock、pitch-deck、data-viz-recharts等见 apps/desktop/resources/templates/skills。它的定位非常明确——在生成任何应当随尺寸变化而稳定呈现的产物之前模型必须先调用skill(responsive-layout)加载本规则。其 frontmatter 中的description直接圈定了适用范围Designs layouts that hold across mobile, tablet, desktop, and fixed-format preview sizes. Use for landing pages, dashboards, reports, app shells, tables, card grids, browser/device mocks, and any artifact that should not overlap, clip, or collapse when resized.即落地页、仪表盘、报告、应用外壳、表格、卡片网格、浏览器/设备 mock以及任何缩放时不应重叠、裁剪或塌陷的产物。aliases: [responsive, layout, breakpoints, mobile-desktop, resize]提供了五个别名模型可以通过别名命中同一技能。trigger.providers: [*]、scope: system表示它对所有模型提供方Claude、GPT、Gemini 等生效disable_model_invocation: false表示模型可主动加载user_invocable: true表示用户也可以显式请求。该技能的元数据由 packages/shared/src/skills.ts 中的SkillFrontmatterV1schema 校验description最长 1536 字符、name非空、aliases/dependencies/validationHints缺省为空数组、trigger缺省为{providers: [*], scope: system}。一旦 frontmatter 非法packages/core/src/skills/loader.ts 的loadSkillsFromDir会抛SKILL_LOAD_FAILED见 packages/core/src/skills/loader.test.ts 中的校验用例。第一原则Layout Contract —— 先问这是哪种格式的产物技能的正文以布局契约开篇要求模型在动笔前先确定产物类型因为不同类型对响应式的诉求截然相反产物类型布局策略固定尺寸的幻灯片 / 报告页Fixed slide/report保持目标宽高比整体画布可预测地缩放应用 / 工具界面App/tool surface布局结构随视口宽度自适应手机 mockMobile mock按手机视口设计除非用户明确要求否则不添加假的设备边框浏览器 / 设备边框Browser/device frame边框保持稳定只让内部屏幕内容自适应这条契约的意义在于防止模型一刀切给 PPT 硬套流式栅格会破坏版式给 Web 应用强锁固定宽度又会在大屏留下空白。Open CoDesign 的预览窗格支持多种尺寸见preview相关组件因此先定格式、再定响应式策略是避免产物在预览中被拉变形的前提。响应式规则用稳定约束替代视口缩放技能给出了 6 条可直接落地的 CSS 规则全局box-sizing: border-box所有盒模型的 width/height 包含 padding 和 border避免子元素撑爆容器导致重叠。用minmax()、clamp()、aspect-ratio、max-width设置稳定尺寸并明确警告不要让 hover 标签改变网格尺寸——即悬浮态扩展的提示条不得参与网格布局计算防止鼠标悬停瞬间页面跳动。禁止直接按视口宽度缩放字号应使用离散的字号档位或仅对展示性大标题display type使用带保守边界的clamp()。这避免了小屏上正文变成蚂蚁字、大屏上正文变成广告牌的反模式。小字号禁用负 letter-spacing普通 UI 文本用letter-spacing: 0保证可读性。大布局变化优先用 CSS Grid局部对齐用 FlexGrid 擅长二维结构侧栏 主区 数据栅格Flex 擅长一行内的对齐与间距。小屏表格必须三选一横向滚动 冻结首列、改为卡片行、或降级为精简列摘要。表格是响应式设计里最容易产生横向裁剪的组件技能给出了明确出口。这些规则与仓库中的前端规范一脉相承——Open CoDesign 生成的前端产物默认走现代 CSS可从packages/runtime的编辑模式注入与 apps/desktop/resources/templates/skills/frontend-design-anti-slop.md 等配套技能看出clamp()/minmax()/aspect-ratio均无需构建工具即可在现代浏览器工作因此可以放心写入生成的 HTML/CSS。断点体系内容驱动为主三档默认值兜底技能强调断点应由内容驱动同时给出三档安全的默认值≤ 640px单列、紧凑导航、主操作按钮全宽。对应手机竖屏。641–1024px内容宽度足够时采用双列或分栏布局。对应平板与窄桌面。 1024px完整外壳全 shell、侧边栏、更宽的数据栅格、次级面板。对应桌面宽屏。这套默认值与常见 CSS 断点实践一致但技能特意把内容驱动放在前面断点不是固定的魔数而是当某列窄到放不下内容时自然发生的结构切换。结合上一节的 Grid 优先原则实现上建议用repeat(auto-fit, minmax(...))或显式 media query 在三个档位之间切换列数而非逐像素堆砌。固定尺寸产物画布级缩放而非散落的视口数学针对幻灯片、演示稿、报告页技能给出 4 条铁律外层画布使用aspect-ratio一个画布决定整体比例。所有内容必须待在画布内除非是导出产物之外的控件否则不允许使用固定视口定位position: fixed的元素。页码计数器与实际幻灯片/页数一致pitch-deck等演示类产物生成多页时页脚计数必须与真实页数同步不能写死。在画布上做响应式缩放而不是到处散布视口计算100vw、100vh之类的单位应集中在最外层画布一处处理内部元素一律相对画布布局否则某个内层元素的一行视口数学就会在缩放时把布局打乱。这解释了为何固定格式产物需要整体缩放而非流式重排——PDF/幻灯片的分页排版本质上没有重排空间只有等比缩放这一种响应式手段。交付前自检Anti-Overlap Check技能在预览或调用done()之前强制要求 5 项检查这是本文档最有操作价值的部分最长的按钮文案能装进它的容器——检查white-space: nowrap是否导致溢出按钮是否给足了min-width/padding。卡片在 hover 时尺寸不变——对应规则 2避免 hover 阴影/边框改变盒子大小。固定页眉/页脚不遮挡内容——内容区需要预留 header/footer 高度尤其是滚动容器内。移动端导航不重叠安全区safe-area或底部操作——iOS 刘海屏的env(safe-area-inset-*)必须被尊重底部动作条不能被 TabBar 或虚拟 Home 条压住。宽图表、表格、代码块有刻意的溢出处理——要么横向滚动、要么裁剪加指示、要么降级摘要而不是默默被容器overflow: hidden吞掉。done()是 Open CoDesign 的完成工具实现于 packages/core/src/tools/done.ts代表产物交付技能把自检挂在它之前意味着未通过防重叠检查的产物不应被宣布完成。运行机制这个技能是如何被模型加载与校验的要理解responsive-layout的实际作用需要看它的完整加载链路打包与播种技能源文件位于 apps/desktop/resources/templates/skills桌面应用首次启动时由 apps/desktop/src/main/ensure-user-templates.ts 的ensureUserTemplates复制到userData/templates之后归用户所有后续升级仅补齐缺失文件、修复清单copyMissingFiles/repairBundledManifests不覆盖用户改动。解析与校验packages/core/src/skills/loader.ts 内置一个SKILL.md 专用的内联 YAML frontmatter 解析器支持折叠/字面量块标量、块序列、行内序列等 YAML 子集解析结果交给SkillFrontmatterV1校验packages/core/src/skills/loader.test.ts 验证了responsive-layout会被从内置目录成功加载且非法 frontmatter 会抛SKILL_LOAD_FAILED。清单注入packages/core/src/resource-manifest.ts 的collectResourceManifest调用filterActivepackages/providers/src/skill-injector.ts按providerId与trigger.providers过滤、跳过disable_model_invocation把技能描述压缩成一行whenToUse写入生成请求的资源清单# Available Resources段落提示模型写代码前先skill(name)。按需加载模型通过skill工具packages/core/src/tools/skill.ts 的makeSkillTool用skill(responsive-layout)取回完整 Markdown 正文同一会话内对同一技能去重重复调用只返回 skill already loaded this session 的短提示。加载时还会用resolveSafeManifestPath防路径逃逸与符号链接穿越。从源码结构看这套manifest-first 按需取全文的渐进式披露设计v0.2 不把完整技能体塞进每次请求而是让模型按需调用意味着responsive-layout这类技能的正文只在真正需要布局指导时进入上下文既不浪费 token又保证关键规则不被长上下文稀释。与其他技能的协作方式responsive-layout的dependencies: []表明它不强制依赖其他技能但在实际生成任务中常与同目录技能组合使用与app-shell-navigation配合处理多屏应用的外壳与导航响应式与mobile-mock配合产出手机视口 mockmobile-mock处理设备视口与手势responsive-layout负责其内部布局不塌陷与pitch-deck配合覆盖固定格式幻灯片的画布缩放规则与data-viz-recharts配合解决宽图表在小屏的溢出处理对应 Anti-Overlap Check 第 5 条。读者如果要在自己的 Open CoDesign 实例中调整这份规则只需编辑userData/templates/skills/responsive-layout.md首次启动后已播种为用户文件同一id下用户技能会覆盖内置技能loadAllSkills按 project user builtin 优先级合并见 packages/core/src/skills/loader.ts 与对应测试改完即可对后续生成生效无需改动仓库。小结responsive-layout技能全文虽短却是一份高密度的可执行布局契约先按产物格式定策略再用border-box/minmax()/clamp()/aspect-ratio建稳定约束靠三档内容驱动断点切换结构对固定格式产物坚持画布级缩放最后在done()前完成五项防重叠自检。结合 packages/core/src/tools/skill.ts、packages/core/src/resource-manifest.ts 与 packages/core/src/skills/loader.ts 的源码实现可以看到这份规则不是静态文档而是被加载、校验、按需注入、且允许用户覆盖的活的生成时约束——这正是 Open CoDesign 将设计方法工程化的核心做法。赞分享人工智能AI 应用桌面应用【免费下载链接】open-codesignOpen-source Claude Design alternative. One-click import your Claude Code / Codex API key. Prompt → prototype / slides / PDF. Multi-model (Claude, GPT, Gemini, Kimi, GLM, Ollama). BYOK, local-first, MIT.项目地址https://gitcode.com/gh_mirrors/op/open-codesign点击查看免费下载相关推荐终极Android响应式布局指南适配不同设备屏幕的10个技巧终极Android响应式布局指南适配不同设备屏幕的10个技巧 在当今多样化的Android设备生态系统中响应式布局已成为开发高质量应用的关键技术。Open文档知识库5分钟上手gcr.io_mirror新手必备的镜像加速工具5分钟上手gcr.io_mirror新手必备的镜像加速工具 gcr.io_mirror是一款专为解决Docker镜像拉取难题设计的镜像加速工具能帮助开发者轻云原生DevOpsCube-UI 响应式设计实践适配不同设备的UI布局技巧Cube UI 响应式设计实践适配不同设备的UI布局技巧 你还在为移动应用在不同尺寸设备上的布局错乱而烦恼吗还在手动编写大量媒体查询来适配各种屏幕吗本文将前端UI组件移动开发上一篇Go-ldap-admin与Kubernetes集成云原生LDAP管理方案下一篇DynamicColor 开源项目教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考