mcpField
D
design-first-ui-prompting

design-first-ui-prompting

github.com/mengto设计与 UI7.1k1.8k 次安装3 天前更新
代码仓库

关于 design-first-ui-prompting

一项设计优先的提示词技能，将模糊的 UI 想法整理为具体规范，帮助使用生成模型制作界面，并通过明确约束和受控迭代保持一致性。

主要功能

  1. 01结构化 UI 提示词模板
  2. 02每次只调整一个变量
  3. 03分两步处理文字
  4. 04明确的风格约束卡
  5. 05本地视觉参考素材集

适用场景

  1. 01撰写落地页或仪表盘提示词
  2. 02一致地测试配色或布局变体
  3. 03减少生成图中文字拼写错误

安装

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

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

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

包含的文件

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

ARTICLE.md
REFERENCES.md
demo/
index.html
PROMPT.md

详细介绍

设计优先 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）保留本地参考素材包

不要让模型“记住”你的审美。

  • 将参考素材保存到 Git 忽略的本地参考文件夹中，例如 refs/...
  • 在提示词中指定参考风格

快速迭代清单（调整项）

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

要问的问题（用户描述模糊时）

  • 此屏幕要传达的核心信息是什么？
  • 层级如何安排（H1 / 副标题 / CTA）？
  • 选择哪种风格路线：极简编辑风、趣味 3D，还是玻璃 UI？
  • 有哪些必须保留的约束（字体感觉、颜色、间距、网格）？

评论

支持 Markdown