给你的世界定一套能认出来的样子

流水线第 2 站 · 设计师(视觉线)。上一步你手里有了一份《世界观圣经》,这一步产出这个世界的「视觉识别」——配色、字体、关键画面的气质基调,下一步带着它进入【前端】环节,让 AI 把这套视觉真正搭成能在浏览器里看的网页。

by @造世界的阿罗·来自小红书 ↗·收录于 2026 / 04 / 10
拆 · DECODE

提示词原文

你是一位资深游戏/品牌视觉设计师。我已经有了一个世界的设定(青春热血异世界,魔法 × 美食,友情和梦想为主旋律),现在要为它定一套统一的视觉识别,将来要做成一个能嵌入网页的展示小站。 请不要直接甩一堆色号给我,按以下步骤陪我定下来: 1. 先帮我提炼这个世界的【气质关键词】3-5 个(比如:暖、热血、清晨厨房的烟火气、少年感),每个词说一句『为什么这个世界是这种气质』; 2. 基于气质,给我一套【配色方案】:1 个主色、1 个辅助色、1 个点缀色、中性背景色,每个都给出十六进制色值,并说明它在世界里对应什么(比如主色=魔法火焰/灶火); 3. 推荐【字体排印】方向:标题字体气质+正文字体气质(中文优先给免费可商用、网页能用的字体名),并说明字号层级(大标题/小标题/正文)怎么拉开【视觉层级】; 4. 最后把以上整理成一份极简的【设计规范】速查表(Design Tokens:颜色、字体、间距、圆角),格式直接能让前端照着写 CSS 变量。 每一步给结论后问我『这个味儿对吗』,确认了再往下。多举具体画面,别堆空形容词。You are a senior game/brand visual designer. I already have a world setting (a youthful hot-blooded other-world, magic x food, themed on friendship and dreams). Now I need a unified visual identity for it, to later build into an embeddable web showcase. Don't just dump color codes - walk me through it step by step: 1. Distill 3-5 mood keywords for this world (e.g. warm, hot-blooded, the smoke-and-fire of a morning kitchen, youthfulness), each with one line on why the world feels that way; 2. Based on the mood, give a color scheme: 1 primary, 1 secondary, 1 accent, neutral background - each with hex values and what it maps to in the world (e.g. primary = magic flame / stove fire); 3. Recommend a typography direction: heading vibe + body vibe (prefer free, commercial-use, web-safe fonts; CJK first), and how to space out the visual hierarchy across sizes (h1/h2/body); 4. Finally compile a minimal design-system cheat sheet (Design Tokens: colors, fonts, spacing, radius) in a format the frontend can directly turn into CSS variables. After each step ask whether it feels right, and continue only after I confirm. Use concrete imagery, avoid empty adjectives.

轻点带虚线的术语,看它的解释。点右上角「译」切换中英对照。

为什么这么写

这是世界线的第 2 站 · 设计师。 它和隔壁产品流水线的『设计师』是同一格子,但交付物从『App 界面』换成了『一个世界的脸』。

小白做到这一步最容易跳过它——觉得『设定都写好了,直接让 AI 写网页不就行了?』结果 AI 随手配一套花花绿绿的颜色,世界就没气质了。视觉识别是把抽象设定翻译成『看得见的统一感』的关键一步。

三个设计点:

第一,先定气质、再定色号。颜色不是凭空挑的,是从世界气质里『长』出来的。让 AI 先说清『这个世界为什么是暖的、是少年感的』,配色才有依据,而不是好看但和世界无关。

第二,design system(设计规范)锁住一致性。一个主色、一个辅助、一个点缀——约束越少越统一。后面无论做几个页面,都照这一套来,世界才像『一家人』。

第三,收尾产出 Design Tokens。这是这条提示词最实用的设计:直接让 AI 把配色、字体、间距整理成前端能照抄成 CSS 变量的格式。这样第 3 站【前端】拿到手就能用,两站无缝衔接。

跟完这一站,你手里有了一份『世界视觉规范』。带着它进第 3 站【前端】,让 AI 把这套规范真正变成浏览器里能看的网页。

这条用到的术语

  • color scheme
    配色方案
    一套搭配好的颜色:主色、辅助色、点缀色。配色定调性(活泼/高级/科技),也影响好不好读,是界面的「整体气质」。
  • typography
    字体排印
    选字体、定字号、调行距的学问。文字占了界面的大半,排得好读起来轻松,排不好再美的设计也累眼。
  • visual hierarchy
    视觉层级
    用大小、颜色、粗细告诉眼睛「先看哪、后看哪」。标题大、正文小、按钮显眼——用户一眼就知道重点在哪。
  • design system
    设计规范
    把颜色、字体、按钮样式、间距等定成一套「全员通用的标准」,保证整个产品长得像一家人,也让设计和开发不用每次重新发明轮子。

可替换变量

同一句话,换一个词,AI 会给你完全不同的故事。

暖 / 热血 / 少年感清冷治愈 / 暗黑史诗 / 复古像素换气质基调,整套配色和字体气质会跟着重塑
完整设计规范速查表只给一套配色+一张关键画面描述更轻量,适合你只想先要个『感觉』、还没想做规范时
网页可用的免费字体指定某款字体 / 像素字体 / 手写字体锁定具体字体,AI 会围绕它调整整体排版气质