如何做出有自己视觉身份的页面skills 仓库 frontend-design 技能实战【免费下载链接】skillsPublic repository for Agent Skills项目地址: https://gitcode.com/GitHub_Trending/skills3/skills场景是这样一个任务给一个小众咖啡品牌做展示页验收标准不是好看而是一眼能看出这页是为这个品牌做的而不是某个通用样式批量产出的。skills 仓库里的 frontend-design 技能就是为此准备的它是一套可执行的视觉设计规则要求你在写第一行代码之前先锁定全部设计决策。本文就按一次落地页的产出流程讲清楚怎么用这个技能。写代码前定视觉方向先写出一份设计计划技能的第一步不是打开编辑器而是写一份紧凑的设计计划主题是什么、受众是谁、这个页面唯一的任务是什么。可用的视觉素材来自主题自己的世界——咖啡品牌的素材是咖啡豆、烘焙机、纸杯而不是抽象的渐变色。计划还要写成一套token 系统一组全页共用的预设设计值4 到 6 个带名字的 16 进制色值、至少两种字体用于大标题的展示字体、用于正文的字体、一个布局设想以及一个页面会被记住的标志性元素。写完做一次自查任何一条读起来像给任何主题都会这么产出的决策都要重写。通过后才开始写代码代码里的每个颜色和字体都能追溯到计划里。 调色板写进 CSS 变量一套换肤只改几行把计划里的 4 到 6 个色值写成 CSS 变量并给每个变量起有含义的名字全页只引用变量而不引用具体色值。客户说换个配色时你只需要改一处变量的取值整页同步更新。调色板的构成也有规则一个主导色加一个高饱和的强调色。选色时先排除两类批量产出的组合——米色背景配陶土色强调、深色背景配荧光绿——除非主题本身确实需要它们。 展示字体怎么选挑一款你在别的项目绝不会用的计划里的字体不是挑个能读的就行。技能的要求是展示字体要选一款你在别的项目绝不会用的再配一款正文字体并设定清晰的字号比例各级标题的字号关系与粗细。字体不用自己去找skills/canvas-design/canvas-fonts/ 目录下有 50 多个 ttf 字体文件从衬线到像素风都有选中后引用对应 ttf 并声明 font-face 即可。拿不准搭配时可以参考 theme-factory 技能里 10 组现成的字体配色方案。 动效设计一次编排好的加载时刻胜过零散微交互技能对动画的态度是克制不撒点。一次编排好的页面加载动画标题进场、主图浮现按顺序发生比十几个零散的悬停效果更有记忆点。方向偏极简时动画更该少多余的动效反而让页面显得机器味重。同时大胆只花在一个地方标志性元素是页面上唯一值得记住的东西其余部分保持安静。基础质量不打折移动端响应式、键盘操作有可见焦点、尊重系统的减少动态效果设置。跑通第一次的完整流程按顺序做三件事git clone https://gitcode.com/GitHub_Trending/skills3/skills通读 skills/frontend-design/SKILL.md 里的完整两遍流程。选一个你真关心的主题不写代码先把设计计划写出来颜色 token、字体搭配、布局、标志性元素。自查通过后再写代码字体从 canvas-fonts 引用颜色全部进变量。做完一遍你会得到一个每一处决策都能说出理由的页面——这正是它与批量产出页面的区别。【免费下载链接】skillsPublic repository for Agent Skills项目地址: https://gitcode.com/GitHub_Trending/skills3/skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考