作为一名前端开发，一直有个理想化，能无法自己制作出一些更好看的实际效果/有意思的互动，随后用编码去完成，的话应该会是一件非常开心的事情。
近期 ChatGPT 挺火，火都火出圈，因此看一下它会带给我什么作用？
会话
以下是精减的新手入门会话，会话中间括弧就是我那时候的念头
我： 我是一名前端开发，我对于设计方案十分的有兴趣，你对我有什么建议呢
ChatGPT:
假如你是一名前端开发，对设计有兴趣，那样是我一些建议来分享：
-
学习培训设计基础知识：掌握设计原理、美学基础、排版设计标准、视觉层次等基本知识，能够帮助你更好地理解设计方案，并运用到自己工作中。 ...省去（给5条） 希望这个提议对大家有所帮助，祝你在商业领域取得更大的进度！
（我觉得时下最想要学习培训是指色彩的搭配，因此再次提出问题美学基础相关的知识）
我：我想我很有可能还处在较为基本的环节，美学基础都包括什么专业知识呢，懂得了他，我就可以搭出超美的颜色吗
ChatGPT:
美学基础是设计里十分重要的一部分，它牵涉到色调的归类、应用、搭配和组合等多个方面。若想把握美学基础，要了解以下几方面的基础知识：
- 色调的本质属性：色彩、饱和度和明度。 ...省去（给5条）
经过把握这种基本知识，你能更好地理解色调的应用基本规律与实际效果，进而在设计中科学地应用颜色。但是要想搭出超美的色彩搭配，还要通过实践和努力尝试，结合自身的艺术审美想像力，才会得到最理想的实际效果。
除此之外，如果对颜色不确定性或者需要一些设计灵感，能够使用一些在线颜色专用工具或网址，如 Adobe Color、Coolors、Color Hunt 等，这些工具能够帮助你找到更好的颜
（我看见了它提出了一些基础理论知识一些专用工具，我简单再问了一下他一些基本知识（这个省略了，篇幅过多），看得出，他对于颜色，对比度，色度，中间搭配有一些体会心得，因此我确定试一下直接说出我的需要）
我： 我有一个导航网站，要给同事提供便捷的一种手段，及其一些网站分发的通道，大家觉得设计方案成什么颜色，会使网址看起来更加高效率，更岗位呢。
ChatGPT:
对于一个导航网站，需要考虑到其基本功能是提供便捷的一种手段和网站入口，因而建议使用一些比较清新、柔和的色彩搭配，便于让消费者更有效地寻找自己需要的信息内容。以下属于一些建议：
- 蓝系色彩搭配
深蓝色通常被觉得是一种比较岗位、沉稳、可信赖的色调，都是网络上常有的色调。因而，可以选择选用一些蓝色调的色彩搭配，如浅蓝色、深蓝色、海蓝色这些。这种色彩搭配不仅可以让网址看上去更加岗位，同时也可以传递出稳定、靠谱、清醒的觉得。
- 橙色系色彩搭配
橘色是一种比较开朗、温暖的色彩，都是主要表现自主创新、朝气的一种颜色。（省去）
- 灰色系色彩搭配
深灰色是一种比较中性化、低调的颜色，都是主要表现完善、沉稳的一种颜色。（省去）
总的来说，不同类型的色彩搭配都有它分别的特点和使用场景，你能依据新网站实际情况与目标消费者的需求来选择。
（能够看见了其实只是提出了颜色的大致计划方案，并没具体色码，针对只能敲代码我，或是难以想象怎样去组合，所以我认为问的问题详细点）
我： 请详细介绍下第一种计划方案具体色码，一个网站主要是由文章标题，小标题，归类文章标题，导航按钮构成，请得出文章标题，小标题，归类文章标题大小和色调，导航按钮的边框颜色和文字颜色。
ChatGPT:
好一点的，下列是一个根据蓝系的色彩搭配，具体色码和设计风格如下所示：
- 文章标题：应用蓝系中的一种比较深的色调，例如 #2C3E50，文字大小可根据具体情况作出调整。
- 小标题：使用与文章标题相似的色调，可是色调要更加浅一些，例如 #34495E，文字大小要比文章标题略小。
- 归类文章标题：使用与标题和副标题相似的色调，可是色调要更加浅一些，例如 #4A6984，文字大小要比小标题略小。
- 导航按钮：使用与标题和副标题相似的色调，可是色调要更加浅一些，例如 #5D8AA8。导航按钮的外框可以用与文章标题同样的色调，即 #2C3E50。导航按钮的文字颜色最好使用乳白色或是深灰，以确保视觉的饱和度。
这类色彩搭配能够让网站看起来比较稳定、岗位，与此同时又不乏清爽、柔和的觉得，合乎导航网站的主要功能。自然，最后设计方案也要考虑具体网站信息和客户需求，进行相应的调节和改进。
（事儿逐渐慢慢地越来越有趣下去，拥有色码，我就可以直接实践活动，那样我确实在与 ChatGPT 的对话中得到学习培训）
实践活动
从它会得出实际色码的一刻起，我对他的自信心大大增强，所以我有一个更的灵感，便是他的或许能给我给予许多套不一样的配色，要我放纵感受。
之前的编码里，这种值得被更换颜色，处在不同类型的 css 文档中，十分的较为散乱，更换下去太麻烦了。
这时，大家可以采用 css var 的解决方案来达到。
.title {
color: #ffffff;
}
.sub-title {
color: #dddddd;
}
.text {
color: #eeeeee;
}
/**
* 默认主题色
*/
:root {
--title: #ffffff;
--sub-title: #dddddd;
--text: #eeeeee;
}
/**
* 能够自定好几套颜色
*/
body[data-theme='theme1'] {
--title: #ffffff;
--sub-title: #dddddd;
--text: #eeeeee;
}
.title {
color: var(--title);
}
.sub-title {
color: var(--sub-title);
}
.text {
color: var(--text);
}
那样我们就能方便快捷的把 chatGPT 给予给大家的颜色值实践活动一下了！
我：
我将自己想要的色调做成css主题风格，小伙伴们意见反馈你的配色不是太好看，按照css自变量的方式，再给我给予一套一个新的。下面我可以给你发css自变量的格式
chatGPT:
好一点的，请发给我你 CSS 自变量的格式，我们将为您提供一套一个新的色彩搭配。
我：
--primary-color: #2c3e50; // 文章标题色 --subtitle-color: #34495e; // 小标题色 --category-color: #335980; // 归类色调 --item-border-color: #5d8aa8; // 导航按钮外框色 --item-bg-color: #2c3e50; // 导航按钮背景颜色 --item-color: #fff; // 导航按钮色调 --item-hover-border-color: #eaeaea; // 飘浮情况导航按钮外框色 --item-hover-bg-color: #fdb813; // 飘浮情况导航按钮背景颜色 --item-hover-color: #2c3e50; // 飘浮情况导航按钮色调 --bg-deg: to bottom; // 渐变色方法 --bg-start-color: #1e88e5; // 渐变色原始色调 --bg-end-color: #fdd835; // 渐变色完毕色调
chatGPT:
这样我就能直接根据 chatGPT 形成好几套 UI 主题风格了。以下是制成品
之上各是：
-
人力设计方案
-
ChatGPT（高效率设计风格2）
-
ChatGPT（高效率设计风格2）
-
ChatGPT（活泼可爱设计风格）
-
ChatGPT（负色设计风格）
-
ChatGPT（赛博朋克风格）
对 ChatGPT 的观点
一开始，我就是抱着试一试的心态，看能不能行，结论还挺好，它的智能化水平在我意想不到。
这相当于有一个朋友一直陪着你在教学，或者提高，他给的提议那你去实践活动并得到实际效果，反馈调节感十足，正在做一些需要长时间所付出的事儿，有了他陪伴，你也许不会因为孤独而坚持不下来。
并且在体验的过程当中我发现了，他挺勇的，这个人是宁愿回答错误，都不会逃避问题（例如别的AI的知识库系统方式：这种情况我也不知道什么的），并且在会话的过程当中，不但大家自己可以不断成长，也可以帮助 AI 发展。
例如 first-child 这一伪类，假如那么敲代码
.myclass:first-child {
}
我之前一直以为是寻找父元素中的第一个 myclass 类名的子元素，为他再加上款式。
但是通过实践活动，这一伪类其实就是寻找父元素中的第一个元素，假如这个人是 myclass 类名，那就给增加上款式。
很巧合的是 ChatGPT 也给出了不是很精确的描写。
它说这一标准都会选择第一个类名叫 child 的子元素，并设置它的款式，尽管他后边补上一句第一个子元素并不是 child 类名，那么这样的标准也就不会运用，结合在一起了解，结果显示正确了。
其实前边那一句话并不是准确的，如果看的顺利的话极有可能忽视后边这话。
对于他的不正确开展改正后，我感觉自己也提升了，他也提升了，他提升了也能够更好的帮我。
我对这个 AI 定位是，把它当成一个知识层面较广的朋友们，从这批判性思考的吸收知识，进而提升自己能力。
有意思的话
不清楚说到这里的同学们是否有对图片中的导航栏产品有兴趣爱好，这样的项目是绝对开源系统的，并且不依附数据库资源，应用 json 文件格式来处理导航数据，并且适用按单位新增加，改动，删掉，拖动排列，有兴趣的朋友可以看一下，项目地址。
或许你就可以用它管理方法大家企业内部常见的导航链接。