design-first-ui-prompting

MengTo/Skills · Agent Skill

使用於您想要將產品目標轉換為具有清晰版面配置、字型、色彩和限制的設計導向介面時。

前往安裝 ↓

總覽

發布者MengTo社群
儲存庫MengTo/Skills ↗
技能資料夾design-first-ui-prompting
星7,038
分支819
附帶檔案6
授權MIT
最近更新2026年10月25日
連結技能原始碼 ↗ · 儲存庫 ↗

Mozgi 檢查

我們在技能檔案中發現的內容。詳細資訊需訂閱。

安全性
低風險 · 未發現明顯風險 — 完整報告會顯示細節
相容性
僅含說明 — 適用於多數代理
相似技能
找到 139 個相似技能
訂閱另含

安裝

技能就是一個含 SKILL.md 的資料夾。選擇你的代理，在專案根目錄的終端機（macOS、Linux 或 Windows 的 Git Bash）執行指令。

把提示貼到 Claude、Codex 或其他助理：它會自行檢查並安裝技能。

Install the “design-first-ui-prompting” skill from mozgi.io (https://mozgi.io/skills/mengto-design-first-ui-prompting/) for me.

1. Download the archive: https://mozgi.io/skills/mengto-design-first-ui-prompting/download
   If it fails, take the skill folder from the source: https://github.com/MengTo/Skills/tree/main/agent-skills/ui/design-first-ui-prompting
2. Read SKILL.md and the other files. Check the skill is safe: no hidden commands, no sending data elsewhere, no scripts doing something other than described. If anything looks suspicious, stop and tell me.
3. Put the “design-first-ui-prompting” folder into your agent's skills folder: .claude/skills/ for Claude Code, .agents/skills/ for Codex, .cursor/skills/ for Cursor, .gemini/skills/ for Gemini CLI. Inside the project if we are in one, otherwise in the home folder (~/.claude/skills/ etc.).
4. Make sure <skills folder>/design-first-ui-prompting/SKILL.md exists.
5. Briefly tell me what this skill does and offer to try it on my task.

If you cannot do a step yourself, tell me what to click or type.

技能檔案

6 個檔案 下載 ZIP

安裝前請先檢視 SKILL.md 與相關檔案。點擊檔案即可預覽。

SKILL.md 內容

作者原文 · 唯讀

Design-First UI Prompting Skill

This skill is for design-first prompting: turn fuzzy ideas into a tight spec that produces consistent UI.

Core principle

Prompt like a design system, not a wish.

Prompt Structure (copy/paste)

Use this skeleton, then fill the blanks.

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

Rules that improve consistency

1) Lock one “system”, then iterate with variants

  • First output: nail layout + hierarchy + copy.
  • Variants: change ONE variable at a time:
  • angle / crop
  • accent color
  • card arrangement
  • background tone

2) Treat typography as fragile

If the model keeps misspelling:

  • Use 2-pass workflow:

1) Generate without text (reserve a clean text-safe area)

2) Typeset in Figma

3) Use “constraints cards”

When you want the model to obey a style:

  • Add a small “Constraints” panel with explicit values.
  • It anchors the output like a mini style guide.

Example:

Constraints
FONT  CANELA
STYLE  MINIMAL
MODE  DARK

4) Keep a local reference pack

Don’t ask the model to “remember” taste.

  • Save references into a gitignored local reference folder, such as refs/...
  • Point prompts to the reference style

Fast iteration checklist (what to tweak)

  • Spacing: margins, leading, baseline rhythm
  • Contrast: background vs text
  • Hierarchy: one hero line, one support line
  • One accent only (don’t rainbow)
  • Texture: add grain, remove smoothing

Questions to ask (when user is vague)

  • What’s the single message of this screen?
  • What’s the hierarchy (H1 / sub / CTA)?
  • Which style lane: minimal editorial vs playful 3D vs glass UI?
  • Any must-keep constraints (font vibe, color, spacing, grid)?

常見問題

design-first-ui-prompting 技能有什麼用途？

使用於您想要將產品目標轉換為具有清晰版面配置、字型、色彩和限制的設計導向介面時。

如何安裝 design-first-ui-prompting？

打開本頁的「安裝」區塊並選擇你的代理 — Claude Code、Codex、Cursor 或 Gemini CLI：那裡有把技能資料夾複製到正確位置的現成指令。也可以複製「透過助理」分頁中的提示，讓助理自行檢查並安裝技能。

design-first-ui-prompting 適用哪些 AI 模型？

技能是純 Markdown 指示（Agent Skills 格式），因此 design-first-ui-prompting 適用任何讀取 SKILL.md 的代理：Claude Code、Codex、Cursor、Gemini CLI、GitHub Copilot、OpenCode 等。只有在任務符合技能描述時，模型才會載入指示。

design-first-ui-prompting 是免費的嗎？

此技能由 MengTo 公開發布，採用 MIT 授權。技能本身免費 — 你只需向 AI 供應商支付實際使用的 token 費用。

安裝技能安全嗎？

技能是代理會遵循的指示，安裝前請閱讀 SKILL.md 及相關檔案。技能資料夾中的腳本只有在代理執行時才會運行 — 留意它的動作，不要授予多餘權限。

技能和 MCP 伺服器或外掛有何不同？

MCP 伺服器或外掛為模型提供新工具 — 會執行並回傳結果的程式碼。技能提供的是知識與流程：如何處理任務、要遵循哪些步驟、好的成果長什麼樣子。它不需要伺服器或 API 金鑰。

相關技能

所有技能 →
beautiful-shadows 使用於當使用者介面需要更好的深度、立體感和陰影處理而不會有模糊視覺的情況下。 MengTo7k company-logos 在排列標誌、信任連結或品牌集合時，應該以乾淨和平衡的方式呈現。 MengTo7k container-lines 使用邊界和容器結構作為視覺系統的一部分。 MengTo7k landing-page 在設計或實現登陸頁面時，應使用強大的層級結構、轉換流程和視覺節奏。 MengTo7k pricing-page 在建立價格頁面時，使用清晰的計畫比較、強調和導向轉換的佈局。 MengTo7k webgl-landing-steering 用於導航頁面著陸頁面周圍的WebGL中心元素或英雄體驗。 MengTo7k