从零拥有个人网站②:从想法到成品,用AI做出自己的风格
作者分享了从零构建个人网站的完整教程:先理解网站由信息架构与视觉表达两部分组成,思考希望访客如何认识自己;提出“视觉母题”概念,让设计从内容和个人特点自然延伸;推荐通过Awwwards学习优秀网站的五步分析法;讲解内容形式选择、排版层级、留白对比、视觉节奏与动画克制等设计要点;最后介绍如何用AI工具(Skill)迭代建站并部署上线。作者认为制作个人网站也是一次重新认识自己的过程,网站可随个人成长不断迭代。
作者分享了从零构建个人网站的完整教程:先理解网站由信息架构与视觉表达两部分组成,思考希望访客如何认识自己;提出“视觉母题”概念,让设计从内容和个人特点自然延伸;推荐通过Awwwards学习优秀网站的五步分析法;讲解内容形式选择、排版层级、留白对比、视觉节奏与动画克制等设计要点;最后介绍如何用AI工具(Skill)迭代建站并部署上线。作者认为制作个人网站也是一次重新认识自己的过程,网站可随个人成长不断迭代。
一篇结构清晰、信息密集的个人网站设计与AI建站教程,提供了设计思考框架、Awwwards学习法和可落地的Skill流程,时效性强、可读性好,但部分实操环节依赖外部链接且无代码细节。
本文介绍用AI搭建个人网站的最佳实践:先整理个人内容到飞书文档,再参考优质网站让AI抓取代码与风格。作者系统整理了8大类60多个网页设计资源,涵盖组件库(shadcn/ui、Aceternity UI、Magic UI等)、动效与3D工具(Motion、GSAP、Three.js、Spline等)、整站灵感网站(Awwwards、Land-book等)、产品界面参考(Mobbin、Page Flows等)以及配色素材、AI建站和Claude Skills等类别。每个资源均附特色说明与具体用法,可让AI直接复用代码和Prompt,适合从零搭建或迭代优化个人网站时收藏使用。
作者探讨了长文封面是否应该添加标题、关键词等文字的问题,核心观点是「先不加文字」。通过分析 Yino、反向的猫、南风窗、半佛仙人、新世相等优秀账号的封面设计,说明无文字封面能提供标题之外的感受空间、形成视觉识别锚点。文章结合 Roland Barthes 的图文互文理论、Lippmann 的拟态环境以及认知心理学的冗余效应,论证重复文字会增加读者的注意力负担。同时指出例外情况:抖音、小红书等平台封面文字承担定位内容的功能。最后建议读者探寻属于自己的封面风格,并推荐了 Punk 的封面 Skill。
作者介绍如何利用 WorkBuddy 平台搭配两个自建 skill(文章排版和文章视觉),实现公众号内容生产自动化。文章详细讲解了配置公众号开发者信息(AppID、AppSecret、IP白名单)的准备工作,然后通过 WorkBuddy 调用接口自动完成排版、配图、封面生成和推送草稿箱的全流程。作者还演示了让 AI 自动撰写文章并用开源去AI味 skill 优化的方法,同时强调自动发布存在封号风险,发布前仍需人工审核,将节省的时间留给选题和内容创作本身。
本文是一篇实操教程,作者详细讲解了如何用 Grok Bot 搭建一人公司的 Bot 团队。通过个人网站从想法到上线的完整案例,阐述了 Bot 的配置方法:先为一个 Bot 设定长期系统简介和职责边界,安排第一个任务进行设计探索;当出现值得长期单独负责的工作岗位时再新增 Bot(如专职动效的 Motion God、负责工程上线的 Devbot、负责 Figma 生产的 Figma Bro);当多个 Bot 需协作时建立群聊,做好交接资料整理和分工规范。文章总结了 Bot 简介写长期职责、任务放聊天里、重复工作流沉淀为 skill 等核心心法,帮助读者按自己的工作流搭建 Bot 团队。
作者 DerrickLi 非计算机专业出身,借助 AI 工具 Codex 搭建了自己的个人网站。文章记录了完整建站过程:先规划网站内容框架(个人介绍、作品、文章、Skills、联系入口),再反复打磨 UI,从最初追求科技感动效失败,到通过 MotionSites 素材参考最终实现电影感页面,强调有具体参考能让沟通更高效。部署阶段经历预览发布、域名接入、HTTPS 配置等调试。作者总结了定内容、选画面、做上线三步流程,并强调网站上线后仍需持续积累作品和文章内容。
本文介绍了如何用 Codex 在 30 分钟内零代码搭建个人网站。作者 Miles Ma 详细讲解了完整流程:在 Spaceship 购买域名并注册 Cloudflare;在 Codex 中新建项目并整理个人资料、文章和图片;让 Codex 通过 Computer Use 分析参考网站(如 Immersive Garden)的结构、风格和交互;确认规划后生成第一版,并在浏览器中逐处迭代修改;最后通过 wrangler 授权部署到 Cloudflare 并绑定域名上线。文章还介绍了如何利用子域名(如 cv、course、tools)在同一域名下扩展在线简历、课程和工具页面,实现一人低成本持续维护个人站点的最佳实践。
作者将自己在 AI 创业中反复跑通的工作流整理成开源免费的 CS Skills 库,包含 11 个 active skills,覆盖产品设计、前端实现、PRD 执行、深度调研、竞品分析、内容创作、电商短视频分镜、代码清理与部署收尾等全流程。核心逻辑是一句话说目标,cs-run 自动定位工作流并推进到可验证结果,解决 AI 工具多但不知道下一步让 AI 做什么的痛点。适合一边做产品、一边做内容的 AI 创业者使用。
作者介绍了他开发的免费 Claude Code Skill——Scrollcraft,它将网页滚动体验本身变成设计的一部分。该 Skill 不提供固定模板,而是通过访谈式提问确定访客旅程、情感方向、信任证明和素材,再结合 Kie.ai 生成缺失的图片和视频,并通过验证 harness 截图检查关键帧。作者用它约 30 分钟重构了 AI Automation Society 网站,强调了'每个主张都要有证明'的设计理念,并展示了在多个不同类型网站上的多样化输出效果。
作者分享了第二批提升审美的设计灵感网站,包括全球顶级网页设计平台Awwwards、快速浏览最新设计的Recent design、Chrome插件Muzli、类似Pinterest的Designspiration、专注动效细节的Design spells,以及收录实验性前卫设计的Load more。这些网站涵盖UI、平面、配色、排版等方面,适合设计师日常刷找灵感、制作moodboard或研究高级感设计的细节。