专家个人网站

专家网站

专家网站贩卖的是对特定个人的信任。如今，任何生成器都能制作漂亮的外壳，因此，胜出的是那些页面上有真实的人、清晰的承诺和可感知的执行质量的人。

工作流程

按步骤进行。不要跳过第1步，即使对方要求“只要好看”。

1. 人物肖像。 从所有可用来源（通信记录、网站、频道、文档）收集信息：专家是谁，为谁工作，提供什么成果，2-3个真实故事，价值观，目标，自己的照片和作品，他自己使用的词语。不要编造任何东西：没有事实，网站上就不存在。提炼出一个核心观点和一句承诺语：给谁，得到什么，以何种方式。
2. 简报。 在 references/nishi.md 中找到细分领域（28个细分领域：起始调色板、字体、照片内容、所需板块、客户疑虑、应避免事项）。用5行记录：页面类型（面向人的服务、诊所或工作室、在线产品、作者），任务（预约、购买、订阅、跳转到机器人），风格（统一，坚持到底），一个令人难忘的元素（画作、物品、有性格的照片、生动的界面），应避免的事项。挑选2-3种手法，并从 references/obrazcy.md 中打开它们的实际示例。
3. 构图。 基于黄金比例的网格，密度为“杂志”风格，而非“沙漠”风格。阅读 references/kompozitsiya.md。
4. 字体和颜色。 从细分领域的调色板和一对字体开始，然后根据人物进行调整，参考 references/shrifty.md 和 references/tsvet.md。仅使用支持西里尔字母的字体，避免酸性或霓虹色，默认不使用全黑背景。所有细分领域的实景画廊：assets/nishi.html。
5. 照片、体积、光线。 阅读 references/foto-i-kartinki.md 和 references/obem-svet-ten.md。所有体积手法的现场演示：assets/obem-demo.html。
6. 动效和视频。 仅使用轻量手法：references/effekty.md，references/video.md。
7. 文本。 按照 references/teksty.md 撰写。俄语文本按 humanizer-ru 规则处理，英语文本按 humanizer 处理。不使用长破折号。
8. 检查。 运行 python -I scripts/proverka_saita.py <site folder> 并通过检查清单 references/proverka.md。如果安装了 Node.js 和 Playwright，运行 node scripts/proverka_v_brauzere.mjs <index.html>：它将在 375、768、1280 和 1440 px 宽度下打开页面，查找控制台错误、内容溢出、按钮过小，并保存截图。用肉眼查看截图。

主要规则

• 人比效果更重要。 专家的照片、作品、物品和声音比任何动画都更有价值。
• 真实感和体积感 通过光、影、边框、图层和颜色来创造，而非沉重的3D效果。整个页面使用一个光源：左上角，阴影向右下角投射。
• 每个页面只有一个强烈的动效。 其他一切保持低调：卡片上移2像素，照片轻微放大，按钮点击效果。
• 轻量性。 首屏在弱手机上快速加载。不包含 WebGL 场景、不“劫持”鼠标滚轮的滚动效果、不自动播放带声音的视频。
• 基于黄金比例的非对称设计，而不是全部居中：列比例为 38.2 / 61.8，间距和尺寸遵循 1.618 的比例。
• 密度。 需要留白，但板块不应显得空荡。屏幕上始终有照片、物品或生动细节。
• 明显的彩色板块。 不要用单一色调粉刷整个网站（单一色调给人平面感）。各部分交替使用背景：浅色、暖沙色、一条深色强调带、鼠尾草色。比起“空白杂志”，更倾向于更多的板块、文本、图片和列表。
• 每个事实都要回答“那又怎样？” 专家的经验应以客户利益的形式呈现。不要将内部细节（部门数量、内部测试结果）放到网站上。
• 无 AI 模板痕迹： Inter、Roboto 和 Arial 作为网站主字体；紫粉渐变；霓虹和酸性色；每个标题上方都有副标题；章节编号 01/02/03；统一的“图标、标题、文本”卡片网格；用表情符号代替图标；库存握手图和 AI 生成的“统一光照”图片；虚构的评论、标志和数字。
• 诚实。 AI 创建的插图需注明。他人照片仅使用免费许可并注明作者。
• 隐私。 地址精确到区域或街道，不包含门牌号。不要将个人医疗和家庭细节放到网站上。

专家页面结构

默认顺序，可根据简报调整：

1. 首屏：承诺语，专家的真实照片或其主要物品，一个行动按钮，旁边是证据（实际案例中的数字、“媒体报道”、评价）。
2. 我为谁提供帮助以及帮助什么（2-4个客户视角的场景）。
3. 我的工作方式：方法或产品的现场展示（照片、界面、过程）。
4. 证据：带有具体结果的评价、作品、案例。
5. 关于我：简短，仅解释专业性和价值观的内容。
6. 订阅赠品或试用步骤（指南、测试、第一课、机器人）。
7. 最终按钮和联系方式。

参考资料

• references/kompozitsiya.md：网格、黄金比例、密度、章节节奏。
• references/shrifty.md：支持西里尔字母的字体对、尺寸、立体文本。
• references/tsvet.md：调色板、着色中性色、作为深度的颜色。
• references/foto-i-kartinki.md：拍摄、处理、裁剪、边框、格式、许可。
• references/obem-svet-ten.md：九种体积手法及现成 CSS。
• references/effekty.md：哪些效果可以采用，哪些不可以，以及权重。
• references/video.md：网站视频和短视频剪辑。
• references/teksty.md：专家文本、人性化工具、禁忌。
• references/nishi.md：28个细分领域数据库：调色板、字体、照片、板块、客户疑虑、应避免事项。
• references/obrazcy.md：每种手法的实际示例，“手法 → 查看位置”。
• references/proverka.md：展示前的检查清单。