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

来源：B站 [code秘密花园]
时长：00:12:58
BV号：BV1MbosBfEoK
链接：https://www.bilibili.com/video/BV1MbosBfEoK
说明：以下文字按视频原讲述顺序整理，口语、重复和明显噪声已做轻度收束。

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

UP主交代了Claude Design虽强大但难以使用，于是将其核心能力封装为可复用的Skill，使任何开发者都能在现有AI工具中实现高质量网页设计。

接着他把这一层讲到：介绍Figma股价下跌背景，并引出Claude Design功能及其使用门槛。接着，他把重点落在将Claude Design功能封装成通用Skill，让普通人也能成为顶级网站设计师。

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

Claude Design输出的是真实可运行的代码，支持链接点击、版本控制与diff比较，远超传统AI生成的静态图像。

他先把重点落在基于该Skill生成的两个设计案例，强调其视觉效果优于普通AI生成结果。接着，他把重点落在输出真实可运行代码，而非静态图片。

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

通过动态角色设定、六步工作流、去AI味设计清单及色彩系统规范，构建了一套可复制的专业级设计逻辑。

他先把重点落在角色定位为专家设计师与产品经理关系。接着，他根据需求灵活扮演动效、UI或PPT设计师。

然后，他把重点落在理解需求→探索资源→制定计划→搭建结构→完成验证→极简总结。再往下，他把重点落在何时该提问、何时直接执行，避免过度追问或盲目开工。

真正让结果稳下来的，往往是最后那一步自检

通过两个对比案例证明，加入Skill后生成的网页在配色、布局、创意和整体质感上实现质的飞跃。

他先把重点落在对生成网页进行全局检查，防止自我感觉良好。接着，他把重点落在因无API支持而放弃官方工具，转而基于泄露提示词开发WebDesignEngineer Skill。

然后，他把重点落在同一提示词下，有Skill版本明显优于无Skill版本。

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

项目已开源，包含完整提示词、代码模板与Demo网站，用户可直接在Cursor、Codex等工具中调用。

他先从“合格”到“有风格”的质变源于琐碎规则的累积效应。

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