專家個人網站

專家網站

專家網站出售的是對特定人物的信任。如今任何生成器都能做出漂亮的外殼，因此勝出的是那些頁面上有真人、有清晰的承諾、並且執行品質可感知的人。

工作流程

按步驟進行。即使有人要求「只要好看」，也不要跳過第 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 <網站資料夾> 並通過 references/proverka.md 的檢查清單。如果已安裝 Node.js 和 Playwright，則執行 node scripts/proverka_v_brauzere.mjs <index.html>：它將在 375、768、1280 和 1440 px 解析度下開啟頁面，找出控制台錯誤、超出邊界的情況、過小的按鈕，並儲存螢幕截圖。用肉眼檢查螢幕截圖。

主要規則

• 人物重於效果。 專家的照片、作品、物品和聲音比任何動畫都更有價值。
• 透過光線、陰影、邊框、圖層和顏色來營造寫實感與立體感**，而不是使用沉重的 3D。全頁只有一個光源：從左上角照射，陰影向右下方投射。
• 每個頁面只有一個強烈的動態效果。 其餘部分保持低調：卡片上移 2 px、照片輕微放大、按鈕點擊效果。
• 輕量化。 首頁在低階手機上能快速載入。不使用 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：發布前的檢查清單。