前端设计终极指南4条规则用 skills 仓库消灭页面模板感【免费下载链接】skillsPublic repository for Agent Skills项目地址: https://gitcode.com/GitHub_Trending/skills3/skillsskills 仓库里的 frontend-design 是一套可执行的前端设计规则核心是把顺序换掉先做完所有设计决策再动手写页面。它适合会 Git、懂 HTML/CSS、想做出不模板化页面的新手和普通用户。 你又被要求交付一个不一样的页面你在赶一个页面客户第一句话是必须和其他页面不一样。你打开编辑器手指却自动走 Inter 字体、蓝白配色、大数字加小标签的 hero——这正是最容易被认成模板的那一版。frontend-design 技能的处理方式不同它让你以小工作室设计负责人的身份开工客户付钱买的是别人认不出的视觉立场。 定方向打开编辑器前先写下三个答案先回答三个问题主题是什么、受众是谁、页面唯一任务是什么。然后选一个极致风格粗野主义、复古未来、有机自然都可以。关键在意图性不在强度。辨识度的素材来自主题自己的世界它的材料、工具、器物。hero 是论点开场就放主题里最有代表性的东西而不是一个大数字。️ 定表达把页面人格交给字体字体是页面的人格不是内容载体。挑一款你在别的项目绝不会选的展示字体配一个正文字体设清晰的字号比例。挑不出来时去仓库里的skills/canvas-design/canvas-fonts/那里放着 54 款字体文件可直接引入挑一款有辨识度的展示字体。️ 定系统把换肤锁进 CSS 变量把调色板做成 token 系统4 到 6 个带名字的 16 进制色值一个主导色加一个高饱和强调色。所有颜色写进 CSS 变量之后换肤只改一行。配色拿不准去看skills/theme-factory/themes/的 10 组现成字体配色比如midnight-galaxy.md的深紫加薰衣草加银挑一组再把强调色换成自己的。✨ 造高光让页面被记住的一个时刻动效要克制。一次编排好的页面加载动画胜过十几个零散微交互。技能原文的说法是把大胆花在一个地方让签名元素成为唯一被记住的东西其余保持安静。方向偏克制时更要省多余的动效反而更像 AI 生成。判断式上手从第一行代码前开始先git clone https://gitcode.com/GitHub_Trending/skills3/skills读完 skills/frontend-design/SKILL.md 的两遍流程先写设计计划颜色、字体、布局、签名元素对照需求自审确认独特性后再动代码。如果方向偏克制两三层字号层次就够只留一个签名时刻删掉一切不为服务主题的装饰。如果你走极繁执行要够复杂但高光仍然只留一处。如果主题拿不定先读 skills/theme-factory/themes/ 的 10 组参考字体不够再进 skills/canvas-design/canvas-fonts/。如果交付前对照出 SKILL.md 点名的几种 AI 默认长相奶油底加陶土色、近黑加荧光色等命中哪条就改掉哪条轴。边界做对与做过头字体做对是展示加正文一对比例清晰做过头是堆三套字体没有层级。配色做对是 4 到 6 个命名色值加一个强调色做过头是彩虹调色板。编号内容真是序列流程、时间线才用 01/02/03做过头是拿编号当装饰。适合谁想要设计立场、能用 HTML/CSS 落地的你不适合谁纯套模板建站或找填表工具的人这套规则是判断力不是模具。今晚就写的第一行打开 skills/frontend-design/SKILL.md写下三个答案主题、受众、页面的唯一任务。每一页从第一稿起就该有立场而不是等客户替你指出来。【免费下载链接】skillsPublic repository for Agent Skills项目地址: https://gitcode.com/GitHub_Trending/skills3/skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 前端设计终极指南：4条规则用 skills 仓库消灭页面模板感
前端设计终极指南4条规则用 skills 仓库消灭页面模板感【免费下载链接】skillsPublic repository for Agent Skills项目地址: https://gitcode.com/GitHub_Trending/skills3/skillsskills 仓库里的 frontend-design 是一套可执行的前端设计规则核心是把顺序换掉先做完所有设计决策再动手写页面。它适合会 Git、懂 HTML/CSS、想做出不模板化页面的新手和普通用户。 你又被要求交付一个不一样的页面你在赶一个页面客户第一句话是必须和其他页面不一样。你打开编辑器手指却自动走 Inter 字体、蓝白配色、大数字加小标签的 hero——这正是最容易被认成模板的那一版。frontend-design 技能的处理方式不同它让你以小工作室设计负责人的身份开工客户付钱买的是别人认不出的视觉立场。 定方向打开编辑器前先写下三个答案先回答三个问题主题是什么、受众是谁、页面唯一任务是什么。然后选一个极致风格粗野主义、复古未来、有机自然都可以。关键在意图性不在强度。辨识度的素材来自主题自己的世界它的材料、工具、器物。hero 是论点开场就放主题里最有代表性的东西而不是一个大数字。️ 定表达把页面人格交给字体字体是页面的人格不是内容载体。挑一款你在别的项目绝不会选的展示字体配一个正文字体设清晰的字号比例。挑不出来时去仓库里的skills/canvas-design/canvas-fonts/那里放着 54 款字体文件可直接引入挑一款有辨识度的展示字体。️ 定系统把换肤锁进 CSS 变量把调色板做成 token 系统4 到 6 个带名字的 16 进制色值一个主导色加一个高饱和强调色。所有颜色写进 CSS 变量之后换肤只改一行。配色拿不准去看skills/theme-factory/themes/的 10 组现成字体配色比如midnight-galaxy.md的深紫加薰衣草加银挑一组再把强调色换成自己的。✨ 造高光让页面被记住的一个时刻动效要克制。一次编排好的页面加载动画胜过十几个零散微交互。技能原文的说法是把大胆花在一个地方让签名元素成为唯一被记住的东西其余保持安静。方向偏克制时更要省多余的动效反而更像 AI 生成。判断式上手从第一行代码前开始先git clone https://gitcode.com/GitHub_Trending/skills3/skills读完 skills/frontend-design/SKILL.md 的两遍流程先写设计计划颜色、字体、布局、签名元素对照需求自审确认独特性后再动代码。如果方向偏克制两三层字号层次就够只留一个签名时刻删掉一切不为服务主题的装饰。如果你走极繁执行要够复杂但高光仍然只留一处。如果主题拿不定先读 skills/theme-factory/themes/ 的 10 组参考字体不够再进 skills/canvas-design/canvas-fonts/。如果交付前对照出 SKILL.md 点名的几种 AI 默认长相奶油底加陶土色、近黑加荧光色等命中哪条就改掉哪条轴。边界做对与做过头字体做对是展示加正文一对比例清晰做过头是堆三套字体没有层级。配色做对是 4 到 6 个命名色值加一个强调色做过头是彩虹调色板。编号内容真是序列流程、时间线才用 01/02/03做过头是拿编号当装饰。适合谁想要设计立场、能用 HTML/CSS 落地的你不适合谁纯套模板建站或找填表工具的人这套规则是判断力不是模具。今晚就写的第一行打开 skills/frontend-design/SKILL.md写下三个答案主题、受众、页面的唯一任务。每一页从第一稿起就该有立场而不是等客户替你指出来。【免费下载链接】skillsPublic repository for Agent Skills项目地址: https://gitcode.com/GitHub_Trending/skills3/skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考