skills 仓库的 frontend-design 如何把页面从 AI 默认长相里拉出来【免费下载链接】skillsPublic repository for Agent Skills项目地址: https://gitcode.com/GitHub_Trending/skills3/skills这周交付的页面被客户一句话打回看着像 AI 生成的。skills 仓库里的 frontend-design 技能是一套可执行的视觉设计规则先把美学方向锁死再让你碰键盘。你会写 HTML/CSS、想让页面带上明确的设计立场它就是你需要的。 第一稿最容易长成的样子接到新页面你大概率会这么干Inter 字体、蓝白配色、hero 区一个大数字配小标签。客户已经拒过这种长相。卡住的原因在顺序你先动手敲代码设计决策边敲边补顺一下手页面就锁死在默认长相里。frontend-design 把顺序调了个反。 这个技能怎么锁住设计决策先锁方向它管页面的三要素主题、受众、页面的唯一任务。机制是逼你先写一份设计计划颜色、字体、布局、一个记忆点再自查里面有没有给任何页面都会给的默认答案。你拿到的变化所有决策在纸上做完才允许动键盘。方向没锁之前别动键盘。字体承担人格它管页面的辨识度展示字体和正文字体分开配字体不是内容载体。机制是选一款你绝不会在别的项目里选的展示字体设清字号比例再从skills/canvas-design/canvas-fonts/目录里直接取那里备了 54 个字体文件。页面第一眼就有性格不再依赖默认字体。选的字体若在别处也能用就换掉。把颜色钉进 token它管整页调色板4 到 6 个带名字的 16 进制色值组成一套 token。机制是所有颜色写进 CSS 变量换肤只改一处。skills/theme-factory/themes/目录里 10 组现成的字体配色可以直接抄作业。改主意换配色代价很小。️ 从 clone 到交付的路径拿到仓库 →git clone https://gitcode.com/GitHub_Trending/skills3/skills得到全部技能目录读流程 → 通读 skills/frontend-design/SKILL.md 里先计划、后写码的两遍流程挑字体 → 浏览 skills/canvas-design/canvas-fonts/挑一款有辨识度的展示字体钉颜色 → 把 4 到 6 色调色板写进 CSS 变量对照 skills/theme-factory/themes/ 的现成主题校准交付前自查 → 逐项核对方向是否锁死、记忆点是否只有一个、配色是否收敛进变量 边界与取舍它是一套流程纪律不是现成组件库 → 给你的是决策规则HTML/CSS 仍要你自己写。别把编排时刻理解成动画越多越好 → 技能里明说零散动效堆多了页面反而更像 AI 生成方向偏克制就少用动画。字体库是网页展示集不是全量商用字体包 →canvas-fonts里多数字体带 OFL 开源许可文件使用前核对一下对应的许可文本。下次页面再被说像 AI 做的你的回答是翻skills/theme-factory/themes/里的 10 组配色挑一个离蓝白最远的先把方向锁死。【免费下载链接】skillsPublic repository for Agent Skills项目地址: https://gitcode.com/GitHub_Trending/skills3/skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考