# 社区园丁的 Side Project Author: Ashton Z. Shu（舒郑屾，网上也叫山山、Mts Shu、Mts、Mountains、Yama、MtsYama），Superlinear Academy 社区园丁 Date: 2026-10-18 URL: https://blog.ashtonshu.page/zh/ashton-is-build *首发于 [Superlinear Academy](https://www.superlinear.academy/c/share-your-projects/ashton-is)。* 我的个人网站刚刚上线，来分享一下是怎么做出来的。 --- 我正式开始制作是在 10 月 15 号晚上，两天做好了整个网站，四个页面，加上十几个作品页，花了我这周一半的 token（200 美元那档的 Claude 订阅）。为了方便大家对比：我用的是 Claude Code 里的 Opus 5.5，effort 是 max。网站在这里：[Ashton.is](https://ashton.is/) 发出来之前，我先把网站发给了身边好多亲戚朋友，经历过一版 debug。他们大多不做个人网站，也不做自媒体，第一时间问的都是同一个问题：你做这个网站是为了干什么？ 统一回复一下：看了大家那么多作品，一直摩拳擦掌；加上最近我要开始找实习，需要作品集了，所以赶紧趁本周 token 充足，做了个人网站。 标题里的「社区园丁」，是我在 Superlinear Academy 的角色：头衔是社区运营官，做的事更像园丁。 这次我把它写进了网站首页： > **Ashton is** a community gardener. ![白底开场中名字封面展开后收起，Ashton 接入首页的大字「Ashton is」。这一段把姓名动画与首页标题连成同一个进场过程。](https://blog.ashtonshu.page/media/ashton-is-build/01-opening_16x9.gif) 图 1首页开场（文中的动图都按 1.5 倍速放） --- ## 规避泛滥的 AI 味 AI 出来之后，各种设计也好、网页也好、视频也好，确实多了很多。我承认，现在大家个人网站的完成度确实都非常高，也有足够的审美。就比如说 Opus 这次更新后，全网一水的「苹果广告视频」，不能否认，比过去从业五年的大部分视频制作者水平高了。 但是当大家无脑说「很有设计感」的时候，我多少是有些纠结的。因为我不相信大家真的看不出来 AI 味很重，只是有一些确实能明显看得出制作者在试图优化了。 这里有一个比较吊诡（tricky）的点，我先通过一段跟社区有关的前情来聊聊。不感兴趣的朋友，可以直接跳到下一章「为什么做个人网站，做成什么样」。 ### 社区的第二代网页和 logo Superlinear 的网页制作和新 logo 的选择，现在当然都是课代表（创始人）自己在全权负责。网页这里先不说，我主要跟大家讲一讲，让我来做 logo redesign 时候的情况。 首先要感谢 @Karry Huang ，社区的第一版 logo 是 Karry 做的，老朋友都见过，新来社区的朋友们可能不了解，可以在帖子 #Logo设计过程（上）-- 五位设计师的稿件 里看到。懒得点去看全文也不要紧，我下文放了图。 我是在这个设计的基础上做的优化。我当时做了一整套 guideline，这个交付本身是没问题的。 问题在于，我当时学生思维，想着要把一整套写得够漂亮，且纯粹是站在「以后这个东西需要交给打印店或其他设计师交付」对接的视角，完全没想到小团队一般没有这些问题，也等于没有第一考虑课代表的需求。所以当时有了不太好的交付过程。我那时候做的，不说质量，至少效率上是很烂的。 不过，站在平面设计师、站在做这件事的人的角度，我还是想给自己找补两句（唐突证明一下自己的价值）。 我当时设计的版本有两种变体，小图标 favicon 做了进一步简化，已经基本是现在咱们的 logo 外形了。具体说明下，我原来的设计里，主 logo 是八个三角，小图标 favicon 是六个；默认颜色一开始是浅黄和海蓝，沿用了之前的设计。 其实那时候，我心里想做的就是现在这个最简单的六个的版本，只是担心一次性过于简化，效果体现不出来。今年 8 月，咱社区正式换用了现在的绿色六条。 ![Superlinear Academy 标志三版纵向排列：上方是密集黑色横线与细字，中间是黑底白色折叠条纹与字标，下方改成绿色条纹和文字。三版对照展示社区标志从早期到定稿的变化。](https://blog.ashtonshu.page/media/ashton-is-build/15-logo-versions.png) 图 2上图：原来的，Karry 做的第一版；中图：我那一版，左边主 logo 八个三角，右边小图标六个；下图：现在社区在用的绿色六条 这个版本设计的具体情况，我在这里就不赘述了。我也厚着脸皮把它放进了我的个人主页，作为[一个 project 展示](https://ashton.is/work/superlinear-academy)。当然，这个也是跟课代表商量好的，感谢他的许可。 --- ## 为什么做个人网站，做成什么样 ### Designer-Based 的作品集网站 为什么要强调 designer-based？现在其实有各种不同样式的个人网站了，但大部分以程序员的程序 demo、博客、影像记录为主；像宜家、苹果官网那种一眼设计师风格的网站，在过去，只有那种比较出名的设计事务所或财大气粗的商家在做这种装点门面的事情。 ![上下两块对比「程序员朋友常做的站」与「我想要的作品集站」：前者以程序 demo、博客、影像记录为主，首页先是文章和项目列表；后者以作品为主，首页先放作品大图，每个项目单独一页，展示过程和细节。用来解释为什么作者需要作品集而非通常的个人站。](https://blog.ashtonshu.page/media/ashton-is-build/16-site-types-stacked.png) 图 3程序员朋友常做的站，和我想要的作品集站。 过去做设计的，大部分人也不懂程序。 我这里先武断地说结论：**想做好看的作品集网站、个人网站、工作室网站的设计师们，没有前端编码的能力，实力或时间不允许做到；程序员呢，通常是觉得没必要额外开销。** 我属于前者。但现在，我可以自己一个人，花两天做出一个自己能给过的版本了。 ![同一个首页首屏上下对比浅色与深色主题，两版都以「Ashton is a graphic designer.」为主，右上角有 Work、About、Contact 和主题切换，右下角有轮播圆点。版式一致，只切换背景与文字明暗。](https://blog.ashtonshu.page/media/ashton-is-build/02-first-screen_light-dark.png) 图 4上图：首页第一屏亮色；下图：首页第一屏暗色 ![首页精选作品以两列展示四件作品：Superlinear Academy 标志、日历设计、一组三张文字版式和 Farms360 网站，下方是「All work」入口。用较大的作品画面引导读者继续浏览完整作品集。](https://blog.ashtonshu.page/media/ashton-is-build/03b-home-selected-work.png) 图 5首页往下是四件精选作品 这里不得不自嘲一句：毕竟不是科班出身。 自今天开始，我的作品集里最拿得出手的作品，我至今的设计巅峰作品，可能就是这个网站本身了😂。网站展示的那些作品，应该没有完成度比它高的了。 就，有点买椟还珠的那意思，也不知道有没有用错成语。 ### 网站面向谁，对应用什么语言 网站主站是纯英文的，因为目标观众都是北美本地的设计师、招聘方或者客户。 如果在座的大家读英文不太方便，这里也有一个简体中文版：[world.ashton.is/zh-hans](https://world.ashton.is/zh-hans/)。 目前 [world.ashton.is](https://world.ashton.is/) 这个域名只公开了简中和英文，其他语言制作的优先级比较低，未来可能都放在这里。 ### 骨架和素材库 也给大家分享一下我这次设计参考了谁。 先说简单结论：目前的核心骨架，模仿的是一家日本设计事务所 [Daikoku Design Institute](https://daikoku.ndc.co.jp/)（英文）。 我自己有个习惯，一直在 Pinterest 和设计网站攒各种素材库，里面有很多我自己中意的 template 或 reference。今年 7 月，我还专门进行过一轮筛选：先初筛了 50 个网站，个人作品集、工作室、美术馆、字体网站都有，我再一个个看过、打分排序，最后拆解了三个。Daikoku 就是那时候定的主样板。 在 Daikoku 这个骨架之上，我还融合了素材库里别的一些地方，包括后面的动效，也出自这个库。 ![上方模板版把「Ashton is a graphic designer.」以小字居中，下方现在的首页把同一句话放大并移至左侧。两版留白相近，标题尺度和位置改变了首屏的视觉重心。](https://blog.ashtonshu.page/media/ashton-is-build/05-template-vs-now.png) 图 6上图：完全照 Daikoku 的骨架改完的首页；下图：现在的首页 ## Hierarchy 和 Motion ### Hierarchy 层级 因为是设计师向的站，整个层级怎么规划、动效怎么走，我脑子里是有一个预期效果的，所以我跟 AI 说了哪些效果一定要做到。 首页的核心就是那半句话「Ashton is...」，字体选用很粗的 Poppins 800，后面的身份选用很细的 Inter 300，先把字重粗细拉开。 后续动画从身份下手。分了两级，用不同的动效区分开：主身份是**下落淡入**（drop-in，从上面一点点落下来，同时淡入）；同一个身份下面的二级身份是**横向擦除**（wipe，用遮罩从左往右揭开，再从右往左收起）。这样一看就知道，哪几个是主业，哪些是从主业长出来的。 Ashton is a graphic designer. ↑ 主身份：上下淡入淡出 an illustrator. ↑ 二级身份：横向擦除 a photographer. a UI/UX designer. a concept artist. a digital painter. a character designer. a community gardener. an AI architect. a human storyteller in the loop. an AI evangelist. Ashton was an electrical engineer. ↑ is 换成 was，变灰 ![首页保留大字「Ashton is」，下方身份文字依次切换为平面设计师、UI/UX 设计师、角色设计师和 AI 推广者，右下角圆点标示轮播位置。固定的名字与轮换的身份文字形成两层动效。](https://blog.ashtonshu.page/media/ashton-is-build/06-hero-two-level_16x9.gif) 图 7首页大字下面的身份文字一句句切换。 然后还加了个彩蛋：身份的最后一行，我放了一个过去的身份，an electrical engineer。 *防喷说明一下地域： 我真不是碰瓷住在多伦多，实在是地方太村，除了本地人，我说了城市大家还是不知道我在哪里🫠 好了，继续。作品集这边也做了归类，Work 分成了 Projects、Collections、Personal 三组。 ![Work 页按 Projects、Collections 等分组展示作品卡片，鼠标悬停时卡片上出现项目名，例如 Superlinear Academy。动画展示先看作品、再用悬停补充名称的浏览方式。](https://blog.ashtonshu.page/media/ashton-is-build/07-work-card-hover.gif) 图 8Work 页：鼠标移上去 hover 出项目名 ### Hero Section 的动效 这次第一个大版本里，花心思最多的是 Hero Section 的动效，简单说，就是首页一进来、头图展示的那一段。 名字展开、收起的那段，路子跟我素材库里的一支片头很像，现在先这么用着，以后可能还会改。 ![四角框中的「Ashton」展开成三行「Ashton Zhengshen Shu」，再收回，下面写着「Also known as Mts Shu.」。展开与收起沿用同一名字和四角框，让进场动效与个人标识呼应。](https://blog.ashtonshu.page/media/ashton-is-build/08-name-motion.gif) 图 9名字动效：Ashton 展开成 Ashton Zhengshen Shu，再收回去 为什么那么想用四角框？因为我用手机录屏、截图的时候，在通知栏看到的图标就会出现这样四个角的框 。我也把这个元素在全站延续了下去，前后是有继承、有联动的（motif，设计里一般叫母题）。 ![About 页顶部的 Work、About、Contact 在鼠标移入时出现向外张开的四角框，页面中央的 Ashton 名字也使用四角框。导航的悬停反馈延续了姓名动画中的同一母题。](https://blog.ashtonshu.page/media/ashton-is-build/09-header-hover.gif) 图 10页头：鼠标移到 Work、About、Contact，四个角张开 进场之后，这些元素怎么更有机地串起来，引导视线，让整个过程更像流畅的镜头语言，我又迭代了几个版本。开场到现在一共换过三大版：Alpha 版本是 12 个身份依次出现。 版本 V1.0 的迭代，我当时这么提的（当时是语音输入，这里稍微顺了一下）： > 整个进场动效完成了之后啊，Ashton 字样整体就直接……平滑移动到左上角去，左上角应该是完全同样字体的那个模块。这样整个动画才有来头、有出处……视觉效果才是连贯的。而且不会在一个地方反复出现同一个单词。 也就是说，封面播完，「Ashton」停下来的样子，就是网站的字标。 到了 V1.1 又往前走了一步：封面的「Ashton」先落进首页那句「Ashton is」；往下滚，或者轮播换到作品图的时候，它再缩进左上角，变成字标。 ![向下滚动时，首页大字「Ashton」缩进左上角成为页头字标，下面露出介绍与精选作品；向上滚回后又恢复为大字。动画展示封面文字与固定字标之间连续的交接。](https://blog.ashtonshu.page/media/ashton-is-build/10-dock-on-scroll.gif) 图 11网页往下滚，大字「Ashton」缩进左上角的字标；滚回来，又变回大字 --- ## 版本迭代说明 我按电脑上的记录留个过程账单： - **15 号晚上**：6 点多开工，搭骨架、做首页。 - **16 号**：补作品页、做名字动效，下午 4 点半 V1.0 定稿；傍晚花两个小时，把整站的截图、录屏全存了一遍。 - **17 号**：改出 V1.1，下午 4 点多上线。中午开始写这篇文章，一直改到发布前。 - **合计**：到 V1.1，按提交记录估，实际干活 18 个多小时，一共 134 个提交； 写这篇文章前后十二个多小时，其中后半程改稿时间多，晚上录语音口述了四十多分钟，最后自己逐句校对、改稿两个多小时，配图做了六轮。 - **计划**：下一版正在做，比如 Work 按钮加了一个下拉菜单。 ### 管理后台 由于制作过程中，页面、草稿和还没合并的改动越来越多，所以 V1.0 之后，我又让 AI 搭了一个管理后台，每一版改了什么，都记在里面。 ![管理后台按卡片列出网站版本：顶部是 Unreleased，下面是标为 Live 的 v1.1（2026-10-17）和 v1.0（2026-10-16），各卡片记录改动及合并分支。版本记录让已上线与下一版待上线的内容分开可查。](https://blog.ashtonshu.page/media/ashton-is-build/12b-releases_site.png) 图 12管理后台里网站的版本记录：v1.0、v1.1，最上面是还没上线的下一版 以后，我还希望把自己的 newsletter、商城、文章这些东西，也都整理、集成到网站和这个后台上来，这也是我后续优化这个后台的原因。 --- ## 半年前的构思与准备 不少作家都聊过说，每当自己被人问起自己刚完成的新作品从何时开始创作时，很难给出严格回答，因为有很多相关经验和零碎想法是厚积薄发的。 比如我这次设计网站，按正式开始动手，是两天，但从构思和创意算，肯定远远不止。前面说的十几、二十几个小时，自然也不止这么多。不要说初中开始学 Flash 和 Fireworks 时就有的网站点子和效果念头，只说前面提到的为本次做的素材库尝试，也在半年前就开始了。 那时候，我为了帮课代表和鸭哥（Superlinear Academy 联合创始人）卖课、给同学答疑，自己也把课上了（虽然后来一直没做作业，我忏悔）。但平时跟他们交流，也直接受了不少指点；也是在课代表的催促下，我早早 [用好AI的第一步：停止使用聊天窗口](https://www.superlinear.academy/c/ai-resources/stop-using-chatgpt)。 当时我就让 AI 辅助我做过个人网站，跟调研、遴选素材库是同时进行的。可是，一是当时的 AI 能力不行，二是我自己动手速度慢，做出来的效果也是一眼就是 AI 做的，怎么改都改不好，而且一下就把那一周的 token 耗完了。 那一版从 6 月底做到 7 月中，前后两个多星期，首页做了三版，差不多一个星期一版；参考站的调研倒只花了一个下午。最终效果我自己也不满意，所以一直没有上线。 当时的主样板，用的也是 Daikoku。做个对比图给大家看一下，其实能看到，哪怕是同一个主样板、同一个 template，同样的 HTML，但 CSS 不同，其他素材选择也不同，最终展示出来的效果是天壤之别。 ![上下对照七月原型与现在的首页：原型是黑底衬线大字「Ashton Shu.」，现在是白底黑体「Ashton is a graphic designer.」。同一主模板在字体、配色与素材选择改变后，呈现出明显不同的效果。](https://blog.ashtonshu.page/media/ashton-is-build/13-summer-0702-vs-now.png) 图 13上图：今年 7 月那版原型；下图：现在的首页 ## 最后 如果你发现 typo、显示不连贯，或者哪里的完成度没跟上，欢迎在网站的 [Contact 页](https://ashton.is/contact)告诉我；有网页、平面设计相关的委托，也欢迎来聊。 再贴一次网站：[Ashton.is](https://ashton.is/)