design-first-ui-prompting

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) 把排版当作脆弱的东西对待

如果模型一直拼错字：

• 使用两遍工作流程：
  1. 生成时不带文字（预留一块干净的、适合放文字的区域）
  2. 在 Figma 里排字

3) 使用"约束卡片"

当你想让模型服从某个风格时：

• 添加一个小的"约束"面板，带明确的值。
• 它像一份迷你风格指南那样锚定输出。

示例：

Constraints
FONT  CANELA
STYLE  MINIMAL
MODE  DARK

4) 保留一个本地参考包

不要指望模型去"记住"审美。

• 把参考保存到一个 gitignore 的本地参考文件夹，如 refs/...
• 让提示词指向该参考风格

快速迭代检查清单（调什么）

• 间距：边距、行距、基线节奏
• 对比：背景 vs 文字
• 层级：一句主视觉标题，一句支撑句
• 只用一种强调色（别弄成彩虹）
• 纹理：加颗粒，去平滑

该问的问题（当用户含糊时）

• 这个屏幕的单一信息是什么？
• 层级是什么（H1 / 副标 / CTA）？
• 走哪条风格路线：极简编辑感 vs 俏皮 3D vs 玻璃拟态 UI？
• 有什么必须保留的约束（字体气质、颜色、间距、栅格）？