| name | design-first-ui-prompting |
| description | 当你需要为 UI 生成编写设计优先、规格驱动、可快速略读的提示词时使用。涵盖提示词结构、约束、变体、排版/间距规则,以及产出一致 UI 的迭代工作流程。 |
设计优先 UI 提示词技能
本技能面向设计优先的提示词:把模糊的想法变成一份紧凑的规格,从而产出一致的 UI。
核心原则
像写设计系统那样写提示词,而不是许愿。
提示词结构(复制/粘贴)
使用这个骨架,然后填空。
GOAL
- What are we making? (e.g., landing page hero / onboarding / dashboard / carousel slide)
- Who is it for? (persona)
- What’s the success criteria? (clarity, conversion, vibe)
FORMAT
- Size/aspect: (e.g., 1080x1350)
- Safe margins: (e.g., 90px)
LAYOUT (wireframe in words)
- Grid: (e.g., Swiss 6-col)
- Placement: (e.g., type-left / image-right)
- Hierarchy: H1 → subhead → body → CTA
TYPE SYSTEM
- Font vibe: (e.g., Söhne / Neue Haas / SF Pro)
- Weights: (H1 700, body 400)
- Leading: (tight for H1, readable for body)
- Tracking: (micro labels wider)
COLOR + MATERIAL
- Background: (hex or description)
- Text: (white/ivory/charcoal)
- One accent only: (cyan/lime/purple)
- Texture: (subtle grain, no plastic HDR)
IMAGERY / UI STYLE
- UI style: (minimal / glass / editorial / playful 3D)
- If photo: lighting + crop + texture rules
- If 3D: materials + lighting + softness
COPY (render EXACTLY)
- Line 1:
- Line 2:
- ...
CONSTRAINTS (change 1–2 things only)
- FONT: ___
- STYLE: ___
- MODE: ___
NEGATIVE PROMPT
- No logos, no watermarks
- No extra text beyond provided lines
- No gibberish typography
提升一致性的规则
1) 先锁定一套"系统",再用变体迭代
- 第一版输出:搞定布局 + 层级 + 文案。
- 变体:每次只改一个变量:
2) 把排版当作脆弱的东西对待
如果模型一直拼错字:
- 使用两遍工作流程:
- 生成时不带文字(预留一块干净的、适合放文字的区域)
- 在 Figma 里排字
3) 使用"约束卡片"
当你想让模型服从某个风格时:
- 添加一个小的"约束"面板,带明确的值。
- 它像一份迷你风格指南那样锚定输出。
示例:
Constraints
FONT CANELA
STYLE MINIMAL
MODE DARK
4) 保留一个本地参考包
不要指望模型去"记住"审美。
- 把参考保存到一个 gitignore 的本地参考文件夹,如
refs/...
- 让提示词指向该参考风格
快速迭代检查清单(调什么)
- 间距:边距、行距、基线节奏
- 对比:背景 vs 文字
- 层级:一句主视觉标题,一句支撑句
- 只用一种强调色(别弄成彩虹)
- 纹理:加颗粒,去平滑
该问的问题(当用户含糊时)
- 这个屏幕的单一信息是什么?
- 层级是什么(H1 / 副标 / CTA)?
- 走哪条风格路线:极简编辑感 vs 俏皮 3D vs 玻璃拟态 UI?
- 有什么必须保留的约束(字体气质、颜色、间距、栅格)?