《我把 Claude Design 做成了 Skill，人人都能成为顶级网站设计师》

来源：未知平台 [code秘密花园]
时长：00:12:58
BV号：BV1MbosBfEoK
说明：以下文字按视频原讲述顺序整理，口语、重复和明显噪声已做轻度收束。

官方工具很强，但真正卡人的还是接入门槛

这段开场其实就做了一件事：先承认 Claude Design 很强，但普通人很难直接把它接进自己的工作流，所以他才动了把它重新封成 Skill 的念头。

他先从 Figma 股价下跌这件事切进来，借这个话头把 Claude Design 和它的使用门槛一并带出来。

紧接着他把这条视频真正想讲的主意抛出来：把 Claude Design 的核心能力封成一个通用 Skill。

为了先把观感立住，他一上来就展示了两个用这套 Skill 做出来的网页案例。

真正拉开差距的，不只是模型，而是背后的提示词结构

讲完缘起之后，他没有急着卖 Skill，而是先回头拆 Claude Design 到底强在哪，尤其是角色、流程和限制规则这几层。

接着他用一个例子把这件事讲具体：以用户需求为导向，直接输出可运行的真实网页代码。他接着把一个关键判断讲明白：Claude Design 更像一种带判断力的协作机制，而不只是一个听命行事的工具。

然后，他把重点落在理解需求、探索资源、制定计划、构建结构、完成验证、极简总结。再往下，他把重点落在AI 应根据任务灵活切换身份（如前端开发者、动效设计师等）。

再往下，他把重点落在滥用渐变、发光、假数据、图标堆砌等典型模式。这些规则在他看来不是装饰细节，而是一张明确的禁用清单，用来防止页面一路滑回廉价模板。

拆完提示词之后，他没有停在讲思路，而是把它直接封成了一个 Skill

前面那套思路拆完以后，他才把自己的封装端出来，重点不是名字，而是它把这些规则真正装进了可复用的工作流里。

说到视觉质感时，他又把配色单独拆开，认为 LAB 这类感知更均匀的色彩空间更容易做出高级感。除了配色，他还反复提留白和元素理由，意思是页面上每一块东西都得说得清为什么要存在。

最后一层是验证，他希望 AI 在交付前自己先站到更高视角把整页再检查一遍。但问题也在这里：官方工具不稳定、没有 API，所以他干脆绕过产品本身，转去吃它背后的提示词。

同一套需求，为什么加上 Skill 之后页面就不再像模板

接下来这段不再讲原理，而是直接上对比，看同样的需求在有无 Skill 的情况下到底差在哪里。

他还提到，标题和正文的字体都更有特点，技术感也更强。

于是他把前面拆出来的这些东西重新封装，做成了一个叫 WebDesignEngineer 的 Skill。

讲完方法和案例之后，他顺手把开源项目和下一条主线也带了出来

收尾时他把前面提到的 Skill、提示词和 demo 一并开源，同时顺手把 EasyAgent 这条新项目线也接了进来。

他认为，这个版本没有落回传统卡片式布局，动画也更舒服，整体更像一位经验丰富的设计师做出来的作品。

第二个测试里，他只给了一个非常简单的提示词：做一个独立摄影师的个人作品集网站，用来考验 AI 在信息极度缺乏时的自主决策能力。

为了证明这套封装不是空话，他又拿了两个案例做正面对比：同样的需求，有 Skill 和没 Skill 会长成两种结果。

本文由 AI 基于转写整理，仅供复查参考。