【免费下载链接】openpencilThe worlds first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil.项目地址https://gitcode.com/gh_mirrors/op/openpencil点击查看免费下载本指南面向希望理解 OpenPencil AI 原生设计引擎如何在动手画落地页之前先想清楚的开发者、AI Agent 开发者与设计系统研究者。文章以技能语料 landing-page-predesign.md 为核心骨架结合op-ai-skills技能引擎与op-orchestrator编排器的真实实现讲清该技能的 frontmatter 契约、三步预设计流程、preDesignContextJSON 输出格式以及它在规划planning阶段的完整调用链——读完后你将掌握这套先做心智设计、再产出结构化计划的落地页预设计方法并能顺着源码追踪它从语料到 system prompt 的全过程。一、技能定位规划阶段的落地页专属预设计指令在 OpenPencil 的 AI 设计流水线中一次生成请求会经历planning规划→ generation生成→ validation校验→ maintenance维护四个阶段见 types.rs 中的Phase枚举。landing-page-predesign是挂在planning阶段下的一个domain类技能其职责是在模型产出结构化规划 JSON 之前先在内部完成一组预设计思考——包括概念提取、超级粉丝访谈模拟、情感转变映射——并把思考结果以 JSON 字段形式沉淀进规划产物中。该技能的 frontmatter位于 landing-page-predesign.md定义了完整的元数据契约--- name: landing-page-predesign description: Mandatory pre-design steps for landing pages — concept extraction, superfan simulation, transformation mapping phase: [planning] trigger: keywords: [landing, website, 官网, 营销, marketing, promotional, homepage] priority: 8 budget: 1500 category: domain ---这些字段并非摆设它们直接决定了技能何时被加载、以什么顺序参与 prompt 组装、能占用多少 token 预算字段值引擎中的含义源码依据namelanding-page-predesign技能注册表主键被 loader.rs 的get_skill_by_name索引重复 name 会被 loader.rs 的测试拦截phase[planning]只参与 planning 阶段的技能解析get_skills_by_phasetrigger.keywords[landing, website, 官网, 营销, marketing, promotional, homepage]触发条件用户消息命中任一关键词即激活详见下文关键词触发语义priority8数字越小越靠前filter_by_intent按升序排序resolver.rsbudget1500该技能自身的 token 上限超限会被截尾budget.rscategorydomain预算填充优先级base永远保留domain按相关度填充剩余预算knowledge仅在有富余时追加types.rs值得注意的一点是在 types.rs 的注释中明确记录——landing-page-predesign是 planning 阶段唯一的 Domain 类技能而 planning 阶段的三个 Base 技能如decomposition、style-guide-selector虽然预算豁免但同样计入总预算。早期 planning 默认预算只有 4000 tokenBase 技能自身就需约 4500 token导致这个技能在 4000 预算下永远无法被包含进任何 prompt2026-07-28 将 planning 默认预算上调至 6000见 types.rs 的default_budget才让它在匹配时得以进入。这是理解预算上限与技能实际装载关系的绝佳案例。二、关键词触发语义中英文关键词如何命中trigger.keywords的匹配逻辑位于 resolver.rs 的match_keywordASCII 关键词按词边界匹配landing能命中design a landing page但不会命中landscape之类的包含串CJK 关键词退化为子串匹配官网、营销直接以子串包含判定消息会先to_lowercase()再匹配大小写不敏感trigger采用任一命中语义keywords.any(...)见 resolver.rs。也就是说当用户输入中出现 landing、website、官网、营销、marketing、promotional、homepage 中的任意一个词landing-page-predesign就会在 planning 阶段的技能解析中候选入选随后按priority: 8参与排序并按budget: 1500与阶段总预算进行装载决策budget.rs 的trim_by_budget先做单技能预算封顶再按类别优先级填充阶段总预算Domain 技能按关键词命中数计算相关度排序。三、Step 1概念提取Concept Extraction——先回答这页到底在说什么技能正文要求模型在内部完成概念提取识别这页落地页必须传达的核心概念。概念被分为两类领域概念Domain concepts产品所处的空间/品类是什么、产品做什么质性概念Qualitative concepts这个体验应该感觉起来是什么样。每个概念都要标记为primary主要或secondary次要并映射到四个具体的落地设计决策维度设计决策维度要回答的问题Content内容这个概念说了什么对应哪段文案Layout布局它在页面上如何被结构化/摆放Color色彩什么调色板能支撑这个概念的情绪Typography字体排印什么字型/字重处理与之匹配这一步的本质是把抽象的品牌意图翻译成可执行的设计约束——概念清单先于布局存在页面结构只是概念的载体。它与生成阶段的 landing-page.md 中Define the copy first, then design around it — words drive layout, not the reverse先定文案再围绕它设计文字驱动布局而非反之一脉相承概念提取正是words first在规划阶段的前置落实。四、Step 2超级粉丝模拟Superfan Simulation——用最懂产品的人校准页面优先级技能要求模型模拟一次与产品超级粉丝的简短研究访谈提取2-5 条洞察。访谈提纲固定为四个问题他们最喜爱产品的什么什么让他们觉得神奇/魔法感magical他们向别人讲述产品的哪些故事什么视觉对他们来说是authentic真实可信的随后把这些洞察应用到四个落点Hero messaging什么样的标题能引起共鸣Content hierarchy什么内容应该最先出现Section priorities什么内容最重要决定章节的取舍与权重Visual direction什么视觉方向感觉是对的超级粉丝模拟的价值在于绕过功能罗列陷阱普通的产品页面倾向于罗列功能特性而超级粉丝讲述的是这个产品如何改变了我的故事——这些故事正是转化文案的素材。这与 landing-page.md 中Sell the transformation, not the feature销售转变而非功能的核心信条严格对齐模拟访谈提取的是转变故事而不是 feature list。五、Step 3转变映射Transformation Mapping——定义页面的情感弧线第三步定义整页的情感弧线要求模型明确四个状态Before State前状态访客现在感受到的痛苦、挫败或限制After State后状态使用产品后的生活情感层面不只是功能层面是什么样的Bridge桥梁产品如何把访客从 Before 带到 AfterFeeling主导情绪页面应唤起的唯一主导情绪从六个候选值中选一confidence自信/ liberation解放/ belonging归属/ power力量/ calm平静/ mastery掌控技能还强调Every section should subtly answer: Heres where were taking you.每个章节都应含蓄地回答这是我们要带你去的地方——即整页的每个 section 都要服务于这段情感弧线让访客在滚动过程中持续感知转变的路径。这一步与 landing-page.md 的叙事弧线promise → proof → trust → action及标题层级landing-page.mdTransformation Outcome Benefit Feature最强到最弱构成闭环规划阶段定情感从哪来到哪去生成阶段把这条弧线落到标题措辞与章节顺序。六、输出契约preDesignContextJSON 字段而非散文技能正文对输出格式有非常硬性的要求Do NOT output these steps as prose. Do NOT explain your reasoning. Include them only as the JSON field above.即不得以散文输出这三步不得解释推理过程结果必须作为preDesignContext字段放进 JSON 规划对象中与rootFrame、styleGuideName、subtasks平级。文档给出的字段结构为preDesignContext:{ primaryConcepts:[...], superfanInsights:[...], transformation:{ before:..., after:..., bridge:..., feeling:... } }这份上下文将指导后续的子任务分解subtask decomposition与风格指南选择style guide selection——即喂给 decomposition.md把 UI 请求拆分为内聚的 subtask与 style-guide-selector.md按标签重叠选择预置视觉风格指南两个规划技能。在 orchestrator 的 Rich 模式 system prompt 末尾prompt.rs 的RICH_SUFFIX也有一致的最强约束Any pre-design analysis (concept extraction, superfan simulation, etc.) must happen internally — include results as JSON fields, never as prose. Violating this format will cause a system error.从源码结构看Rust 侧当前对规划产物的解析结构 OrchestratorPlan 只显式声明了rootFrame、subtasks、styleGuideName三个字段并未声明preDesignContext——由于 serde 默认忽略未知字段规划 LLM 携带该字段输出不会导致反序列化失败。可以推断该字段的主要消费方是模型自身的内部推理链与未来的下游消费逻辑如后续接入的 style guide 选择、subtask 分解增强而当前阶段它的核心作用是把预设计思考约束在 JSON 内防止模型把宝贵的 planning 输出带宽浪费在散文式推理上。七、源码级调用链从语料到 planning system promptlanding-page-predesign从仓库中的 Markdown 语料到最终进入 LLM 的 system prompt经历如下完整链路以 orchestrator 的 Rich/Minimal 规划路径为例见 prompt.rs编译期嵌入op-ai-skills通过include_dir!把整个skills/语料目录在编译期嵌入二进制lib.rs无运行时文件 IOwasm32 目标同样可用frontmatter 解析parse_skill_frontmatterfrontmatter.rs解析 name/phase/trigger/priority/budget/category——注意 trigger.keywords 支持多行数组与#注释解析器会剥离注释并合并跨行数组按阶段过滤get_skills_by_phase(Phase::Planning)取出 planning 阶段全部技能loader.rs其中style-guides/子目录被刻意排除意图匹配filter_by_intentresolve.rs按 trigger 关键词过滤并按 priority 升序排序动态内容注入把{{availableStyleGuides}}等占位符替换为真实内容resolver.rs预算裁剪trim_by_budget_pinned按单技能预算 阶段总预算决定装载与否budget.rs 起未装入的技能会以BudgetExhausted原因记入诊断报告编排器二次过滤filter_planning_skills_for_promptprompt.rs——这是该技能最关键的守门逻辑只有当detect_design_type(prompt).type_ DesignType::LandingPage时才保留该技能否则直接剔除。这意味着即使关键词触发了它若设计类型判定不是落地页它也不会进入 prompt拼接 system prompt所有保留技能正文按序拼接再追加PLANNING_QUALITY_GUARDRAILSprompt.rs与RICH_SUFFIX/MINIMAL_SUFFIX输出格式约束。其中第 7 步依赖 design_type.rs 的detect_design_type分类首个命中胜出顺序为 Component → Mobile → Desktop →默认 LandingPage。落地页的 presetdesign_type.rs为width1200, height0自适应高度、可滚动默认章节骨架为 Header / Main Content / Supporting Content / Footer——这与 decomposition.md 中 Type 1多章节营销页的 6-10 个 subtask、navigation - hero - content sections - CTA - footer结构完全一致。八、与兄弟技能的协作关系landing-page-predesign不是孤立运行的它与 planning 阶段其他技能构成协作网络decomposition.mdpriority 0Base负责把 UI 请求拆分为 subtask定义了落地页Type 1的宽度 1200、高度自适应、6-10 个 subtask、导航-英雄区-内容-CTA-页脚的固定叙事结构以及落地页导航 64-80px、hero 500-600px等高度提示。preDesignContext的情感弧线将指导它决定各 section 的取舍与顺序style-guide-selector.mdpriority 3Base按标签重叠从预置风格指南库选styleGuideName如 brutalist、terminal-minimal-dark。preDesignContext.primaryConcepts中的质性概念如自信科技感正是标签推断的输入landing-page.mdgeneration 阶段 Domain 技能承接规划结果在生成阶段落实转化驱动的叙事弧线promise → proof → trust → action、密度/明暗节奏交替、单一转化意图、CTA 色彩独占等深度规则。从规划到生成的协作可概括为predesign 负责情感与概念decomposition 负责结构与章节style-guide-selector 负责视觉基调landing-page 负责转化深度落实——四者层层递进共同把一句做一个官网/落地页的请求变成一页有情感弧线、有转化意图、有视觉基调的可生成规划。九、落地实践要点与注意事项结合原文档与源码使用或扩展该技能时有几点值得注意它是强制预设计不是可选建议description 中的 Mandatory pre-design steps 表明只要触发且设计类型为落地页这三步就是规划的前置条件。但要注意第 7 步的编排器守门逻辑——非落地页设计会被剔除所以该技能只对 landing page 类请求生效输出纪律是硬约束三步思考必须全部沉淀进preDesignContextJSON 字段任何散文式推理都会违反RICH_SUFFIX的格式强制声明Violating this format will cause a system error。这符合 orchestrator 侧 prompt.rs 与 plan.rsparse_plan只抽取第一个平衡{...}的解析策略——把推理锁进 JSON 才能被稳定解析预算直接影响装载该技能budget: 1500是单技能上限同时 planning 阶段总预算 6000types.rs是阶段硬顶。若扩展语料时把该技能内容写得太长会触发 budget.rs 的截尾警告skill ... exceeds its budget ... truncated尾部指导会被静默丢弃——这正是 budget.rs 注释中提到的layout.md曾超预算数月未被发现的教训关键词触发的词边界语义新增中英文关键词时注意 ASCII 关键词是词边界匹配如landing不匹配landscape、CJK 是子串匹配如官网只要出现在消息中即命中——两条路径的命中率差异显著详见 resolver.rs 及对应测试feeling是单选转变映射的最后一步要求从六个情绪候选值confidence / liberation / belonging / power / calm / mastery中选一个主导情绪——这是刻意的约束目的是让整页的情感基调收敛、避免多情绪互相稀释与ONE conversion intent单一转化意图的落地页信条同构。十、总结landing-page-predesign是 OpenPencil planning 阶段先思考后动手理念的最小完整样本它用概念提取锚定页面语义用超级粉丝模拟校准共鸣点与优先级用转变映射定义情感弧线最后用强制的JSON 输出契约把全部思考沉淀为机器可解析的结构化上下文。理解它也就理解了 OpenPencil 如何把好的落地页设计直觉编码成可复现、可预算、可测试的 Agent 技能——从 frontmatter.rs 的解析器、resolver.rs 的意图匹配、budget.rs 的预算裁剪到 prompt.rs 的设计类型守门每一个环节都有源码与测试可查证。赞分享【免费下载链接】openpencilThe worlds first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil.项目地址https://gitcode.com/gh_mirrors/op/openpencil点击查看免费下载相关推荐Skills 仓库 landing-page 技能拆解从 Demo 提示词到高转化落地页的完整设计方法论Skills 仓库 landing page 技能拆解从 Demo 提示词到高转化落地页的完整设计方法论 在 AI 编码 AgentCodex、ClaudeClaude Code Gateway 落地页Landing Page深入解读HTML 状态页模板、模板变量与 OAuth 发现链路Claude Code Gateway 落地页Landing Page深入解读HTML 状态页模板、模板变量与 OAuth 发现链路 导读Claude文档提示工程人工智能高转化着陆页设计实战指南Skills 仓库 landing-page 技能的结构、文案与 SEO/AEO 完整方法论高转化着陆页设计实战指南Skills 仓库 landing page 技能的结构、文案与 SEO/AEO 完整方法论 本文以 Skills 仓库 landin创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考