夜雨聆风
这篇文章讲的是设计师怎么用产品和体验思维做一个AI-Coding项目。文章较长，你可以点顶上的朗读功能，是我的AI原声。
你将看到我是如何讲述一个完整的项目，包括：项目背景、项目目标、内容结构（代码框架）、视觉策略、交互&体验设计、技术难度、项目亮点、项目总结。咱们设计行业没人讲这些，建议仔细读完，毕竟——相见即缘分。
阅读之前，先大致看一下这个网页。我把《智者的设计哲学》做成了web在线版，这篇文章讲的就是这个项目的完整执行过程。
https://大熊.com/the-wise-designers-philosophy-web
很多设计师在作品集里讲项目，最大的问题不是项目不好，而是不知道自己到底做了什么，什么是有价值的部分。他们会展示一些界面设计图，说自己做了视觉和交互优化、体验升级。但再往下问，为什么这么做？解决了什么问题？目标用户是谁？他们的诉求是什么？价值如何体现的？通常就讲不清楚了。
这其实不是表达问题，是思考问题。因为一个项目真正有价值的地方，从来不是几张图，而是你如何定义问题、决策方案、取舍功能，并在有限条件下最终呈现一个可用的方案或结果。
我用我自己刚做完的一个项目：《智者的设计哲学·全卷》网页版，来讲述完整的执行过程。
这个项目很简单，我花了半天时间。表面上看，它只是把一本书放到网页上。但从设计项目的角度看，它涉及内容结构、阅读体验、交互设计、前端实现、网站框架适配、AI检索、读者传播、后续维护等一系列问题。它不是一个单纯的网页制作，而是一次完整的体验设计和Coding的实践。
项目背景：
《智者的设计哲学·全卷》写完后，我最初的想法很简单，就是提供PDF下载。因为PDF更像一本书，有完整的作品感，也更容易让读者产生“这是一本书”的感受。但PDF有一个明显的问题：它更像一个静态文件，而不是一个持续生长的知识产品。
读者可以下载、收藏、转发，但也很容易把它放在某个文件夹里吃灰。更重要的是，在今天这个搜索和AI越来越重要的环境里，PDF并不是最适合长期承载知识的形式。它不如网页容易被搜索、引用，也不如网页容易形成一个可持续访问的公开知识节点。
所以，我的判断是：PDF应该保留，但不能只提供PDF。PDF解决的是“书的形式感”，而网页解决的是“知识的可访问性”。我要做的是“把一本书变成一个可阅读、可检索、可被AI引用、可交互的在线知识产品”。
这个判断就是整个项目的起点。如果写进作品集，我会把它提炼为一个价值点：产品的决策逻辑。
项目目标：
有了方向之后，下一步是定义清楚这个项目到底要做到什么程度。我不是想要做一个炫酷的页面，而是要做一个长期可用的阅读系统。所以我给这个项目设定的目标很明确：
第一，它必须适配我的官网框架。因为我的网站已有自己的一级导航、页面结构、搜索系统和视觉风格，所以这个页面不能另起一套架构。
第二，它必须保持书的阅读感。不能像普通的博客文章，也不能像一个信息列表。读者进入页面后，应该感觉自己是在读一本书，而不是在浏览一堆零散内容。
第三，它必须支持逐条句子定位。因为这本书不是普通长文，而是由一条条句子组成。每一条都应该能独立复制、分享、跳转和引用。
第四，它必须方便后续维护。我不可能为几百条内容手动调整代码，所以结构要清楚，样式要统一，交互要能自动生成。
第五，它必须服务于读者的真实阅读行为。读者可能会摘录某一句，可能会读到一半离开，可能会下次继续阅读，也可能会把某一条分享给别人。所以复制和标记功能，就是阅读场景里真实存在的用户需求。
注意！很多设计师在作品集里只是搬运产品文档里的产品目标，这个不行。比如，这就是我自己根据项目情况来定义的目标。无论是项目目标、产品目标、还是设计目标，你要 [定义] 目标，而不是copy目标。
这些目标听起来都很简单，但它们决定了这个页面不能按照“AI生成一个完整网页”的方式去做。
之前，我让AI帮我生成了一个页面原型（略）。方案单独看没错，但它们并不适合我的网站，因为我的网站已有自己的代码结构和样式。这就是AI生成代码时最容易出现的问题，它不了解你的原始环境。
一个设计师如果不懂代码、不懂网站结构、不懂页面运行在什么环境里，就很容易被这种AI方案迷惑。因为它看起来很专业，功能很多，形式也完整。但真正放进你的产品环境里，可能就是不合适的。
所以我自己写了一个代码框架，遵循了我的PDF的设计形式。
内容结构（代码框架）：
这个页面最重要的不是视觉，而是内容结构，也就是代码框架。
《智者的设计哲学》每一条内容都有一个序列号、一句核心判断，以及注解。也就是说，它是一组有明确层级的内容单元。
我设计的代码结构大概是这样：
<sectionid="riix-007"class="riix-item"><divclass="riix-number">007.</div><h2class="riix-sentence">被企业淘汰的本质，是你提供不了他们当下所需要的价值。</h2><pclass="riix-note">不要用“毕业”这种互联网黑话来美化裁员。职场的真相很残酷：当你停止输出价值，或者你的价值不再被业务需要时，淘汰就会自然发生。</p></section><hrclass="riix-line" />
这个结构看起来很简单，但它解决了几个关键问题：
id=“riix-007” 让每一条句子都可以被精确定位。以后我想分享第007条，不需要告诉别人“你往下翻到第7条”，而是可以直接用锚点链接跳过去。
riix-number、riix-sentence、riix-note 分别代表编号、核心句和注解。这样CSS就可以分别控制它们的字号、字重、颜色、行高和间距。
section 代表这一条是一个完整内容单元，而不是一段普通文字。这对浏览器、搜索引擎和AI理解都更友好。
这就是我认为设计师应该理解HTML的原因。
HTML不是简单地把文字放到网页上，而是在定义内容的框架。你怎么写HTML，决定了内容如何被阅读、被引用、被检索，也决定了后续交互能不能自然发生。
视觉策略：
在视觉上，我没有做复杂的设计。因为这个页面不是活动专题页，也不是品牌展示页，而是一本在线阅读的书。它的主要任务不是让人第一眼觉得骚气，而是让人能安静地读下去。
所以CSS的重点不是炫技，而是建立阅读的秩序。
编号要轻，不能抢内容。核心句要重，因为它是每条句子思想的主体。注解要舒展，因为它承担解释和延展。分割线要弱，只做节奏提示，不能把页面切得太碎。
基础样式大概是这样：
.riix-number {font-size: 15px;line-height: 1.6;color: #999999;margin: 0 0 8px 0;}.riix-sentence {font-size: 28px;line-height: 1.5;font-weight: 600;color: #111111;margin: 0 0 4px 0;}.riix-note {font-size: 17px;line-height: 1.9;color: #555555;margin: 0;}
这里没有技术难度，英文分别代表了：字体大小、行高、字重、颜色、区域间隙。
我们通常在Ps和Figma里调字体样式，现在你就可以直接用CSS把这些视觉效果落到真实的网页里。也就是说你改代码就行。
我在辅导学员的时候，看他们Coding的AI小工具，我说：“你这个版式结构看起来好乱。你能看懂代码吗？”
学员说：“不能，要在可视化的界面上做调整。”
可视化编辑UI是可以的，但是会出错，效率也不高。如果你懂代码，在代码环境下直接改UI效果，是最直观和高效的。
交互&体验设计：
页面结构和阅读样式完成后，我需要思考读者怎么使用它。
读到某条句子觉得好，读者可能想要复制。读到一半临时离开，他可能希望下次能继续。读到某条句子想要分享，他不应该复制出一段乱七八糟的文字，而应该是自动带有编号、正文、注解和出处。
所以我加了两个功能：复制 和 标记。（在电脑端，鼠标悬停就会显示；在手机端，轻点句子就会显示）
复制功能的思路很简单。比如我们通常是用Ps/Figma做个复制按钮，然后copy到每条句子上，或者就是把整条句子做成组件，copy整条句子。但是代码环境就不需要那么麻烦，我不需要在几百条内容里手动加按钮，而是让JS自动为每个条目生成按钮。
document.querySelectorAll('.riix-item').forEach(function(item) {if (item.querySelector('.riix-copy-btn')) return;var button = document.createElement('button');button.className = 'riix-copy-btn';button.type = 'button';button.innerText = '复制';item.appendChild(button);});
这段代码的意义在于它把内容和交互分离了。HTML只负责表达内容，JS负责增强交互。这样后续我增删条目，不需要每一条都手动处理按钮。
复制出来的内容也经过了设计。
我希望复制出来的内容，更像是一段正式的书籍摘录，而不是一段从网页上随手拷贝下来的文本。
所以我对复制结果做了重新组织，让它呈现出更接近书籍摘录的样式。
var htmlText ='<divstyle="font-family:-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;">' +'<hrstyle="border:0; border-top:1px solid #e6e6e6; margin:0 0 16px 0;">' +'<pstyle="font-size:20px; line-height:1.6; font-weight:700; margin:0 0 16px 0;">' +sentenceText +'</p>' +noteHtmlParts.join('') +'<pstyle="font-size:17px; line-height:1.6; text-align:right; margin:16px 0 0 0;">' +'—— 出自《智者的设计哲学·全卷》第' + numberText + '句' +'</p>' +'<hrstyle="border:0; border-top:1px solid #e6e6e6; margin:16px 0 0 0;">' +'</div>';
读者复制后，粘贴到支持富文本的编辑器里（比如公众号编辑器）。粘贴出来的效果是这样的：
被企业淘汰的本质，是你提供不了他们当下所需要的价值。
不要用“毕业”这种互联网黑话来美化裁员。职场的真相很残酷：当你停止输出价值，或者你的价值不再被业务需要时，淘汰就会自然发生。
—— 出自《智者的设计哲学·全卷》第007句
很小的设计细节，但它决定了这个功能到底是“复制文字”，还是“生成一段可以被正式引用的摘录”。如果复制结果没有格式、没有出处、没有句号，它只是一个工具的功能；如果复制结果天然适合转发、收藏和引用，它就是体验设计工作的一部分。
它体现的是设计师在设计工作中的思考。特别是你在求职面试的时候，面试官真正看的不是你做的事情复不复杂，而是你在不起眼的小事上，能不能体现出独特的思考和判断。这才是设计师稀缺的能力。
标记功能也是一样的思路。它是为了解决一个非常具体的问题：读者下次如何继续阅读？
你会发现我设计的产品功能基本都是“刚需”，设计执行也是非常“偷懒”，而不是一味地追求“更好的体验”。
所以我没用微信账户登录来绑定用户行为和数据库写入，因为没有必要。只有学员才做了和微信账户、知识库绑定的权限设计。毕竟我搞这些也是有工作成本的。这也就是为什么开发工程师有时候会吐槽那些产品经理或者设计师——“你们把事情整复杂了”。就是这个意思。所以工程师通常就会说“实现不了”。你以为是他能力不行？其实他就是单纯地不想给你弄。
所以，对于一个免费公开阅读的页面来说，最轻的方式就是把阅读标记存在浏览器本地。
localStorage.setItem('riix_last_bookmark', bookmarkItem.id);下次打开页面时，页面会自动读取这个ID，然后自动跳回那一条。（你可以通过重新打开页面和在不同页面区域刷新，体验这个效果）
var savedBookmarkId = localStorage.getItem('riix_last_bookmark');if (savedBookmarkId) {var savedItem = document.getElementById(savedBookmarkId);if (savedItem) {savedItem.scrollIntoView({behavior: 'smooth',block: 'center'});}}
当然，这不是完美方案。换设备、换浏览器、清缓存都会失效。但它足够解决读者的当前问题，而且实现成本很低。作为目标用户场景来说，他们通常都用公司电脑浏览器，所以换设备、换浏览器、清缓存的动作属于非常低频的用户行为。
这个案例说明的就是一个原则：
设计师在Coding的时候，不是把每个产品功能都做到工程级完美，而是要知道当前阶段，你的产品最应该解决什么问题。
技术难度：
在这个项目里，我没有按照常规流程：画产品原型、交互图、视觉稿、代码实现。对我来说，这个项目的复杂程度还没有到必须先画个图出来验证的程度。
页面结构、交互形式、界面风格，这些东西在我脑子里就能跑，不需要弄出来。所以我可以直接在代码状态下进行界面设计工作。就是下面这个图的意思，能看到底层的代码结构，同时也能看到UI界面设计。
我之所以能跳过这些流程，是因为我清楚哪些环节对这个项目是必要的，哪些不是。很多设计师在日常工作中，有相当一部分精力其实花在低价值、重复性、形式化的事情上。
比如为了证明自己的设计流程完整，画很多没必要的过程稿；为了让作品集看起来专业，堆很多没人真正关心的方法论；为了包装项目，补一堆并没有参与真实决策的分析过程。
这类工作不是完全没用，但它们的价值经常被高估。而真正有价值的，是你能不能判断哪些事情必须认真做，哪些事情做到够用就可以，哪些事情根本不需要做。
这个页面我从构思、写代码、调样式、功能设计，到发布，用了大半天时间。从投入产出看，从头到尾都没有任何错误的决策。
我当然可以把UI做得更精致，可以做更复杂的阅读模式，可以做更漂亮的目录和动画，还可以继续打磨按钮、阴影、动效、页面渐隐加载的过渡效果。但问题是：这些东西是不是这个项目最重要的价值？
显然不是。
这个页面最重要的价值是《智者的设计哲学》这个书里的文字本身。设计的目的，是让这些文字以一种清晰、稳定、可阅读、可复制、可标记、可引用的方式呈现出来。
所以我没有把时间消耗在过度设计上。
不是每件事都做到100分，而是知道哪40%的事情能真正产生价值，然后把精力放在那里。剩下那60%按要求完成，不制造新的问题，就已经足够了。
也正因如此，这个项目真正的难点，不在代码本身。HTML、CSS、JS这些都属于基础前端能力。真正的难点在你做这件事的时候，你的思考、判断、决策和行动。
比如下面这些，每一条都不是代码问题，而是思考和决策的问题：
要不要做侧边目录？看起来有用，但它会和网站框架冲突，所以先不做。要不要做搜索？看起来高级，但我的网站有搜索，所以没必要重复。要不要做登录后跨设备标记？当然可以，但当前读者只是免费阅读一本书，用本地标记已经够了。要不要外部JSON管理内容？从工程上看更干净，但可能存在JS读取、加载失败、SEO可见性等问题。搜索引擎和AI爬虫也可能不能稳定读到它。
这些判断背后，其实是两类不同的诉求在博弈。
读者的诉求：能读，读得舒服，能复制，下次能继续，最好还能下载PDF。我的诉求：这本书要成为一个长期存在的公开知识节点，能被搜索，能被引用，能被AI更容易理解和检索，同时体现品牌感。
所以这个页面同时承担了阅读、传播、品牌、检索和长期承载五个任务。
AI可以帮我写代码，但它不知道我的网站原本是什么结构，不知道我的页面要放在哪个框架下，不知道我的读者最需要什么，也不知道我后续维护成本能接受到什么程度。
这些思考和判断都不是AI能自动替你做好的。更不能你什么都不去想，直接把自己的界面图通过AI工具自动生成可交互的代码。AI-Coding，真正考验的不是设计师的代码能力、AI生成能力，而是产品思维和决策能力。
一个不懂代码的设计师，很容易被AI生成的方案牵着走。他会觉得功能越完整越好，页面越像独立产品越高级。但真实项目往往相反。越是长期可维护的东西，越需要克制。这一点，微信的产品是整个腾讯生态做得最好的。
项目亮点：
这次项目的亮点，不是我写了多少代码，而是我把一本书从静态文件转化成了一个可操作的在线知识产品。每一条都有固定ID可被精确链接。编号、句子、注解被结构化拆分，可以分别控制样式。复制功能由JS自动生成，不需要逐条手动处理。复制内容自动带出处，让传播天然完整。标记功能用最轻的方式解决了继续阅读的问题。整个页面融入官网原有框架不另起系统。
这些东西单独看都不复杂，但组合在一起看，就让这个页面从一个放书的网页变成了一个真正考虑过用户阅读场景的在线知识产品。
项目价值不是靠一个惊艳的功能撑起来的，而是靠一系列正确的小事累积出来的。这也就印证了我在《智者的设计哲学》书里写的这句话：
理性的判断，加上优雅的表达，才是正确的设计。
“理性的判断”决定了设计的策略和方向，“优雅的表达”决定了设计的品质和标准。
—— 出自《智者的设计哲学·全卷》第003句
如果把这个项目反过来看，它也可以给设计师做作品集提供一个参考。
很多设计师不知道怎么讲自己的项目，是因为他们只讲“我做了什么界面”，不讲“我如何思考和定义这个项目”。
一个项目至少应该讲清楚：
项目背景是什么，为什么要做；目标用户是谁，他们的真实诉求是什么；我自己的业务诉求是什么，和用户诉求是否一致；原方案有什么问题，为什么不能直接照搬；我如何选择技术方案，如何处理限制和取舍；最终解决了什么问题，有什么可复用的经验。
如果这些讲不清楚，页面设计得再花哨、整再多方法论的图，也没用。
项目总结：
设计师不需要把自己变成专业前端，也不应该幻想自己能替代前端开发。就像我这种Coding能力，我都不敢对前端不敬。
真正高品质的界面实现、复杂的交互、性能优化、前后端架构、安全体系，仍然需要专业的人来做。但设计师必须懂一点HTML、CSS、JS，最好也懂一点前后端、服务器和安全常识。
因为你完全不懂代码，你就只能被AI工具牵着走。AI给你什么，你就用什么。出了问题，你不知道问题在哪。生成的方案是否适合你的产品，你也判断不了。但当你懂一点代码时，情况就不同了，AI就变成了你的小弟，变成了帮你提高实现效率的工具了。
这就是差别。
设计师学习Coding的价值，不在于那几行代码，而在于能把自己的设计更快落地，做出一个可用的原型，能验证一个真实功能，能判断技术方案是否合理，能和开发更有效地沟通，同时也能在AI生成代码时保留主动权。
但说到底，Coding只是设计师的一种新的设计表达方式。工具会变，能力不会。真正有价值的，始终是你如何理解问题、定义结构、做出判断、产出可用的结果。
代码，不是设计之外的东西。是设计进入真实世界，必须经过的一道门。
