How do I install the Mengto UI Prompting skill?

Run npx skillmds@latest add oimiragieo/mengto-ui-prompting in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Mengto UI Prompting safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Mengto UI Prompting?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Mengto UI Prompting free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Mengto UI Prompting?

oimiragieo (@oimiragieo) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Mengto UI Prompting by oimiragieo — Agent Skill

Name: Mengto UI Prompting
Author: oimiragieo

Mengto UI Prompting

Use when you need to prompt AI for UI like Meng To: design-first, spec-driven, skimmable. Covers prompt structure, constraints, variations, typography/spacing rules, and iteration workflow for consistent UI outputs.

oimiragieo Updated Sep 17, 2026 0 repo stars

File contents

Meng To’s 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.

The Meng To 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 private reference pack

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

Save references into refs/... (gitignored)
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)?

---name: mengto-ui-promptingdescription: Use when you need to prompt AI for UI like Meng To: design-first, spec-driven, skimmable. Covers prompt structure, constraints, variations, typography/spacing rules, and iteration workflow for consistent UI outputs.---# Meng To’s UI Prompting SkillThis 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.**## The Meng To prompt structure (copy/paste)Use this skeleton, then fill the blanks.```textGOAL- 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 → CTATYPE 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 + softnessCOPY (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 fragileIf 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:```textConstraintsFONT CANELASTYLE MINIMALMODE DARK```### 4) Keep a private reference packDon’t ask the model to “remember” taste.- Save references into `refs/...` (gitignored)- 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)?

Frequently asked questions