6 个Skill 帮你打造绝美产品页面
现在让 AI 写一个页面不难难的是让它看起来像真的产品。常见问题大家都见过布局是对的但松组件齐了但没质感动效也有却像是临时拼上去的。这 6 个 Skill正好从设计、审美到动效把这些短板一点点补上。没必要一次装齐按你正在做的事选就行。01 — OPEN DESIGN先给 AI 一张“设计工作台”这是一个开源的 AI 设计工作台适合让 Codex、Claude Code、Cursor 这类工具参与网页、App、原型和设计系统。你想把 AI 从“写代码助手”往“设计生产力”方向推先看它。适合设计系统、原型设计、多媒体设计02 — UI/UX PRO MAX SKILL把“能用”往“像成品”拉一截如果只装一个我会优先选它。它更关心布局、信息层级、组件质感和页面完成度正好针对 AI 最容易露怯的地方。适合落地页、SaaS、Dashboard、移动端 UI03 — TASTE SKILL当页面没错但就是不想发它不解决“有没有”而是解决“好不好看”。默认模板感太重、页面太平、气质不对时用它让 AI 按更高的审美标准重新审视和微调页面。适合审美校准、去模板感、提升细节04 — GSAP SKILLS静态页面完成后再补节奏好动效不是堆效果而是让内容出现得更有节奏。GSAP 的 Skill 很适合做滚动触发、文字入场、时间轴动画和转场作品集或产品官网会特别受用。适合官网、互动落地页、滚动叙事05 — HALLMARK给 Landing Page 再加一道审美保险Hallmark 的目标很直接让 AI 默认生成更漂亮的页面。它偏产品展示页和 Landing Page如果已经用了 Taste Skill可以把它当成第二层校准。适合官网首页、产品展示页、漂亮 UI06 — DESIGN-MD-CHROME把“我想要这种感觉”说清楚看到一个好网站却不知道怎么描述给 AI用它提取参考网站的字体、间距、配色和页面气质整理成 DESIGN.md再交给 Codex 按这个方向做。适合参考网站拆解、风格提取、设计还原一个更顺手的使用顺序先用design-md-chrome定参考再用UI/UX Pro Max搭页面觉得太像模板就加Taste或Hallmark最后让GSAP做动效。工具不是审美的替代品但它能让 AI 少走不少弯路。你最常用的是哪一个