前天看到《2024，我追过的 AI 风口》文章中作者提到了一句话生成Landing Page的思路，想起来我们自己公司众多产品正缺少一个落地页，每款都缺。
开始动手。
本文基本“零代码”，但是不全零，毕竟得组合
应该有更好的方式来实现，但是已经实现了需求，就不探索了
1、我不太会写页面，Claude会
落地页需要一个页面，但是想起来又要设计，还得调样式就头大。
想做这个事情的时候第一时间想起了Claude，因为跨年的时候用Claude写了个小游戏，三次对话游戏成型。
↑就是这个丑消息，一个贪吃蛇游戏，输赢都会放烟花祝你蛇年大吉，吃的越多速度越快。
于是页面的事情就外包给Claude：
第一轮很简单的试探了一下，看着还行，于是继续要求要的更多：
要的多了之后产生了一个问题，长度超出了...
把两段代码复制到一个文件里，看到成品：
网页太长了，不全部截图水长度，但是总体来说，省了一个UI设计+前端，三次对话网站成型。
2、产品不能一个一个改吧，怎么办？
当然是把页面模板化，全部生成了。
手里有的资料：产品介绍、产品界面图，差不多够网站用了。
最初，我设定了两个主要需求：
- 动态内容展示：需要能够灵活地在页面中插入不同的文本和数据。
- 简单配置，快速生成：希望能够快速的设置模板页生成、展示的内容，不用改生成代码或者额外配置。
- 支持更多的模式：单个文本、循环块、引用素材等...
于是，我决定尝试通过表达式规则来解决这个问题，采用一种类似于 {<类>.<属性>:<描述>} 和 {-<类>:<描述>} 这样的格式，以便让页面内容更具可扩展性和灵活性。
例如：
{system.info:系统的一段话简介，说明系统的主要功能和特点}
{foreach-advantage:系统的优势，需要总结至少四条}
{advantage.title:优势，使用四个字}
{/foreach}
接着改造模板页面，把需要生成的内容全部使用模板代码替换，示例：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{base.title:为系统生成符合SEO要求的title}</title>
<meta name="description" content="{base.title:为系统生成符合SEO要求的description}">
<meta name="keywords" content="{base.title:为系统生成符合SEO要求的keywords}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">
</head>
{foreach-feature:系统的特点，根据内容总结三条或六条}
<div class="flex flex-col items-center">
<div class="flex items-center justify-center h-16 w-16 rounded-full bg-blue-100">
<svg class="h-8 w-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
</svg>
</div>
<h3 class="mt-6 text-lg font-medium text-gray-900">{feature.key:系统特点关键词，使用6个字以内简述}</h3>
<p class="mt-2 text-base text-gray-500 text-center">
{feature.info:用一段话对系统特点详细描述，不超过200字}
</p>
</div>
{/foreach}
3、把模板交给大模型
已经开始懒了，解析代码写着太累，也交给LLM实现，为了省时间交给o1来处理，Prompt：
使用python实现，读取HTML中的使用{}包裹的标签，并按照{[fun-]key.attr:describe}的规则提取。
标签分为两种：
1、 属性标签，格式为：{key.attr:describe}，注意key和attr使用.隔开了，如果有attr则需要使用items数组记录；
2、 方法标签，格式为{fun-key.attr:describe}，例如{foreach-system:系统信息}{/foreach}；
返回结果输出为JSON，按照以下格式输出：
```
[
{
"key": "system",
"describe": "系统名称"
},
{
"key": "base",
"items": [
{
"key": "title",
"describe": "页面标题，包含推广词"
},{
"key": "info",
"describe": "页面介绍，包含推广词"
}
]
},
{
"key": "feature",
"fun":"foreach"
"iterator": "[循环标签包裹的内容]"
"items": [
{
"key": "title",
"describe": "页面标题，包含推广词"
},{
"key": "info",
"describe": "页面介绍，包含推广词"
}
]
}
]
```
要求、示例说清楚，o1生成代码一次通过，很符合我要求。然后同样的方法，让o1帮我写剩余代码：
- 担心一次要的内容太多，系统根据<类>循环调用openai根据配置获取参数，输出json。
- 将json结果替换到HTML中
- 输出HTML
代码太多，不在这里贴了，公众号“刀笔法老猫”发送：单页 获取。
输出效果：
在按照要求生成内容，格式化返回结果这块，ChatGPT确实好用，按照表达式规则和格式返回结果尝试了星火4.0、deepseek，经常出错，导致在解析JSON的时候大片报错，用了4omini，一次导出了90+页面0错误。
又水了一篇，不管好坏已经开始写了，公众号“刀笔法老猫”回复：单页 获取模板生成单页代码。
