夜雨聆风
AI内容实战 · 完整实操 · 第02期
完整实战流程：用AI从0做出商品卖点助手网页原型
不是讲思路，而是按真实做项目的顺序，一步步把网页工具做出来。
STEP 01
先说清楚：这篇付费内容到底交付什么
这篇不是讲“AI可以帮你写卖点”这种概念。
这篇要交付的是一个完整实战流程：你跟着做，最后应该得到一个能打开的网页原型。
这个网页叫“AI商品卖点提炼助手”。它能让用户输入商品名称、目标人群、使用场景、核心特点、发布平台，然后输出商品定位、用户痛点、核心卖点、平台文案、图片提示词和质量检查。
它不追求一开始就商业化，也不需要登录、数据库、支付、后台。第一阶段只做一件事：把一个AI想法变成一个可操作、可展示、可继续迭代的小工具。
这也是我做AI项目时最常用的顺序：先确定成品，再拆字段，再搭页面，再跑通逻辑，再验收，再整理交付包。
STEP 02
第0步：先确定最终成品，不要一上来就写代码
很多人做项目失败，是因为第一句话就对AI说：帮我做一个网站。
这句话太空。AI不知道你要什么页面，不知道输入什么，不知道输出什么，更不知道什么结果算合格。
你要先把最终成品说清楚。
本项目最终成品是：一个单文件网页 demo_app/index.html。
打开以后，左边是商品信息输入区，右边是卖点结果展示区。用户点击按钮后，右侧自动生成商品定位、用户痛点、核心卖点、平台文案、图片提示词和质量检查。
注意：这里先不接真实AI接口。第一版用本地JavaScript规则跑通流程。这样做不是偷懒，而是为了先验证工具结构是否成立。
STEP 03
第1步：创建项目文件夹
你可以先在电脑里建一个文件夹，名字叫：ai-product-selling-point-helper。
里面先只需要一个文件夹：demo_app。
最终文件结构是：
ai-product-selling-point-helper
└─ demo_app
└─ index.html
不要一开始就建一堆复杂目录。项目越早期，结构越要简单。
先把一个页面做出来，再考虑后面要不要拆组件、接API、保存历史记录。
STEP 04
第2步：先把输入字段定死
这个工具最重要的不是页面好看，而是输入字段是否正确。
字段错了，AI输出一定乱。
第一版只保留5个字段。
• 商品名称：例如便携咖啡保温杯。
• 目标人群：例如每天通勤、喜欢喝咖啡的上班族。
• 使用场景：例如早上带咖啡出门，办公室和地铁上都能喝。
• 核心特点：例如轻量杯身、保温约12小时、单手开盖、不容易漏水。
• 发布平台：小红书种草、电商详情页、朋友圈文案、闲鱼描述。
这里的关键是：目标人群和使用场景一定要具体。
如果你只写“年轻人”“日常使用”，AI只能写空话。如果你写“每天通勤、地铁上也想喝咖啡的上班族”，AI就更容易写出真实卖点。
STEP 05
第3步：把输出结果拆成卡片
很多AI工具不好用，是因为输出结果堆成一大段文字。
用户看完不知道怎么复制，也不知道下一步做什么。
所以结果区必须拆成卡片。
第一版建议拆成6个卡片：
• 商品定位：一句话说明这个商品适合谁。
• 用户痛点：用户为什么需要它。
• 核心卖点：3个具体卖点。
• 平台文案：适合当前平台发布的一段文案。
• 图片提示词：可以继续拿去做商品图、小红书封面或详情页图。
• 质量检查：检查卖点是否空泛、是否夸大、是否跑题。
卡片化的目的，是让AI输出变成可以继续工作的素材，而不是一段看完就结束的回答。
STEP 06
第4步：给AI编程工具的第一条完整指令
现在才开始让AI写页面。
你可以把下面这段直接复制给 Codex、Claude Code 或其他AI编程工具。
请创建一个单页网页项目，文件名为 demo_app/index.html。
页面标题是“AI商品卖点提炼助手”。
页面分为左右两栏：左侧是商品输入表单，右侧是生成结果。
表单字段包括：商品名称、目标人群、使用场景、核心特点、发布平台。
核心特点使用多行文本框，发布平台使用下拉框，选项包括小红书种草、电商详情页、朋友圈文案、闲鱼描述。
右侧结果区拆成卡片：商品定位、用户痛点、核心卖点、平台文案、图片提示词、质量检查。
页面必须支持手机端自适应。
不依赖后端，不使用外部CDN，不需要登录和数据库。
第一版先用本地JavaScript规则生成结果。
这条指令的重点是边界清楚。
它告诉AI：做什么文件、页面几栏、有哪些字段、输出哪些卡片、不要做什么复杂功能。
STEP 07
第5步：第一版生成后，不要急着满意
AI生成第一版后，你要像验收项目一样看它。
先检查5件事。
第一，页面是否能打开。第二，左侧字段是否完整。第三，右侧是否是卡片，而不是一大段文字。第四，点击按钮后结果是否更新。第五，手机端是否变成上下排列。
如果发现AI做成了一个普通聊天框，你要立刻追加：
请不要做聊天框，请改成工具型页面。
左侧固定为表单输入区，右侧固定为结果卡片区。
结果区必须包含商品定位、用户痛点、核心卖点、平台文案、图片提示词、质量检查六个卡片。
这一步很重要。你不是让AI自由发挥，而是在训练它按你的产品结构执行。
STEP 08
第6步：让AI补生成逻辑
页面骨架通过后，再让AI写生成逻辑。
追加这段指令：
请写一个 generate() 函数。
函数读取商品名称、目标人群、使用场景、核心特点、发布平台。
把核心特点按分号、句号或换行拆成数组。
根据“商品特点 + 使用场景 + 用户好处”的公式生成3个核心卖点。
同时生成商品定位、用户痛点、平台文案、图片提示词和质量检查。
点击“生成卖点方案”按钮后，把结果渲染到右侧卡片里。
为什么先用本地规则？
因为现在要验证的是工具流程，不是模型能力。只要页面、字段、结果结构跑通，后面接真实AI接口才有意义。
STEP 09
第7步：卖点生成公式要写进逻辑里
不要让AI只写“高品质、很实用、性价比高”。
你要把公式写进生成逻辑。
公式是：商品特点 + 使用场景 + 用户好处。
例如：
• 保温约12小时 + 早上带咖啡出门 + 到下午也不容易变凉。
• 单手开盖 + 地铁和办公室场景 + 一只手也能方便喝一口。
• 不容易漏水 + 放进通勤包 + 不担心弄湿电脑和文件。
如果AI生成的卖点还是很空，你就追加：
请重写卖点生成逻辑。
每个卖点都必须同时包含商品特点、具体使用场景、用户得到的好处。
禁止只输出高品质、实用、方便、性价比高这类空泛词。
STEP 10
第8步：加入复制完整方案按钮
一个能收费的工具感，来自“结果能被拿走”。
所以必须加入复制按钮。
复制内容不能只复制标题，而要复制完整方案。
追加给AI的指令：
请增加“复制完整方案”按钮。
复制内容必须包含商品定位、用户痛点、核心卖点、平台文案、图片提示词和质量检查。
如果浏览器限制自动复制，请提供兜底提示。
这个按钮看起来很小，但它决定了用户能不能把结果继续发给设计工具、做图工具、详情页编辑器或人工修改。
STEP 11
第9步：加入质量检查
质量检查不是装饰，它是AI工具能不能交付的关键。
你要让工具至少检查4类问题。
• 卖点是否空泛。
• 是否存在夸大表达。
• 目标人群是否太模糊。
• 图片提示词是否能继续做图。
追加指令：
请在生成结果里加入质量检查。
如果核心特点少于3个，提示用户补充特点。
如果目标人群过于笼统，提示用户写得更具体。
如果卖点出现高品质、很实用、性价比高这类空泛词，提示需要改成具体场景。
这一步会让工具从“能生成”变成“能检查”。
STEP 12
第10步：移动端必须验收
公众号读者很多是在手机上看内容。
如果你的Demo在手机上挤成一团，它就不像一个完整项目。
追加给AI：
请优化移动端显示。
当屏幕宽度小于860px时，左右两栏改成上下排列。
按钮、输入框和结果卡片宽度都不能超出屏幕。
文字不能重叠，结果卡片之间保留间距。
验收时，把浏览器宽度缩到手机尺寸，看表单、按钮、结果卡片是否还能正常阅读。
STEP 13
第11步：用真实商品测试
现在用一个真实商品测试。
商品名称：便携咖啡保温杯。
目标人群：每天通勤、喜欢喝咖啡的上班族。
使用场景：早上带咖啡出门，办公室和地铁上都能喝。
核心特点：轻量杯身；保温约12小时；单手开盖；不容易漏水。
发布平台：小红书种草。
如果输出结果能得到类似下面的内容，说明方向对了：
商品定位：适合通勤上班族的便携咖啡保温杯。
卖点1：约12小时保温，早上装好的咖啡，到下午也不容易变凉。
卖点2：轻量杯身，放进通勤包里不增加负担。
卖点3：单手开盖，地铁上和电脑旁都能方便喝一口。
这类输出才叫具体。只有具体，才可能继续变成发布文案和商品图。
STEP 14
第12步：整理交付包
一个完整实战项目，最后不能只剩一个网页。
你至少要整理这些文件：
• demo_app/index.html：能打开的Demo页面。
• project_framework.md：项目框架说明。
• prompt_library.md：提示词库。
• output_schema.json：输出结构。
• acceptance_checklist.md：验收清单。
• sample_output_便携咖啡保温杯.md：样例输出。
这些文件合在一起，才像一个真正可交付的项目。
读者付费以后，真正应该得到的不是“看懂了”，而是能照着做、能检查、能复用。
STEP 15
最后：这篇真正训练的是什么
表面上你是在做一个商品卖点助手。
实际上你训练的是一套AI项目方法。
第一，把模糊需求拆成字段。
第二，把AI输出拆成页面结构。
第三，用本地规则先跑通流程。
第四，用验收标准不断让AI修改。
第五，把最终结果整理成交付包。
这套方法可以迁移到课程卖点助手、门店套餐包装助手、小红书标题助手、短视频脚本助手。
这就是我认为这类内容值得继续做的原因：它不是单个提示词，而是一套能重复使用的项目流程。