name: lsf-website-design description: 网站设计总入口：给参考网址、换主题做网页时默认 A 风格参考。先在浏览器侦察主站与六类行为，逐区块实测、制作并对照。提供 A/B/C/D/F/G/H 七种基础模式，支持原创、找参考、提示词与独立评审。 metadata: version: "34"

LSF-网站设计 · 基础版

根据用户目标、交付物、项目与参考自动判断模式，开头简短说明原因，不先发模式菜单。普通网站制作默认A，尽量贴近主参考；明确原创、只学方法、分析或评审时按对应范围执行。用户最新要求与项目已有设计系统优先。

模式与当前阶段

先按模式与阶段阅读导航读取本模式的start行，进入下一阶段再补读。自动判断细则和旧编号见模式与入口。没有参考的普通建站任务先实际研究并选适用主参考，仍进入A；只有用户明确要先挑参考才停在D。

必须保持的边界

• 沿用原项目与已有改动，不创建worktree、不覆盖他人文件、不自动提交或发布。分析、提示词、评审、技能更新只执行本次范围，不启动建站begin或无关模型任务。制作任务先读制作约定与阶段流程。
• A 有指定网址时先完成主参考侦察，其他站只辅助内容研究。没有给定主参考的建站及其他整页任务沿用五站调研。A默认由当前对话的主Agent直接制作一套，用户明确想比较时才先做三个预览；三个构建者使用同一份提示词、相同主题和同一主参考，不预设不同设计任务。C原创探索保留三个产品方向，用户明确只做一套时服从本次范围。分流、独立上下文与完成度见预览与确认。
• 先定核心场景的渲染、资源、驱动与合成，A读取公开前端代码和素材并沿用真实机制。GSAP负责适合的编排，不能用图片位移或通用淡入冒充模型、WebGL或原时间线。趣味交互先看真实网站与开源实现，按选型规则提供鼠标反馈及触屏/键盘替代。
• 新网页图片实际调用Codex内置生图（用户指定GPT Image 2.5；未暴露型号则如实记录）。透明底设transparent_background: true并验alpha。每条生成、编辑、变体提示词必须以“画面干净通透，材质完整自然，纹理平滑统一，主体清晰，避免过度锐化、色斑、噪点、碎纹、崩坏和畸变。”结束。详见图片规则，不另加图片一致性流程。
• 写UI前查已有组件、令牌与预设；A 的复用须对应主参考实有的部件和效果；五项源码偏好只用于有对应部位的复用。其他制作沿用原要求，按组件来源执行。箭头等UI图标只能用开源图标库，禁止手写SVG；SVG立体示意允许。禁用按钮hover上浮和hover带动图标运动。
• 文案默认Google AI Studio生成，按既有lsf-ai-agent入口及独立候选审核落地；成品另做page模式冗余审核。删文字与删模块分别判断，标题/导航/按钮/标签行末不加标点。详情在正式制作，失败不自动切API或由主Agent冒写。
• 成品保留独立视觉评审：优先可用Gemini/Claude，均不可用才用当前模型的新子Agent；视觉Agent用Ego Lite实测样式与几何，输出375/768/1440截图，检查边距、异常空白、首屏标题和实际交互。主Agent保留开发自查。按同一固定提示词与五维规则评审，最多两次真实调用、一批修改，首审达标即止，失败/超时共用预算；工程指标不占设计分。细则按评审入口读取，未查看不称通过。

A 风格参考的开工与交付

把主参考当作实施底稿。按取证与对账格式走完整入口、章节和转场，先定位原资产，再锁定不可替换的结构、控制和时序。逐状态量主次按钮和配色，数清可见表面边界，以此约束项目组件与主题换肤。没有依据的装饰框、文字槽位和标记不进入页面。即使去掉品牌名，成品也应能通过构图、控件和标志性操作认出参考来源。

1. 开工先运行侦察。 已知主参考时，在原项目执行 node <技能>/scripts/start-reference.mjs <参考URL> --root <原项目> --site <已有网站目录>。读取实际制作提示词，按侦察与回放走完整站内路径和六类行为。完成范围内原站规格、运行证据及关键素材核对，reference-check --stage source 通过方可制作。失败时继续取证或报告具体缺口，暂停依赖这些证据的页面代码、生图和整站文案。
2. 先做一个能操作的样段。 在原项目实现最能认出原站的一段。用同一输入走一遍两侧，比较中途停下、继续、反向时，主角、文字与背景各发生什么。静态站选能显出排版与控件层级的一屏。核对成功并运行 --stage prototype 后，才按各章的真实差异展开全站素材、文案和实现。样段由开发者自查，直接推进，无须用户选稿。
3. 逐块核对，再核对整站。 按区块的原始规格实施，用同一输入对照两侧的静态层与动态过程，修正实际差异，再标已验证。成品运行 --stage paired 后交独立视觉与文案评审。对用户分别说明原站覆盖、样段、整站对照及独立评审的真实结果。子 Agent 使用极高（xhigh）。

首次安装与资料查找

用户明确首次安装本技能时，读取首次安装与依赖，告知并检查三个免费组件：lsf-ai-agent、ego-browser技能、Ego Lite，给官方链接并按已有授权处理缺项。只在首次安装交接触发，日常使用或更新不重复提醒。

总索引覆盖全部资料、角色、模板、数据和脚本；原专题索引保留来源与章节线索。遇到动效、图片、排版或其他具体问题再按导航补读。文件拆分不免除适用规则，也不意味着要通读全部资料。

LSF-网站设计 · 基础版

给 AI 编程助手使用的网站设计 skill：从参考站研究、版式与动效制作，到实际浏览器核验和独立评审。

置顶案例：Codex 模型怎么选

制作模型：Claude Opus 5.5。 这是雷师傅目前最满意的作品之一，模型归属和评价由作者确认。

在线体验 · 观看 / 下载约 39 秒录屏 · 15 张独立截图 · 九个场景长图

六个章节分别展示日常开发、复杂项目、协作文案、预算路线、轻量任务与作品选择。页面包含场景转场、章节导航、任务与偏好选择、模型搜索。下面的动态预览来自实际操作录屏，点击可查看完整 MP4。

完整录屏包含六章切换、正文、任务推荐和 DeepSeek 搜索；无配音。GIF 为其中约 10 秒的加速节选，截图长图为精选场景拼接，均未重绘网页内容。更多截图、交互说明及来源

首版制作的模型建议

以下是雷师傅的使用建议，具体型号及可用入口以所用平台为准。

补充 Kimi K3.1 案例时，欢迎通过 Issue 或 PR 提供实际入口、模型名称、skill 版本、任务与参考网址、成品链接或截图、可复现的使用记录。耗时与用量如有记录也可附上；请勿提交密钥和账号凭据。未提交有效结果前，保留“待测”标记。

支持风格参考、原创探索、找参考、反推提示词和成品评审。规则、模板和脚本按任务读取。

DeepSeek：使用与未使用 skill

两边模型均为 DeepSeek V4.1 Flash，主题均为长沙。使用状态由作者确认，左侧使用 lsf-website-design，右侧未使用 skill。

截图来自作者提供的两个本地成品，按山水、文化、饮食三个主题对应排列。未取得相同提示词、参数及完整生成记录，因此这是一组成品展示，不能据此作严格受控评测的结论。

更多作品

全部为实际页面截图，长图由多个场景拼接。截图时间：2026-11-04；桌面截图视口：1440 × 1000，置顶案例另含 375 × 812 手机截图和 1440 × 810 录屏。模型信息以作者提供的记录为准，不根据托管平台推断。详细来源见作品展示和截图记录。

安装

可以让支持本地 skill 的 AI 助手执行：

从 https://github.com/leishifu666/lsf-website-design 安装 lsf-website-design。
保留目录结构；如果已有安装或本地定制，先检查，不要直接覆盖。
按 references/首次安装与依赖.md 检查配套组件。

也可以克隆到宿主的技能目录，文件夹命名为 lsf-website-design。例如在采用 ~/.agents/skills 的环境中：

git clone https://github.com/leishifu666/lsf-website-design.git ~/.agents/skills/lsf-website-design

Windows 可使用 %USERPROFILE%\.agents\skills\lsf-website-design；实际发现路径以宿主配置为准。仓库根目录包含 SKILL.md，不要只复制这一个文件。安装后按宿主要求刷新技能列表或开启新会话。

怎么用

在支持 $skill-name 的宿主中指定 $lsf-website-design；其他宿主可直接要求读取本技能的 SKILL.md。

使用 $lsf-website-design，参考 https://example.com 的设计，为长沙制作一个城市展示网站。
主题、图片、文案和交互按长沙重新组织，在当前项目实现并验证。

使用 $lsf-website-design，评审这个已有页面的视觉效果和交互，本次只评审，不改代码。

使用 $lsf-website-design，分析这个参考网站并反推完整建站提示词，本次只分析，不写网站代码。

工作方式

网站设计主技能，规则入口为SKILL.md。AI自动判断A/B/C/D/F/G/H 七种基础模式，普通建站默认贴近参考风格；A参考默认由当前对话主Agent直接制作一套，用户想比较时才先做三个预览；三份使用同一提示词、主题和主参考。C原创探索保留三个产品方向，按用户本次范围执行。统一制作模板见风格参考提示词。网页新素材用Codex内置生图，趣味动效先找真实网站和开源源码，视觉评审优先Gemini/Claude并通过Ego Lite现场取证。

A 模式从实际制作提示词与原站侦察命令进入。先实测六类行为并锁定原站，再做一个可操作样段。样段对照通过后才展开整站，三阶段的命令与证据见取证格式。

首次安装的三个必备免费组件

处理“安装本技能”的Agent应自动读取首次安装与依赖，检查并告知以下三项；缺项时给链接并按用户授权协助安装，已有定制不能覆盖。该提醒仅在首次安装交接触发，不重复打扰日常使用。

• lsf-ai-agent skill：多模型调度
• ego-browser skill：浏览器操作规则
• Ego Lite浏览器：真实浏览器，安装后通常自动加入ego-browser skill

三者本身免费；上游模型服务的账号、额度或订阅按各自条件。完整安装规则、验证与GUI边界见首次安装说明。

模式

lsf-web-*调用名保留兼容，薄入口可按脚本说明生成。仅分析、提示词、评审不自动串联网站制作。子代理、外部模型、图片生成和浏览器能力以宿主实际提供为准；本技能不自带模型服务或 API 密钥。

按需读取与维护

从模式与阶段导航选当前资料，总索引覆盖全部资源。大文档的专题源文件按场景拆分，旧链接继续指向对应章节。node scripts/read-plan.mjs --mode A --stage preview只查询，不执行制作。

维护references/资源路由.json及专题源文件后运行node scripts/resource-index.mjs；--check检查索引是否同步。薄入口由install-mode-entries.mjs生成，不手改生成文件。

脚本依赖和运行方式见scripts/README.md。发布本版时，70 项 Node 回归测试与资源索引校验通过；测试覆盖脚本契约，不代表所有外部网站、模型渠道或宿主均已验证。

开源许可

本仓库的原创技能文档和脚本采用 MIT License，允许使用、修改和分发。第三方组件、字体、网站素材和商标遵循各自许可；作品截图用于展示输出效果，不代表其素材另行授予 MIT 许可。