讨论

一个设计系统提示词,让你的 AI 作品不再千篇一律

来自 Wikiprompt,自由的提示词百科全书

u/Professional-Rest138

2026年7月4日

一个设计系统提示词,让你的 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 工具中。

为获得最佳效果,可将占位符(方括号或大写字母标示)替换为你的具体需求。

参考资料

分类:coding| reddit| chatgptpromptgenius| chatgpt

讨论