mcpField
D
design-first-ui-prompting

design-first-ui-prompting

github.com/akillness设计与 UI5358 次安装1 天前更新
代码仓库

关于 design-first-ui-prompting

design-first-ui-prompting 是一项技能，可将模糊的 UI 想法整理为结构化生成提示词。它帮助设计者先确定视觉系统，再逐次调整单一变量，并在生成文字不可靠时将排版拆分处理。

主要功能

  1. 01将提示词整理为 UI 规格
  2. 02先确定布局、层级和文案
  3. 03每次迭代只调整一个视觉变量
  4. 04将图像生成与文字排版分开
  5. 05使用约束卡和本地参考资料
  6. 06提供精简的迭代检查清单

适用场景

  1. 01将不明确的界面想法转为提示词
  2. 02基于固定布局生成一致的变体
  3. 03处理生成视觉中的错字
  4. 04依据保存的风格参考约束输出

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/akillness/jeo-skills --skill design-first-ui-prompting

安装后在 Claude Code 中输入/design-first-ui-prompting确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

SKILL.toon
REFERENCES.md
ARTICLE.md

详细介绍

设计优先 UI 提示词技能

此技能用于设计优先的提示词编写：将模糊的想法转化为精确的规范，以生成一致的 UI。

何时使用此技能

  • 使用 GOAL / FORMAT / LAYOUT / TYPE SYSTEM / COLOR+MATERIAL / IMAGERY / COPY / CONSTRAINTS / NEGATIVE PROMPT 骨架，将模糊的 UI 想法转化为精确、易浏览的规范。
  • 先锁定单一“系统”（布局、层级、文案），再通过一次只更改一个变量（角度/裁切、强调色、卡片排列、背景色调）进行迭代。
  • 借助两阶段工作流，绕过 AI 生成文字不可靠的问题：先生成无文字的图像，再单独排版文案（例如，在 Figma 中）。
  • 构建“约束卡片”（FONT / STYLE / MODE），为模型输出提供锚点，像一份迷你风格指南；或者维护本地、已加入 gitignore 的参考素材包，而不是指望模型“记住”审美偏好。
  • 使用快速迭代清单（间距、对比度、单条主标题的层级、单一强调色、纹理），或使用模糊需求提问清单，明确 UI 生成请求的实际需求。
  • 此技能不用于定义或管理跨页面和产品共用的设计令牌/视觉语言系统（请转至 design-system），不用于响应式/断点布局策略或验证（请转至 responsive-design），也不用于可复用组件 API 架构（此仓库目前没有专门负责此领域的技能——将其视为 design-system 的边界问题）。

核心原则

像设计系统一样编写提示词，而不是表达愿望。

提示词结构（复制/粘贴）

使用此骨架，然后填入空白内容。

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/...
  • 在提示词中指定参考风格

快速迭代清单（调整项）

  • 间距：边距、行距、基线节奏
  • 对比度：背景与文字
  • 层级：一条主标题、一条辅助说明
  • 只用一种强调色（不要做成彩虹色）
  • 纹理：添加颗粒感，去除平滑效果

可提问的问题（用户需求模糊时）

  • 此屏幕最想传达的内容是什么？
  • 层级如何安排（H1 / 副标题 / CTA）？
  • 选择哪种风格路线：极简编辑风、俏皮 3D 风，还是玻璃 UI？
  • 是否有必须保留的约束（字体风格、颜色、间距、网格）？

参考资料

评论

支持 Markdown