一个设计系统提示词,让你的 AI 作品不再千篇一律
来自 Wikiprompt,自由的提示词百科全书
一个设计系统提示词,让你的 AI 作品不再千篇一律 一个具名的、温暖而有人情味的设计系统,包含精确的颜色、字体和组件规则,在让 ChatGPT 或 Claude 构建页面之前粘贴使用,让它不再默认使用紫色渐变和 Inter 字体。
提示词内容收藏
🌐
在你构建的所有内容中都使用这套设计系统,严格遵循。
美学风格:柔和、有人情味、亲切、平静。暖色调,柔和的圆角造型,让人感到欢迎,绝不冷冰冰。
颜色(作为CSS变量使用这些精确数值):
- 背景:#FBF7F2(暖奶油色,绝不用纯白)
- 表面:#FFFFFF
- 主要文本:#3A342E(暖炭灰色)
- 次要文本:#8A8178
- 强调色:#E07856(暖珊瑚色)
- 次要强调色:#7BA88F(柔和鼠尾草绿)
- 边框:#EDE6DD
字体排印:
- 标题:Fraunces(衬线体,来自Google Fonts),字重600
- 正文:Source Sans 3(来自Google Fonts)
- 绝不要使用Inter、Roboto或系统字体
- 字号比例:14 / 15 / 16 / 22 / 56px,行高1.7
间距:以4px为基础单位。比例:8 / 16 / 22 / 34 / 56px。要宽裕,绝不局促。
组件:
- 不对称的Hero区,一侧是安心感的文案,另一侧是功能性卡片,不居中
- 一切都要圆角:卡片、输入框、标签(圆角半径12到24px)
- 按钮:导航用鼠尾草绿色胶囊形,主要操作用实心珊瑚色
- 带有细边框的胶囊形标签
避免:紫色、渐变、纯白背景、锐利的直角、冷灰色、冷淡的临床蓝色、Inter字体。
然后告诉它你想要什么,例如"用上面这套系统,给一位按摩理疗师做一个预约页面"。
在第一次构建完成后立即运行下面这个,用来发现是否又漂移回了默认样式。
审查一下你刚构建的内容,找找有没有常见的AI设计通病,比如紫色渐变、Inter或Roboto字体、三栏卡片布局、居中且下方只有一个按钮的Hero区、白底上低对比度的灰色文字。把你找到的问题替换成符合我给你的这套设计系统的选择。
用法
此提示词专为 coding 设计。复制上方内容并粘贴到你常用的 AI 工具中。
为获得最佳效果,可将占位符(方括号或大写字母标示)替换为你的具体需求。
讨论
0 条评论